City University London

MSc in Human-Centred Systems

Project Report

2012

Aesthetic Elements Supporting The Customer Journey Of

An Online Shopping Experience

Anna Tamasi
City University London, School of Informatics, Centre for Human Computer
Interaction Design

Supervised by: Dr. George Buchanan

26th September 2012

By submitting this work, I declare that this work is entirely my own except those parts duly
identified and referenced in my submission. It complies with any specified word limits and the
requirements and regulations detailed in the assessment instructions and any other relevant
programme and module documentation. In submitting this work I acknowledge that I have
read and understood the regulations and code regarding academic misconduct, including that
relating to plagiarism, as specified in the Programme Handbook. I also acknowledge that this
work will be subject to a variety of checks for academic misconduct.
Signed:

Abstract
I this p oje t
ai
as to e eal the digital aestheti ele e ts that d i e use s usto e
journey on fashion websites and to understand how these elements contribute to the journey
and to the user experience. I also wanted to measure the emotional responses to these
elements of the selected websites.
The ultimate goal of this project was to develop a generic mapping of the custo e s jou e
on fashion websites that shows the impacts of digital artefacts in relation to usability and also
to the user experience. This has been achieved by identifying the digital artefacts, metaphors
and perceived affordances and their impacts on the use s shoppi g e pe ie e du i g the
observed steps of the customer journey on fashion websites. Based on the methods used and
the information collected a customer journey map has been outlined and explained.
The results show that the success of a fashion website lays in the triangle of aesthetics (design,
visual power), usability (functionality and ease-of-use) and user experience (enjoyment for the
user). The most important elements of these environments are; homepage and the navigation
structure, colours, photography, zooming facilities and the relevant product information
(including the delivery and returns information).
Keywords: aesthetics, usability, e-commerce, customer journey, user experience

Table of Contents

Chapter 1 - Introduction And Objectives ...................................................................................... 5

Chapter 2 Academic Context ...................................................................................................... 8

Quantifying And Measuring Aesthetics................................................................................... 12
Customer Journey ................................................................................................................... 13

Chapte

Methods................................................................................................................... 17

The Design Of The Study ......................................................................................................... 17

Part 1/A - Heuristic Evaluation ................................................................................................ 19

Websites Heuristics ............................................................................................................. 19
Other Attempts To Measure Website Aesthetics ............................................................... 21
Setting Up New Website Heuristics .................................................................................... 22
Participants And The Evaluation Arrangements ................................................................. 25
Part 1/B Capturing The Customer Journey........................................................................... 27
Customer Journey Framework ............................................................................................ 28
Part 2 - User Testing For Aesthetics ........................................................................................ 30
Aesthetics And General Website Design ............................................................................. 31
Methods Used ..................................................................................................................... 32
Part 3 - Focus Group Interview With Paper Prototypes .......................................................... 35
Part 4 - Mapping The Customer Journey ................................................................................ 36

Chapter 4 Results ..................................................................................................................... 37

Results Heuristic Evaluation ................................................................................................. 37
Results Customer Journey .................................................................................................... 45
Results - User Testing .............................................................................................................. 45
Pre-Test Interviews ............................................................................................................. 45
Card Sorting ......................................................................................................................... 48
Overview Of The Aesthetic Elements On Fashion Websites ............................................... 48
Emotional Reaction Scale .................................................................................................... 58
3

Interviews After The Test .................................................................................................... 59

Results - Focus Group Interview With Paper Prototypes ........................................................ 61
Results - Customer Journey Framework ................................................................................. 65

Discussion .................................................................................................................................... 69
Aesthetics And Usability Implications ..................................................................................... 70
Customer Journey Aspects ...................................................................................................... 72

Conclusion ................................................................................................................................... 74

References ................................................................................................................................... 78
Internet Resources: ..................................................................................................................... 80

Appendix 1: Project Proposal For Msc Human-Centred Systems ............................................... 81

Appendix 2: Heuristic Evaluation Pre-Test Questions .............................................................. 88
Appendix 3: Fashion Websites For Heuristic Evaluation ............................................................. 93
Appendix 4: Heuristic Evaluation Results .................................................................................. 103
Appendix 5 Interview Notes ................................................................................................... 105
Appendix 6 Customer Journey Observed ............................................................................... 108
Appendix 7 Personas And Storyboards .................................................................................. 109
Appendix 8 User Testing Pre-Test Interview .......................................................................... 113
Appendix 9 User Testing, Post-Task Interview ....................................................................... 119
Appendix 10 User Testing Plan ............................................................................................... 121
Appendix 11 Card Sorting ....................................................................................................... 124
Appendix 12 Emotional Reaction Matrix................................................................................ 125
Appendix 13 - Bi-Polar Semantic Scale ...................................................................................... 126
Appendix 14 Fashion Websites Paper Prototypes ................................................................. 129
Appendix 15 Focus Group Interview And Paper Prototype Testing ....................................... 131
Appendix 16 Aesthetic And Usability Elements Supporting The Customer Journey Of An
Online Shopping Experience ..................................................................................................... 136

Chapter 1 - Introduction and Objectives

Background
Academics and researchers have been trying to understand the exact nature of aesthetics for a
long time. Aesthetics are described in a great variety of ways and there are lots of different
definitions and theories to it. At the beginning of the website development era, aesthetics
were generally disregarded by computer scientists and programmers and many academics
considered it as being irrelevant to the usability of the electronic medium. Some even believed
that it could be harmful within the medium as it could distract the attention from the purpose
and functionality. As the internet and mobile electronic devices became part of our everyday
lives, usability was not anymore the only determining attribute of the success of the digital
systems and user interfaces.
Recently, there has been an emerging interest amongst software developers as well as
academics to study the aesthetics of all sorts of electronic medium. Researches in the field of
human-computer interaction (HCI) design have also demonstrated that aesthetics play an
important role when users evaluate the user interface of an electronic device; how visual
aesthetics influence the perceived usability of interfaces and how the colours and images of
websites influence the perception of appeal. E-commerce companies have also been
interested in understanding the role of aestheti ele e ts i o de to e ha e the usto e s
experience.
In order to provide an outstanding customer experience and having more and more customers
coming back to the website companies need to invest in creating excellent usability.
Furthermore, to maximise the reach of a wider customer segment companies should also
consider accessibility issues. It is not easy to create an online environment that is both usable
and aesthetically appealing at the same time. There are trade-offs all the way throughout the
user-centred design process that companies have to consider when making decisions on design
and usability.
The main motivation of this project is to better understand the e-commerce environments and
the relationship of aesthetics and usability as well as the online service design. The central idea
of this dissertation project is to uncover the online shopping experience from the user's
perspective with respect to digital artefacts and metaphors that guide users through the online
journey. For this project I will compare fashion websites as these have rich content and they
are very much dependent on the visual appearance.
The reason for the selection of the topic is that the influence of fashion and its trends on
products and services are marketed all around the world and also because researchers tend to
neglect the aesthetics of fashion products, which is mainly because of the complex
relationships between the customers and the fashion items as well as the diversity of
methodological challenges (Eckman & Wagner, 1995).
5

Having completed a one year full-time study in HCI endowed the author with academic
knowledge and skills to undertake this research. The author worked 5 years at a large online
media corporation and has sales and marketing related project management skills. The reason
for choosing this project topic is that the author has interest in continuing her career in
interaction and service design within the online retail industry.
The results of this research shall be valuable for fashion brands to better understand the roles
of the artefacts within the customer journey that will be specially tailored for online fashion
businesses in order to increase customer engagement and to reach a wider audience.
Furthermore, this research shall benefit designers as it aims to discover the emotional aspects
of responses for visual applications, such as layouts, navigation, style, colours, white space,
photographs, etc. The project shall also benefit interaction designers and researchers who
have interests in online retail. Finally, the author of this project will also benefit from this piece
of work by increasing knowledge of career area of interest.

Objectives
In this project the autho s ai
as to reveal the digital artefacts and metaphors that drive
use s a tio s a d to understand how they contribute to the customer journey and customer
experience. The author was seeking to measure user's emotional responses to design and
structure of fashion websites. The ultimate goal of this project was to develop a generic
mapping of the usto e s jou e o fashion websites that showed the impacts of digital
artefacts in relation to the user experience. pe ifi all , ithi the o te t of the usto e s
online journey the objectives of this research were:
1. To identify the digital artefacts, metaphors and perceived affordances and their impacts
o the use s shoppi g e pe ie e du i g the usto e jou e o fashio e sites.
2. To critically evaluate models and frameworks of previous researches related to customer
journey and aesthetic elements in online environments.
. To e plo e p a ti es a d stakeholde s ie s elated to use e pe ie e a d use s
perceived affordances on fashion websites as well as the use of digital artefacts on these
platforms.
4. To formulate a generic map of the usto e s o li e jou e , i ludi g iti al tu i g
points where artefacts affect emotions and user experience on fashion websites.

Research questions
a.) What are the elements of the customer journey on fashion websites? What tools,
frameworks and models are available to support measuring the online customer journey?
b.) What are the key aesthetic elements within the customer journey in online environments
that provide enjoyment for the users? What impacts design artefacts have on use s e otio s
and the shopping experience?
c.) What elements are (users) missing throughout the customer journey that could improve
the overall user experience as well as the usability of fashion websites?

Intended methods and tools

The project followed a user-centred design approach in order to develop a generic mapping of
the usto e s jou e o fashio e sites that sho s the i pa ts of digital a tefa ts i
relation to the user experience. Users were involved in all phases of the project.
The project started with a research phase which consisted of a secondary research that
included reviewing previous academic researches, professional journals and articles, as well as
books, and online literature such as expert websites and social media. The research phase also
involved primary research that consisted of meeting and interviewing the owner of an online
fashion company as well as end-users about the nature of their online shopping habits and
routines. The author also reviewed the online fashion market in relation to aesthetics and
functionalities as well as studied the customer journey mapping processes, frameworks and
models. The main goal of the research phase was to reveal answers for research questions (a.)
and to meet objectives (1.) and (2.).
The next phase of this project included website evaluations and user testing. The aim was to
meet objectives 2. and 3. The program of this phase consisted of three distinct evaluation
methods. The first part of the analysis included heuristic evaluations, task analysis and
customer journey mapping. The author used previous academic researches to set up common
fashion website development practices and techniques to develop a comprehensive list of
heuristics and a list of elements that form the visual appeal of fashion websites. During this
process six fashion websites were evaluated based on their aesthetic appeals by a specific
customer segment. After analysis of the data obtained from participants the two of the best
rated websites were selected for further analysis. This was followed by more data collection
a out use s isual a d aestheti pe eptio s a d use s testi g as a ied out in order to
analyse further the two best rated websites in terms of aesthetic appeal and usability. Several
data collecting methods were used in order to gather both qualitative and quantitative data.
The results of each phase were re-iterated within the next phase of the process to reassure the
validity of the data obtained from participants. For the final part of the analysis phase the
7

author created two different paper prototypes that were used to re-iterate findings with a
focus group.
The third phase of the project was the design phase which had the intention to meet
objectives 3. and 4. The purpose of this phase was to sketch the user experience on a customer
journey map and to reflect the moments of truths as well as the roles of the aesthetic
elements together with the functional requirements.
The fourth phase of this project is the evaluation phase which aims to find and aggregate the
answers to all research questions and to meet all four objectives. This phase was carried out on
a re-iterative process, which means that the design and evaluation phases were built in from
the first phase of the project, through the proposal of the final customer journey map.

Chapter 2 Academic Context

The definition of aesthetics dates back to ancient Greek times and architecture, but today most
dictionaries refer to aesthetics as the atu e of eaut . According to the Oxford Dictionary,
the defi itio of aestheti s is a set of principles concerned with the nature and appreciation
of eaut or the branch of philosophy which deals with questions of beauty and artistic
taste . Aesthetics is also a branch of philosophy and psychology which deals with the sensory
and emotional values of appearance, which is accomplished by the colours, shapes, textures,
materials, structure and patterns of the design. In this project the author refers to aesthetics as
design artefacts, aesthetical elements that enhance the design of fashion websites.
Aesthetics influence greatly people and their choices although most people think that their
decisions and judgements about the functional features are rational. Emphasis on aesthetic
design and the influence of emotions in design are receiving more and more attention. While
t aditio al usa ilit fo uses o use s task a d a o plish e ts, use e pe ie e UX
e phasizes a o e holisti ie ; u de sta di g the o ple it of use s e pe ie es
(Hartmann, Angeli, & Sutcliffe, 2008) as well as including aspects of look and feel, aesthetics
and design.
Usability and user experience conceptions have progressively developed in recent decades and
there is more and more focus on the user engagement and the aesthetic design of user
interfaces. There are more and more researches that focus on the user experience and
aesthetics and most e-commerce companies are increasingly interested in knowing how
customers choose what they buy when it comes to designing their websites.

Visual appeal is a significant influence on emotional appeal (Capota, Hout, & Geest, 2007).
Typically, emotion has a positive and a negative dimension and many studies have revealed
that emotion strongly influen es o su e s de isio
aki g. Aesthetics influence people
when looking and observing physical products and this influence transmits over onto the
internet as well. When viewing an electronic interface (e.g. a website) the user will make a
judgment about the aesthetic quality of the visual experience based on various subjective and
objective dimensions.
In previous studies and researches it has been found that aesthetics is a deciding factor in
whether a customer trusts a website enough to make a purchase on it and that people made
far reaching inferences about the qualities of online banking websites on the basis of simple
screen shots, or very short interaction sequences (Tractinsky & Lowengart, 2007).
Aesthetics will always influence decisions anywhere people are given a choice which means
that e-commerce companies should incorporate aesthetic design more closely with usability.
Tractinsky et al. demonstrated how people use aesthetics to judge appeal and perceived
usabilit . Although the e site s desig a gua a tee the i itial att a tio , o l the
combination of usability and aesthetics will ensure that consumers keep using it in the future.
Previous researches and studies show that aesthetics have power, but design on its own
doesn't make a website complete. There has to be a closer relationship between design and
user experience, because aesthetics and usability have to support each other in order to create
the ultimate user experience.
Online retail companies rely on digital aesthetics in order to increase the customer experience
and the online customer journey and these aesthetic factors contribute to the success of the
product or system (Hartmann, Sutcliffe, & De Angeli, 2007). But the aesthetic appeal and styles
of use s that dete i e use s pe eptio s of a desig a e also depe de t o the i di idual s
sensitivity to aesthetics and on social and cultural factors (Tractinsky & Lowengart, 2007).
Tractinsky et al. demonstrated that aesthetic perceptions were an important and culturally
variable component in the rating of the user experience and service quality in an experiment of
ATM machines in Japan. This study however only focused on low-level design features such as
buttons and colours. When Tractinsky et al. asked participants to judge the usability and
aesthetics scores of a series of ATM screens, their study found that peoples' perceived usability
scores were more closely related to the perceived aesthetics scores than the screens' actual
usability. The results suggest that people aren't able to distinguish usable and less usable
objects and that they believe that the aesthetically pleasing ones are more usable.
Designing aesthetically pleasing online visual designs and solutions is not easy and can be
expensive, therefore by focusing on the customer journey companies could target the input
towards the specific points of the customer journey and optimize the digital artefacts that push
customers through the sales channel.
Hassenzahl et al. (Hassenzahl, Burmester, & Koller, 2003) asked users to compare and evaluate
six different interface designs for user experience, hedonic and appeal qualities. Hassenzahl et
9

al. concluded that both the user experience and the hedonic qualities contributed to the
overall aesthetic judgement of the interfaces. However, none of these studies showed which
aesthetic elements (i.e. colours, layout, etc.) contributed to the overall judgement by
participants.
The given aesthetic characteristics of a website (e.g. shapes, colours, sizes, etc.) may be used to
intentionally affect users pe eptio s ut also they can be interpreted in many different ways
a o di g use s pe so al taste. Based on previous shopping experience in traditional retail
environments and on their experience online, users develop certain expectations regarding the
aesthetics of online stores. When users land on a website, their aesthetic preferences coupled
with their experiences and expectations will affect thei pe eptio s of the e site s aestheti s
(Tractinsky & Lowengart, 2007) Tractinsky says that these perceptions are likely to induce
emotions, which, in turn, will affect the use s attitudes towards the website and also their
purchase decisions (Tractinsky & Lowengart, 2007).
Alo gside T a ti sk s esea h othe studies ha e also de o st ated that aestheti s ha e a
effect on the perception of a product and its usability. The reason for why this interference
o u s is elie ed to e hat is k o as the halo effe t . This is he e the aestheti aspe t of
the design directly influences the perception of other aspects and features of the product or
interface. For example, the perception that a tailor made suit or elegant dress makes the
wearer seem smarter. However, this halo effect does not hold for long and if the o e t of
t uth does ot result in pleasure (for example if the website loads the image very slowly), no
matter how nice the design of the website is.
In relation to the halo effect many studies suggested a correlation between aesthetic quality of
an interface and its perceived usability (Tractinsky, Katz, & Ikar, 2000). Tractinsky et al. claim
that hat is eautiful is usa le (Tractinsky, Katz, & Ikar, 2000). Norman (Norman, 2003) also
states that aestheti desig a out eigh the pe ei ed usa ilit
the use s o e all
experience and argues for the emotional impact of good design. Lindegaard et al. (Lindgaard &
Dudek, 2002) also compared aesthetic elements of different websites and they found that
websites with high visual appeal and low perceived usability yielded with high user satisfaction.
According to Cskszentmihlyi (1990) the concept of flow is a fully motivated mental state
described as strongly fixated on the activity, and the essence of the flow is the pleasurable user
experience while performing the task. Use s judge e ts a e i flue ed thei e pe tatio s
of use, background experience, the criticality of the tasks and scenarios they are presented
with and the flow of interaction (Cskszentmihlyi, 1990).
Many researche s fou d that usa ilit has also g eat effe t o peoples judge e ts afte
interacting with the product or interface. But during the early stages of interaction with the
o je t o s ste , aestheti s is the ajo i flue e i people s pe eptio s a d e pe ience.
Lindegaard et al. (Lindgaard, Fernandes, Dudek, & Brown, 2006) demonstrated how first
impressions count in website design; they revealed extremely high reliability ratings of visual
appeal, both within and between participants, of a sample of 50 homepages exposed in two
10

trials in a within-subject design for 50 milliseconds each. Since impressions were made in just a
very short time, it is likely that participants were making aesthetic judgments with minimal
information and understanding of the subject. Lindegaard asked participants to view each page
for 50 milliseconds and then rate the visual appeal of the page. Results showed that the
pa ti ipa ts ati g s o es e e highl o elated et ee sessio s. That is, pa ti ipa ts isual
appeal ratings were consistent in both sessions. Lindegaard et al. concluded that users make
judgments of the visual appearance of an interface very quickly and those judgments are very
consistent over time.
Hartmann et al. investigated website attractiveness through the Adaptive Decision Making
theory (Figure 1) developed into a questionnaire to evaluate three websites that shared the
same brand and topic but had different designs. Hartmann et al. discovered a framing effect in
that user experience and perception varied according to the question (Hartmann, Sutcliffe, &
De Angeli, 2007). Users rated the aesthetically more appealing website superior to the others
which on the other hand were rated for better usability.
The Adaptive Decision Model (Payne, Bettman, & Johnson, 1993) affi s that people s de isio
making is adaptive and contingent upon the task, context and their background-experience
(Figure 1).

In another study Hartmann et al. investigates (Hartmann, Sutcliffe, & De Angeli, 2008) the
framing effect and how information and content can influence the overall user experience.
They compared three university websites that all varied in terms of content, usability and
aesthetic design. They conclude that even minor manipulations in the decision context can
i flue e use s o e all ualit judge e ts. Thei esults i pl that context and prior
i fo atio a out e sites a e po e ful i flue es of use s e pe ie e a d o e all
judgement of the quality and aesthetics of websites. They also demonstrated that not only the
information itself but the presentation of the information will influence the judgement of a
website.

11

Judgements of aesthetics and engaging designs are highly contextually dependent (Angeli,
Sutcliffe, & Hartmann, 2006); when the context is less serious aesthetics can have a strong halo
effect, however this may not be the case with more serious contexts. Positively perceived
aesthetics show a halo effect that can override a poor user experience and can influence the
overall design preference (Hartmann, Sutcliffe, & Angeli , 2008) i ag ee e t ith T a ti sk s
findings. However, Hartmann et al. also emphasises that the investigation of the halo effect
needs further research; to investigate what happens to the halo effect if the usability problems
are severe and users lose trust in the system (Hartmann, Sutcliffe, & Angeli, 2008).
According to Sutcliffe usability is a trade-off et ee i easi g the use s oti ation to
e ou age use s e plo atio a d pu hasi g o e-commerce websites, and the costs of
usability errors (Sutcliffe, 2002).

Quantifying and Measuring Aesthetics

In this research I refer to design artefacts on fashion websites as e-commerce related artefacts
that influence the customer journey of online shoppers, and that exploit product-related
content and contribute to the user experience.
As earlier explained there have been a few attempts to measure aesthetics within the humancomputer interaction field. In a study called Modelling interface aesthetics (Ngo, Teo, &
Byrne, 2003) the autho s synthetized information into a framework that consisted of 14
aesthetic measures: Balance, Equilibrium, Symmetry, Sequence, Cohesion, Unity, Proportion,
Simplicity, Density, Regularity, Economy, Homogeneity, Rhythm, Order and Complexity.
This is an engineering approach also chosen by Nielsen (1998), however the only problem with
all this is that aesthetics are subjective, holistic and more valuable than the sum of its
components (Hoffmann & Krauss, 2004). Schneiderman et al. also say that this is a conflicting
model because of the a tual s ste a d the use s e tal odel (Mahajan & Schneiderman,
1997). Limitations to the role of aesthetics in user interfaces also lay in use s previous
experiences (Lindegaard, Whitfield) therefore it is not always true that what is nice is also
usable (Lindegaard, Dudek).
Lavie and Tractinsky who used to experiment the attractiveness of ATM machines in Israel and
Japan) determined two dimensions of aesthetics; classical aesthetics (visual clarity) and
expressive aesthetics (creativity, visual richness). They developed a questionnaire to measure
perceived aesthetics that consisted of these two dimensions (Lavie & Tractinsky, 2003). The
classical aesthetics dimension related to clean, symmetric and aesthetic design based on
design rules by usability experts; while the expressive aesthetic dimension consisted of original
and unconventional design elements.

12

Sutcliffe and di Angeli (Sutcliffe & deAngeli, 2005) compared two websites with different
design features and compared them on the usability, the user perception and the memory
dimensions. They created 10 heuristics to evaluate the attractiveness of the websites similarly
to Lavie and Tractinsky (Lavie & Tractinsky, 2003). Sutcliffe and Di Angeli found that interactive
metaphors strongly contributed to users attitudes in spite of the fact that their user experience
was worse with the more aesthetic design style.
An artefact may be considered beautiful or aesthetically pleasing due to its meaning,
associations, representation or its appearance that affect human senses. Aesthetics is a holistic
perception which takes into account all aspects at once and does not reflect on which
components are assessed by the user. The significance of aesthetics in the user experience is
that the effect of visual aesthetics of an interface exposes itself in the user behaviour, in the
choices between alternatives, as well as in the judgements that users make about the interface
not only after a first short period of seeing, but also after the interacting with it.

Customer Journey
Practically speaking the customer journey is the sales cycle framework in traditional business
models that seeks to understand the business-customer relationship in order to push
customers through the sales funnel leading to transaction (Dubberly & Evenson, 2008). The
customer journey is a series of customer experiences that aggregate from various impressions
gained from different parts of the business; what customers think of and how they perceive
the brand.
A o di g to Csksze t ihl i
the o ept of flo is a fully motivated mental state
described as strongly fixated on the activity, and the essence of the flow is the pleasurable user
experience while performing the task (Cskszentmihlyi, 1990).
Du e le a d E e so
alled it the experience-cycle model that o es e o d the
push model of the sales cycle and focuses on the relationship of business and customer
describing the steps and criteria to evaluate customer experiences.
Human-computer interaction design is balanced on the relationship of people with machines
and services, where goals and the circumstances of actions are well defined (Brugnoli, 2009).
Mapping the customer journey process is primarily tracking and describing the customers
experiences as they interact with an interface or service. The ap of the usto e s jou e
can reveal opportunities for improvement and innovation; therefore it acts a strategic tool to
ensure that the human-computer interaction is a positive experience. The customer journey
map not only helps companies to better understand the end to end journey of the customer
but also to improve how the various functions and tasks are involved in delivering the ultimate
customer experience.

13

Many e-commerce companies would agree that successful customer journey consists of a
quick and easy purchase on the website. But it is not only about functionality and usability;
aesthetics are also playing an important role in the overall user experience and therefore in the
customer journey. Aesthetic elements are essentials for the visual design of interfaces or
environments as well as for the design of the navigation system and the information
archite tu e i te s of the st u tu al desig of the i fo atio spa e i o de to eet use s
expectations (Figure 2). Aesthetic elements follow through the customer journey and support
the user by providing all sorts of different information. For example, in a shop customers
orientate themselves by relying on signs and symbols but they also perceive colours and
shapes as well as textures and materials. When making a phone call, users notice the colours
on the screen, the shapes of the buttons, the texture of the phone, the sounds it makes, and so
on. These all contribute to the overall customer experience; therefore they have an effect on
the customer journey.

Figure 2 Jesse Ja es Ga etts use e pe ie e ele e ts

Use e pe ie e is the conversation between the person and the system that can happen in
many scenes, situations and via different channels. Since there is only one conversation a each
interaction, we can say that the experience is what we can remember and what we learnt so
that it becomes a meaning to the users (Brugnoli, 2009).
I this stud the usto e s jou e has a slightl diffe e t i pli atio tha the t aditio al
logic. In this study I refer to the customer journey as the flow of use and navigation on fashion
14

websites by users where the touch-points are all the different digital artefacts that help the
user to drive through this journey; from departing from the homepage until arriving to the
checkout page.
User scenarios vary greatly as customers use different interfaces, in different contexts, using
different ways of interactions and producing different results. Hence it is important to take into
o side atio the use s fo us of atte tio as it a e fo used o the e pe ie e itself e.g.
how pleasurable or meaningful it is for the user) or focused on the task (e.g. how functional,
reliable and usable it is for the user).
There is no one single best wa of d a i g up the usto e s jou e . Many entry points are
possible where the user initiates the interaction depending on needs and goals. Nor task flows
always follow one single optimal process, but rather these are a combination of various actions
accomplished by the user with different tools in different contexts (Brugnoli, 2009). It is also
important to note that the results will not be delivered by one single device and that the
interaction flow will be experienced via many devices and different situations. For this reason,
the architecture of the system becomes a key design challenge. The design of the customer
journey should include the system as a whole and the possible relationships and connections
with its parts that will be triggered by the users. Users are always in the centre: they are the
protagonists who dynamically connect the parts of the system. The features and the use of
these parts will follow its role within the system, which should change automatically in an
opportunistic and situated way following the different contexts and user situations (Brugnoli,
2009).
Classical online usto e jou e sta ts ith e plo i g use s eeds a d p o le s. They either
need a specific item or a specific make (brand) or they just want to browse to search for ideas
and inspirations. Many of them will use a variety of search engines and directories as well as
adverts, affiliate or direct mail marketing to find the shop online. Many of them will come
straight to the website, because they simply know the URL for the website. Many will also look
o the o petito s e site efo e a tuall u i g so ethi g a d a
ill ot u a thi g
at all because it was not their intention to do. Many people will only look for information about
the brand, the store and the services it provides (e.g. delivery and returns information, opening
hours, etc.) and some people will only want to stay up-to-date regarding the new products,
latest offers, etc.
Most of the websites follow certain conventions that allow visitors to get around the web
pages easily. For example, the o pa s logo is al ost al a s at the uppe left o e of the
ho epage a d it also se es as a Ho e utto throughout the customer journey which takes
users back to the homepage. At the upper right corner users can find their shopping basket
and M a ou t li k at the uppe ight o e . The e s also a s alle e sio of the site ap
below the fold with contact information, terms and conditions, policies and so on.
There are also some conventions around the navigation system on e-commerce websites; the
main navigation bar is usually located along the middle of the top of the homepage and the
15

secondary navigation is situated on the left column. Those users who are used to these
conventions and frequently use the websites could feel disappointed when they encounter
with a different website design where the links and the navigation system are rearranged.
Another important thing to consider is that people use the internet for shopping because it is
quicker and easier than making the effort and actually visit the physical store. They do not
want to spend time finding out how the website works; most of them only want to make a
quick deal and then move on. For this reason it is very difficult for website designers to come
up with something different and unusual because if they violate usto e s established
practice they can put the company into jeopardy. The most valuable feature of a website is
therefore an easy navigation system.
As customers arrive to the website looking for the product they want to buy their visual
attention is o the e site s desig as well as on finding their way to complete the task which
consists of searching and browsing through the products. Aesthetic preferences are instantly
formed and measuring these could help to improve the design of the website. Many
companies put in a lot of effort researching and experiencing the best combination of colours
that sell the most products; regrettably, aesthetic preferences are subjective attitudes and it is
impossible to come up with one standard layout, colour scheme that will please everybody.
According to Tractinsky and Lowengart (2007) the shopping task can vary in different ways
depending on the circumstances. Shopping can be done in a rush or at a quick impulse, while
sometimes it is related to leisure that happens non-routinely and other times it can happen
deliberately and routinely. (Tractinsky & Lowengart, 2007)
Tractinsky and Lowengart (2007) also acknowledge that different product types will be
associated with different types of aesthetics. Different products will also be associated with
different types of needs; fashion for example is a factory that manufactures desire and fashion
creates a need where there is no real need in reality, only desire (Tungate, 2008). Fashion has a
visual vocabulary that helps people feel emotionally evolved as the exterior change derives
an interior change (Tungate, 2008). Fashion is all about aesthetics and appeal; fashion brands
a e pe suasi e a d the do e e thi g possi le to att a t people s isual atte tio . Fashion is a
sensory experience in itself; feeling the garment, the textures, seeing the colours and using
imagination to envisage ourselves wearing the ite . The autho s ai is to fi d out how do all
this translate into virtual, online digital platforms where the customer physically cannot see
and touch the clothes and where the customer only interacts with an electronic interface.

16

Chapter 3 Methods

In this section of my dissertation I explain how I developed the set of criteria for the evaluation
of the fashion websites for their aesthetic elements and customer journey as well as the
procedure and methods used for my research.
Previous studies proved that aesthetics cannot be disregarded when evaluating websites.
Use s pe eptio of a e site a i du e a a iet of e otio s a d ea tio s. These emotions
a d feeli gs i flue e use s attitudes to a ds the usa ilit a d the o pa s redibility as
ell as the e site s o te t a d the p odu ts it is selli g. Furthermore, special consideration
is required to the design principles of web designs with respect to the ever-changing fashion
industry. Since the aesthetics of a website can influence brand perception and credibility, the
importance of design must be considered; the design and the graphical presentation of a
website is very visual and users make aesthetic judgments of a site very quickly. As the
e site s likea ilit and credibility increases so does the likelihood of purchasing products
from the site (Chen, 2009). However, it is quite difficult to measure the relationship between
aesthetics and emotions because of their abstract nature, therefore creating metrics for
aesthetics is also challenging since it is very personal and subjective.

The Design of the Study

The idea of combining multiple methods within a research is to increase the knowledge
produced by the study. This project approached users emotional experience to aesthetic
elements on fashion websites through interviews, observations, heuristic evaluations, card
sorting, and emotional reaction- and emotional bi-polar semantic scales to create an
interconnecting set of different methods and data types. In this research I collected both
qualitative and quantitative data through various techniques and tools. The study consists of 3
main parts.
In the first part of the study I will demonstrate the existing guidelines for user interfaces,
particularly online e-commerce interfaces. I will then discuss how those existing heuristics
differ from my own heuristics set up for fashion websites. Finally, I will explain how I
incorporated the information from my interviews and observations with the heuristics and
other survey methods.
In the second part of the study I will use some commercial methods to evaluate the websites in
terms of their perceived aesthetics. These methods include card sorting, emotional reaction
scales and emotional bi-polar semantic scales.

17

In the third part of the study I will report the outcomes of a focus group interview that was led
by doing A/B testing using paper prototypes and evaluating them from aesthetics and usability
point of views.
The study was carried out as follows:
1.
2.
3.
4.

5.
6.
7.

8.

9.

10.
11.
12.

The analysis of collected methods.

Setting up my heuristics for evaluation based on previous studies.
The collection of websites to be evaluated.
The evaluation of websites participants answer the interview questions, participants are
observed and asked for additional feedback about the websites in terms of aesthetics and
their experience;
i.
Participants recruited
ii.
Personal pre-interview about online shopping and fashion websites
iii.
Following topic to search for a dress on 6 fashion websites
iv.
Think-aloud exercise with participant observation regarding customer journey
v.
Participants are rating each fashion websites based on aesthetics heuristics
The analysis of the heuristic evaluations qualitative and quantitative data analysis,
calculations based evaluation is carried out.
Description and interpretation of results.
Setting up my next stage interview methods based on the findings of the first round
heuristic evaluations. The collection of websites to be evaluated; based on the results of
the first round heuristic evaluations.
Researching for methods to measure website aesthetics.
i.
The evaluation of websites participants answer the interview questions,
reiterating customer journey with participants through card sorting exercise,
measuring the aesthetic elements of customer journey, participants asked for
additional feedback about the websites in terms of aesthetics and their
experience;
ii.
Participants recruited
iii.
Personal pre-interview about the design and aesthetics of fashion websites
iv.
Following card sorting to reiterate customer journey of buying a dress online
v.
Measuring aesthetic elements on emotional reaction scale participants describe
their emotional experience with each element selected from the stages of the
customer journey. Capturing personal suggestions for each element.
vi.
Post-interview continuing collecting data not yet captured in previous stages
The analysis of the interviews, card sorting and emotional rating scales qualitative and
quantitative data analysis.
i.
Categorise findings by website/design content,
ii.
by website/design function,
iii.
by the visual representation of website/design/products,
iv.
by website/design interface
Description and interpretation of results.
Creation of paper prototypes.
Focus group interview.
18

13. Description and interpretation of results.

14. Setting up the customer journey and highlighting the aesthetic elements and their
perceived attractiveness and user experience.
i.
Develop customer journey to measure the effects of the aesthetic elements of the
user experience.

Part 1/a - Heuristic Evaluation

Websites Heuristics
The first and ever since the most well-known web heuristics were created by Jacob Nielsen and
Rolf Molich in 1990 (Nielsen & Molich, 1990). Nielse s heu isti s e e also adapted fo the
web by Kieth Instone, former IBM user experience designer and information architect. Instone
updated the original guidelines and refined definitions to make them more applicable to webbased interfaces. However, it is not regarded as a comprehensive and comparable as it lacks of
actual user feedback and biased preconceptions by the evaluators could lead to reporting of
problems that are not actual usability problems.
Nielse s heu isti s do ake efe e e of aestheti s a d use e gage e t (Nielsen & Molich,
1990) in the sense of visibility and information content. Nielsen claims that there should not be
more functions on an interface than is required for the user to perform the task and calls for
reducing the noise where possible. According to Nielsen a great design is the perfect
combination of a minimalist and aesthetically pleasing design.
Nielse s ten usability heuristics (1990):
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation

19

Norman also claimed that aesthetics have influential effects in user preferences (Norman,
2003) and therefore on the user experience. According to Norman beauty can be an important
quality of a product which influences our judgement of that product.
In terms of aesthetics, Tractinsky and Lavie have made most research in the field of web
commerce. Tractinsky and Lavie set up heuristics with the attempt to develop a measurement
instrument of perceived website aesthetics. They created two dimensions to measure
aesthetics: classical and expressive aesthetic. The classical aesthetics dimension included
questions on pleasant, clear, clean, symmetric and aesthetic design; while expressive aesthetic
dimension consisted of creative, fascinating, original and sophisticated design with use of
special effects. (Lavie & Tractinsky, 2003)
T a ti sk a d La ie s heu isti s (2003) are:
Factor 1 - Classic aesthetics:
Aesthetic design, Pleasant design, Clear design, Clean design,
Symmetric design
Factor 2 - Expressive aesthetics:
Creative design, Fascinating design, Use of special effects, Original
design, Sophisticated design
Factor 3 Usability:
Convenient use, Easy orientation, Easy to use, Easy to navigate, Clear
design
Factor 4- Pleasurable interaction:
Feel joyful, Feel pleasure, Feel gratified
Factor 5 - Service quality:
Can count on site, Site contains no mistakes, Site provides reliable
information

Sutcliffe evaluated 3 airline companies websites with 9 undergraduate students investigating

the role of aesthetic and other factors in re-defining website usability. (Sutcliffe, Assessing the
Reliability of Heuristic Evaluation for Website Attractiveness and Usability, 2002) In his study
Sutcliffe says that heuristics should not be used for subjective rating style judgement, but this
does not mean that these cannot be used as an analytical support in usability evaluations.
The generic heuristics for attractiveness and aesthetic design according to Sutcliffe, de Angeli
and Hartmann (2002) are as follows:

20

1. Judicious use of colour: colour use should be balanced and low saturation pastel
colours should be used for backgrounds. Designs should not use more than 2-3 fully
saturated intense colours.
2. Symmetry and style: visual layout should be symmetrical, e.g. bilateral, radial
organisation that can be folded over to show the symmetrical match. Use of curved
shapes conveys an attractive visual style when contrasted with rectangles.
3. Structured and consistent layout: use of grids to structure image components and
portray a consistent order; grids need to be composed of rectangles which do not
exceed a 5:3 height to width ratio.
4. Depth of field: use of layers in an image stimulates interest and can be attractive by
promoting a peaceful effect. Use of background image with low saturated colour
provides depth for foreground components.
5. Choice of media to attract attention: video, speech and audio all have an arousing
effect and increase attention. Music can attract by setting the appropriate mood for a
website.
6. Use of personality in media to attract and persuade: this principle applies primarily
to e-commerce websites when use of human image and speech can help to attract
users and persuade them to buy goods by being polite and praising their choices.
7. Design of unusual or challenging images that stimulate the users i agi atio a d
increase attraction: unusual images often disobey normal laws of form and
perspective.

Other Attempts To Measure Website Aesthetics

AttrakDiff was developed by Hassenzahl et al. (2003) and it is measured on a semantic
differential scale, aiming to evaluate both pragmatic (usability, usefulness) and hedonic
(emotional) qualities in a product or system. AttrakDiff assesses the user's feelings about the
system with a questionnaire. The strength of AttrakDiff is that it produces quantitative and
comparative data, but it only assesses reflection on experiences, not actual experiences.
(Hassenzahl, Burmester, & Koller, 2003)
Visual Aesthetics of Website Inventory (VisAWI) consists of four aspects with various questions
in categories of simplicity, diversity, colourfulness, and craftsmanship. It has been developed
by Moshagen and Thielsch (2010) to measure visual aesthetics of an interface. Apart from
simplicity and diversity, the use of colours and expertise of design are taken into account. It
consists of 18 questions in total.
21

There are of course many other methods to measure website aesthetics but for the purpose of
this research the author only studied these ones in depth.

Setting Up New Website Heuristics

Website heuristics vary according to the type of website and the criteria as well as the purpose
of evaluation and each set of heuristics has its limitations and benefits. There are three
dimensions to my research: usability, aesthetics and user experience. I created a set of criteria
for my heuristics that correspond to these measurements. I have adopted several points from
different sources (eg. Travis s, Sutcliffe s, Tractinsky s, Avery s a d Alsudani s heu isti s) since I
have used many of their adjectives and statements to compose my own set of guidelines for
fashion website aesthetics.
My heuristics are presented below:

USABILITY
i.
ii.
iii.
iv.
v.
vi.

Ease of Use: It is instinctive how to use the website.

Convenience: Information can be found and used within a few clicks of the mouse.
Readability: The fonts are appropriate in size, colour and style. The user can easily locate
and read the text.
Consistency: The visual elements are applied consistently throughout the website.
Navigability: It is easy to manoeuvre from one link to the next. The links are in logical
order.
Simplicity: Every element seems to perform a clear function.

AESTHETICS
i.
ii.
iii.
iv.
v.
vi.

Use of Colour: Appropriate use of colours and contrasts. Background and foreground
colours do not interfere.
Balance: There is a good balance between the visual weight of the elements and the use of
white space.
Visual layout: Visual layout is symmetrical and each page on the site shares a consistent
layout.
Style: Use of curved shapes conveys an attractive visual style when contrasted with
rectangles.
Originality: The site takes an unorthodox approach and is distinguishable from other
fashion websites.
Unity: The site has a consistent, clearly recognisable look and feel that will engage users.

22

vii.
viii.
ix.
x.
xi.
xii.

Clarity: The intent, organization, and appearance of the website is unambiguous and
directed.
Sophistication: The website appears developed and complex. Images and text are visually
and conceptually distinct yet still harmonious.
Order: The layout helps focus attention on what to do next.
Beauty: The site is pleasant to look at and the design encourages people to explore the
site.
Special effects: The website includes animation, sound, or other unique forms of
interactivity. Attention-attracting features are used sparingly and only where relevant.
Images: Meaningful labels, effective background colours and appropriate use of borders
and white space help users identify images as discrete functional blocks.

USER EXPERIENCE
i.
ii.
iii.
iv.
v.
vi.

Conformity: The site follows convention of other fashion websites.

Intrigue: The website captures my attention.
Enjoyment: The website is enjoyable to interact with.
Ability to Motivate: The website encourages me to act.
Visual affection: The images and other visual elements are consistent and appealing.
Social satisfaction: There is a sense of community on the site, allowing for interaction with
others.

Although heuristic evaluation is relatively easy to conduct, the review of all the heuristics is not
quick to perform. In this study I decided to go deep into aesthetics, more than into usability
because my ultimate aim was to be able to see how fashion websites aesthetics impact the
customer journey. Because I created 24 heuristics for three dimensions (usability, aesthetics
and user experience), my session lasted longer than an hour but results were more informative
this way.
My aim was to set up heuristics that are easy to score; each heuristic had a statement
describing the guideline and participants were asked to rate these on a 5-point Likert-scale that
had Ag ee a d Disag ee o oth e ds and had a eut al poi t i the iddle Neithe ag ee
o disag ee . The points for each website given were totalled across each category to give
quantifiable sense to how usability, aesthetics and user experience were perceived on the
selected websites (Appendix 4).
Representing the data visually makes it easier to compare results as well as to identify problem
areas. I used radar diagram to visualise the analysis mainly because it gives a recognisable
shape for each type of scoring; the more circular the radar is, the more balanced the score and
the spikier the radar is the more variations are in the scoring given. Furthermore, the size of
the ada s plot o the a es i di ates the score percentage, showing better and worse areas.
(Figure 3)

23

Figure 3 Heuristic Evaluation Results

The fashion websites selected for the heuristic evaluation were all representing the higher-end
high street brands and all had similarly priced products. However, in terms of design they were
selected to be different; they all had different zooming features, menu structures, colours,
navigation systems (flow), different checkout processes, etc.
Below is an informal assessment of the selected websites chosen and their main characteristics
(Figure 4):

Figure 4
24

Participants And The Evaluation Arrangements

Six women in total, all aged between 30 and 40 years old, participated in the first part of the
study and conducted the heuristic evaluations. All participants had online shopping experience,
as they reported that on average they spend 3 hours a day using the internet (including emails,
browsing and shopping) but none of them had HCI or web design background. Participants also
stated that on average they bought something online once a month. The most common
fashion items purchased online by participants were: shoes, dresses and bags. All participants
were familiar with the brands in this study, but not necessarily with their websites.
The interviews took place between the 6th and 24th July, 2012. The participants were
introduced to the purpose of the research and explained the consent form. The heuristic
evaluations as well as the pre- and post-test interviews were conducted by using a personal
laptop as equipment which was operating under normal circumstances and settings; with good
internet connection and resolution. Participants were sitting in front of the laptop at a large
desk a d the autho e t to the o se i g oth the s ee a d the pa ti ipa t s fa e.
Participants were using the laptop to access the selected fashion websites. The environment of
the evaluation and interviews was normal with good lighting and quiet surroundings (i.e.
mobiles switched off, no TV or other disruptive devices). Participants started completing the
heuristic evaluations from the homepages of the websites on the screen.
In this part of the research I combined think-a-loud protocol, observation and heuristic
evaluation. Participants were given various types of tasks to complete while interacting with
the selection of websites to be evaluated later.
Focusing on the user experience think-a-loud protocols and interviews helped this research
collecting mainly qualitative data (formative evaluation). The heuristic evaluation was led by
one moderator (the author) who observed test participants in person and collected feedback
in the forms of a pre-test and post-test interviews as well as observations. The purpose of the
pre-test questionnaire (Appendix 2) was to make sure that participants fit in the target
audience group and it asked 14 short questions about the homepage concerning mainly their
online shopping experience and their favourite fashion website features.
During completing the website reviews participants were were observed and asked regarding
their experience of the websites collecting subjective feedbacks regarding their overall
impression, what participants liked and disliked of the websites designs, any recommendations
for improvement, their experience using each website, the ease of task and the challenges in
the task.
Pre-test interview was conducted regarding users impressions about the usability and
aesthetics of the selected fashion websites. The detailed summary of the outcome can be seen
in Appendix 2. The purpose of the pre-test and the post-test ethods as to get use s
25

expectations and to understand what users think about their experience on the website. After
the initial de-briefing interviews participants were introduced the websites (Appendix 3) and
were asked to browse the websites and to think out loud about how they felt about the design
and usability. M ai
as to e o d pa ti ipa ts fi st i p essio s when they interacted with
the websites as well as recording their user experiences as they flowed along their personal
online journeys.
Participants were asked to think out loud and to explain how they used the website, how they
searched, what they looked for, which digital artefacts they liked, which elements they found
aesthetically pleasing, etc. This was part of the initial exploratory search task and I just asked
participants to browse spontaneously while I was observing them.
Contestants were given a directed search task, that consisted of searching and finding a
specific type of dress and reporting back during their journey which aesthetic elements they
liked or disliked and why and I also asked participants to rate those elements.
You a e i ited to a wedding this summer and you are wondering what to wear. You realize
that ou do t ha e a d esses to ea so ou o e to this e site to fi d o e
Participants walked through the task as they were customers and they thought out loud while I
was making note of the key findings from their experiences; everything from how long it took
to complete the task to how many steps it took, to the obstacles in accomplishing the task on
each website. Participants were asked to think out loud whilst doing the search for the dress
and I also asked questions about various features of the website.
Participants were presented with the heuristic evaluation checklist and were asked to score
each heuristics on a Likert-scale (1-Disagree and 5-Agree). After completing the tasks
contestants were asked for their final impressions and overall user experience.
Each participant was asked to rate 6 different websites which took them on average 90
minutes to complete and the order of the websites varied to avoid any ordering effects. Each
participant received a bottle of wine for their time and feedback.
My aim was to test three dimensions; usability, aesthetics and user experience. The rating
s ale fo the heu isti s as a ked f o
Ag ee to Disag ee a d ei g Neither agree
o disag ee . The results were then aggregated and copied into an Excel file (Appendix 4) and
the results are explained in the next chapter.
Based on the results of the heuristic evaluation as well as the interviews analysis the two best
rated websites were chosen for further analysis. These were Whistles and French Connection
based on the aggregated results (Figure 5). Within the next phases of the study I will focus on
these two websites to analyse further the aesthetic elements and the perceived usability as
well as to focus on capturing how these components affect the customer journey.

26

Figure 5

Part 1/b Capturing The Customer Journey

My other aim with the heuristic evaluation as well as with the interviews was that I gain an
i sight to the usto e s jou e that participants take on the presented websites. While
observing them using the websites, they were asked to demonstrate how they used the
fashion websites and how they organized their online shopping activity when they were doing
it on their own.
I o de to gai a i sight to the usto e s jou e that pa ti ipa ts take o fashio e sites,
I was observing participants throughout the session and taking notes (Appendix 5) of how they
used the fashion websites and how they navigated on their own; which path they took and
which buttons they used as well as what they reported verbally (e.g. instant comments and
reactions to the aesthetics or usability features).
Before participants were given the heuristic evaluation sheets, they were introduced to each
website and were asked to talk about them and think out loud while they were navigating on
them. Participants were asked to report their feelings and experience on each website, while
their actions and voices were recorded using Camtudio e o de o the laptop. Based on the
observations and think-a-loud protocols the following customer journey was observed (Figure
6):

27

Figure 6

Customer Journey Framework

Adams and Blandford set up three stages of use s i fo

websites (Adams & Blandford, 2005):

atio journey on informational

1. Information initiation: information requirements initiated by someone or a system

2. Information facilitation: system facilitates the required information retrieval
3. Information interpretation: system supports contextual information interpretation
and/or modification
The customer journey on fashion websites is however different to informational websites as it
is easier to recognize layout conventions on fashion websites. Figure 7 below shows some
fashion website conventions looking at tertiary pages (Home > Women > Shoes):

28

Figure 7 Fashion website layouts

Common elements can be observed on all of them that can be classified as conventions for
fashion websites:

Primary categories line is presented horizontally at the top of the homepage.

Shopping basket/My account features are positioned at the top-right of the homepage.
Secondary categories are located vertically on the left side of the homepage.
Clothing items are laid out in a grid-like style in the main content area.
Clicking on an individual clothing item brings up a larger view of the item, usually
featuring:
text description,
colour choices,
size choices,
Add to asket featu e and
zooming.

Of course there are more than these. The real power of conventions is that they allow users to
quickly navigate and use the website without thinking too much about it as it e o es use s
mental models. However, most fashion websites want to distance themselves from the
conventions and be different so what they try to do is to ignore the conventions. But, in most
cases, the navigation system at least follows some convention; they are commonly situated at
the top or left of the page content, in a row or column. It will be explained in more detail later
that navigation and intuitiveness are important factors that users consider when making
judgments about fashion websites. Of course there is no one standard customer journey on
fashion websites, but generally speaking we can say that most journeys will at some point
cover the main steps. These core steps are explained here.
There must be an entry point from which the customer lands on the core page, usually the
homepage or a product page. Next steps can include searching, browsing, sele ti g Add to
basket o e e lea i g the e site. Custo e s a lea e to isit a o petito s e site o go
back to a search engine page where they can re-start browsing the Internet, but this is not
covered by this project. When customers browse the website they either filter through the

29

categories or use the search box to explore the assortment of products available according to
their reference.
Going a step further towards the customer journey on fashion websites users usually can
hoose f o the follo i g e u ite s: o e s ea , e s ea , e i , sale, log a d
some other informative links usually to inform users about fashion trends, celebrities, new
clothes, etc. Once selected the main category form the top menu bar, users can see the subcategories of the menu on the left vertical column. Users can choose from different categories
such as: Coats & Jackets; Jeans; Tops; Shoes, etc. Below there are a few examples of ecommerce website wireframes (Figure 8):

1. Homepage

2. Navigation

3. Filters

4. Close view

Images from: http://www.uvsc.edu/disted/decourses/mct/2740/IN/steinja/lessons/04/l04_08.html

Figure 8 E-commerce website wireframes

There are also various additional services that could support the decision-making process, such
as customer reviews, product guides, comparing similar products or gift finder. After a
selection is made customers can either put the item in the virtual shopping cart and proceed to
checkout or they can enter competitions, sign-up for newsletters and other online services or
share their selection on different platforms and touch-points such as email, online social
networks, etc. The checkout stage of the customer journey usually consists of a registering or
logging in page and an administrative page where customers are required to enter personal
details such as delivery address and payment details. In this last step customers can request
specific delivery options and to specify discount codes or gift wrapping for their purchases. The
jou e fi ishes ith a o fi atio page, sa i g Tha k ou to usto e s a d p o idi g
them with a reference number for their purchase. In this project the registration and login to
the customer account are out of scope due to time and personal data concerns. After the first
part was completed and analysed, personas and a storyboard were created (Appendix 7) based
on the results and feedbacks from users.

Part 2 - User Testing For Aesthetics

The second part of the study consisted of an in-depth evaluation and analysis based on user
testing as well as focusing more on the aesthetic elements of the websites and evaluating
30

them within the customer journey framework. It is of course very difficult to tell whether a
website is pleasing to its users or if it creates a good first impression because aesthetics are
very subjective. For some people a design can be very appealing and for others the same
design appears to be boring and not exciting at all.

Aesthetics and General Website Design

First impressions can make or break potential transactions. An experiment by Lindegaard et al.
showed that on average, people spend less than thirty seconds on the homepage before
deciding to stay or go (Lindgaard, Fernandes, Dudek, & Brown, 2006). Customers immediately
fo judge e ts a out the o pa s o pete e the a thei e site looks. These a e
of course subjective judgements but a well-organized and structured website with coherent
design can transmit trustworthiness and professionalism.
Keeping in mind the needs of the target personas when designing websites is also very
important, because apart from selling products on the website companies are also selling
experiences. Therefore they have to make sure that they know who the audience is and
address and address their needs on the website at the appropriate level and in the appropriate
moment.
Good usability is of primary importance and there has to be an appealing sheen that flows
th ough the e site s desig as ell as alo g ith the usto e s jou ey that makes it easy
and quick for customers to find and purchase what they are looking for. Signs and design
elements should also be clear to help the users manoeuvre through the website.
Another issue with fashion websites is that people are looking for clothes that involve looking
for aesthetically pleasing items in itself (i.e. the clothes), therefore it can interfere with the
aesthetic judgement of the actual website design. In this study, my aim is to focus on the
e site s desig aestheti s a d ot o the aestheti s of the fashio p odu ts it is selli g. An
image of a dress can usually affect the observer by the type of clothes it is as well as by its
shape, colour and fabric material (Xue Li, 2011), but unlike other forms of art the aesthetic
consequence of a fashion item will ultimately depend on how it appears on the human body
(Molly Eckman, 1995). Since the online customer cannot interact with the physical garment, he
or she is reliant on the virtual environment to judge and to evaluate the silhouette, the
colours, the details, the texture and the necessary care that the garment requires.

31

Methods Used

Focusing on aesthetics and the user experience think-a-loud protocols and interviews helped
this research collecting mainly qualitative data. In this part of the study I used commercial
methods to evaluate the websites in terms of their perceived aesthetics. User performance
data such as card sorting, emotional reaction scales and emotional bi-polar semantic scales
provided this part of the research with mainly quantitative data. The purpose of using these
methods was to get an insight about user experience and to get an understanding of which
design elements of the websites gain attention and which features are not found engaging.
The project plan as well as the testing session outline and timing and testing arrangements are
presented in Appendix 10. Ten women in total, all aged between 30 and 40 years old,
participated in the second part of the study. All participants had online shopping experience
and two of them had HCI or web design background. Some participants were familiar with the
brands in this study, but not necessarily with their websites. The interviews took place
between the 3rd and 24th August, 2012. Participants were introduced to the purpose of the
research and explained the consent form.
In this part of the research participants were given various types of tasks to complete such as
card sorting, emotional reaction scale and emotional bi-polar semantic scale in order to collect
quantitative data. The pre- and post-test interviews utilized open-questions to also gather
qualitative data about user satisfaction and feedback on the aesthetic features of the websites.
The testing sessions were led by the author of this study who observed test participants in
person and collected subjective feedback in the forms of pre-test and post-test interviews. The
pre-test survey (Appendix 8) asked 16 questions about the visual designs and usability
concerning:

preferred design features;

purpose of the design elements;
design and usability correlation;
preferred colours and
presentation of the products.

In this interview the questions were more aesthetics-specifics. After the initial de-briefing
interviews participants were introduced to the card sorting task. The flash cards contained the
previously observed 17 steps of the customer journey. The task lasted about 10 minutes; first
participants were shown the cards, then they were asked to order the cards (cards were
always shuffled previously). After the completion participants were asked to explain why they
ordered the cards in that way, finally a photo was taken of the cards (Appendix 11). The
arrangement of the cards was logged in an Excel file (Appendix 6). This exercise helped the
author to re-iterate the customer journey set up in the first part of the study (Appendix 6).

32

For the next task I created flash cards with screen-shots of specific features of each website
that were tested and rated by my participants. These features were selected based on the
results of the interviews from the first part of the study; each card represented an aesthetic
element of a step of the customer journey. These elements were evaluated by participants by
using different commercially used methods, such as emotion and reaction scaling technique
and bi-polar emotional response. The most important data from this exercise was the
discussion with participants to understand their reaction to an image (whether positive or
negative), so I was taking good notes as well as recorded the session. The aim with this task
was to identifying commonalities in design that provided the same or similar emotional
responses.
A large matrix was created; a vertical and horizontal axis based on two sets of polar opposite
words (high quality and low quality on the vertical axis and exciting/fun and boring/dull on the
vertical axis). Participants were given two flashcards at the same time with the same element
from each website and were asked for their initial thoughts. They were asked to place the
cards on the axis of the aesthetics-usability scale and explain their rationale. I then noted the
position of the cards and put the data in Excel (Appendix 12).
The task was completed within 20 minutes on average. For this exercise I limited the number
of images to 21 because I did not want the matrix to become too cluttered and my aim was to
be able to see the groupings of images (Figures 9 and 10).
Homepage
Logo/Identity
Colours
Text (font, style)
Menu bar/Menu options
Sale/Special offers/Multi buy discounts
Buttons (button graphics, size, colour, text, texture)
Links below the fold
Browse/Search
Products categories are meaningful
Items in a row
Images sharpness
Product information page
Price tags
Select
Product information (image and text)
Sizing and stock availability
Out of stock messages
Colour pieces (samples)
Examine
Images (size quality) -> zooming, rotating, dragging
Auto-zoom
Multiple image views per product

33

Basket
View items in basket
Checkout
Structure of the checkout process

Figure 9 Main steps of the customer journey

as observed in the first part of the study

Figure 10 Emotional reaction scale

In the next task participants were shown the six main stages of the customer journey (Figure 9)
and were asked to describe their feelings about the shown screen-shots on scales with
semantic labels (bipolar adjectives were used at the end points of the scales, Appendix 13).
This task took around 20 minutes on average to perform.
Each participant was handed with a copy of the scales and were given a bit of time to
familiarize themselves with it before showing them the designs I wanted feedback on.
Then participants were shown the designs and explained its purpose; fo e a ple You e just
conducted a search for a dress, and are presented with this page . The easo fo this as that
opinions can change depending on the purpose of the design. Then participants were asked to
complete their scales individually. After the sessions, all of the pa ti ipa ts espo ses were
plot on a single scale for each design to identify any patterns or dissimilarities (Appendix 13).
I also wanted to make sure that my scales had no obvious order and that the order of the
extremes varied so that I did t have all positive on one side and all negatives on the other side
of the scale. This was done in order to prevent participants from blindly completing the scales.
I also wanted to fo e a opi io on participants; therefore I removed the neutral option and
used a 4 point scale.

34

Post-interview questions (Appendix 9) were designed to capture perceptions of the two

different designed fashion website both in terms of aesthetics and usability allowing
participants to reflect feelings and thoughts about these. Participants were asked to compare
the two website designs as well as to report strengths and weaknesses of each website. My
intention was to find out how the two websites were perceived against each other.
Participants were asked to rate the websites and to report the best and the worst things about
each website. Because a lot of fashion websites focus on showing more and more features that
attract attention, rather than ensuring that existing features work really well (e.g. sorting,
viewing, stock availability, etc.), the answers gave me a better understanding of what is most
important for them and what is causing major frustrations and how existing features can be
improved.
The interviews lasted about an hour on average and within this part of the study I gained a
large amount of quantitative as well as qualitative data. In the next chapter I will demonstrate
the main findings of the method used here. After completed the analysis of the second part of
the study I have created two different styled and designed paper prototypes of two fashion
websites (Appendix 14) ased o pa ti ipa ts feed a ks f o the se o d ou d i te ie s.
These paper prototypes were tested in a focus group setting with two participants to gain
reflection and reiteration of the findings so far.

Part 3 - Focus Group Interview With Paper Prototypes

For the third round interviews I have created two different style paper prototypes (Appendix
14 ased o pa ti ipa ts feed a ks f o the se o d ou d i te ie s. The two designs
efle ted pa ti ipa ts feed a ks a d e e eated to please their reported feelings and
thoughts of the previously tested websites. Both designs had the same branding but one had a
minimalistic mainly black and white design and the other one had a colourful scheme (Figure
11).
My intention with the focus group interview was to depict more knowledge about the purpose
of colours and the importance of the overall design and aesthetics in the customer journey
process. The navigation systems, the product information pages as well as the shopping basket
and checkout pages were all taken from the real websites but were mixed in with my own
design features. I have created a website that was colourful and had the navigation system of
French Connection, the website that was preferred by 80% of the participants in the previous
part of the study. The other design was created by taking the minimalistic design of French
Connection and was paired ith Whistles unconventional navigation system. Both paper
prototypes displayed the same dresses and price tags were concealed to make sure they do
ot ias pa ti ipa ts a s e s.

35

Figure 11 Paper prototypes of fashion websites

The interviews took place in a focus group format. Both contestants fit the original profile of
participants. Participants were taken through the customer journey by showing them each
step on a printed screen shot and were asked to explain their initial impressions about the two
designs. The interview took about an hour and the session was recorded by iPhone (Appendix
15). The purpose of this part of the study was to re-iteration of the findings regarding fashion
e sites aestheti s a d usa ilit i elatio to the usto e jou e that e ai s the e t al
framework of this study.

Part 4 - Mapping the customer journey

I have collected both qualitative and quantitative data through previously explained methods.
My ultimate aim in this study is to set up the customer journey that reflects the roles and
effects of the aesthetic artefacts in relation to usability and user experience.
I started the mapping process of the customer journey by using frequently mentioned words
and statements by customers. At this stage I was aiming to have about six levels corresponding
to the results I got through the card sorting exercise. I used the previously created personas
and storyboards to help the initial process mapping. I looked at all the evidence from the
previous interviews and testing methods and tried to write down the journey like a story from
the usto e s pe spe ti e. The earlier created storyboard also helped with this.
Then I gathered all the different aesthetic elements from the reported evidence and tried to
map them on the customer journey plan. For the purpose of this project I call them touchpoints, but I am aware that traditionally touch-points are meant in a different way (i.e.
different types of channels that customers use to interact with the system, for example offline
or online channels). These ele e ts e e the ated a o di g to pa ti ipa ts feed a ks
36

whether they were considered as drivers or draw-backs throughout their journeys. This was
done on both the aesthetics and the usability dimension.
On the other hand I also wanted to map the stress points and for this I have gathered all the
complaint codes and examined where and why participants reported frustration or
dissatisfaction during their journeys on the fashion websites. Both the aesthetics and the
usability dimensions were taken into consideration when identifying the potential problems
and obstructions within the customer journey.
Emotional responses were also taken into consideration when building the customer journey.
Pa ti ipa ts e pe tatio s a d e otio le els e e depi ted o the ap a d I a ted to ake
su e that the usto e jou e ap is itte f o the usto e s pe spe tive with the
language they used themselves. For this I have used and re-used the recorded sessions with
participants and made sure that their reactions, feelings and thoughts are plotted on the
customer journey map.
I am aware that most customer journeys are unlikely to be a linear process since customers
take different steps but the flow of the journey is generic, that starts at the homepage and
finishes at the checkout page. The map created will work for some but may not work for
others; therefore I tried to be as flexible as possible to create an experience map that is
adaptable by most fashion websites. I ended up with a wobbly line across the journey that
shows the areas of interests from aesthetics point of view and also from usability point of view.

Chapter 4 Results

Results Heuristic Evaluation

The purpose of the pre-test interview as to get use s e pe tatio s a d to u de sta d hat
users think about their experience on the website. The detailed summary of the outcome can
be seen in Appendices 2, 4, 5 and 6.
When participants were asked how they compared the online and the offline shopping
experience they all associated online shopping with convenience. But when they were asked to
describe the offline shopping experience it was considered to be leisure by half of the
participants while the other half considered it a time-consuming activity.

37

Pa ti ipa ts ost mentioned words associated with online shopping comprised: convenience,
speed, ease and sale (Figure 12). Associated feelings to online shopping included: satisfaction,
comfort (speed, mobility), excitement, happiness, guilt and vulnerability (Figure 12).

Figure 12 Words and feelings associated with online clothes shopping

All participants reported different ways of browsing and selecting fashion items online. These
customer journeys included tracking down a previously seen item on the internet, using
Google to find the best prices, browsing on the internet to get inspiration, browsing by filtering
and sorting and buying only from trusted websites and brands.
When participants were asked to describe their favourite fashion websites the following
ha a te isti s e e e tio ed: it is aspi atio al , it provides long-te fashio , it is
diffe e t f o the est , p o ides a g eat sele tio of desig e s , it is eas to a igate , it
has a si ple desig . So the most important features mentioned were: selection, quality and
simple and easy-to-use design.
All participants agreed that the e site s desig ould affe t the purchase on a fashion
website. Participants associated zooming, navigation, trust and security with good design.
The most important functional features of a fashion website were considered to be the
zooming, the quality of the images, the navigation system, and the information provided about
the clothes as well as the checkout and return process and information, the search and filtering
options and security (Figure 13).

38

Figure 13 Most important features of fashion

websites as reported by participants

Favourite fashion website services included: 'You might also like' and 'Complete the look'
features, 3D views, PayPal, efficient checkout process, Layout, Menu structure, Navigation,
Categories, Zooming, Stock levels, Colour displays.
After the initial interviews participants were introduced the websites (Appendix 3) and were
asked to browse one website at a time and to think out loud about how they felt about the
design and usability. M ai
as to e o d pa ti ipa ts fi st i p essio s he the i te acted
with the websites as well as recording their user experiences as they flowed along their
personal online journeys. Contestants were also given a directed search task, that consisted of
searching and finding a specific type of dress and reporting back during their journey which
aesthetic elements they liked or disliked and why and also to explain how they rated those
elements. The summary of the results for each website are highlighted in the table below:

39

Figure 14

After the interviews participants were presented with the heuristic evaluation checklist and
were asked to score each heuristics on a Likert-scale (1-Disagree and 5-Agree). Each participant
was asked to rate 6 different websites and the order of the websites varied to avoid any
ordering effects. My aim was to test three dimensions; usability, aesthetics and user
experience. The results were then aggregated and copied into an Excel file (Appendix 4) and
the results are explained below (Figure 15).

40

Figure 15 Results of the Heuristic Evaluations

At this point my aim was to get a quick & dirty estimate about the perception of the websites,
so calculations included basic mathematical formulas; first the points given for each heuristic
within a dimension were added up, then the total sum of the dimension was taken into
consideration for the final results.
The usability dimension had six heuristics; Ease of Use, Convenience, Readability, Consistency,
Navigability and Simplicity. The three best rated websites in terms of perceived usability were:
French Connection (85%), Ted Baker (77%) and Reiss (76%).
Results for usability dimension are:
1. French Connection = 153 (85%)
2. Ted Baker = 138 (77%)
3. Reiss = 137 (76%)
4. Whistles = 136 (76%)
5. Comptoir des Cotonniers = 99 (55%)
6. Jaeger = 96 (53%)
Aesthetics dimension had eleven heuristics; Use of Colour, Balance, Visual layout, Style,
Originality, Unity, Clarity, Order, Beauty, Special effects and Images. The three best rated
websites in terms of perceived aesthetics are: Whistles (69%), Reiss (67%) and French
Connection (64%).
Results for aesthetics dimension are:
1. Whistles = 250 (69%)
2. Reiss = 240 (67%)
3. French Connection = 230 (64%)
4. Ted Baker = 233 (65%)
5. Comptoir des Cotonniers = 222 (62%)
6. Jaeger = 177 (49%)

User Experience dimension had again six heuristics; Conformity, Intrigue, Enjoyment, Ability to
Motivate, Visual affection and Social satisfaction. The three best rated websites in terms of
perceived user experience are: Whistles (67%), Ted Baker (62%) and Reiss (57%).
Results for user experience dimension are:
1. Whistles = 120 (67%)
2. Ted Baker = 112 (62%)
3. Reiss = 103 (57%)
4. Comptoir des Cotonniers = 100 (56%)
5. French Connection = 98 (54%)
6. Jaeger = 81 (45%)

41

Overall experience was rated: Reiss (67%) and second place for French Connection and
Whistles which got 19 points (63%) respectively.
Results for overall experience dimension are:
1. Reiss = 20 (67%)
2. French Connection = 19 (63%)
2. Whistles = 19 (63%)
4. Ted Baker = 18 (60%)
5. Comptoir des Cotonniers = 17 (57%)
6. Jaeger = 13 (43%)

An aggregated radar-chart illustrates the ratings given by participants for my heuristics. As a

summary we can say that in terms of usability and user experience the three most favoured
websites were: French Connection, Whistles and Ted Baker. In terms of aesthetics the three
best rated websites were: Whistles, Reiss and Ted Baker.

Figure 16 Spider chart showing the aggregated

results of the heuristic evaluation
Based on the results of the heuristic evaluation as well as the interviews analysis the two best
rated websites were chosen for further analysis. These were Whistles and French Connection
based on the aggregated results (Figures 16 and 17). In the next phases of the study I will focus
on these two websites to analyse further the aesthetic elements and the perceived usability as
well as to focus on capturing how these components affect the customer journey.

42

Figure 17

These two websites are actually quite different in terms of design and navigation structure. It is
Whistle s website that has the most unusual layout as it offers a secondary navigation system
right in the middle of the main content area and fills far more space on its homepage than
French Connection. Whistle has a unique design. No scrolling is required on its homepage and
the main navigation system is at the top centre of the page (Figure 18). The sub-categories are
presented spread out on the main screen with a few models as examples from each subcategory. The website has a nice movement when sub-categories are selected with the models
sliding in the screen one after the other. There are seven models in one row and the page has
white background (Figure 19).

Figure 18

Figure 19

43

French Connection website received the highest score for usability, but in terms of aesthetics it
only got the third place and only made it to the fifth place for user experience mainly because
users reported it to be too white and too simple. Still the website was rated second best in
terms of overall user experience. French Connection has a minimalistic design and it is built
upon white background with grey text a d a ed ale e u ite in the main menu (Figures 20
and 21). F e h Co e tio s e ti al la out edu es the ai o te t s spa e o the s ee
used up by the navigation system which was developed to have a drop-down menu that
reveals its secondary navigation system. French Connection displays only three models in a
row, but images of these are slightly bigger tha o Whistles pages.

Figure 20

Figure 21

In the next part of the study I will be looking at the most important features mentioned by
participants during the heuristic evaluations and then in the second part asking them to rate
those elements by various measurements.

44

Results Customer Journey

I o de to gai a i sight to the usto e s jou e that pa ti ipa ts take o fashio e sites,
I was observing participants throughout the session and taking notes (Appendix 5 and 6) of
how they used the fashion websites and how they navigated on their own; which path they
took and which buttons they used as well as what they reported verbally (e.g. instant
comments and reactions to the aesthetics or usability features). Based on the observations and
think-a-loud protocols the following customer journey was observed:

Figure 22 Typical customer journey observed during the heuristic evaluation sessions

After the interviews and analysis of the data personas and a storyboard were created based on
the pa ti ipa ts eha iou s a d reported experiences (Appendix 7).

Results - User testing

The second part of the study consisted of an in-depth evaluation based on user testing as well
as focusing more on the aesthetic elements of the websites and evaluating them within the
customer journey framework by using commercial methods. User performance data such as
card sorting, emotional reaction scales and emotional bi-polar semantic scales provided this
part of the research with mainly quantitative data. The purpose of using these methods was to
get an insight about user experience and to get an understanding of which design elements of
the websites gain attention and which features are not found engaging. Ten women in total, all
aged between 30 and 40 years old, participated in the second part of the study.

Pre-test interviews
The pre-test interview focused on the user experience with regards to fashion website s
usability and aesthetics. The results (Appendix 8) revealed that most participants (7/10) used
45

collection websites (e.g. ASOS, Net-a-Porter, Brand Alley, etc.) to buy clothes from than
individual brands websites. Reasons for choosing a specific website included; receiving email
about sales or new collections, looking for a particular brand or item that is only sold by the
selected website, security (being able to pay with PayPal), variety and selection as well as free
delivery and good usability were all listed as reasons for visiting fashion websites.
When participants were asked to describe their favourite website and to explain what they
liked about it half of the participants admitted that the colours were appealing to them as well
as that they found the website easy-to-use. About a third reported that good navigation is
essential for them in terms of website design and also that good zooming facility is a musthave requirement and that they like to see the clothes worn by models and in context.
Pa ti ipa ts fa ou ite desig featu es i luded: simplicity, user-friendliness, intuitive use,
interactivity and having a fashion magazine look (Figure 23).

Figure 23 Favourite design features

reported by participants

Participants also reported that fashion websites should not have cluttered design or take too
long to load or he its just ot lea hat it does . espo de ts also added that too
conventional and standard designs are boring and that too loud music was irritating for them.
It was revealed from the interviews that participants isual atte tio et ee the e site a d
the items it was selling was on average focusing % o the e site s desig a d % o the
clothes and products it was selling. Also discovered from the interview sessions that all
participants preferred to have a boring design with good usability rather than the other way
round. Furthermore, they all admitted that they would prefer to buy a dress from the website
which was the easiest and quickest to use.
All participants acknowledged that the most exciting part of their journey on the fashion
websites was the step when they interacted with the visuals of the dress: observing it,
e a i i g it a d isualisi g it: hat ou goi g to do ith it, ho ou' e goi g to ea it .

46

The most boring part was considered the end of the journey; when participants had to fill out
the personal information and payment details. One participant said that for her the most
boring part was when the pages were loading and she had to wait.
Aesthetically pleasing design was described by participants as a clean design without too much
text and that had nice colours and was not too cluttered. Showing products in context was also
considered as an important aesthetic feature. It is interesting to note that functional features
were also mentioned together with the aesthetic elements (they seem to be inseparable
characteristics of aesthetics), these included; good search facility, not too much scrolling,
Anticipates what I want .
Best colours for fashion websites were considered to be black and white by half of the
respondents, while the other half preferred to see bright and primary colours on fashion
websites. Other clarifications regarding the colours included; having white background allows
better visual on the dress, it should have a contemporary and minimalistic overall look, and it
was explained by participants that context is important to make the pages more personal.
Participants said that the colours had to be consistent on all pages and that generally they all
wanted to see the colours spread out throughout the website.
All participants agreed that showing clothes in context was more appealing than just showing
the product on its own. When it comes to examining the dress half of the respondents
reported that they preferred to view the clothes on a model, others mentioned having
different views and good zooming enhances the e pe ie e a d o e pe so said that I want
to see the items combined with other items (look-book type of presentation) .
Additional information about the clothes on fashion websites that participants were looking
for included; materials information, description of the clothes (e.g. the length of a dress) as
ell as i fo atio as to he e to u othe ite s, e t e ds, i fo a out the desig e .
The interview revealed that people have many different ways of buying a dress online in
relation to their customer journey (e.g. which categories, filters they would use on the
website). But there are some patterns that can be observed. Based o pa ti ipa ts a s e s
there are two different ways of surfing on fashion websites depending on the purpose of the
visit; browsing without any specific ideas (i.e. looking for inspirations) and looking for a specific
item/brand hunting ). It is interesting that based on the commentary of participants as well
as observations there is no difference between those two scenarios in the use of the website
and participants seem to follow similar ways; they would select from the main navigation
e u a atego a d o se a o gst the esults i that atego e.g. Ne i , Blouses ,
ale , et .

47

Card sorting
After the initial interviews participants were introduced to the card sorting task to re-iterate
the customer journey observed during the heuristic evaluations. The flash cards contained the
previously observed 17 steps of the customer journey. The card sorting exercise (Figure 24)
revealed that women usually take eleven major steps on fashion websites from the homepage
to the checkout page (excluding log-in and payment pages). The steps below were taken from
the aggregated results that were recorded in an Excel file after each interview (Appendix 6).
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

Homepage
Women
Dresses
Dress type
View all
Scan through dresses
Dress selected
Examine dress
Checking additional information about the dress
Basket view
Checkout process

Figure 24 Participants completing the card sorting exercise

Overview of the aesthetic elements on fashion websites

Homepage
The homepage and the overall look of the French Connection website were perceived by
participants as having the better contrast (Figures 25, 26). French Connection is built upon
white background and texts are dark grey, light grey, red and highlighted text is black to
maximise contrast for selected links. Although overall the white background was preferred

48

so e pa ti ipa ts e a ked that too

softer white effect.

u h hite hu t thei e es and that it should have a

On the bipolar semantic scale participants rated the French Connection homepage brighter
tha the Whistles ho epage i spite of the fa t that F e h Co e tio s ho epage is ai l
white, grey and brown, whilst Whistles is lue, pi k, ello a d la k . Also, the French
Co e tio ho epage as ated p ettie tha Whistles. Whistles ho epage as ated
messier (1.7 vs 2.7) than the French Connection homepage which was also rated more
instinctive than Whistles.

Figure 25 - Colours (background and images)

Whistles on the other hand, uses black background and white text which was considered to be
a bad contrast. The Whistles logo and company identity was rated higher quality but less
exciting than French Co e tio s o e Figures 25 and 26).

Figure 26 - Logo/Identity

Colours on the homepage were significantly better rated for French Connection then Whistles,
which is quite surprising given that the French Connection homepage is mainly black and white
with some grey and brown tones whilst the Whistles website has some primary colours (e.g.
yellow, blue, pink) on its black background (Figure 25).
Text and font styles were better rated for French Connection in terms of aesthetics but worse
in terms of usability because of the poor contrast reported earlier (grey text on white
background).

Figure 27 - Text (font, style)

Whistles li ks elo the fold Figure 28 e ei ed ette s o es tha F e h Co e tio s fo

both aesthetics and usability. It is interesting that so far the white background was preferred
49

but with the links below the fold area participants preferred the black background and white
text. The other reason participants gave me was that it looks brighter since it has more colours
than French Connection grey over white below the fold design. The only criticism that Whistles
received was that the texts are over the images which was rated as bad usability.

Figure 28 - Links below the fold

Button graphics received the same scores fo aestheti s ut fo usa ilit F e h Co e tio s
ou d shaped utto s e ei ed u h ette ates tha Whistles la k s ua e shaped utto s
(Figure 29).

Whistles utto s

F e h Co
Figure 29 - Buttons

e tio s utto s

In order to measure the homepage on the emotional bi-polar semantic scale I have created
screenshots of each website (homepage, navigation, product view, zooming, basket view and
checkout view) and participants were asked to describe their feelings about the pages on
scales with semantic labels where bipolar adjectives were used at the end points of the scales
(Appendix 13). As for the results; where ratings are located closer to each other it means that
the aesthetic perceptions for the two design elements were shared amongst participants.
When there is a major difference between the ratings, it indicates that there was an
i o siste
et ee pa ti ipa t s aestheti pe eptio s a d that thei ie s a ied a d so
did their feelings about the visual appearance. The results are explained within each section of
the customer journey.
Figure 30 shows the comparison of the two homepages. The homepage of French Connection
as o side ed to e ighte tha Whistles i spite of the fa t that F e h Co e tio s
homepage is ai l hite, g e a d o , hilst Whistles is lue, pi k, ello a d la k. The
French Connection homepage was rated friendlier, prettier and also more instinctive than
Whistles . The two most visible differences between the two homepages is that Whistles
homepage was rated much more discouragi g tha F e h Co e tio s ho epage, a d the
Whistles homepage was rated much messier than the French Connection homepage.

50

French Connection:

Whistles:

Figure 30 Comparison of the homepages on bi-polar semantic scale

Navigation System
Fashio e sites ai a igatio s ste o tai s li ks to the ai se tio s e.g. Wo e s,
Me s, Child e , ale, et . of the e site. A navigation system contains text in order to help
users to find their ways on the website; French Connection uses bold text to indicate that the
link selected is clickable and Whistles underlines the links when users point the mouse to the
link. The examples below (Figures 31, 32) use text differently; French Connection displays links
vertically whilst Whistles lists links of the primary navigation section horizontally. The effect is
simple and minimalistic in both cases, but the contrasts are different.

Figure 31 - Whistles

Figure 32 - French Co

ai

e tio s

a igatio system

ai

a igatio system
51

While French Connection uses different font styles and sizes to indicate importance and
location to indicate the hierarchies of the links and content, Whistles does not visually
separate items in the main and secondary navigation system. This was one of the reasons for
the poor usability rate given to Whistles.
French Connection also developed a drop-down menu to reveal its secondary navigation
system. This drop-down menu appears on mouse-over, that is, when a user positions his/her
cursor over an object or link without having to click on anything. While drop-down menus can
be very effective, they can propose some usability problems in the way that they can hide
content from the users when the user mouses-over it. Figure 33 the yellow rectangle shows
Jaege s d op-down menu which is covering a significant part of the main content page and the
secondary navigation system:

Figure 33 - Jaege s d op-down menu covering the secondary navigation system

French Connection s e ti al la out edu es the ai o te t s spa e o the s ee used up

the navigation system, while the horizontal layout is hardly visible o Whistles website
because it is using the same colours and fonts and the same small text as links appear directly
below the primary section header.
There was an agreement among participants that the location and the look of any local
navigation system should be consistent across all content pages, and should be similar or even
identical to the location and the look of the main navigation system found on the home page.
Both Whistles a d F e h Co e tio s primary navigations are at the top of the homepage,
but the secondary navigation systems of the two websites are different. The examples below
show these different navigation systems; a conventional one from French Connection and a
more exclusive one from Whistles (Figures 34, 35).

52

Figure 34 - F e h Co

e tio s se o da

a igatio

Figure 35 - Whistles secondary navigation

Whistles visual representation of the secondary navigation system is using actual examples of
the sub-categories, as icons, in addition to the text, which provides users with appetizers of
pieces from a category.
The categorisation used to present the collection of clothes is also different on the two
websites. French Connection uses colour and size sub-categories, whilst Whistles categorises
the dresses based on occasions and types.
When participants were asked to compare the two websites French Connection website was
described as being more organized and to have better structure. It was also perceived as the
more user-f ie dl e site. This a e e plai ed pa ti ipa ts e tal odels hi h a e
similar the conventional design, structure and navigation system that French Connection is
using. Participants did admit however that the Whistles website had the better contrast and
that it used more colours. Despite of having the better contrast, Whistles was perceived as a
messy and irritating website with inferior design than French Connection.

Metaphors
In human-computer interaction design metaphors are interactive elements, objects, or tools
that represent real-life experiences. The purpose of metaphors on websites is to help users to
interact with the system by providing them clues that are based on familiar concepts.

53

On fashion websites we can refer to menus as the shelves of a wardrobe: we are presented
with different items on each shelf and in each drawer. But the most popular metaphor is
p o a l the shoppi g a t o e, which is the space where online customers store selected
products that they may later purchase. In real life it serves the purpose of carrying around
products selected from the shelves in a shop.

Figure 36 Add to basket buttons

French Connectio uses the te

ag hile Whistles uses asket a d also has a Add to
Wish List utto (Figure 36). Whe pa ti ipa ts sele ted the Add to Wish List utto the
were asked to log in or to create an account. This was considered on several occasions as a
negative feature and some participants got even angry and frustrated by the fact that they
were asked for personal data because they considered it as an unnecessary and unjustified
step. As o e pa ti ipa t e plai ed this as a t ust issue fo he a d she reported that she
would immediately leave the website if this would happen to her.
As participants want a quick and easy-to-use website, e-commerce companies should consider
and use a metaphor only if it fits the task and makes the website easier to use.
The utto s used fo zoo i g, o the magnifier glass etapho , is also diffe e t o the t o
websites. French Connection only uses text and two little black arrows to show the alternative
views, but the text suggest different thing than the buttons do (Figure 37). On the Whistles
website in order to operate the metaphor, users have to click on the arrow buttons to change
the view of the clothes and on the magnifier glass to expand the image. The magnifier glass has
a + sig i it hi h also suggest users that it will expand and not minimize the garment.

Figure 37 Zooming buttons

Out of stock messages are again differently presented to customers (Figure 38); Whistles
strikes through unavailable sizes but on the French Connection website it is shown with a cross
instead of a circle. Both worked well in terms of aesthetics as participants rated them equally,
but the latter solution received higher scores for usability and overall it was the preferred
design and according to participants it was straight forward and obvious. However, Whistles
services were rated higher than French Connection. Two participants out of ten remarked that
they found the telephone number provided next to the sizing chart very useful.

54

Figure 38 Out of stock messages

Examining the product and zooming

Half of the participants preferred the dress to be shown on a model whereas the other half
preferred the dress to be presented in different angles, on and off the model and also
combined with other products (e.g., Look ook st le . Those ho p efe ed to see the d ess
worn by a model acknowledged that they can better imagine and visualize the real dress
because they can understand the dimensions of the dress better. There were participants who
lai ed that e e thi g looks good o a odel a d fo the it as o e i po ta t the
context and different background colours (not only white). As the reader can see from Figure
39, both websites have white background.

Figure 39 Auto-zooming feature

For each item Whistles offers four different views, three different angles and one close view
(Figure 40). This is done consistently with all their products together with the magnifier glass
which offers a full screen close view of the selected image. French Connection on the other
hand offers three model views and two single views of the product. Furthermore, they also
show the different available colours in single view (not shown on a model).

55

Figure 40 Alternative product views

The feedback from participants was that in spite of the fact that French Connection showed
o e a iatio s of the lothes, Whistles displa s e e ette ated fo usa ilit , e ause it had
better contrasts and the screen was clearer. Participants also explained that the reason they
gave better usability for Whistles was the fact that French Connection was showing the jumper
underneath a leather jacket that hindered the real view of the product.

Product Information
The product information should be easily accessible and should provide important and useful
information about the product. Figure 41 shows how the two websites dealt with this part of
their online space.

Figure 41 Product information page

Participants rated the two pages similarly (Appendix 13); that means that both presentation
received impartial scores (0) for aesthetics and received the equal scores for usability (1). Also,
both websites received positive comments for having recommendations with the dress
Co plete the look o Whistles a d We also lo e o F e h Co e tio . As fo the
description participants explained that they needed useful information and not codes, like
KU s a d p odu t odes, a d that the des iptio of the d ess should e sho t a d o ise a d
long marketing publicity was not necessary on these pages. Half of the participants said that it
is very important to point out the size of the dress shown on the model, because they can then
better relate to the real measurements.

56

Shopping Basket
Whistles s shoppi g asket page received far better scores than French Connection. The main
reasons for this were that Whistles had more useful information displayed on the page and
that participants were able to see the process. They said that the delivery information was
clearly explained and that it was presented in a more intuitive and streamlined way. The two
shopping basket page can be seen below on Figure 42.

Figure 42 Shopping basket page

Checkout
An interesting turn as French Connection received far better scores for its checkout page than
Whistles. The reason again was that the information was clearer the way it was presented and
that pa ti ipa ts e e a le to see hat is goi g to happe e t, he eas Whistles e site
was considered too crowded and particpants reported that there were too many lines that
required filling out.

Figure 43 Checkout pages

As for the results of the emotional bi-polar semantic scale it shows that most ratings are
concentrated in the middle (Appendix 13) which means that there is indifference to the visual
design and aesthetics as both websites received very similar ratings. However, as the study
shows people like more the site for its functionality and usability rather than for how it looks.
Although Whistles website was perceived constantly throughout the journey as more
sophisticated, only 20% of participants would recommend this website to others.
57

Emotional reaction scale

For this exercise participants were given two flashcards at the same time with the same design
element from each website. They were asked to place the cards on the axis of the aestheticsusability scale. I then noted the point of the cards and put the data in Excel (Appendix 12). I
averaged the results and then added the negative axis (e.g. boring) to the positive axis (e.g.
exciting) to get the accumulated results for both the aesthetics and usability dimensions. The
results are presented in Appendix 12 and the aggregated results were plotted on an Excel chart
(Figure 44).

Figure 44

We can see from the results that usability scores were higher than the scores given for
aesthetics. Participants reported that they found it difficult to distract their attention from the
usability aspect and only judge the image based on aesthetic characteristics. They found it
quite hard to separate the two concepts and I often had to remind them to think about the
image they were looking simply from aesthetics point of view.
Also, all participants placed the text, price tag, menu bar cards on the low quality-boring
quarter and most product image cards were placed at the high quality exciting quarter. They
are either not attracted to these elements (texts and fonts) or they found these particular font
types boring and low quality. They seemed to be more interested in the content rather than in
the way it was presented to them.
The two websites evaluated were selected based on the results of the heuristic evaluations in
the first part of the study: being the best rated in aesthetics and the best rated in usability.
These designs had very different schemes and navigation systems and the below figure (Figure
45) shows how the different design elements were perceived on the usability and aesthetics
axis. As the results show that usability has a more important role in the customer journey, but
there also has to be a good balance between aesthetics and usability to create a better user
experience and to make the journey enjoyable.

58

Usability

Aesthetics

Figure 45 Perception of aesthetics and

usability on two fashion websites

Interviews after the test

Post-interview questions (Appendix 9) were designed to capture perceptions of the two
different designed fashion website both in terms of aesthetics and usability allowing
participants to reflect feelings and thoughts about these. Participants were asked to compare
the two website designs as well as to report strengths and weaknesses of each website. My
intention was to find out how the two websites were perceived against each other.
The post-test interview revealed that 80% of the respondents would recommend French
Connection website to a friend, because for them it had a better style and images and it was
clearer and easier to use. They also said that French Connection website was better structured
and that its overall layout was better, as well as that it was more functional and had better
usability. The other 20% who would recommend Whistles website to a friend, argued that: I
prefer that style, it fits me more and because I found that one the more aesthetically pleasing ,
and The branding is better, it is more inviting and more exciting .
The French Connection was described by participants as a simplistic, easy-to-use, useful,
cutting edge website while Whistles was described as slick, contemporary, friendly and exciting
website. As participants found it very difficult to distract the aesthetic qualities from the
functional qualities it is interesting to see that French Connection received more functional
adjectives while Whistles received more aesthetic adjectives.
59

During the interview participants were asked to compare the two websites against each other.
The intent of this question was to investigate the strengths and weaknesses of the websites.
French Connection was described as having too much white and that colours were boring on
its website, but it was recognized as the more organized and clearer design with better
structure, functionality and with a more minimalistic and fresh look. Whistles received
controversial statements. It was described as having the better contrast and better colour
choices with better services by most participants. Those ho liked Whistles desig o e
F e h Co e tio s desig said that it as o e sophisti ated a d o e edg , o e
aspirational and more appealing but they also admitted that it was not very functional. Those
who preferred the French Connection website described Whistles as old fashioned and messy.
When participants were asked to compare each website to a car, French Connection was
associated with Mini Cooper, BMW (2/10), Maserati, Fiat 500, Renault and Vauxhall (Figure
46).

Figure 46 Associations of the French Connection website with cars

Whistles on the other hand was compared to Audi A3 and Audi Q5 (Figure 47). By asking
participants to compare the websites to a different product from a different domain (i.e.
analogical thinking) helps to better examine their perceptions of the websites.

Figure 47 Associations of the Whistles website with cars

Most online shoppers are familiar with customer reviews and ratings so I wanted to ask my
participants to review the selected websites. I asked them to give an overall rating for the
website they preferred on a 10-point scale. Participants were also asked to explain why they
gave that score to the website. On average French Connection was rated 7.25 by the eight
participants who preferred that website. Whistles was rated 8.5 on average by the two
participants who preferred it over French Connection. F e h Co e tio s e site as
60

preferred by o e pa ti ipa ts e ause of its fu tio al featu es a d usa ilit ut Whistles

website got better rates for its colours on the website. Bottom line is that usability is more
important than aesthetics but appealing aesthetics (i.e. colours) is also a desirable feature.
A lot of fashion websites focus on showing more and more features that attract attention,
rather than ensuring that existing features work really well (e.g. sorting, viewing, stock
availability, etc.). Asking what frustrates users is a good way to investigate how existing
features can be improved. Things that participants reported that they would improve on the
French Connection website are; contrasts (2/8), background colour, checkout (2/8), too much
information (2/8), homepage (2/8), zoomi g, I'd change the menu on the leftlike Whistles ,
design elements to be more consistent, and font style. On the Whistles website participants
reported that they would change the background colour (to yellow and sky blue) and they
would change the pop-up window to be suitable for mobile (iPhone) usage.

Results - Focus group interview with paper prototypes

For the third round interviews I have created two different style paper prototypes (Appendix
14 ased o pa ti ipa ts feed a ks f o the se o d ound interviews. Both designs had the
same branding but one had a minimalistic mainly black and white design and the other one
had a colourful scheme (Figure 48). My intention was to expose more knowledge about the
purpose of colours and the importance of the overall design and aesthetics in the customer
journey process. The navigation systems, the product information pages as well as the
shopping basket and checkout pages were all taken from the real websites but mixed in with
my own design features. I have created a website that is colourful and had the navigation
system of French Connection, the website that was preferred by 80% of the participants in the
previous stage. The other design was created by taking the minimalistic design of French
Connection and pai it ith Whistles e lusi e a igatio s ste . Both pape p otot pes
displayed the same dresses and price tags were concealed to make sure they do not bias
pa ti ipa ts a s e s.

Figure 48 Homepage design of the paper prototypes

61

The colourful website looks like entering into a huge department store and having all sorts of
impulses; different brands, colours, smells, furniture all at the same time. Whereas the
minimalistic design is similar to a Sloan Street shopping experience; more white space and less
colourful impulses with the clothes in the centre of attention.
The interviews took place in a focus group format. Both contestants fit the original profile of
participants. The interview took about an hour and the session was recorded by iPhone
(Appendix 15).
First, participants were shown the two homepages and were asked to explain their initial
impressions about the two designs. Their answers revealed that something too crowded on the
ho epage, like the Coats & Ja kets atego o the colourful design would frustrate users
because it appears too messy for them and it is not obvious for them straight away what to do
with those images; whether to click on each of them or to click on the text to reveal the whole
collection of coats and jackets. However, they did like the different other categories on the
colourful homepage and that each had an image of a product from the category. It was
discovered that participants preferred to see the categories with illustrations on the homepage
rather than having images without links or text. The reason reported was that it was easier for
them to find what they needed on the colourful design because the categories were better
visible.
As for the more minimalistic design, one participant said that for her it was a similar
e pe ie e to the Coats & Ja kets atego o the olou ful desig , epo ted ea lie , ut i a
larger scale. The other participant disagreed and explained that because the images were
relatively large and without text, her visual attention was focusing on the dresses rather than
on the menu items in the navigation system. This participant admitted that the website gave
the impression that it had not many categories, whereas the other one had a magazine look
and feel. This was interesting to hear because actually the navigation system of the
minimalistic design had more categories than the colourful design. It appears that the
i i alisti desig a d the la ge i ages di e ted the pa ti ipa t s isual atte tio f o the
navigation system. She also said that for her it appeared that the colourful website had more
products but for her this would mean that she would spend more time on the colourful
website to finally find something to buy. The same participant also admitted that for her the
minimalistic design implies higher quality clothes and a more designer look and feel than the
colourful homepage.
A othe i te esti g aestheti ele e t o the ho epage as the ale e u ite
ithi the
main navigation. Both participants agreed that the ale e u poi t has a i po ta t ole as
they explained that they would check the clothes on sale first in order to secure a bargain on
the website. This has also been reported earlier in the previous stages of this research. The
colourful homepage has the ale e u poi t itte ith ed te t hile the othe e u
ite s a e da k g e ; this solutio as ette ated tha the othe o e hi h did t ha e the
ale e u poi t highlighted ithi the ai a igatio .

62

Another important feature mentioned on the homepage was the delivery and returns
information and policy. Participants explained that these are important information and
depending on the intention of the visit on the website they would check it either at the very
beginning of the journey or at the very end. This is because they reported that if they are
browsing on the website without any explicit idea or intention to buy something, they would
check this information at the end of the journey or when they found an item that they decided
to buy. On the other hand, if they were looking for a specific item on the website with the
precise intention to buy it, they would first check the delivery and returns information early in
the journey to avoid any disappointment later (e.g. the company does not deliver to a specific
country).
Then participants were shown the navigation pages with the sub-categories and dresses
(Figure 49). The conventional left hand side secondary navigation system was rated better
amongst participants as one of them explained that for her it works better as she can pre-set
her filters (e.g. the correct size, a particular colour, the amount she wants to spend, etc.) and
this way she can avoid the disappointment that could happen after she would fall in love with a
dress which would turn out not to be available in her size.

Figure 49 Navigation system of the two paper prototypes

The other important feedback was regarding the size and quality of the images. It was
acknowledged by participants that larger images are better when browsing. This has also been
identified in earlier stages.
On the product information page the participant who preferred the minimalistic design
explained that for her the minimalistic design was more appealing because it seemed more
realistic than the colourful one (Figure 50). She said that she could better believe to the
i i alisti e site as it sho s the d ess as si ple a d a as it is i ealit , he eas the
othe o e see s like a d ea . he e plai ed e that fo he the hite a kg ou d o ked
better when it came to examining the dress and zooming in and out, because the white
a kg ou d offe ed a ette o t ast a d she ould see the d ess a d ho it looks i ealit .
She admitted that for her the white background provided better confidence and closer feel to
reality. She explained further that on the colourful website she felt that they are trying to sell
her the whole website and branding, whereas on the minimalistic design she had more
confidence that the dress observed does look and feel how it does in real life.

63

Figure 50 Product view page on the paper prototypes

In the earlier stages of this research having white background when displaying clothes on
websites as well as when examining the clothes on the website has also been favoured by
participants.
Othe aestheti ele e ts su h as the so ial edia utto s a d the Add to asket utto s
e ei ed atte tio . It as ad itted pa ti ipa ts that Fa e ook s Like utto as e
irritating as one of the participants explained that she hated the fact that the company selling
the clothes to her had the intention to encourage her to promote their product on Facebook
and she also added that she felt that this was a violation of her privacy. Other participants from
the earlier stages also reported concerns about the social network icons and their role when
buying clothes online. They all said that they do not understand the purpose and that they
o side ed it as ei g too u h .
The othe outsta di g ele e t as the Add to Basket utton. Both participants agreed that
the si gle utto ith the Add to Bag te t as the ette optio o the olou ful e site. It
was implicit that it was a single button and it was described as being concrete about what
needed to be done with it. Whereas the other option on the minimalistic design was described
as ot ei g st aight fo a d si e the te t Add to Basket as itte i a lo g g ee
rectangle box with a little arrow at the other end. Participants reported that they were not
sure what they needed to do here in order to make it work. Aesthetically it was considered
inferior because it implied that the usability was worse than the single button design.
At the checkout point (Figure 51) participants explained that security is of primary importance
and they both said that they would only pay with PayPal, especially if they had not have
bought anything from that website before.

64

Figure 51 Checkout pages on the paper prototypes

Participants also revealed that their visual attention is on the price and seeking the next step in
order to buy the dress, rather than on the aesthetic elements on the webpage. This has also
been reported previously when participants explained that at this stage it is more about the
functionality and usability rather than aesthetics. Colours and impressions are not important in
this step of the customer journey as customers only focusing on completing the process and
finish the task of buying a dress online. Their attention is now on the information; shipping
costs, return policy, price, etc.
It as also e ealed that the Co ti ue to hoppi g utto has a i po ta t ole he e.
Participants also reported this in the earlier stages that they did not like it when they were
taken back to the home page and had to start the search from the very beginning. Instead they
preferred to be taken back to the last item seen to do what the button promised them to do;
continue shopping. The experience would be the same if someone in a supermarket after
placing an item in the shopping trolley would be taken back to the entrance door of the store.
After participants discussed all the screenshots of the customer journey steps and the
aesthetic elements found on these pages, they were asked which website they would
recommend to a friend. They both said that the colourful website was more appealing not only
because of the colours but also because it had a better usability and navigation system. They
said that despite of the fact that the homepage of the colourful design looked as if it was a
marketplace and perhaps too crowded, it was obvious what they had to do with it. Whereas
the othe desig , the i i alisti o e, as o side ed to e ess
e ause o the
ho epage it as t lea fo the
he e to sta t thei jou e . This as i teresting to hear as
in the first round interviews, that was the most commonly mentioned adjective for the
Whistles e site, a d the i i alisti e site had Whistles a igatio s ste a d la out.

Results - Customer journey framework

Based on the findings from the previous interviews and methods I drew up the online
customer journey together with the aesthetic elements at each stage in relation to the website
usability (Appendix 16).
First the re-iterated steps of the customer journey were plotted on a map, showing each step
and the sequence of the steps taken by users. In order to create a generic map I have depicted
the category and the sub-category selection in one single step. Then, I marked the moments of
truth and the critical points (e.g. receiving and out of stock message), the steps that had the
65

ost effe t o pa ti ipa ts jou e s ho epage, zoo i g, et .) based on the feedback

received from participants.
The e a e a ious easo s fo use s to a i e o the fashio e site s ho epage here my
customer journey starts. As users reported during the interviews they receive direct marketing
emails that encourage them to visit the website and to check out the current promotions or
the latest collection. Other reasons for visiting fashion websites included; looking for a specific
type of clothes item or brand, just browsing to get inspiration, and to buy online something
that has already been examined in-store before. Major motivations to visit fashion websites
are reported to be; convenience, speed, ease and sale (bargain hunting). I showed the main
motivating factors to use fashion websites as well as the most mentioned characteristics by
participants relating the online shopping experience with orange at the top left corner next to
the homepage. I also exposed the main reasons for users visiting fashion websites. These are
presented written in turquoise colour below the homepage. Related usability and aesthetic
elements that were observed and re-iterated during the user testing sessions are presented in
green and purple respectively at each step of the customer journey (Appendix 16).

Once the main journey was defined, I grouped the individual steps into five main stages. The
elements of the visual attention and the affordances at each step were described to help
readers better interpret the map. We can observe from the map that the number of different
affordances is increasing as the user interacts more with the website and reaches its maximum
le el at the ele t/E a i e stage he e use s a use the zooming functionality to observe
the product (Appendix 16).
The journey starts on the homepage of the fashion website, where users perceive the most
aesthetic elements on one page (Figure 52). This stage is very important as all first impressions
about the look and feel of the website are formed here. Users instantly judge the homepage by
its isual appea a e a d appeal a d the also e aluate hethe the a d s i age is
consistent with the design of the website and if there is a good balance between the
information density and white space. The key functional element at this stage is the main
navigation system (Appendix 16).
o

Logo, identity

Colours

Text (font, style)

Background image

Menu bar, menu options

Structure, layout (header, footer), symmetry, space (use of space, white space) , oddity
(quirkiness)

Navigation, site-flow -> astute site-flow that guides users to follow instinctively an
obvious path set by the brand

Sale, special offers, multi buy discounts

66

Buttons: button graphics, size, colour, text

Links

Lists

Animation (size, quality)

Audio content

Video content

Pop-ups, banners, ads

Figure 52 Aesthetic elements on the homepage

The jou e o ti ues alo g the o e s se tio that is ea hed ia the ai a igatio
menu or central image and the browsing stage begins. At this step users observe the individual
products in a row by scrolling down the page or mouse over the images until selecting an item
for further investigation. The number of aesthetic elements is reduced here but some new
aesthetic elements such as price tags, items presented in a row and image sharpness become
part of the visual experience. Other important aesthetic elements are the general background
and the context in which the model and/or the clothes items are presented. At this stage
functional elements become more important for the user as they try to find their way on the
pages. Functional elements include search feature and product filtering (filter products by
brand, category and by price, etc.) with speed and stock accuracy becoming concerns as users
reported negative experiences regarding these. In the next step users would select something
that caught their attention by pointing and clicking with the mouse. Before examining the
product users can check a number of product related information, such as; product
description, special offers or multi-buy discounts, stock availability, etc. Aesthetic elements
within this step of the journey include; page layout, text style and buttons. Usability features
include; the description of the product that is easy to understand, stock information that is
accurate and affordances that are intuitive to use (e.g. buttons and links). The moment of truth
comes when the user examines the selected item by zooming in and out, rotating the product
on the screen to observe it from all angles and alternative views. It is all about functionality
here that is what the user can afford doing with the online product to make sure that it fits
their needs and expectations. Therefore, product zoom, auto-zoom and alternative view
optio s a e esse tial ele e ts of this stage. Featu es like You ight also like as ell as
Co plete the look e e all o side ed to e useful pa ti ipa ts i this p oje t. Checking
product details like sizing, the composition of the clothe (material and fabric description) as
well as checking delivery and return information are all important actions before putting the
item in the shopping basket. Putti g the d ess i to shoppi g asket
li ki g o Add to
Basket o Che k Out utto s, use s a go st aight i to thei asket ie
he e the a echeck their selection (i.e. the type, size, colour, quantity and price) and/or again have a look at
the delivery/returns policy. If they are happy with their selection users can proceed to
checkout and enter personal details or login (Appendix 16).
I also wanted to provide the reader some hints about the thoughts and feelings of users while
navigating on the fashion websites, so I incorporated three scopes defining each stage of the

67

jou e f o the use s pe spe ti e; Thi ki g , Feeli g a d E pe ie e . These include

quotes from the participants taken from the testing and interview sessions (Appendix 16).
One of the most prominent outcomes of this study and this drawing is that the observer can
see how the visual attention shifts form the aesthetic elements to the usability of the website
and its functional elements. In the next section of the drawing I depicted the relationship
between the aesthetic and usability elements at each stage of the customer journey. I drew
different sized and coloured circles representing each element of the journey; the purple
coloured circles relate to aesthetics and the green circles to usability. The bigger the size of the
circle the more participants mentioned that element (either in a good or bad way), and the
higher it is positioned the stronger emotions were observed with participants. Where the
element received positive comment the circle was drew on the enriched experience side of the
pi tu e, he eas if the ele e t had a egati e effe t o pa ti ipa ts jou e it as d e o
the deprived experience side of the diagram (Appendix 16).
It is interesting to note that on the homepage conventional design and look got on the
deprived experience side but the conventional navigation system received positive comments
and is on the enriched experience side. The main outcome of the study is shown on the last
diagram (at the bottom of my customer journey map) that shows how the visual attention
shifts from aesthetics towards usability as the customer goes along the online journey
(Appendix 16).
I also showed opportunities to delight customers as well as opportunities for future
improvements; the homepage is a stage of the journey where customers can be highly
influenced by the design (as explained in previous chapters about the importance of first
impressions on e-commerce websites) and at this stage they are the less influenced by the
usa ilit e ause the ha e t eall sta ted to e plore and use the website. At the navigation
stage users can be highly disappointed if the navigation system is not instinctive enough to
easil i te a t ith. It is the e pe tatio of the use s that a e site s a igatio s ste should
follow their mental models and should be easy to use which implies that opportunity to delight
at this stage is not high. At the zooming point customers get really close to the product and this
is the main moment of truth of the whole journey, therefore here both the opportunity to
delight and the opportunity to dismay are high as this is a critical point. The rest of the stages
a e si ila l o oto ous to the use , the ould outi el o e to the Ne t utto a d
follow instructions of the system to complete the journey as quickly as possible. The
opportunity to delight here is minimum as customers have to pay, but if there is not enough
information on the site customers could be disappointed and this could lead to abandoned
shopping basket (Appendix 16).

68

Figure 53

DISCUSSION

In this project my aim was to reveal the digital aesthetic elements that d i e use s customer
journey on fashion websites and to understand how they contribute to this journey and to the
user experience. I also wanted to measure the emotional responses to these elements of the
selected websites. The ultimate goal of this project was to develop a generic mapping of the
usto e s jou e o fashio e sites that sho s the i pa ts of digital artefacts in relation
to usability and also to the user experience. This has been achieved by identifying the digital
a tefa ts, etapho s a d pe ei ed affo da es a d thei i pa ts o the use s shoppi g
experience during the observed steps of the customer journey on fashion websites. Based on
the information collected and via the various methods used to collect the information a map of
the customer journey (Appendix 16) has been outlined and explained in the previous chapters.

69

Aesthetics and usability implications

Usability and user experience conceptions have developed so much in the recent years and
there is more and more focus on the user engagement and the aesthetic design of user
interfaces. There are more and more academic researches that focus on the user experience
and aesthetics and most e-commerce companies are interested in how we choose what we
buy when they are designing their websites. Aestheti s i flue e g eatl people s de isio s
and their choices although most people think that their decisions and judgements of the
functional features of products are rational.
Emphasis on aesthetic design and the influence of emotions in design are receiving more and
o e atte tio . While t aditio al usa ilit fo uses o use s task a d a o plish e ts, use
experience (UX) emphasizes a more holistic vie ; u de sta di g the o ple it of use s
experiences (Hartmann, Angeli, & Sutcliffe, 2008) as well as including aspects of look and feel,
aesthetics and design.
Aesthetics influence people when looking and observing physical products and this influence
transmits over onto the internet as well. When viewing an electronic interface (e.g. a website)
the user will make a judgment about the aesthetic quality of the visual experience based on
various subjective and objective dimensions.
In previous studies and researches it has been found that aesthetics is a deciding factor in
whether a customer trusts a website enough to make a purchase on it and that people made
far reaching inferences about the qualities of online banking websites on the basis of simple
screen shots, or very short interaction sequences (Tractinsky & Lowengart, 2007).
Aesthetics will always influence decisions anywhere people are given a choice which means
that e-commerce companies should incorporate aesthetic design more closely with usability.
Tractinsky et al. demonstrated that people use aesthetics to judge appeal and perceived
usability. However, as revealed by this research this halo effe t appea s to fade afte i itial
use.
Although the e site s design can guarantee the initial attraction, only the combination of
usability and aesthetics will ensure that consumers keep using it in the future. Previous
researches and studies show that aesthetics have power, but design on its own doesn't make a
website complete. Perceptions of usability are also affected by perceptions of aesthetics.
There has to be a closer relationship between design and user experience, because aesthetics
and usability have to complement and support each other in order to create the ultimate user
experience.
Tractinsky et al. demonstrated that aesthetic perceptions were an important and culturally
variable component in the rating of the user experience and service quality in an experiment of
ATM machines in Japan which focused on low-level design elements such as buttons and
colours. My research however used fashion websites that have more complex interface

70

elements and structures and it aimed to measure the overall user experience by focusing on
both aesthetics and functional features.
Mahlke et al. (Mahlke, Lemke, & Thuring, 2007) found that although aesthetics had a great
effect on emotions and they also found that usability is more important than aesthetics when
comparing the user experience for the use of the products.
Hartmann et al. investigated website attractiveness through the Adaptive Decision Making
theory which was developed into a questionnaire to evaluate three websites that shared the
same brand and topic but had different designs. They discovered a framing effect in that user
experience and perception varied according to the question (Hartmann, Sutcliffe, & De Angeli,
Investigating Attractiveness in Web User Interfaces, 2007). Users rated the aesthetically more
appealing website superior to the others which on the other hand were rated for better
usability.
The main consequence of this research is that on fashion websites women analyse usability
features more seriously than they do with the aesthetic elements. The research revealed that
aesthetics elements of fashion websites are not as important as to have an easy-to-use and
functional interface. All participants agreed that they would rather use an aesthetically less
appealing website given that it has the better usability. Furthermore, 80% of the participants in
the second part of the research would recommend the less colourful website with the more
conventional usability, because it was clearer for them how to use it and it was easier for them
to find what they needed.
However, it is still very important that the overall aesthetics match with the style of the clothes
and with the style of the e site s desig . Participants claimed that the quality of the
e site s desig a d the ualit of the lothes it is selling are correlated; that means that the
better quality the clothes a website is selling the better the design is expected from that
website. The research also revealed that on average only 30% of use s visual attention is
focused o the e site s design and that 70% of their visual attention fixated on the clothes it
is selling.
The success of a fashion website therefore lays in the triangle of presentation (design and
visual power), usability (functionality and ease-of-use) and interactivity (enjoyment for the
user). The most important elements of these environments are; homepage, navigation
structure, the quality of photography, colours and any multimedia solution showing the clothes
from a closer and photorealistic perspective. As the user gets more involved interacting with
the fashion website, his or her satisfaction will depend more on the usability of the functional
elements, such as the navigation and zooming facilities.

71

Customer journey aspects

Fashion websites as well as other e-commerce platforms are seeking to blend together the
latest fashion trends with the latest technologies and are aiming to improve the interaction
between humans and computers with the ultimate intention of persuading the customer to
buy. Every fashion brand aims to create a unique style that is embodied through visual cues to
e ha e the i te a tio ithi the a d s o li e e i o e t as ell.
It is important to note that the type of clothes as well as the price of the clothes will influence
the information gathering process. For example, expensive pieces of clothes and fashion
accessories will be subject of a more intense research process and more conscious and rational
decisions, whereas with cheaper type of clothes (i.e. high street fashion) users will usually
spending less time researching and will make a more spontaneous decision.
This could be the reason why many exclusive fashion house use a minimalistic design that
keeps the usto e s atte tio o the p odu t a d tries to stimulate positive emotions after a
rational consideration (Chen, 2009) while high street brands use more colours to favour the
look a d feel heu isti s (Chen, 2009).
The desig of the e site does t atte if the lothes it is selli g is ot high ualit .
Pa ti ipa t s o
e t i the se o d pa t of the testi g sessio s, Appe di )

This research found that users are predominantly looking at the clothes on the websites and
trying to find the way to access them, but as they are constantly interacting with the website it
is inevitable not to generate perception about the aesthetics and usability. The interviews
revealed that at the beginning of the custome jou e use s atte tio fo used more on the
aesthetic elements and the general design of the website and that they instantly formed
opinions about the visual appeal based on their first impressions.
Creating a good first impression is especially important for those e-commerce companies
whose services and products are in great competition with many others on the web. If there is
a la ge sele tio of si ila e sites, selli g si ila se i es o p odu ts, if use s do t like hat
they see or experience they will quickly move onto the next one. However, if customers are
looking for a specific product from a specific website, either because it is the only website
selling the product or because their previous experience was very good, then the company
could afford present in any design they prefer, because the customer has already decided to
buy from that website, therefore he is not going to be affected by the aesthetics of the
website.
Later on the journey the visual attention narrows down to the product and at the output stage
their attention is focused more on functional elements and usability. Depending on the task
use s attention on the visual and functional attributes varies; if it is an exploratory search task
their attention is on the visual, aesthetic elements, and when they are completing directed

72

actions functionality and usability become more important as the goal is to finish the task as
easily and as sooner as possible.
This study revealed that simplicity and good navigation were among participants the most
desired features of the fashion websites. It was claimed that the navigation should be intuitive
a d that the e pages should ha e a beautiful sheen where you can get to the point quickly
pa ti ipa t s feed a k, Appe di . These results also show that comfort and speed overwrite
the significance of aesthetics on fashion websites and that usability can have a great effect on
the customer journey (Appendix 16).
The most exciting part of the customer journey is the moment when users interact with the
product. This is the moment of truth of the whole journey because this is when users visualize
themselves wearing the garment and imagining what they are going to do with it, how they are
going to wear it, etc. This poi t is the i tual ealit , he the o li e i tual d ess e o es a
reality in the minds of the women as they try to visualize the dress on themselves and within
their own contexts. At this moment it is all about functionality and the zooming facility. On the
other hand the checkout stage is the most monotonous part of the journey participants
reported. Companies and web designers should make an effort and make this the last step of
the customer journey more pleasurable (Appendix 16).
Trust is also an important element in the customer journey process. The design of the website
can also influence perceptions of trust. Good quality photographs and images of the products
a i du e t ust o thi ess addi g a hu a tou h if the ga e t is sho i o te t o
worn by a model.
According to ut liffe s heu isti s the choice of media (video and audio) could attract attention
Music can attract by setting the appropriate mood for a website . This was proven not to be
true on fashion websites as automatic music and sound features as well as pop-up windows
and adverts were all considered as negative factors in the overall user experience on fashion
websites.
Use s pe eptio s of website designs can induce a wide variety of feelings and attitudes.
Aesthetics can influence the online purchasing decisions and aesthetics play an important role
in capturing the customer journey of e-commerce companies in order to build a pleasant and
trustworthy online platform.

73

CONCLUSION

I this p oje t
ai
as to e eal the digital aestheti ele e ts that d i e use s usto e
journey on fashion websites and to understand how these elements contribute to the journey
and to the user experience. I also wanted to measure the emotional responses to these
elements of the selected websites. The ultimate goal of this project was to develop a generic
mapping of the custo e s jou e o fashio e sites that sho s the i pa ts of digital
artefacts in relation to usability and also to the user experience. This has been achieved by
identifying the digital artefacts, metaphors and perceived affordances and their impacts on the
use s shoppi g e pe ie e du i g the o se ed steps of the usto e jou e o fashio
websites. Based on the methods used and the information collected a customer journey map
has been outlined and explained in the previous chapters.
What not has quite been accomplished according to my expectations and objectives is the
critical evaluation of the models and frameworks of previous researches and the analysis of
industry practices related to customer journey and aesthetic elements in online environments.
However, I have provided an overview of these in the literature review and the methodology
chapters and in order to explore practices and stakeholders views related to user experience I
have had conversations and discussions with industry experts as well as end-users.
My research questions have all been answered in this project which related to the customer
journey and the aesthetic elements that contribute to the overall user experience within this
journey. Perhaps one thing should have had more attention in this project is the missing
elements that could improve the overall user experience as well as the usability of fashion
websites, therefore this could be subject for further research within this area.
The central implication of this research is the conclusion that women s judgements of usability
features are more critical than their verdicts on aesthetic elements on fashion websites. The
research revealed that for women aesthetics elements of fashion websites are not as
important as to have an easy-to-use and functional interface. All participants agreed that they
would rather use an aesthetically less appealing website given that it has the better usability.
Furthermore, 80% of the participants in the second part of the research would recommend the
less colourful website with the more conventional usability, because it was clearer for them
how to use it and it was easier for them to find what they needed.
The main motivation of this project is to better understand the e-commerce environments and
the relationship of aesthetics and usability as well as the online service design. The central idea
of this dissertation project was to uncover the online shopping experience from the user's
perspective with respect to digital artefacts and metaphors that guide users through the online
journey. The reason for which the author of this project chose to compare fashion websites is
that these online platforms have rich content and that these are very much dependent on the
visual appearance.

74

Mapping the customer journey process is primarily tracking and describing the customers
experiences as they interact with an interface or service. The generic customer journey map
that I created reveals opportunities for e-commerce companies for improvement and
innovation; therefore it acts a strategic tool to ensure that the human-computer interaction is
a positive experience. My customer journey map not only helps companies to better
understand the end to end journey of the customer but also to improve how the various
functions and tasks are involved in delivering the ultimate customer experience.
Many e-commerce companies would agree that successful customer journey consists of a
quick and easy purchase on the website. But it is not only about functionality and usability;
aesthetics are also playing an important role in the overall user experience and therefore in the
customer journey. Aesthetic elements are essentials for the visual design of interfaces or
environments as well as for the design of the navigation system and the information
a hite tu e i te s of the st u tu al desig of the i fo atio spa e i o de to eet use s
expectations. Aesthetic elements follow through the customer journey and support the user by
providing all sorts of different information. For example, in a shop customers orientate
themselves by relying on signs and symbols but they also perceive colours and shapes as well
as textures and materials. When making a phone call, users notice the colours on the screen,
the shapes of the buttons, the texture of the phone, the sounds it makes, and so on. These all
contribute to the overall customer experience; therefore have an effect on the customer
journey.
The research started with literature review and gathering information from related websites,
as well as talking to stakeholders in the fashion industry (both owners of fashion websites as
well as end-users). From the literature review I got a good insight of previous researches that
focused on aesthetics and usability on websites and I was able to take away significant
knowledge regarding aesthetic heuristics and testing methods.
I set up my own heuristics to measure the aesthetic appeal on six high street fashion brands
websites. I have adopted several points from different sources (e.g. Travis s, Sutcliffe s,
Tractinsky s, Avery s a d Alsudani s heu isti s) since I have used many of their adjectives and
statements to compose my own set of guidelines for fashion website aesthetics. My heuristics
were composed on three different dimensions; aesthetics, usability and user experience.
Hassenzahl et al. (Hassenzahl, Burmester, & Koller, 2003) asked users to compare and evaluate
six different interface designs for user experience, hedonic and appeal qualities. Hassenzahl et
al. concluded that both the user experience and the hedonic qualities contributed to the
overall aesthetic judgement of the interfaces. However, none of these studies showed which
aesthetic elements (eg. colours, layout, etc.) contributed to the overall judgement by
participants. In this research, a customer journey map helps to identify which aesthetic
elements are being evaluated at which stage.
Some of the limitations of the methodology and techniques are that the number of
participants was not representative and the websites were only tested on women with similar
age range; between 34 and 39. However, culturally the sample was very different (included
75

English, French, Italian, Dutch, German, Swiss and Hungarian participants). The participants
were only representing a specific segment of the target population and some of them had HCI
background. The websites were not randomly chosen and they meant to represent a certain
market segment. Another restraint is the fact that the websites were tested in July during the
summer sale period and all fashion websites had an altered homepage during this period.
During the evaluation sessions contestants were given a directed search task and they were
observed using the websites. Based on the observations a customer journey was mapped. It is
quite difficult to give objective feedback on aesthetics since it is a very personal entity.
Everyone has a unique taste which is difficult to explain therefore judging aesthetics is hard
without involving o e s o su je ti e feelings. When participants were given a directed task
that requested them to find a dress that they would wear for a wedding, they started looking
for attractive objects on the websites. This could have had a bias on their overall aesthetic
judgement about the website, since when the participant found no suitable (aesthetically not
pleasing) dress then her overall opinion about the website aesthetics could have been biased.
The fa t that she has t ee a le to fi d a att a ti e ite ould ha e had a effect on her
feelings therefore her opinion about the environment (website) was prejudiced. Therefore, for
future research I would suggest asking participants to find the same item (i.e. dress) on
different websites and measure the aesthetics and usability as well as to compare the journey
on those websites. This a o e ould i i ize the ha e to ias pa ti ipa ts a s e s
regarding general website aesthetics.
The second phase the project included an intense user-testing period focusing on the aesthetic
elements of the websites and evaluating those within the customer journey framework. I used
commercial methods to gather quantitative data alongside the qualitative data. It was revealed
form these sessions that users associate online clothes shopping with convenience, speed,
ease of use and getting good deals. All participants reported different ways of browsing and
selecting fashion items online but they all agreed that the e site s desig ould affe t the
purchase on a fashion website. The most important functional features of a fashion website
were considered to be the zooming, the quality of the images, the navigation system, and the
information provided about the clothes as well as the checkout and return process and
information, the search and filtering options and security.
The results of the second phase helped to construct the final framework of the customer
journey with the aesthetic and usability elements that drive the journey. This was reiterated in
the last phase of the project which included a focus group type interview including testing two
paper prototypes of different website designs. One of the major limitations of the third stage
of the project was the low number of participants. In spite of this, the interview repeated the
earlier found effects that users prefer to have better usability than better aesthetics. Of
course, the personality and the personal taste and preference will determine which aesthetic
design they like and they all have individual mental models as to how they do their shopping
and how they use a website. For this reason it is so important for e-commerce companies to
know their users in order to design a website that is both enjoyable to use for the user and
aesthetically it is pleasing.

76

While most fashion websites will try to use the power of visuals to draw attention and to retain
the customers and to push them through the purchasing process, the success of a fashion
website will lay within the triangle of aesthetics (design, visual power), usability (functionality
and ease-of-use) and user experience (enjoyment for the user). The most important elements
of these environments are; homepage and the navigation structure, colours, photography,
zooming facilities and the relevant product information (including the delivery and returns
information). This research found that aesthetics and usability are closely related as they both
had a strong influence on the appeal of the fashion websites, but at different levels and at
different times. The homepage has a stronger appeal and influenced more by aesthetics before
use, but as the user goes further along the customer journey and interacts with the website
the usability elements and functions become more important in the overall judgement until
the point when it overwrites the importance of aesthetics (Appendix 16). Hence, it is very
i po ta t that a e site s desig p o ess i ludes use esea h hi h is o pleted efo e
the construction process and that there should be interaction between the creative and the
user experience teams. Furthermore, both creative and user experience teams should see the
process as a customer journey where different steps imply different user requirements from
both aesthetic and usability point of view.
Lessons learnt from the project include that like with most other research methods, there is no
one single right way to build an experience map and that first there has to be identified what
the map needs to point at, like the most prominent parts of the customer experience that help
identify the moments of truth, and that helps to visualize each step of the journey in a
meaningful way. Customer journey map can help e-commerce companies to identify parts of
the journey that need more control over and parts that are out of their control. The
visualisation of the customer journey map can also encourage interest and improves the
readability of the journey.
For related future work the author recommends to refine the measurements and involve
statistical analysis as well as to uncover the different motives for shopping clothes online and
to compare the real life in-store customer journey to the online experience to expose more
about the aesthetic elements during the shopping experience.

77

References

Adams, A., & Blandford, A. (2005). Digital li a ies suppo t fo the use s i fo
Denver, CO, USA: JCDL 2005, 7-11 June 2005.

atio jou e .

Angeli, D., Sutcliffe, & Hartmann. (2006). Interaction, usability and aesthetics: What influences
users' preferences? DIS '06 Proceedings of the 6th conference on Designing Interactive
systems, 271-280.
Brugnoli, G. (2009). Connecting the Dots of User Experience. Journal of information
architecture, Volume 1 Issue 1, Journalofia.org | ISSN 1903-7260.
Capota, Hout, v., & Geest, v. d. (2007). Measuring the Emotional Impact of Websites: A Study
on Combining a Dimensional and Discrete Emotion Approach in Measuring Visual
Appeal of University Websites. Designing Pleasurable Products and Interfaces, (pp.
135-147). Helsinki, Finland.
Carrie, A. (2003). Only screen deep? Evaluating aesthetics, usability, and satisfaction . A thesis
submitted in partial fulfillment of the requirements for the degree of Master of Arts in
the Department of English in the College of Arts and Sciences at the University of
Central Florida. Orlando, Florida.
Chen, J. (2009). The Impact of Aesthetics on Attitudes Towards Websites. Retrieved from
http://www.usability.gov/articles/062009news.html
Cskszentmihlyi, M. (1990). Flow. London: HarperCollins e-books.
Dubberly, & Evenson. (2008). The Experience Cycle. Interactions, 11-15.
Eckman, M., & Wagner, J. (1995). Aesthetic Aspects of the Consumption of Fashion Design: the
Conceptual and Empirical Challenge. Retrieved 09 22, 2012, from
http://www.acrwebsite.org/: http://www.acrwebsite.org/search/view-conferenceproceedings.aspx?Id=7825
Fogg, B. (2003). Persuasive Technology: Using computers to change what we think and do. San
Francisco: Kaufmann.
Hartmann, Angeli, d., & Sutcliffe. (2008). Framing the User Experience: Information Biases on
Website Quality Judgement. CHI 2008 Proceedings, Exploring Web Content, (pp. 855864.). Florence, Italy.
Hartmann, J., Sutcliffe, A., & De Angeli, A. (2007). Investigating Attractiveness in Web User
Interfaces. CHI 2007 Proceedings: Empirical Studies of Web Interaction. San Jose, CA,
USA.

78

Hartmann, J., Sutcliffe, A., & De Angeli, A. (2008). Toward a Theory of User Judgement of
Aesthetics and User Interface Quality. ACM Transactions on Computer-Human
Interaction, Vol.15, No. 4, Article 15.
Hassenzahl, Burmester, & Koller. (2003). AttrakDiff: Ein Fragebogen zur Messung
wahrgenommener hedonischer und pragmatischer Qualitat [AttracDiff: A questionnaire
to measure perceived hedonic and pragmatic quality]. Mensch&Computer, Interaktion
in Bewegung, pp.18.
Hoffmann, R., & Krauss, K. (2004). A Critical Evaluation of Literature on Visual Aesthetics for.
Annual Research Conference of the South African Institute of Computer Scientists and
Information Technologists (pp. 205-209). Western Cape, South Africa: Institute for
Computer Scientistc and Information Technologists.
Kim, J., Lee, J., & Choi, D. (2003). Designing Emotionally Evocative Home Pages: An Empirical
Study of the quantitative relations between design factors and emotional dimensions.
International Journal of Human Computer Studies, 269-298.
Lavie, T., & Tractinsky, N. (2003). Assessing dimensions of perceived visual aesthetics of web
sites. Beer Sheva, Israel: Int. J. Human-Computer Studies.
Lindegaard, G., Dudek, C., Sen, D., Sumegi, L., & Noonan, P. (2011). An Exploration of Relations
Between Visual Appeal, Trustworthiness and Perceived Usability of Homepages. ACM
Transactions on Comuter-Human Interactions, (p. 30).
Lindgaard, Fernandes, Dudek, & Brown. (2006). Attention web designers: You have 50
milliseconds to make a good first impression! Behaviour & Information Technology,
25., 115-126.
Lindgaard, G., & Dudek, C. (2002). What is this evasive beast we call user satisfaction?
Interacting with Computers 15 (pp. 429-452). Ottawa: Elsevier Science B.V.
Mahajan, R., & Schneiderman, B. (1997). Visual and Textual Consistency Checking Tools for .
IEEE Trans.Softw.Eng, (pp. 722-735).
Mahlke, S., Lemke, I., & Thuring, M. (2007). The Diversity of Non-instrumental Qualities in
Human-Technology Interaction. Berlin: MMI-Interaktiv, Nr. 13, Aug 2007, ISSN 14397854.
Molly Eckman, J. W. (1995). Aesthetic aspects of the consumption of fashion design: The
conceptual and empirical challenge. Advances in Customer Research, Volume 22, 646649.
Ngo, Teo, & Byrne. (2003). Modelling Interface Aesthetics. Information Systems, 25-46.
Nielsen, J., & Molich, R. (1990). Heuristic evaluation of user interfaces. Proc. ACM CHI'90 Conf.,
(pp. 249-256.). Seattle, WA, 1-5 April.

79

Norman, D. A. (2003). Emotional Design: Why We Love (or Hate) Everyday Things. New York:
Basic Books; 1 edition.
Payne, J. W., Bettman, J. R., & Johnson, E. J. (1993). The Adaptive Decision Maker. Cambridge:
Cambridge University Press.
Sutcliffe, A. (2002). Assessing the Reliability of Heuristic Evaluation for Website Attractiveness
and Usability. Proceedings of the 35th Hawaii Conference of System Sciences (p. 137).
Big Island, Hawaii: HICSS'02-Volume 5.
Sutcliffe, A., & deAngeli, A. (2005). Assessing Interaction Styles in Web User Interfaces. 405417.
Tractinsky, & Lowengart. (2007). Web_Store Aesthetics in E-Retailing. Academy of Marketing
Science Review, Vol.11, No.1.
Tractinsky, N., Katz, A. S., & Ikar, D. (2000). What Is Beautiful Is Usable. Interacting with
Computers, 13, 127-145.
Tungate, M. (2008). Fashion Brands: Style From Armani to Zara. London: Kogan Page Limited.
Xue Li, H. Y. (2011). Sparse representation based visual element analysis. 18th IEEE
International Conference on Image Processing.

Internet resources:
http://oxforddictionaries.com/definition/english/aesthetics (accessed 22/09/2012)
http://vestalmedia.com/2011/11/15/are-you-an-internet-expert/ (accessed 23/07/2012)
http://www.jonathanbriggs.com/ecommerce/designing-customer-journeys-lecture5,632,AR.html (accessed 22/05/2012)
http://www.mycustomer.com/topic/customer-intelligence/customer-journeymapping/105167 (accessed 22/05/2012)
http://www.plongstreet.com/dissertation-abstract (accessed 12/08/2012)
http://www.webcredible.co.uk/user-friendly-resources/web-usability/aestheticsusability.shtml (accessed 12/08/2012)
http://www.websiteoptimization.com/speed/tweak/blink/ (accessed 12/08/2012)
http://www.surl.org/usabilitynews/42/shoppingcart.asp (accessed 28/06/12)
http://www.nomensa.com/blog/2008/the-shopping-cart-metaphor-in-e-commerce-websites/
(accessed 05/09/2012)
http://wiki.answers.com/Q/What_is_aesthetics#ixzz26HzZnPa4a (accessed 14/09/2012)
http://www.attrakdiff.de/en/Services/AttrakDiff-Basic/ (accessed 04/07/2012)
http://www.userfocus.co.uk/resources/homepagechecklist.html (accessed 03/07/2012)
http://uxdesign.smashingmagazine.com/2011/12/16/guide-heuristic-website-reviews/
(accessed 12/08/2012)
http://www.uxforthemasses.com/online-survey-questions/ (accessed 24/06/2012)
http://www.thinkbuzan.com/uk/registration/freetrial (accessed 24/08/2012)
80

Appendix 1: Project Proposal for MSc Human-Centred Systems

Name: Anna Tamasi
E-mail address: annatamasi@yahoo.com; anna.tamasi1@city.ac.uk
Contact Phone number: 07703737718
Project Title: Aesthetic elements supporting the customer journey of an online shopping
experience
Supervisor: Dr. George Buchanan

Introduction
User-centred approaches like service design, design thinking and customer journey mapping
(CJM) are emerging trends and are useful tools to measure the user experience as well as to
improve the quality and effectiveness of the interactions of customers with the brand.
A usto e s jou e i a shop is guided shop assista ts a d fa ilitated by customer service
representatives, but on a website the customer is on his own. Fashion websites are advertising
platforms where companies advertise and sell goods that are then bought by customers.
Customers rely on digital metaphors and artefacts that drive them through the journey and
contribute to the customer experience such as layouts, navigation, style, colours, white space,
photographs, etc. The roles of the metaphors and digital artefacts are to enhance the use of
the user interface and to guide the customer through the journey and to provide the customer
with a smooth flow of the shopping experience. These artefacts and metaphors must be
i te p eta le a d e e e ed the use s a d should eet the usto e s e pe tatio s
(Lanquetin, 2007).
In order to provide an outstanding customer experience and having customers coming back to
the website companies need to invest in creating excellent usability. Furthermore, to maximise
the reach of a wider customer segment companies should also consider accessibility issues. It is
not easy to create an online environment that is both usable and aesthetically appealing at the
same time. There are trade-offs all the way throughout the user-centred design process that
companies have to consider when making decisions on design and usability.
The central idea of this dissertation project is to uncover the online shopping experience from
the user's perspective with respect to digital artefacts and metaphors that guide users through
the online journey.
For this project the author will choose to compare fashion websites as these have rich content
and they are very much dependent on visual appearance. Fashion websites seek to blend
together the latest fashion trends with the latest technologies and aim to improve the

81

interaction between humans and computers with the ultimate aim to persuade the customer
to buy.
Every fashion house aims to create a unique style that is embodied through visual cues to
e ha e the i te a tio ithi the a d s o li e e i o e t as ell. Most fashion websites
rely on the power of visuals to draw attention and to retain the customers and to push them
through the purchasing process.
The success of a fashion website therefore lays in the triangle of presentation (design, visual
power), usability (functionality and ease-of-use) and interactivity (enjoyment for the user). The
most important elements of these environments are; homepage, photography, colours, videos
and other multimedia as well as social media and the navigation structure.
However, fashion websites tend to change and evolve rapidly; some brands re-design their
websites for each season, consequently this could be a challenge to handle in this project.

Objectives of the project

I this p oje t the autho s ai is to e eal the digital a tefa ts a d etapho s that d i e use s
actions and to understand how they contribute to the customer journey and customer
experience. The author also seeks to measure user's emotional responses to design and
structure of fashion websites.
The ulti ate goal of this p oje t is to de elop a ge e i appi g of the usto e s jou e o
fashion websites that shows the impacts of digital artefacts in relation to the user experience.
pe ifi all , ithi the o te t of the usto e s o li e jou e the objectives of this research
are:
1. To identify the digital artefacts, metaphors and perceived affordances and their impacts
o the use s shoppi g e pe ie e du i g the usto e jou e o fashio e sites.
2. To critically evaluate models and frameworks of previous researches related to customer
journey and aesthetic elements in online environments.
. To e plo e p a ti es a d stakeholde s ie s elated to use e pe ie e a d use s
perceived affordances on fashion websites as well as the use of digital artefacts on these
platforms.
. To fo ulate a ge e i ap of the usto e s o li e jou e , i ludi g iti al tu i g
points where artefacts affect emotions and user experience on fashion websites.

Research questions
82

a.) What are the elements of the customer journey on fashion websites? What tools,
frameworks and models are available to support measuring the online customer journey?
b.) What are the key aesthetic elements within the customer journey in online environments
that provide e jo e t fo the use s? What i pa ts desig a tefa ts ha e o use s e otio s
and the shopping experience?
c.) What elements are (users) missing throughout the customer journey that could improve
the overall user experience as well as the usability of fashion websites?

Areas of theory underpinning the project, including key references

Practically speaking the customer journey is the sales cycle framework in traditional business
models that seeks to understand the business-customer relationship in order to push
customers through the sales funnel leading to transaction. (Dubberly & Evenson, 2008)
The customer journey is a series of customer experiences that aggregate from various
impressions gained from different parts of the business; what customers think of and how they
perceive the brand.
According to Cskszentmihlyi (1990) the concept of flow is a fully motivated mental state
described as deeply fixated merely on the activity, and the essence of the flow is the feeling
of joy while performing a task.
Du e le a d E e so
alled it the e pe ie e- le odel that o es e o d the
push model of the sales cycle and focuses on the relationship of business and customer
describing the steps and criteria to evaluate customer experiences.
Visual appeal is a significant influence on emotional appeal (Capota, Hout, & Geest, 2007).
Typically, emotion has a positive and a negative dimension and many studies have revealed
that emotion strongl i flue es o su e s de isio
aki g.
Lindgaard et al. (2006) performed a study regarding first impressions of websites in which they
found that people can make a consistent evaluation of visual appeal within just 50 milliseconds
(Capota, Hout, & Geest, 2007).
Hartmann et al. have done a few researches assessing the attractiveness of websites and
finding correlation between the perceived aesthetic quality and the overall user satisfaction.
They argued that many user experience research has focused on aesthetics and initial user
perceptions of the interfaces and websites but the nature of information presentation has
received less attention (Hartmann, Angeli, & Sutcliffe, 2008).

83

In this research the author is also intended to evaluate Halo-effe ts o use s judge e ts
versus perceptions and impressions of fashion websites. Theories like the Adaptive Decision
Making Theory (Roberts, 2006) will be used as tools to understand which affordances drive
customers through the experience journey. Another intention of this project is to look at the
impacts of semiotics on persuasion and seduction of the customers.

Why and for whom it will be useful

This research shall be valuable for fashion brands to better understand the roles of the
artefacts within the customer journey that will be specially tailored for online fashion
businesses in order to increase customer engagement and to reach a wider audience.
This research shall benefit designers as it aims to discover the emotional aspects of responses
for visual applications, such as layouts, navigation, style, colours, white space, photographs,
etc.
The project shall also benefit interaction designers and researchers who have interests in
online retail.
The author of this project will also benefit from this piece of work by increasing knowledge of
career area of interest.

Choice of methods and tools to be used, linked to the objectives

The project will follow a user-centred design approach in order to develop a generic mapping
of the usto e s jou e o fashio e sites e sites that sho s the i pa ts of digital
artefacts in relation to the user experience. Users will be involved in all phases of the project.
I. Research to meet objectives 1 and 2
Secondary research: academic research, books, websites, social media
Primary research: interviews, questionnaires, observations
Revising fashion websites (testing them on mobile and desktop platforms)
Studying customer journey mapping processes, frameworks and models
II. Analysis - to meet objectives 2 and 3
Evaluate websites and the user experience
Evaluation of existing systems
Task analysis
Requirements acquisition
Set the criteria (measurements, key experience labels)
Map the customer journey
III. Design to meet objectives 3 and 4
84

Sketching the user experience

Produce design solutions
IV. Evaluate to meet all objectives, this will be an iterative process
Re-iterate journey

Means envisaged for evaluating results

This research will collect both qualitative and quantitative data through various techniques and
tools, including:
- Interviews
- Observations (thinkaloud protocols)
- Query methods (SUS, QUIS, SUMI, SAM, etc.)
- 5-second tests (by Christine Perfetti)
- A/B tests or other comparative studies
- Eye-tracking study (depending on the availability of resources and timeframe)
Choice of tools, resources include:
- Mobile devices (iPhone, Blackberry)
- Desktop PC and laptop, iPad
- Internet connection
- Audio/video recording software
- Screen recording software
- Design software to aid visualisation of results
The ultimate aim is to develop a generic customer journey map for fashion websites that
indicates the emotional hotspots, moments of truth, critical success and failure points.
A set of websites will be chosen to be tested based on a wide variety of stimuli in order to
induce different responses. Participants will also be observed using their favourite websites.

Project feasibility
Having completed a one year full-time study in HCI endows the author with academic
knowledge and skills to undertake this research.
The author worked 5 years at a large online media corporation and has sales and marketing
related project management skills. The author has interest in the online fashion business and
has connections within this industry that will benefit the research and data collection stages of
the project.

85

Project time table

The timing of the different parts of the dissertation is scheduled as:
1. Aims/Objectives: 2 weeks (June)
2. Literature review: 4 weeks (JuneJuly)
3. Research methods: 2 weeks (July)
4. Data collection: 3 weeks (Aug.)
5. Findings: 3 weeks (Aug.Sep.)
6. Conclusion: 2 weeks (Sep.)

86

Research Ethics Checklist

Yes/No
Number

Question
(delete as
appropriate

If the answer to any of the following questions is NO, then the project plan needs to be
modified, because the project should not continue as currently planned. Seek advice very
early about it
1.

Does the planned project pose only minimal and predictable risk to
the student?

Yes

2.

Does it pose only minimal and predictable risk to other people

affected by the project?

Yes

3.

Are arrangements for the supervision of the project appropriate?

Yes

4.

Is the project carried out or supervised by competent researchers?

Yes

5.

Do the foreseeable benefits of the project outweigh the foreseeable

risks?

Yes

If the answer to any of the following questions is YES, then authorisation from the Senate's
Ethics Committee is required. Seek advice very early about it
6.

Does the project involve interaction with, or collecting personal

information about, people who are vulnerable because of their
social, psychological or medical circumstances?

No

7.

Does the project involve animals?

No

8.

Does the project involve research on pregnant women or women in

labour?

No

9.

Does the project involve research on persons under the age of 18?

No

10.

Does the project involve research on human tissue?

No

11.

Does the project involve research on vulnerable categories of

people who may include minority groups?

No

The following questions must be answered YES, i.e., the student must commit to satisfy these
conditions and have a plan to ensure they are satisfied
Will the student ensure that any people subject to observation or data collection are :
fully informed about the procedures affecting them and affecting
12.
Yes
any
information collected about them (how the data will be used, to
whom they will be disclosed, how long they will be kept)?
13.

fully informed about the purpose of the research?

Yes

14.

Will the consent of these people be obtained?

Yes

15.

When these people can be classified as research subjects, will it be

clear to them that they may withdraw at any time?

Yes

16.

Will the student make arrangements to ensure that material or

private information obtained from or about these people remains
confidential?

Yes

87

88

Appendix 2: Heuristic Evaluation pre-test questions

1.

First, hats your o upatio ? What do you do all day?

ChC
NSch
NZ
CR

Stay at home mum, I do general household and manage 2 children (at school).
Retaining, home studying, half-time mum.
Shopping
Entrepreneur mum of two. I am currently setting up my online jewellery shop
with my mother-in-law.
Busy (working) mum of two.

AN
LB
2. Roughly, how many hours a day altogetherjust an estimate would you say you spend
using the Internet (including browsing, email and shopping)?
ChC
NSch
NZ
CR
AN
LB
3.
ChC
NSch
NZ
CR
AN
LB
4.
NZ
ChC
CR
AN
NZ
NSch
NZ
CR
ChC
AN
NSch
CR
NSch
AN

3 hours, I use my mobile phone (iPhone), iPad, Facebook and I shop everything online
3-4 hours
2-3 hours
1 hour approximately
3- h s, ut I sit i f o t of the o pute all da
How frequently do you buy online?
Roughly, eekl o a ouple of ti es a o th..
Not e ofte , o e a o th Id sa .
Couple of times a month.
O asio all , ostl he the es a i thda o i g up o at Ch ist as ti e
Monthly, sometimes weekly
List 3 words that you associate with online shopping:
Bargain
Choice
Convenience
Convenience
Convenience
Convenience, efficiency
Designer wear
Ease
Ease (and my laziness)
Fun
Google, searching
Quick
Sale
Saving time
88

89
ChC
LB

Speed
5.

NSch
NSch
NZ
AN
AN
ChC
NSch
NZ
ChC
NZ
AN
CR
ChC
CR
CR
LB
6.

ChC

NSch
NZ
CR

AN

List 3 words that you feel when you are doing online shopping
I feel like I saved time
Bargain hunting
Comfort
Excitement
Guilt (that I spent a fortune)
Happiness
It makes me mobile (virtual mobility)
Relaxed
Satisfaction
Satisfaction
Satisfaction
atisfa tio , its Do e! a d I do ot ha e to deal ith it a
oe
Sense of guilt (to spend lots of money)
Vulnerable (that something can go wrong eg. my delivery gets lost or the company goes bust)
Wo ied that stuff do t a i e
How would you compare the online and offline shopping experience?
I p efe o li e shoppi g. It is so eas ; I a
o se e e thi g, I do t ha e to leave the
house a d d i e, I t it at ho e a d if I do t like it I etu it the o e a d olle t it f o
my house).
For me offline shopping means a more impulsive ad hoc pleasure. You treat yourself because
ou go out its a leasu e . O line shopping is for saving time, more convenience than pleasure.
It is good for saving time and to compare prices.
O li e shoppi g is good e ause fo its easi ess, o fo t a d it takes o effo t ou a still
watch TV or eat in the meantime.
I thi k that ou a t o pa e the , the a e so diffe e t. Offli e shoppi g is pleasu e hile
o li e shoppi g is to get so ethi g do e ui kl
I p efe o li e shoppi g, e ause I si pl a t affo d goi g to the shops a d spe d
whole day looking for things. Online I can do everything much quicker and more effectively;
do t eed to ueue, d i e, alk, et . But I like offli e shoppi g e ause ou a a tuall feel
the te tu es a d olou su fo tu atel I do ot ha e ti e fo this.

LB
7.
ChC
NSch
NZ
CR
AN
LB
8.

Which websites do you use to buy clothes and to learn about fashion trends? Why?
To lea a out fashio t e ds I use the agazi es I t le, Elle, et fo e sites I use:
Net-a-Porter, Matches, Mywardrobe, DonnaIda, H&M, Zara, Mulberry, Jigsaw, AO
Jigsaw, Joseph and Ventre-privee.
OutNet its a good e site to follo t e ds o look fo so ethi g spe ial to t eat ou self ith.
OutNet, Net-a-Porter, and the vintage clothes on Vestiarie Collective
ASOS, Massimo Dutti, Zara, Ma go, et . Fo fashio t e ds I look o li e o I u agazi es
What types of fashion items do you look for on the Internet? Why?

89

90

ChC
NSch
NZ
CR
AN

E e thi gshoes, u de ea if I see so ethi g i a agazi e that I like, I go o li e

and buy it onlineI e e t a thi g o i shops.
Dresses (evening dresses) and basics (T-shirts)
hoes, ha d ags. These a e the ost likel ite s to o e i the ight size a d do t
require returns.
D esses, ags, je el , shoes
Dresses, tops, knitwea , shoese e thi g eall ! I k o
sizes a d it is eas fo
e to u o li e. I a also etu the at a ti e

LB
9. Ho do you hoose your ite s e.g. lothes o the e site? Do you ha e a strategy
or favorite way of doing it? Why?
ChC
NSch
NZ
CR
AN

Usuall , I e see so ethi g spe ifi o see so ethi g o so e od the I t a k

it do o the i te et
the a dI also sea h the i ages..
I al a s Google it fi st a d o pa e p i es. If the es sale Id fi st li k to see, ut I
always end up at the non-sale ite s e sites a e good at di e ti g ou a k to the
non-sale ite s
Io l u
a ds that I k o o f o
e sites that I e ought efo e a d I t ust the .
I usually browse these websites to get inspiration for something, but then I do not
necessarily buy them.
It depe ds o if I eed so ethi g u ge tl o I just o si g. I the fi st ase I
specifically filter and sort, in the latter case I just click on view all and scan through the pages.

LB
10. Do you have any favorite fashion websites? Why those?
ChC
NSch
NZ
CR
AN

Net-a-Porter I find it aspirational, Matches and Mywardrobe

Jigsaw, because their fashion is a bit different from the rest, they only use pure cotton and
silkits a lo g te fashio
OutNet because they have a selection of designers
The same as before: OutNet, Net-a-Porter, and the vintage clothes on Vestiarie Collective
I quite like Mango and Massimo Dutti because they are easy to navigate and they have a
clear and simple desig othi g too fa
o e pe si e

LB
11. List 3 of the most important features or parts of the website and your online shopping experience?
Which is the most important and why?

ChC
NSch
AN
NZ
ChC
NSch
CR
NZ
NZ
AN

Ease of checkout: some websites only leave you a short period of time to complete the
purchase, I think this is wrong and you should be able to see what you put in your
shoppi g a t the da efo eRetu is also e i po ta t fo e as I u lots of stuff
online and most of them go straight back.
Different views (front, back) anything that makes it more efficient to see the colours, sizes, etc.
Images must be sharp and crisp with good contrast and on a model
Displays (images and photos) are good and descriptions are clear
Images: to be able to enlarge, see the material, to expand it
Composition, details and information about the dress
To be able to see the dress on the mannequin
Easy to maneuver
The a ou a
o se the e site, thats o the ho epage e u
Simple navigation, straight forward path to checkout, but also secure!
90

91
ChC
Ease of search: to be able to drill down
NSch
Zoom
CR
Zoom to see the fabric
AN
)oo i g is p i o dial, if I a t zoo i to see the te tu e I ill ot u it
CR
LB
12. Do you think that the website design could affect your purchase? How? Why?

ChC

NSch
NZ
CR
AN

I do t like it he it is too lutte ed o too diffi ult to a igate. I also fi d it e

a o i g he ou ha e to joi i to u eg. Co osa ahh.. a d I a t to see the
clothes on a model and they have to give the dimensions of the clothes.
Yes, you can get so much more information and detail if the design is close to the offline
e pe ie e. If I see a heap e site that puts e offits ha d to e spe ialI hate hea
flash e sites o he ou ha e to skip the ho epage e ause the e s a a i atio .
I also find it cheap if they put too many colours or flash.
Yes. O so e e sites ou a t zoo o ou a t see the details
Yes, if it looks professional it gives me security and of course ease of use.
Of ou se, if the site looks u p ofessio al a d heap I ould t t ust the . But al ost all
fashio e sites ha e the sa e olou s he es hite a kg ou d a d la outs

LB
13. If you were to envision your ideal fashion website, what sorts of features and information
would it contain?

ChC
NSch
NZ

CR

AN

Net-a-Po te , ut I a t affo d to shop the e all the ti e..I also like he othe e sites,
like Zara, show what other items the model is wearing, so that if I like the whole look I can
buy everything.
D ie s of i ages, Pa Pal its ui ke , easie , less epetiti e, e ause ou do t ha e to
type in your card details)
Checkout is important for me. I like to see the items I put in my basket. It is more efficient
and informative..I can just double-check what I bought before I pay for it (picture, delivery
and returns info), I just like when these are more prominent and pop-out.
It is easy to overview, the drop down menus are clear, the navigation is easy and it is easy
to go a k to the last ite I as looki g at. The atego ies a e u ialto fo e a ple
differentiate between evening dresses and day dresses.
Exceptional zooming feature with drag and rotate functions. I would display the stock
levels and the stores they are available in. Display colours and textures in daylight and
under artificial lighting.

LB
14. What is your gender?
ChC
NSch
NZ
CR
AN
LB

Female
Female
Female
Female
Female
Female

15. What is your age?

91

92

ChC
NSch
NZ
CR
AN
LB

39
34
34
38
35

92

93

Appendix 3: Fashion Websites for Heuristic Evaluation

Website: http://www.frenchconnection.com/

Accessed on 05/07/2012

93

94

Website: http://www.reissonline.com/eu/

Accessed 05/07/2012

94

95

Website: http://www.whistles.co.uk/

95

96

Accessed: 05/07/2012

96

97

Website: http://www.jaeger.co.uk/

Accessed: 05/07/2012

97

98

98

99

Website: http://www.tedbaker.com/

Accessed: 05/07/2012

99

100

Website: http://comptoirdescotonniers.com/fra/Home.aspx

100

101

101

102

102

103

Appendix 4: Heuristic Evaluation Results

103

104

FCUK

Comptoir des
Cotonniers

Reiss
Usability
Aesthetics
User experience
Overall experience

Ted Baker

Whistles

Jaeger

104

105

APPENDIX 5 Interview Notes

Feedback from the 2 selected websites:

FRENCH CONNECTION positive feedback:
easy to navigate
clear and simple design, not too fussy
colours are good
returns information policy is clear
It's i e that i ages o e out, ut the othe a a ou d st d ess o its o , d d ess
o
a e ui , I like it that ou fi st see the d ess o the a e ui a d he ou s oll
o e it gi es a lose up
it goes back to the last item seen
quick view was good
zoom is good
the suggestions is good ("You might also like..")
Checkout is good but I'd like to see it the other way around (the left side content to the
right)
FRENCH CONNECTION negative feedback:
I do 't thi k that the ailed the atego ies ight e e i g d esses a e do 't look e e i g
d esses to e o e da d esses

105

106
-

The a i atio at the top, hat s the pu pose of it?! , Do 't like the ig headli es a d the
animation (it's a aste e ause I do 't a e
I don't like adverts, social networks
Ia
ot e kee o the olou s ed, hite a d g e , o a kg ou d i ages, o
olou s , olou s a e e poo ; I thi k the a e ot i li e ith the a d's i age
it doesn't make me feel very special
)oo is te i le, hite ith hite a kg ou d does 't o k fo e , o supe e la ge
fa ilit
images are not sharp
the size guide is messy, I don't like it
too u h i fo a out the d essI do 't a e, I o l a t to see hat's it made of and the
care instructions
" ou ight also like" is good ut he I li ked o it, it as out of sto kthei s ste is ot
updated and this is very annoying

FRENCH CONNECTION suggestions:

o Make it more consistent and update the system.
o Delivery information should stand out more
o Party dress and evening dress - what's the difference??
o Some dresses are shown with mannequins and some without consistency.
o Change the odd names of the dresses (eg. "Lost and Found")
o Only show clothes that are on stock.

Whistles positive feedback:

full screen views
nice to have more dresses in a line (page layout)
selecting sizes is OK
good he kout p o ess olou s, optio s , Pe fe t he kout, all i fo I eed is the e
I like the homepage, it looks as a fashion website and I do not have to scroll (everything is on
one page)
I like the menu style and the fact the I'm not drawn in by the prices (prices are not shown)
good zoom
Whistles negative:
- too busy
- the pop-up is annoying on the iPad
- wish list - annoying to log in
- cold colours - don't like it
- pictures are too crowded and can't roll over and zoom
- returns policy is too long
- confusing menu structure
- Recommendation is good but I can't see the jacket with the dress I chose (usability)
Whistles suggestions:
106

107

o
o
o
o
o
o
o
o

it is very annoying on the iPhone and iPad, because the pop-up is floating around
the wish list feature is ok but it asks to log in and I find that very annoying
it's a bit busy but the sizes of the images are good
whilst you are zooming some info disappears from the screen (as the zoom covers it)
colours are dull
"Sorry, out of stock" message is very annoying and frustrating! Don't show if you don't have
it on stock
I don't get this Wish List thing (I never click on it)
I e e ead the st le i foI thi k it is a aste of space

107

108

APPENDIX 6 Customer Journey Observed

1. home page
2. women section (from top menu or from central image)
3. dresses (directly from top menu or from side menu bar)
4. click on view all (all did click on view all even before looking at the categories)
. he k the atego isatio of d esses if the e s o e
6. scan through the list of dresses
7. observe the individual dresses in a row by scrolling mouse over it and looking at the different
images (when they change as the user drags the cursor over it)
8. some mentioned the names of the dresses but no one mentioned price (although on some website
it is clearly visible below the dress)
9. select dress (click on dress)
10. check dress: zooming, alternative views, etc
11. check info next to the dress
16. look for the delivery/returns policy
12. go back to dresses (continue looking in the list) or select size/colour (check the size chart or sizing
info)
. put d ess i to shoppi g asket li k o Add to Basket o Che k Out
14. go to hoppi g Basket li k o the i o at the top ight o ia the Add to Basket utto
15. check dress in the basket: recheck dress type, size, colour, quantity, price
16. look for the delivery/returns policy
17. click on checkout to enter personal details or login

Re-iterated customer journey by participants using card sorting in the second part of the study:

108

109

APPENDIX 7 Personas and Storyboards

Primary persona:

Images from:
http://stylescout.blogspot.co.uk/2010_12_01_archive.html
http://www.msg-nonstatuscontracthire.co.uk/range-rover-sport-v8-hse-08-bad-credit-car-finance-882-a-month/
http://blog.zoopla.co.uk/2011/02/14/what-1million-buys-you-around-britain/
http://recipes.howstuffworks.com/diet-fads-pictures.htm
http://www.footballfancast.com/2012/03/football-blogs/the-perfect-football-treat-for-your-kids-this-easter
http://mybigfatgreekmove.blogspot.co.uk/2010/05/stylish-wardrobe-inspiration.html
http://freebies-2deals.com/as-the-rumor-has-been-said-ipad-mini-is-coming/

Chantel is 38 years old and she is a stay-at-home mum of 2 young boys. During the week she is busy
looking after the kids, doing the school runs and taking care of the household. Chantel is very
concerned about her figure which she keeps in shape by doing exercise regularly. She is currently
refurbishing the house so her schedule is rather hectic to make sure that the boys are out of the
uilde s a . Whe Cha tel has a it of ti e a d o he o she goes o the I te et a d he ks
emails, Facebook or looks for clothes online.
Chantel spends approximately 3 hours a day browsing and mostly uses her iPhone and iPad, but she
also likes to buy magazines to be updated on the latest fashion trends and celebrity fashion. When
109

110
she sees something on somebody that she likes she is not afraid to ask where the clothes or shoes
are from and she then makes sure to go on the internet and track them down for herself. She admits
buying clothes and accessories on the internet every week.
he e jo s o li e shoppi g e ause it is e o e ie t fo he as she does t ha e to lea e the
house and drive, but she also admits that she feels a bit guilty for ordering too many clothes, most of
which she ends up sending back. Therefore it is very important for her to check the delivery and
returns policy of the company selling the items online.
Chantel buys from a variety of websites but she only buys from those which have a trustworthy
reputation and design that allows her to easily navigate through the pages. Zooming technology is
also a ke fa to i he pu hasi g p o ess; if she a t see the lothes f o a lose ie she will not
u it. Cha tel does t like those e sites he e she has to sig i efo e seei g the lothes o
before viewing the items in her shopping basket.

Secondary persona:

Images:
http://blogs.babycenter.com/celebrities/jessica-alba-does-the-school-run-in-style/
http://www.friday-ad.co.uk/article/a-guide-to-organic-food
http://www.sahservices.com/homeopathy
http://www.telegraph.co.uk/property/propertypicturegalleries/6157588/On-the-property-market-London-mews-houses.html
http://roosie-fashionplace.blogspot.co.uk/2012/01/vintage-clothing.html
http://hayancafe.blogspot.co.uk/2011/06/san-diegos-vintage-shops.html
http://businessblog.winweb.com/miscellaneous/you-can-have-your-own-online-shop

Nicole is a busy mum of 2 girls. She has recently moved to London and has just settled in with her
family. She is studying homeopathy at a French college via e-course whilst her kids are in school. She
is very health conscious and only cooks with organic ingredients.
110

111

Nicole only buys quality products which means: pure silk, organic cotton, natural wool, etc. She
spends roughly 4 hours a day on the Internet to keep up with her studies as well as researching the
web for the perfect items. Although Nicole admits spending a lot of time online she prefers doing
offline shopping which she considers as a treat and leisure.
Nicole also loves vintage clothes and she uses the internet to get inspiration from different fashion
e sites. Ni ole is e p i e o s ious so she does t e essa il u s hat she sees i
ediatel ;
instead she would use Google to compare prices and would buy it from the cheapest seller. Nicole
finds it off-putting when fashion websites have heavy flash or animation on the homepage that she
has to skip. She prefers to pay with PayPal for her customs.

111

112

112

113

APPENDIX 8 User Testing Pre-test Interview

1. Do you have experience with online shopping?
BG: Yes, I buy something online about 5 times in a month.
MS: Yes, I like shopping online because I don't have to leave the house.
MF: Yes, I do buy things online; for example when I received an email from Debenhams with a
discount voucher. But I do browse a lot on ASOS and Monsoon too.
DW: Yes, clothes, food, electricals and books.
LB: Yes, I spe d lots of ti e o li e
ChC: Yes, I buy everything online.
AudC: Yes, lothes. But I p efe offli e shoppi gI'd take the efe e e f o the o li e shop a d
also wait for the sales.
AshC: Yes, but not just clothes, I also buy other stuff as well; books..
EC: Not really, I prefer to shop instore
NZ: I prefer to shop instore but I browse a lot online.
2. When was the last time you bought clothes online?
BG: Bathing suit, a week ago.
MS: A week ago, I received an email about promotions.
MF: In March (5 months ago)
DW: A year ago.
LB: Yesterday, I bought a handbag.
ChC: Yesterday, I bought clothes (dresses) and sandals.
AudC: 1 month ago
AshC: 1 month ago
EC: A year ago.
NZ: long time ago a t e e e
3. Which website was it?
BG: JoJo Maman Bebe
MS: Mexx, I've known and used this website for a long time and I quite like it because the images
and the colours are good.
MF: ASOS
DW: It's a Chinese website, called tmall.com
LB: Net-a-Porter
ChC: ASOS
AudC: L.K. Bennett
AshC: Brand Alley, it's good for bargains
EC: Net-a-Porter
NZ: OutNet
4. Why did you choose that website?
BG: They keep sending me their brochures. Also they have a good selection of items and the
accessories are also good.
M: It is lea , I a see the Wo e 's se tio ight a a a d the also ha e a Look Book t pe
feature so they show the combination of items, so you can see the whole picture. It is also more
personal because it is shown on a model.
MF: I was browsing just to see hat the a e selli g ut I ould go to a e site if I e ei ed
discount vouchers from them, like I did with Debenhams. It was also good because I just needed a
dress for a wedding, so it was perfect timing!
113

114
DW: It is reliable, because I have experience with it, and it has PayPal system, so I know it is secure.
It also has many options: lots of brands. And it is usually cheaper to buy online then in the shops.
LB: It is one of my favourite websites and because they sold the brand I wanted to buy.
ChC: Variety and free delivery.
AudC: I saw a dress in a shop for a wedding I was going but they didn't have it the colour I wanted, so
I went online and ordered it from their website.
AshC: All my colleagues use it, I received an email from them..
EC: I don't think it is the best website, I much rather prefer Gucci and Dior or Prada.
NZ: My friends recommended me that website
5. What do you like of that website in terms of its design? Why?
BG: Design is good. I like the checkout, there's a nice flower wallpaper that I quite like. The website is
designed for women, I really like it; it is colourful with pastel colours.
MS: Simplicity, it has a white background, the buttons and the navigation are good, and the
subcategories (like the list of blouses and then you can also change the colours for each one and
zoom and see the item from different views.
MF: The images, that I am able to click on a dress. The information about the dress; the different
colours they come in and the bigger images, to rotate to see ette , the sizeI like to feel/tou h it as
if I e e i a shop e ause o li e is diffe e t.. Ah, a d also the deli e a d etu s i fo atio !
DW: They have good promotions skills, their banner is quite prominent and I can scan the homepage
quickly to see the different clothes. Their homepage has lots of colourful content which is good for
inspiration when browsing.
LB: First of all it is very important for me that websites have apps for mobile because I browse a lot
o
iPho e. Eas to use: do t ha e more than 3 items in a row, actually 2 looks good on the
iPhone. It also has to be intuitive to use and easy to navigate.
ChC: It has a bit of a fashion magazine feeling, I like the colours, I mean it has also black&white but
also primary colours! It doesn't have that comic look neither. It has people on the front page, and I
quite like that.
AudC: It was easy to go through and I found the dress quickly, they have a good implementation and
categories. The photo was interactive and I was able to zoom. Also, it was shown on a model so I
could see the fit and the shape of the dress.
AshC: Actually, it is not very well designed, it seems a bit clunky and not totally user-f ie dl ut it
is about getting a bargain, not high quality clothes. Because it is a sales website, it is more functional.
It doesn't have that beautiful sheen that some websites have, where you can quickly get to the
point.. It doesn't matter the design of the website if the clothes it is selling is not high quality (you
wouldn't expect it to be beautiful)
EC: Gucci has the best design; because it has nice bright images and it is very easy to use. Also it is
very catchy, it keeps me on the website and makes me want to discover it further. It has a good
a igatio , side a s
NZ: It's not a pretty website, quite plain and not much colours or adverts. But it is very easy to use.
6. What would you like to see differently on that website in terms of design? Why?
BG: Nothing
MS: The music is too loud and I don't like that! But it is a peaceful website, it is not cluttered and
when it is sales going on it is not screaming in your face. Oh, actually what I really don't like is that I
have this Customer Card and it doesn't let me change my address, I mean it is not automated; I had
to call customer services and they asked me to send them an email but then I didn't get an answer
for ages...oh, it was really bad from them! I also don't like their main website the mexx.com because
it is quite an unclear website; the screen is divided into 2 parts, but it is just not clear what it does
and it takes too long to load as well

114

115
MF: Select the dress by size, colour and by price. As for the text; black and white is fine, kind of
i i alisti , ut I a
o e i te ested i the d essthe ate ials! A d I like to see the images in a
context.. so for example an evening dress is worn in the context, e.g. in a party.
DW: The speed, sometimes it can be very slow. The format is different for each brand so I would
make it all the same layout. The design would definitely affect my purchase because first impression
fo e is e i po ta t, the olou sif I a see that it is
st le the I'd sta ut if ot, I'd lea e
immediately.
LB: I like that e site e
u hso I ould 't ha ge a thi g.
AudC: It is too conventional and sta da dthe odels ould e togethe a d sho i
o te t alki g, tu i g a d i p ope da light.
7. What is the % of your visual attention between the website's design and the clothes it is selling?
AC: I predominantly look at the clothes and to try to find the way to access the clothes, but you also
i te a t ith the e siteso I suppose he ou a e sele ti g the d ess ou a e fo usi g o e o
the dress but when you are at the output stage so try to buy it or try to move on that's when you pay
more attention on the website. If it's a nice website you'd associate it with good quality (clothes).
EC: 50-50%
ChC: If the website was very poor in terms of usability I would definitely notice it, but generally I'd
say I keep a discrete attention on the website but would many looks at the clothes. I'd say 70% on
the clothes and 30% on the website.
NZ: 10% on the website and 90% on the clothes
8. You have 2 fashion websites selling similar style dresses; one has a cutting edge design with
poor usability and the other one has a boring design with very good usability. Which one would
you prefer to use to buy a dress? Why?
AC: I'd go with the one which is the quickest and easiest to use. I get so frustrated if the website is
difficult to navigate. It can be aesthetically very pleasing to go to a very beautiful website in terms of
aesthetics but if it is difficult to use it is so easy to get frustrated. For example Amazon; so easy to
use, quick checkout, you're not fluffing around, it takes 5 minutes.
EC: The easier ut if it s ot e att a ti e I ill ot go a k to that e site a d ot use it agai .
ChC: I'd go with the good usability, because I want to do it the quickest and easiest way possible.
That's why I shop online: to save time!
NZ: Good usability is more important, because if it takes me to spend more time online then I don't
want it.
9. Which step do you consider the most exciting part of your fashion website journey? Why?
AC: The most interesting part is when you buy it, because you visualize it: what you going to do with
it, ho ou' e goi g to ea itIt e o es ealit , is a lot a out isualisatio too.
EC: Observing the dress, the selection of the dress
ChC: Examining the dress
NZ: When I am looking at the dress
10. Which step is the most boring part? Why?
AC: It's putting in the card details, that was my point with Amazon; it takes a few clicks and it's done.
EC: Fill in information, payment
ChC: To log in before you proceed to checkout
NZ: When the pages are loading, it's very boring
11. What do you think it makes a website aesthetically pleasing?
BG: If it's not cluttered, no ads popping up. Also, the search box has to be good. It must point me to
the right product.
115

116
MS: Simplistic, not too much in your face (eg. sales), it has a good search facility and you can search
for all the brands, but the lists are not too long, because I don't like that, when you have to scroll
down to see the rest of the list.
MF: White background, black text, so it's clean. I don't like very busy websites or when there is too
much information, text.
DW: Colours, pictures with the model and the context of the picture; it would increase the score of
the product.
LB: That it is consistent, clear, easy to read and not too cluttered.
ChC: Clarity, not too busy, nice colours; magazine look but not like Heat, instead like Vogue
AudC: Colours, bright colours (red, green, yellow), text is not too much and with some nice fonts.
Black and white designs all look the same, I don't like them.
AshC: Clean, nice colours, b&w is ok because it tends to be cleaner look, anticipate what I want. Not
too much information, so it is clean.
EC: Colours, bright colours (red, green, yellow), sg really catchy. Catching: context! It puts you in the
ood
NZ: Colour coordination, good music (but I guess I would turn it down)
12. Which colours do you prefer to see on fashion websites? What would those colours tell you?
AC: Depends on the type of brand, but b&w works always very well.
EC: Context is important (net-a-porter is not nice, they show it against white background), it's more
pe so al
ChC: Black and white and strong primary colours like red, so that the overall look is contemporary
and minimalistic
NZ: bright colours like orange, not black and white and not dark colours
13. Where do you like to see those colours? (Hints: homepage, navigation (menu), materials, etc)
AC: I do 't i d ight olou sit depe ds
EC: Throughout the website but with certain white space
ChC: Initial banner, straplines and I like it when it is prominent and consistent on all pages
NZ: Everywhere
14. How do you like to see the clothes presented on the website? (Hints: on a model, in a context,
against white background, against coloured background, on a hanger, etc)
AC: On and off the model, with a few different views, I like zoom. The different angles, not really the
o te t ut it is ok a d o a odel al a s e e thi g looks goodif it has a o te t it akes the
clothes more appealing.
EC: on a model, context
ChC: Context is not important for me, but I want to see the items combined with other items
(lookbook type of presentation)
NZ: I prefer it with context; it is better and more realistic looking. I can better visualise myself with
the dress
15. What additional information (not only about the dress!) do you look for on fashion websites?
AC: Details: materials, but I suppose the difficulty is that you need to feel and touch it.
EC: description, length of a dress
ChC: he e to u othe ite s, e t e ds, i fo a out the desig e
NZ: sizing, material info
16. How do you usually go about buying a dress online? (What route do you follow on the
website?)

116

117
BG: Usually, I'd go first to the fitting guide/ sizing guide to check the correct size, as all websites have
different sizes and measures (e.g. in inches and in centimetres . The I ould easu e
size
MS: Well, it depends on if I am just browsing for inspiration or if I am after a specific category (eg.
blouses). So I'd go first to women's, then blouses, then brands, then view all and then the
su atego ies
MF: No, I don't have any specific route that I follow, I just look around. I look at the shape, the cut of
the d ess. I like it he it is o
a odel a d it is sho i o te t ut of ou se I u the isk
of not seeing the real colours, but that's fine.
DW: I am easily driven by the promotions, so that would be my first click; the Sales! Then I would
browse page by page and open up every single dress that I like in a separate window. After I scanned
through the website I would then look at each individual dress separately and close down the ones
that I don't find interesting.
LB: I would go straight to the 'new in' and I would sort by designers to see what they offer..
Sometimes I would sort by dresses or tops..
AudC: I only browse on well-known websites and I look at the latest collection. I like to research
before I buy something (in store and online as well)

Interviews before the test:

All participants had experience buying clothes online.

6/10 said they bought clothes online in the last month.
3/10 said that in spite of the fact that they do buy clothes online, they prefer the offline
shopping experience.
Collection websites (e.g. ASOS, Net-a-Porter, Brand Alley, tmall.com, OutNet) were used more
ofte
/
fo lothes shoppi g tha i di idual a ds e sites.
3/10 choose the website because they received targeted sales emails.
2/10 said that they were not keen on the website but the website sold the specific item/brand
they wanted to buy.
Other reasons mentioned were: security (PayPal), variety, free delivery, good usability.
6/10 mentioned that they liked the colours of the e site s desig .
5/10 said they liked that the website is easy-to-use.
3/10 said that good navigation is part of their preferred website design.
3/10 said good zooming is important fo the i te s of the e site s desig .
2/6 said that they like to see the clothes worn by models and in context.
Other favourite design features included: simplicity, user-friendly, intuitive, interactive, has a
fashion magazine look.
Design features that pa ti ipa ts did t like a e: cluttered design, takes too long to load (2/6),
when its just not clear what it does , too o e tio al a d sta dard desig s, too loud usi .
Visual attention between the website and the items it is selling on average was 30% (website)
and 70% (clothes).
I predominantly look at the clothes and to try to find the way to access the clothes, but you also
i te a t ith the e siteso I suppose he ou a e sele ti g the d ess ou a e fo usi g o e
on the dress but when you are at the output stage so try to buy it or try to move on that's when

117

118
you pay more attention on the website. If it's a nice website you'd associate it with good quality
(clothes).

All participants preferred the boring design with very good usability and they all said that they
would prefer to buy a dress from the website which was the easiest and quickest to use.
All participants said that the most exciting part of their journey on the fashion websites was the
step when they interacted with the visuals of the dress: observing it, examining it and
isualisi g it: hat ou goi g to do ith it, ho ou' e goi g to ea it .
The most boring part was considered the end of the journey; when participants had to fill out
the personal information and payment details. One participant said that for her the most
boring part was when the pages were loading and she had to wait.
Aesthetically pleasing design was described as:
6/10 mentioned not too cluttered, clean and not too much text on the website
6/10 said nice colours
2/10 mentioned products shown in context
1/10 said consistent design
Functional features were also mentioned (they seem to be inseparable characteristics of
aestheti s : good sea h fa ilit , ot too u h s olli g, Anticipates what I want
Best colours for fashion websites: black and white (50%) and bright and primary colours (50%).
Other comments included: white background allowed better visual on the dress, overall it
should have a contemporary and minimalistic look, context is important to make the pages
more personal.
Participants said that the colours mentioned earlier had to be consistent on all pages but
generally all participants wanted to see colours everywhere throughout the website.
All participants agreed that showing clothes in context is more appealing.
2/4 preferred to view the clothes on a model
1/4 said she liked the different views and the zooming
/ said she I want to see the items combined with other items (lookbook type of presentation)
Additional information on fashion websites that participants are looking for:
2/4 mentioned materials info
1/4 supposed the description of the clothes (e.g. the length of a dress)
/ e ealed that she a ted to k o where to buy other items, new trends, info about the
desig e
The interview revealed that people have many different ways of buying a dress online in relation
to their customer journey (e.g. which categories, filters they would use on the website). But
there are some patterns that can be observed:
Based o pa ti ipa ts a s ers there are two different ways of surfing on fashion websites
depending on the purpose of the visit; browsing without any specific ideas (looking for
inspirations a d looki g fo a spe ifi ite / a d hunting . It is i te esti g that the e is o
difference between those two scenarios in the use of the website and participants seem to
follow similar ways; they would select from the main navigation menu a category and browse
a o gst the esults i that atego e.g. Ne i , Blouses , ale , et .

118

119

APPENDIX 9 User Testing, Post-task Interview

1. Which website would you/would you not recommend to a friend? Why?/Why not?
BG: I ould e o
e d FENCH CONNECTION e ause the pi tu es a e ette , the photosI liked
the animation and the style better. The models have better hair-styles too!
MS: FRENCH CONNECTION, because it is more clear to me.
MF: FRENCH CONNECTION, because it is easier to find what I need and it is clearer information and
neater.
DW: FRENCH CONNECTION, but it is hard to say because it depe ds o hat
f ie ds st le ut
based on my experience I'd recommend FRENCH CONNECTION.
LB: FRENCH CONNECTION, I didn't like the other one at all.
ChC: Whistles, because I prefer that style, it fits me more and because I found that one the more
aesthetically pleasing
AudC: FRENCH CONNECTION, more structured, overall layout better. But they should improve on the
contrast and change the fonts!
AshC: FRENCH CONNECTION, it is more functional, but Whistles has nicer dresses
EC: FRENCH CONNECTION, the start (homepage) is very catchy and it has better usability
NZ: Whistles, because the branding is better (the logo), it is more inviting and more exciting. The set
out of the homepage is more inviting
2. How would you describe this website in one or more words?
BG: You g a d so t of hip, ut ot e effe ti e e ause I had to go th ough all the p odu ts
MS: Simplistic, fresh, vivid
MF: Neat, useful.
DW: Cutting edge, personal.
LB: Clear, basic, easy to use.
ChC: Slick, contemporary, top end high street
AudC: Good quality
AshC: Quirky but functional
EC: catchy, making you want to go in
NZ: friendly and exciting
3. If this website was a car, what car would it be?
BG: Defi itel ot a fa il a ! A d ot a a i g a , like a Po s he o so
MS: FRENCH CONNECTION = Mini Cooper
MF: FRENCH CONNECTION = BMW
DW: FRENCH CONNECTION = Maserati
LB: FRENCH CONNECTION = the new Fiat 500, because it is basic, but chic
ChC: Whistles = Audi A3, it is jazzy and exciting but still accessible
AudC: FRENCH CONNECTION = Renault, mid-range car, not a Mercedes, because the contrast is
missing!
AshC: FRENCH CONNECTION = Vauxhall, accessible to people but with caracter
EC: FRENCH CONNECTION = BMW
NZ: Whistles = Audi Q5
4. How does the 2 websites compare to each other?
BG: FRENCH CONNECTION's site is too white for me, it hurts my eyes. Whistles is a bit darker and the
contrasts are better on that one; even they also have white backgound they show more images on
the page so it does 't hu t so u h
119

120
MS: Whistles is boring, old fashioned ho the a ed thei atego ies: K it ea a d De i
FRENCH CONNECTION is more fresh and vivid.
MF: There are good and bad things about both of them, they kind of complement each other..but
FRENCH CONNECTION is more organized and clearer.
DW: Whistles has good services (eg. the telephone number) but it has worse design
LB: I wouldn't shop on Whistles because that website is irritating.
ChC: It is realy a mix, both have good and bad points. FRENCH CONNECTION I liked the cover page
but not too much the colours, it makes it a bit boring. Whistles is more sophisticated and more edgy.
AudC: FRENCH CONNECTION has overall better structure and seems more user-friendly, Whistles is
messy but has better contrast
AshC: FRENCH CONNECTION looks higher quality (more white) with more minimalism (=quality,
expensiveness) and good functionality. Whistles is more aspirational, more appealing but not very
functional.
EC: Both have good and bad points, but FRENCH CONNECTION is more modern
NZ: They are both similarly organized but the colour choices are different, Whistles is better
5. If you were to review this website what score would you give it out of 10? Why?
BG: FRENCH CONNECTION = 7
MS: FRENCH CONNECTION = 7.5
MF: FRENCH CONNECTION = 8
DW: FRENCH CONNECTION = 8
LB: FRENCH CONNECTION = 6
ChC: Whistles = 9
AudC: FRENCH CONNECTION = 6.5
AshC: FRENCH CONNECTION = 7
EC: FRENCH CONNECTION = 8
NZ: Whistles = 8
7. If you could change one thing about each website what would it be and why?
BG: Background (too much white)
FRENCH CONNECTION: Co t asts
M: FENCH CONNECTION: Che kout, it's just too u h i fo atio the e
MF: Whistles: I'd change the structure, the menu and the navigation. FRENCH CONNECTION: I'd
ha ge the e u o the leftlike Whistles.
DW: FRENCH CONNECTION: the product description and the checkout.
LB: FRENCH CONNECTION = the homepage, it needs a better type face
ChC: Whistles = Pop-up i do o
o iles
AudC: Homepage, contrast and font style
AshC: FRENCH CONNECTION = design elements to be more consistent, and navigation
EC: FRENCH CONNECTION = zooming
NZ: Whistles = the background colour (to yellow and sky blue)

120

121

APPENDIX 10 User Testing Plan

1 hour/interview
I. Pre-test interview:
Time: max. 15 minutes
II. Card sorting:
Aim: to re-iterate customer journey process.
Preparation: create flash-cards based on proposed customer journey
Time: max. 10 minutes
Method:
1. Show the cards
2. Let them order the cards (always shuffle the order of the cards)
3. Ask them to explain why they ordered the cards in that way
4. Take a photo of the cards
III. Emotion & Reaction Scale:
Aim: To identifying commonalities in design that provide the same emotional responses and to understand
pa ti ipa ts ea tio to a i age hethe positi e o egati e .
Preparation: create matrix, image print outs and bring bluetak

Time: max. 20 minutes

Method:
1. Create a vertical and horizontal axis based on two sets of polar opposite words.
2. Hand the participant an image and ask for her initial thoughts.
3. Ask her to place the image on the matrix and explain her rationale.
4. Repeat steps 1-3 until all images are on the matrix.
Selection of images:
Homepage
Logo/Identity
Colours
Text (font, style)
Menu bar/Menu options
Sale/Special offers/Multi buy discounts
Buttons (button graphics, size, colour, text, texture)
Links below the fold
Browse/Search
Products categories are meaningful
Items in a row
Images sharpness
Product information page
121

122
Price tags
Select
Product information (image and text)
Sizing and stock availability
Out of stock messages
Colour pieces (samples)
Examine
Images (size quality) -> zooming, rotating, dragging
Auto-zoom
Multiple image views per product
Basket
View items in basket
Checkout
Structure of the checkout process

IV. Bi-polar Emotional Response:

Aim: To get participants describe their feelings about the websites on scales with semantic labels.
Preparation: images print outs, scale printouts
Time: max. 20 minutes (around 10 minutes per website)
Method:
1. Hand each participant a copy of the scales and give them time to familiarize themselves
before showing them the printouts.
2. Show the participants the design and explain its purpose.
122

123
3. Ask the participants to complete their scales individually.
4. Repeat steps 1-4 for each page.
5. After the session, plot all of the pa ti ipa ts espo ses o a si gle s ale fo ea h page to
help identify any patterns.
V. Post-interview:
Time: max 20 minutes

123

124

APPENDIX 11 Card Sorting

124

125

Appendix 12 Emotional Reaction Matrix

125

126

Appendix 13 - Bi-polar semantic scale

126

127
Homepage:
French Connection:

Whistles:

Navigation page:
French Connection:

Whistles:

Product view page:

French Connection:

Whistles:

127

128
Zooming:
French Connection:

Whistles:

Basket/Checkout page:
French Connection:

Whistles:

128

129

APPENDIX 14 Fashion Websites Paper Prototypes

129

130

130

131

APPENDIX 15 Focus Group Interview and Paper Prototype Testing

Where would you click first? How would you explore these websites?
A: It depend what do i want to do..
E: (Gets the colourful homepage screenshot) Shoes and dresses, because this is what i would need
o . I do t o se e site just to see hat s the e, I d al a s look o a e site fo the stuff I
need. And when I see the icons on the website e.g. shoes and dresses then I click on those icons. So
here I would click on the shoes because these look nice.
A: I d do it diffe e tl : fo e a ple I d e e li k o t he elo the fold i fo
E: Me neither!
A: I d li k fi st o Wo e a d ithi o e I d li k o the atego , ot o the shoes i o
e ause i ould t k o if it s o e s o e s But i do t like this pa t of the e site poi ts to
the top row where there are lots of small images of coats), these are just too small, do I have to click
o e o e to see these??? It ould take a lot of ti ethe e s o added alue fo e ith this
design.
E: I ag ee, I d e e li k o so ethi g like this. It is ot aestheti all pleasi g a d it does t
the website more colourful whatsoever

ake

A: es, i do t like this s ste

what?

at all, I ould t k o

hat to do ith it: li k o ea h of the

E: I like this homepage but nor primarily because of the pictures and the colours but for the
categories
A: es, it is just easie , I do t ha e to lick to too many places, because i can see straight away
Bags ups this is hat I a t, so li k
E: es, a d the ale e u is e good, e ause I ould al a s look at the sale ite s so it is good
that it is highlighted (with red colour)
A: i agree, I d al ost al a s he k the sale fi st
E: yeah, Sale is the best! (both laugh)
E: ut I d e e

li k he e at the otto ..

A: es, I k o
hat ki d of i fo atio the put the e usto e se i es, deli e , et ut I d he k
these later on, when I decidet o buy something. Not at the beginning! Maybe it is there because it
akes the e site look o e offi ial a d p ofessio al. A d I su e that at so e poi t I d he k the
shippi g osts, deli e details
E: Oh this is good hat ou e just said! I al a s check the shipping conditions, to check whether
they ship to my country..
131

132
So, when would you check this information about the delivery and shipping?
E: If i see that I like the e site a d the lothes the a e selli g I d he k fi st hethe the ship to
Hu ga
e ause if I fall i lo e ith o e pie e a d the I fi d out that the do t ship that ould e
disappoi ti g. That s h it is e i po ta t fo e to he k this. A d also it is i po ta t that this
information should be easily located so that I find it easily.
A: yes, I need to know the conditions of shipping. I also want to know where and how can I return
the ite s
I show them the other website (the plain one) What do you think of this one? How is this different
from the previous one?
E: OK, i see this is this (points at the small images of the coats ont he colourful website) for me but in
la ge e sio
A: I disagree. For me this is more about the clothes, not the categories. I am not sure they have
atego ies he e, OK the e s the e u that tell you that there are bags, shoes, etc But I am
o e t ai g o t he i ages so u h that I ould t oti e o he k the e u ite s. It gi es the
i p essio that the e a e t a
atego ies.. The othe o e has a agazi e feeli g, like Elle o
so ethi g
Is it a p o le

fo

ou if the e a e t

atego ies?

A: No, not neccessaily.

E: Yeah, it depends on what you want.
How would you describe this website?
A: For me this is cleaner (the plain). I can see this website through better.
E: I like the other one better (the colourful).
Why?
E: H

e ause I

looki g fo shoes.. laughs

A: For me this website (point at the colourful one) I am sure that I would spend a lot of time here
browsing and searching because I have the feeling that they have lots of products and categories,
and here they have less categories and it is more about the dresses (Not true!!). This is more of a
desig e s olle tio e site a d highe ualit lothes. It is uite st lish a d lea , i i alisti , so
I d e pe t highe ualit p odu ts f o this e site
Also, it puts e off these i ages o the ho epage the olou ful , it s too
time for this.

u h fo

e. I do t ha e

E: For example, it is better here (point to the colourful webiste) that the Sale category is red so it
stands out and can be easily located. I do not have to search for it.

132

133
A: Here (points at the plain website) the website tells me that I can buy designer clother so this
website is good when you are looking for the latest trends and ont he other website there a lot of
thi gs ut ot e essa il e lusi el desig e s ite s
E: Yes, I like this website because of the colours, i like it better, it makes me want to explore it more
than the other one. I know that from this website (the colourful) I could easily buy something
e ause it looks ette fo e. F o the othe e site, i
ot su e
A: Yes, same here. I could easily buy something from this one (the colourful one) but this one (the
plai o e i ould ha e to e po e it o e a d it looks o e of a desig e s e site so I guess if i
a ted to u a spe ifi
a d o desig e the i ould u f o this e siteto get a good
a gai But the othe o e the olou ful o e i su e the ha e o e stuff.
But I have the feeling that if i was to explore this website I could not fi d a thi g. A d I do t like to
spend too much time with a website.
Main navigation:
E: I prefer the navigation of this one (the colorful) because i have all the requirements and categories
o the left ha dside, I do t ha e to li k too u h. I a filter the sizes, the price, the
olou s e ause i hate that he I see a d ess that I like a d the it tu s out that the do t ha e it
in my size.
A: I like the bigger pictures..
E: Me too!
A: But i also do t like it he I a o l see ite s, if i see 50 dresses i can tell which ones I like
E: I do t like it he the i ages a e too s all. Mouse o e is OK e ause i hat li ki g a k a d
fo th
Product info page:
A: For me this is much more realistic. (the plain one)
Why?
A: Because, I believe that this dress is as it is shown here. But here (points to the other website; the
colourful one) this is a model picture (both pictures are the same) somehow this seems more
realistic to me: it is more raw, minimalistic: this is it, what you can see. And this one (the colourful) is
more of a dream category.
Why do you say this? Because of the colours?
A: Maybe because of the colours, and still it is the same dress I know. It is easier to believe to this
website (plain one) than to this one (the colourful one). Yes, I think that the white background is
better because because it allows you to see the image better.
E: But this pi tu e is the sa e, it s the sa e d ess??!!
133

134
A: Yes, ut the hole pi k thi g that s goi g o o the pageit al ost feels as he e the eally want
to sell the ite
e ause of the a thi gs goi g o , hile he e it s o e i i alsiti a d a , so I
can believe them better that this is the dress how it looks in reality, no photoshop, nothing, just
hat ou ll get.
So, your confidence is better with this one (the plain)?
A: Yes, exactly.
Do you think that they put colours to divert your attention from the clothes?
A: I think here (the colourful one) they try to sell me the whole website, not only the dress. Whereas
he e the plai o e i do t get a fancy, nothing special website but when it comes to the dress this
website does it better.
E: I do t ha e this feeli g at all. What i do t like he e the olou ful is the Fa e ook s Like utto
and other social media icons. I hate it, they want me to advertise their products and that they come
i to
pi a
A: Yes, ut the ha e the ette Add to asket utto .. the olou ful . This is o ete. The othe
one is simply not straight forward. Also for the additional information: it is better this one (the
colourful) because i can see that they both have description and composition info but only this one
the plai has the etu s la elh
still I p efe this o e the olou ful e ause it looks o e
materialistic to me.
Checkout page:
E: For me, this o e is the pe fe t o e e ause the do Pa Pal. If I a t pa
buy from that website.

ith Pa Pal the i ill ot

A: Yes, security is very important!

E: Here ont he other hand (the plain) where is PayPal?! What is all this information?
A: But it gives ou ho

u h the

ha ge fo the deli e

E: Yes, hi h is good ut
And what about the info/picture of the dress?
E: But i just ought it, ight? o i k o it, I do t eed to ead i to he k it agai . I e e pa
atte tio to this. I e just sele ted the size and the colour..My attention is on the price and the next
step to u the d ess. Also hat s eall i po ta t to e is the Co ti ue shoppi g utto that
takes e a k to the last see ite , ot the ho epage, e ause that s eall a o i g!
What about the colours on these two last pages of the journey?
E: I ha e t paid atte tio o the olou s, fo

e he e is ot ele a t.

134

135
A: They are very important though at the beginning. It contributes to the first impressions and the
image of the brand: what a e the selli gAt the pa e t poi t I o l pa atte tio to the p o ess
ot the su ou di gs a d the desig . It s ot i po ta t to e this stage.
E: Yes, i agree. At the beginning i like to have nice colours and oudors that call my attention and
encourages e to u so ethi g. A d o e I ought so ethi g I o l o e t ati g o the
concrete elements and the process: PayPal, shipping, return, etc
Lookbook:
A: I like it very much because they present me the latest collections and it is inspirative. I think
would want to explore the lookbook first and then would go to the specific categories. It is important
for me to check ont he overall style of the company and brand to see how they sell what they sell.
E: Yes, but I hate when they show size zero modelsi a t to see it ealisti all o
me.

eal people like

E: Breadcrumbs are very important for me.

A: I feel that I a
ot su e that i ould fi d a d ess fo
taste f o
sure that I could find something from this one (the colourful)

this e site the plai , ut I

E: I like ths website better (the colourful) because it is nicer to me.

A: and my first impression is that i can buy something from here (colourful), but not sure if I can find
something here (the plain). I have to dig deep to find a good piece, but i guess I like to do this, to
search and dig until i find one piece that I really really like.
E: this o e has this feeli g of i e olou s a d odou sa d this o ethis is ot e

i e the plai

A: P i es a e also i po ta t fa to
E: OK, this website (the plain) because it is white i could see this one more the designer, the more
e pe si e e site f o the t o. A d I ag ee that a lu u
a d ould t eate a e site like this
one (the colourful) but more this type (the plain) because of the white background and the
i i alisti desig it looks o e lu u ious. Whe eas this o e looks o e of a a ketpla ethe e s
this a d thatso i guess I ha ge
i d a d I d sa that the hite e site is the o e e lusi e
and they sell more expensive stuff.
A: I do t like it that he e o the plai I a o l see pi tu es of d esses.. I d hoose the olou ful
e site desig . Those i ages a e uselessa d ho shall I sta t
jou e ? Whe e? He e the
olou ful I k o that I d li k o the Wo e s e u ite . This is more of a standard procedure and
p a ti e so it s easie .
E: Based o fi st i p essio , I d hoose the olou ful o e. The othe o e looks
A: Yeah, it looks

ess

ess ! That s the good o d.

135

136

APPENDIX 16 Aesthetic and usability elements supporting the

customer journey of an online shopping experience

136