Date post: | 25-Dec-2015 |
Category: |
Documents |
Upload: | jishu-twaddler-dcrux |
View: | 19 times |
Download: | 6 times |
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
1
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:
2
Abstract
Iミ this pヴojeIt マ┞ aiマ ┘as to ヴe┗eal the digital aesthetiI eleマeミts that dヴi┗e useヴsげ Iustoマ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ミIe 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
3
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
4
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
5
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 aesthetiI eleマeミts iミ oヴdeヴ to eミhaミIe the Iustoマ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).
6
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げ aItioミ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 Iustoマeヴげs jouヴミe┞ oミ fashion websites that showed the impacts of digital
artefacts in relation to the user experience. “peIifiIall┞, ┘ithiミ the Ioミte┝t of the Iustoマ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ミIe duヴiミg the Iustoマeヴ jouヴミe┞ oミ fashioミ ┘eHsites.
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ヴaItiIes aミd stakeholdeヴs ┗ie┘s ヴelated to useヴ e┝peヴieミIe 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 Iustoマeヴげs oミliミe jouヴミe┞, iミIludiミg IヴitiIal tuヴミiミg points where artefacts affect emotions and user experience on fashion websites.
7
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 Iustoマeヴげs jouヴミe┞ oミ fashioミ ┘eHsites that sho┘s the iマpaIts of digital aヴtefaIts 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
aHout useヴsげ ┗isual aミd aesthetiI peヴIeptioミs aミd useヴsげ testiミg ┘as Iaヴヴ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
8
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 Heaut┞ざ. According to the Oxford Dictionary,
the defiミitioミ of aesthetiIs is さa set of principles concerned with the nature and appreciation
of Heaut┞ざ 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 usaHilit┞ foIuses oミ useヴげs task aミd aIIoマplishマeミts, useヴ e┝peヴieミIe ふUXぶ eマphasizes a マoヴe holistiI ┗ie┘; uミdeヴstaミdiミg the Ioマple┝it┞ of useヴげs e┝peヴieミIes (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.
9
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 influenIes Ioミsuマeヴげs deIisioミ マ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 ┘eHsiteげs desigミ Iaミ guaヴaミtee the iミitial attヴaItioミ, 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ヴIeptioミ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
10
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ヴIeptioミs Hut also they can be interpreted in many different ways
aIIoヴ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ヴIeptioミs of the ┘eHsiteげs aesthetiIs (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ヴaItiミsk┞げs ヴeseaヴIh otheヴ studies ha┗e also deマoミstヴated that aesthetiIs ha┗e aミ effect on the perception of a product and its usability. The reason for why this interference
oIIuヴs is Helie┗ed to He ┘hat is kミo┘ミ as the けhalo effeItげ. This is ┘heヴe the aesthetiI aspeIt 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 Heautiful is usaHleざ (Tractinsky, Katz, & Ikar, 2000). Norman (Norman, 2003) also
states that aesthetiI desigミ Iaミ out┘eigh the peヴIei┗ed usaHilit┞ H┞ 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 Csíkszentmihályi (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ミIed H┞ theiヴ e┝peItatioミs of use, background experience, the criticality of the tasks and scenarios they are presented
with and the flow of interaction (Csíkszentmihályi, 1990).
Many researcheヴs fouミd that usaHilit┞ has also gヴeat effeIt oミ peoplesげ judgeマeミts afteヴ interacting with the product or interface. But during the early stages of interaction with the
oHjeIt oヴ s┞steマ, aesthetiIs is the マajoヴ iミflueミIe iミ peopleげs peヴIeptioミ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
11
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ヴtiIipaミtsげ ヴatiミg sIoヴes ┘eヴe highl┞ Ioヴヴelated Het┘eeミ sessioミs. That is, paヴtiIipaミ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 deIisioミ 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ミIe useヴげs o┗eヴall ケualit┞ judgeマeミts. Theiヴ ヴesults iマpl┞ that context and prior
iミfoヴマatioミ aHout ┘eHsites aヴe po┘eヴful iミflueミIes of useヴげs e┝peヴieミIe 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.
12
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ヴaItiミ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 Het┘eeミ iミIヴeasiミg the useヴげs マoti┗ation to
eミIouヴage useヴげs e┝ploヴatioミ aミd puヴIhasiミ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 human-
computer 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 さaItual 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.
13
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.
AIIoヴdiミg to Csíkszeミtマihál┞i ふヱΓΓヰぶ the IoミIept 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 (Csíkszentmihályi, 1990).
DuHHeヴle┞ aミd E┗eミsoミ ふヲヰヰΒぶ Ialled it けthe experience-cycle modelげ that マo┗es He┞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 Iustoマ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.
14
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
architeItuヴe iミ teヴマs of the stヴuItuヴal desigミ of the iミfoヴマatioミ spaIe 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ヴヴett’s useヴ e┝peヴieミIe eleマeミts
Useヴ e┝peヴieミIe 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 Iustoマeヴげs jouヴミe┞ has a slightl┞ diffeヴeミt iマpliIatioミ thaミ the tヴaditioミal logic. In this study I refer to the customer journey as the flow of use and navigation on fashion
15
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
Ioミsideヴatioミ the useヴsげ foIus of atteミtioミ as it Iaミ He foIused oミ the e┝peヴieミIe 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 Iustoマ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 Iustoマeヴ jouヴミe┞ staヴts ┘ith e┝ploヴiミg useヴsげ ミeeds aミd pヴoHleマ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 Ioマpetitoヴげs ┘eHsite Hefoヴe aItuall┞ Hu┞iミg soマethiミg aミd マaミ┞ ┘ill ミot Hu┞ 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 Ioマpaミ┞げs logo is alマost al┘a┞s at the uppeヴ left Ioヴミeヴ of the hoマepage aミd it also seヴ┗es as a けHoマeげ Huttoミ throughout the customer journey which takes
users back to the homepage. At the upper right corner users can find their shopping basket
and けM┞ aIIouミtげ liミk at the uppeヴ ヴight Ioヴミ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
16
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 Iustoマ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 ┘eHsiteげ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 possiHle to attヴaIt 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.
17
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ヴIeptioミ of a ┘eHsite Iaミ iミduIe a ┗aヴiet┞ of eマotioミs aミd ヴeaItioミs. These emotions
aミd feeliミgs iミflueミIe useヴsげ attitudes to┘aヴds the usaHilit┞ aミd the Ioマpaミ┞げs Iredibility as
┘ell as the ┘eHsiteげs Ioミteミt aミd the pヴoduIts 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
┘eHsiteげs likeaHilit┞ 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.
18
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. The analysis of collected methods.
2. Setting up my heuristics for evaluation based on previous studies.
3. The collection of websites to be evaluated.
4. 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
5. The analysis of the heuristic evaluations – qualitative and quantitative data analysis,
calculations based evaluation is carried out.
6. Description and interpretation of results.
7. 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.
8. 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
9. 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
10. Description and interpretation of results.
11. Creation of paper prototypes.
12. Focus group interview.
19
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ヴistiIs ┘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 web-
based 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ヴistiIs do マake ヴefeヴeミIe of aesthetiIs 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
20
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ヴaItiミsk┞ aミd La┗ieげs heuヴistiIs (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:
21
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.
22
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ヴistiIs) 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. Ease of Use: It is instinctive how to use the website.
ii. Convenience: Information can be found and used within a few clicks of the mouse.
iii. Readability: The fonts are appropriate in size, colour and style. The user can easily locate
and read the text.
iv. Consistency: The visual elements are applied consistently throughout the website.
v. Navigability: It is easy to manoeuvre from one link to the next. The links are in logical
order.
vi. Simplicity: Every element seems to perform a clear function.
AESTHETICS
i. Use of Colour: Appropriate use of colours and contrasts. Background and foreground
colours do not interfere.
ii. Balance: There is a good balance between the visual weight of the elements and the use of
white space.
iii. Visual layout: Visual layout is symmetrical and each page on the site shares a consistent
layout.
iv. Style: Use of curved shapes conveys an attractive visual style when contrasted with
rectangles.
v. Originality: The site takes an unorthodox approach and is distinguishable from other
fashion websites.
vi. Unity: The site has a consistent, clearly recognisable look and feel that will engage users.
23
vii. Clarity: The intent, organization, and appearance of the website is unambiguous and
directed.
viii. Sophistication: The website appears developed and complex. Images and text are visually
and conceptually distinct yet still harmonious.
ix. Order: The layout helps focus attention on what to do next.
x. Beauty: The site is pleasant to look at and the design encourages people to explore the
site.
xi. Special effects: The website includes animation, sound, or other unique forms of
interactivity. Attention-attracting features are used sparingly and only where relevant.
xii. 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. Conformity: The site follows convention of other fashion websites.
ii. Intrigue: The website captures my attention.
iii. Enjoyment: The website is enjoyable to interact with.
iv. Ability to Motivate: The website encourages me to act.
v. Visual affection: The images and other visual elements are consistent and appealing.
vi. 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ミ Hoth 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ミdiIates the score percentage, showing better and worse areas.
(Figure 3)
24
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
25
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マ oHseヴ┗iミg Hoth the sIヴeeミ aミd the paヴtiIipaミtげs faIe. 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げ
26
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 ヴeIoヴd paヴtiIipaミ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 Ioマe to this ┘eHsite 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
sIale foヴ the heuヴistiIs ┘as マaヴked fヴoマ ヱ ふAgヴeeぶ to ヵ ふDisagヴeeぶ aミd ン Heiミ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.
27
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 Iustoマ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 Iustoマeヴげs jouヴミe┞ that paヴtiIipaミts take oミ fashioミ ┘eHsites, 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 Cam“tudio™ ヴeIoヴdeヴ oミ the laptop. Based on the
observations and think-a-loud protocols the following customer journey was observed (Figure
6):
28
Figure 6
Customer Journey Framework
Adams and Blandford set up three stages of useヴげs iミfoヴマatioミ journey on informational
websites (Adams & Blandford, 2005):
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):
29
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 Hasketげ 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 HeIoマ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, seleItiミg ふさAdd to
basketざぶ oヴ e┗eミ lea┗iミg the ┘eHsite. Custoマeヴs Iaミ lea┗e to ┗isit a Ioマpetitoヴげs ┘eHsite 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
30
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
Ihoose fヴoマ the follo┘iミg マeミu iteマs: ┘oマeミげs ┘eaヴ, マeミげs ┘eaヴ, ミe┘ iミ, sale, Hlog 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 sub-
categories 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 e-
commerce 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 Ioミfiヴマatioミ page, sa┞iミg さThaミk ┞ouざ to Iustoマ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
31
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 aHout the Ioマpaミ┞げs IoマpeteミIe H┞ the ┘a┞ theiヴ ┘eHsite 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 ┘eHsiteげs desigミ as ┘ell as aloミg ┘ith the Iustoマ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
┘eHsiteげs desigミ aesthetiIs aミd ミot oミ the aesthetiIs of the fashioミ pヴoduIts 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.
32
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).
33
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
34
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ヴtiIipaミ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ヴIeげ aミ opiミioミ on participants; therefore I removed the neutral option and
used a 4 point scale.
35
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) Hased oミ paヴtiIipaミtsげ feedHaIks fヴoマ the seIoミ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ぶ Hased oミ paヴtiIipaミtsげ feedHaIks fヴoマ the seIoミd ヴouミd iミteヴ┗ie┘s. The two designs
ヴefleIted paヴtiIipaミtsげ feedHaIks aミd ┘eヴe Iヴ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 Hias paヴtiIipaミtsげ aミs┘eヴs.
36
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
┘eHsitesげ aesthetiIs aミd usaHilit┞ iミ ヴelatioミ to the Iustoマeヴ jouヴミe┞ that ヴeマaiミs the Ieミ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 Iustoマeヴsげ peヴspeIti┗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 touch-
points, 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 aIIoヴdiミg to paヴtiIipaミtsげ feedHaIks
37
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ヴtiIipaミtsげ e┝peItatioミs aミd eマotioミ le┗els ┘eヴe depiIted oミ the マap aミd I ┘aミted to マake suヴe that the Iustoマeヴ jouヴミe┞ マap is ┘ヴitteミ fヴoマ the Iustoマeヴげs peヴspeItive 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┝peItatioミ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.
38
PaヴtiIipaミ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
IhaヴaIteヴistiIs ┘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 seleItioミ 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 ┘eHsiteげs desigミ Iould affeIt 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).
39
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 ヴeIoヴd paヴtiIipaミ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:
40
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).
41
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%)
42
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.
43
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 sub-
category. 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
44
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ミIh CoミミeItioミげs ┗eヴtiIal la┞out ヴeduIes the マaiミ Ioミteミtげs spaIe oミ the sIヴ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.
45
Results – Customer Journey
Iミ oヴdeヴ to gaiミ aミ iミsight to the Iustoマeヴげs jouヴミe┞ that paヴtiIipaミts take oミ fashioミ ┘eHsites, 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ヴtiIipaミtsげ Heha┗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
46
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 must-
have requirement and that they like to see the clothes worn by models and in context.
PaヴtiIipaミtsげ fa┗ouヴite desigミ featuヴes iミIluded: 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ミ it’s just ミot Ileaヴ ┘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ミ Het┘eeミ the ┘eHsite aミd the items it was selling was on average focusing ンヰ% oミ the ┘eHsiteげ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…ざ.
47
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ミIe 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 Hu┞ otheヴ iteマs, ミe┘ tヴeミds, iミfo aHout 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ヴtiIipaミ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 Iategoヴ┞ aミd Hヴo┘se aマoミgst the ヴesults iミ that Iategoヴ┞ ふe.g. けNe┘ iミげ, けBlousesげ, け“aleげ, etI.ぶ
48
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. Homepage
2. Women
3. Dresses
4. Dress type
5. View all
6. Scan through dresses
7. Dress selected
8. Examine dress
9. Checking additional information about the dress
10. Basket view
11. 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
49
soマe paヴtiIipaミts ヴeマaヴked that too マuIh ┘hite さhuヴt theiヴ e┞esざ and that it should have a
softer white effect.
On the bipolar semantic scale participants rated the French Connection homepage brighter
thaミ the Whistles hoマepage ふiミ spite of the faIt that FヴeミIh CoミミeItioミげs hoマepage is マaiミl┞ white, grey and brown, whilst Whistlesげ is Hlue, piミk, ┞ello┘ aミd HlaIkぶ. Also, the French
CoミミeItioミ 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ミミeItioミげ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 Helo┘ the fold ふFigure 28ぶ ヴeIei┗ed Hetteヴ sIoヴes thaミ FヴeミIh CoミミeItioミげs foヴ both aesthetics and usability. It is interesting that so far the white background was preferred
50
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ヴ aesthetiIs Hut foヴ usaHilit┞ FヴeミIh CoミミeItioミげs ヴouミd shaped Huttoミs ヴeIei┗ed マuIh Hetteヴ ヴates thaミ Whistlesげ HlaIk sケuaヴe shaped Huttoミs (Figure 29).
Whistlesげ Huttoミs FヴeミIh CoミミeItioミげs Huttoミs
Figure 29 - Buttons
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ミIoミsisteミI┞ Het┘eeミ paヴtiIipaミtげs aesthetiI peヴIeptioミ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 Ioミsideヴed to He Hヴighteヴ thaミ Whistles iミ spite of the faIt that FヴeミIh CoミミeItioミげs homepage is マaiミl┞ ┘hite, gヴe┞ aミd Hヴo┘ミ, ┘hilst Whistlesげ is Hlue, piミk, ┞ello┘ aミd HlaIk. 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ミIh CoミミeItioミげs hoマepage, aミd the Whistles homepage was rated much messier than the French Connection homepage.
51
French Connection: Whistles:
Figure 30 – Comparison of the homepages on bi-polar semantic scale
Navigation System
Fashioミ ┘eHsites マaiミ ミa┗igatioミ s┞steマ Ioミtaiミs liミks to the マaiミ seItioミs ふe.g. Woマeミげs, Meミげs, Childヴeミ, “ale, etI.ぶ of the ┘eHsite. 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’ マaiミ ミa┗igatioミ system
Figure 32 - French CoミミeItioミ’s マaiミ ミa┗igatioミ system
52
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ヴtiIal la┞out ヴeduIes the マaiミ Ioミteミtげs spaIe oミ the sIヴeeミ used up H┞ 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ミIh CoミミeItioミげ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).
53
Figure 34 - FヴeミIh CoミミeItioミ’s seIoミ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┞ ┘eHsite. This Iaミ He e┝plaiミed H┞ paヴtiIipaミtsげ マeミtal マodels ┘hiIh 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.
54
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ヴoHaHl┞ the さshoppiミg Iaヴ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ヴマ さHagざ ┘hile Whistles uses さHasketざ aミd also has aミ さAdd to Wish Listざ Huttoミ (Figure 36). Wheミ paヴtiIipaミts seleIted the さAdd to Wish Listざ Huttoミ 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ヴtiIipaミ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 Huttoミ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 ┘hiIh 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.
55
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., けLookHookげ 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
Ilaiマ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).
56
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 Ilothes, Whistlesげ displa┞s ┘eヴe Hetteヴ ヴated foヴ usaHilit┞, HeIause 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ミIh CoミミeItioミぶ. As foヴ the description participants explained that they needed useful information and not codes, like
“KUげs aミd pヴoduIt Iodes, aミd that the desIヴiptioミ of the dヴess should He shoヴt aミd IoミIise 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.
57
Shopping Basket
Whistlesげs shoppiミg Hasket 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ヴtiIipaミts ┘eヴe aHle to see ┘hat is goiミg to happeミ ミe┝t, ┘heヴeas Whistlesげ ┘eHsite 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.
58
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 aesthetics-
usability 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.
59
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.
Usability
Aesthetics
60
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ミIh CoミミeItioミげs desigミ said that it ┘as マoヴe sophistiIated 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ミIh CoミミeItioミげs ┘eHsite ┘as
61
preferred by マoヴe paヴtiIipaミts HeIause of its fuミItioミal featuヴes aミd usaHilit┞ Hut 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 left…like 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ぶ Hased oミ paヴtiIipaミtsげ feedHaIks fヴoマ the seIoミ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┝Ilusi┗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ヴtiIipaミtsげ aミs┘eヴs.
Figure 48 – Homepage design of the paper prototypes
62
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 & JaIketsげ Iategoヴ┞ 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ミIe to the けCoats & JaIketsげ Iategoヴ┞ oミ the Iolouヴful desigミ, ヴepoヴted eaヴlieヴ, Hut 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マalistiI desigミ aミd the laヴge iマages di┗eヴted the paヴtiIipaミ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 aesthetiI 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 Hetteヴ ヴated thaミ the otheヴ oミe ┘hiIh didミげt ha┗e the け“aleげ マeミu poiミt highlighted ┘ithiミ the マaiミ ミa┗igatioミ.
63
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マalistiI ┘eHsite 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 HaIkgヴouミd ┘oヴked
better when it came to examining the dress and zooming in and out, because the white
HaIkgヴouミd offeヴed a Hetteヴ Ioミtヴast aミd she Iould 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.
64
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ヴ aesthetiI eleマeミts suIh as the soIial マedia Huttoミs aミd the さAdd to Hasketざ Huttoミs ヴeIei┗ed atteミtioミ. It ┘as adマitted H┞ paヴtiIipaミts that FaIeHookげs Like Huttoミ ┘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
Ioミsideヴed it as Heiミg さtoo マuIhざ.
The otheヴ outstaミdiミg eleマeミt ┘as the さAdd to Basketざ Hutton. Both participants agreed that
the siミgle Huttoミ ┘ith the さAdd to Bagざ te┝t ┘as the Hetteヴ optioミ oミ the Iolouヴful ┘eHsite. 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 Heiミg stヴaight foヴ┘aヴd siミIe 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.
65
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ざ Huttoミ 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マalistiI oミe, ┘as Ioミsideヴed to He さマess┞ざ HeIause oミ the hoマepage it ┘asミげt Ileaヴ 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 ┘eHsite, aミd the マiミiマalistiI ┘eHsite 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
66
マost effeIt oミ paヴtiIipaミtsげ jouヴミe┞s ふhoマepage, zooマiミg, etI.) based on the feedback
received from participants.
Theヴe Iaミ He ┗aヴious ヴeasoミs foヴ useヴs to aヴヴi┗e oミ the fashioミ ┘eHsiteげ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 さ“eleIt/E┝aマiミeざ stage ┘heヴe useヴs Iaミ 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ミIe aミd appeal aミd the┞ also e┗aluate ┘hetheヴ the Hヴ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
o Colours
o Text (font, style)
o Background image
o Menu bar, menu options
o Structure, layout (header, footer), symmetry, space (use of space, white space) , oddity
(quirkiness)
o Navigation, site-flow -> astute site-flow that guides users to follow instinctively an
obvious path set by the brand
o Sale, special offers, multi buy discounts
67
o Buttons: button graphics, size, colour, text
o Links
o Lists
o Animation (size, quality)
o Audio content
o Video content
o Pop-ups, banners, ads
Figure 52 – Aesthetic elements on the homepage
The jouヴミe┞ Ioミtiミues aloミg the ┘oマeミげs seItioミ that is ヴeaIhed ┗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 Ioミsideヴed to He useful H┞ paヴtiIipaミts iミ this pヴojeIt. 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 Hasket H┞ IliIkiミg oミ けAdd to Basketげ oヴ けCheIk Outげ Huttoミs, useヴs Iaミ go stヴaight iミto theiヴ Hasket ┗ie┘ ┘heヴe the┞ Iaミ ヴe-
check 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
68
jouヴミe┞ fヴoマ the useヴsげ peヴspeIti┗e; さThiミkiミgざ, さFeeliミgざ aミd さE┝peヴieミIeざ. 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
piItuヴe, ┘heヴeas if the eleマeミt had a ミegati┗e effeIt oミ paヴtiIipaミ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
usaHilit┞ HeIause 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ヴaIt ┘ith. It is the e┝peItatioミ of the useヴs that a ┘eHsiteげ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┞ oHe┞ to the けNe┝tげ Huttoミ 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).
69
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
Iustoマeヴげs jouヴミe┞ oミ fashioミ ┘eHsites that sho┘s the iマpaIts of digital artefacts in relation
to usability and also to the user experience. This has been achieved by identifying the digital
aヴtefaIts, マetaphoヴs aミd peヴIei┗ed affoヴdaミIes aミd theiヴ iマpaIts 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.
70
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. AesthetiIs iミflueミIe gヴeatl┞ peopleげs deIisioミ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 usaHilit┞ foIuses oミ useヴげs task aミd aIIoマplishマeミts, useヴ experience (UX) emphasizes a more holistic vie┘; uミdeヴstaミdiミg the Ioマ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 effeItざ appeaヴs to fade afteヴ iミitial use.
Although the ┘eHsiteげ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
71
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 ┘eHsiteげs desigミ. Participants claimed that the quality of the
┘eHsiteげs desigミ aミd the ケualit┞ of the Ilothes 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 ┘eHsiteげ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.
72
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ミIe the iミteヴaItioミ ┘ithiミ the Hヴ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 Iustoマeヴげs atteミtioミ oミ the pヴoduIt 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ヴistiIs (Chen, 2009).
さThe desigミ of the ┘eHsite doesミ’t マatteヴ if the Ilothes it is selliミg is ミot high ケualit┞ざ. ふPaヴtiIipaミtげs Ioママeミt iミ the seIoミ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ミ foIused 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 seleItioミ of siマilaヴ ┘eHsites, selliミg siマilaヴ seヴ┗iIes oヴ pヴoduIts, 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
73
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 ┘eH pages should ha┗e a さbeautiful sheen where you can get to the point quicklyざ
ふpaヴtiIipaミtげs feedHaIk, 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 HeIoマ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
Iaミ iミduIe tヴust┘oヴthiミess H┞ addiミg a けhuマaミ touIhげ if the gaヴマeミt is sho┘ミ iミ Ioミte┝t oヴ worn by a model.
According to “utIliffeげs heuヴistiIs 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ヴIeptioミ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.
74
CONCLUSION
Iミ this pヴojeIt マ┞ aiマ ┘as to ヴe┗eal the digital aesthetiI eleマeミts that dヴi┗e useヴsげ Iustoマ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ミ ┘eHsites that sho┘s the iマpaIts 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ミIe duヴiミg the oHseヴ┗ed steps of the Iustoマ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.
75
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ヴIhiteItuヴe iミ teヴマs of the stヴuItuヴal desigミ of the iミfoヴマatioミ spaIe 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ヴistiIs) 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
76
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┘ミ suHjeIti┗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 faIt that she hasミげt Heeミ aHle to fiミd aミ┞ attヴaIti┗e iteマ Iould 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 Iould マiミiマize the IhaミIe to Hias paヴtiIipaミ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 ┘eHsiteげs desigミ Iould affeIt 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.
77
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 ┘eHsiteげs desigミ pヴoIess iミIludes useヴ ヴeseaヴIh ┘hiIh is Ioマpleted Hefoヴ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.
78
References
Adams, A., & Blandford, A. (2005). Digital liHヴaヴies’ suppoヴt foヴ the useヴ’s iミfoヴマatioミ jouヴミe┞. Denver, CO, USA: JCDL 2005, 7-11 June 2005.
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
Csíkszentmihályi, 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-conference-
proceedings.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. 855-
864.). 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.
79
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 1439-
7854.
Molly Eckman, J. W. (1995). Aesthetic aspects of the consumption of fashion design: The
conceptual and empirical challenge. Advances in Customer Research, Volume 22, 646-
649.
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.
80
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. 405-
417.
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-lecture-
5,632,AR.html (accessed 22/05/2012)
http://www.mycustomer.com/topic/customer-intelligence/customer-journey-
mapping/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/aesthetics-
usability.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)
81
Appendix 1: Project Proposal for MSc Human-Centred Systems
Name: Anna Tamasi
E-mail address: [email protected]; [email protected]
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 Iustoマeヴげs jouヴミe┞ iミ a shop is guided H┞ shop assistaミts aミd faIilitated 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ヴetaHle aミd ヴeマeマHeヴed H┞ the useヴs aミd should マeet the Iustoマeヴげs e┝peItatioミ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
82
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ミIe the iミteヴaItioミ ┘ithiミ the Hヴ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ヴojeIt the authoヴげs aiマ is to ヴe┗eal the digital aヴtefaIts 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ヴojeIt is to de┗elop a geミeヴiI マappiミg of the Iustoマeヴげs jouヴミe┞ oミ fashion websites that shows the impacts of digital artefacts in relation to the user experience.
“peIifiIall┞, ┘ithiミ the Ioミte┝t of the Iustoマ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ミIe duヴiミg the Iustoマeヴ jouヴミe┞ oミ fashioミ ┘eHsites.
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ヴaItiIes aミd stakeholdeヴs ┗ie┘s ヴelated to useヴ e┝peヴieミIe 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ヴiI マap of the Iustoマeヴげs oミliミe jouヴミe┞, iミIludiミg IヴitiIal tuヴミiミg points where artefacts affect emotions and user experience on fashion websites.
Research questions
83
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マpaIts desigミ aヴtefaIts 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 Csíkszentmihályi (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.
DuHHeヴle┞ aミd E┗eミsoミ ふヲヰヰΒぶ Ialled it けthe e┝peヴieミIe-I┞Ile マodelげ that マo┗es He┞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ミIes Ioミsuマeヴげs deIisioミ マ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).
84
In this research the author is also intended to evaluate Halo-effeIts 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 Iustoマeヴげs jouヴミe┞ oミ fashioミ ┘eHsites ┘eHsites that sho┘s the iマpaIts 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
85
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.
86
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 (June–July)
3. Research methods: 2 weeks (July)
4. Data collection: 3 weeks (Aug.)
5. Findings: 3 weeks (Aug.–Sep.)
6. Conclusion: 2 weeks (Sep.)
87
Research Ethics Checklist
Number Question
Yes/No
(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 Yes the student?
2. Does it pose only minimal and predictable risk to other people Yes affected by the project?
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 Yes risks?
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 No information about, people who are vulnerable because of their social, psychological or medical circumstances?
7. Does the project involve animals? No
8. Does the project involve research on pregnant women or women in No labour?
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 No people who may include minority groups?
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 :
12. fully informed about the procedures affecting them and affecting any Yes
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 Yes clear to them that they may withdraw at any time?
16. Will the student make arrangements to ensure that material or Yes private information obtained from or about these people remains confidential?
88
88
Appendix 2: Heuristic Evaluation – pre-test questions
1. First, ┘hat’s your oIIupatioミ? What do you do all day?
ChC Stay at home mum, I do general household and manage 2 children (at school).
NSch Retaining, home studying, half-time mum.
NZ Shopping
CR Entrepreneur mum of two. I am currently setting up my online jewellery shop
with my mother-in-law.
AN Busy (working) mum of two.
LB
2. Roughly, how many hours a day altogether—just an estimate— would you say you spend
using the Internet (including browsing, email and shopping)?
ChC 3 hours, I use my mobile phone (iPhone), iPad, Facebook and I shop everything online
NSch 3-4 hours
NZ 2-3 hours
CR 1 hour approximately
AN 3-ヴ hヴs, Hut I sit iミ fヴoミt of the Ioマputeヴ all da┞…
LB
3. How frequently do you buy online?
ChC Roughly, ┘eekl┞ … oヴ a Iouple of tiマes a マoミth.. NSch Not ┗eヴ┞ ofteミ, oミIe a マoミth I’d sa┞. NZ Couple of times a month.
CR OIIasioミall┞, マostl┞ ┘heミ theヴe’s a Hiヴthda┞ Ioマiミg up oヴ at Chヴistマas tiマe…
AN Monthly, sometimes weekly
LB
4. List 3 words that you associate with online shopping:
NZ Bargain
ChC Choice
CR Convenience
AN Convenience
NZ Convenience
NSch Convenience, efficiency
NZ Designer wear
CR Ease
ChC Ease (and my laziness)
AN Fun
NSch Google, searching
CR Quick
NSch Sale
AN Saving time
89
89
ChC Speed
LB
5. List 3 words that you feel when you are doing online shopping
NSch I feel like I saved time
NSch Bargain hunting
NZ Comfort
AN Excitement
AN Guilt (that I spent a fortune)
ChC Happiness
NSch It makes me mobile (virtual mobility)
NZ Relaxed
ChC Satisfaction
NZ Satisfaction
AN Satisfaction
CR “atisfaItioミ, it’s さDoミe!ざ aミd I do ミot ha┗e to deal ┘ith it aミ┞ マoヴe
ChC Sense of guilt (to spend lots of money)
CR Vulnerable (that something can go wrong – eg. my delivery gets lost or the company goes bust)
CR Woヴヴied that stuff doミ’t aヴヴi┗e
LB
6. How would you compare the online and offline shopping experience?
ChC I pヴefeヴ oミliミe shoppiミg. It is so eas┞; I Iaミ Hヴ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┞ Ioマe aミd IolleIt it fヴoマ my house).
NSch For me offline shopping means a more impulsive ad hoc pleasure. You treat yourself because
┞ou go out ふit’s a leasuヴeぶ. Oミline shopping is for saving time, more convenience than pleasure.
It is good for saving time and to compare prices.
NZ Oミliミe shoppiミg is good HeIause foヴ its easiミess, Ioマfoヴt aミd it takes ミo effoヴt…┞ou Iaミ still watch TV or eat in the meantime.
CR I thiミk that ┞ou Iaミ’t Ioマ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 ふケuiIkl┞ぶ…
AN
I pヴefeヴ oミliミe shoppiミg, HeIause I siマpl┞ Iaミ’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, etI. But I like offliミe shoppiミg HeIause ┞ou Iaミ aItuall┞ feel the te┝tuヴes aミd Iolouヴs…uミfoヴtuミatel┞ I do ミot ha┗e tiマe foヴ this.
LB
7. Which websites do you use to buy clothes and to learn about fashion trends? Why?
ChC To leaヴミ aHout fashioミ tヴeミds I use the マagaziミes ふIミ“t┞le, Elle, etIぶ…foヴ ┘eHsites I use: Net-a-Porter, Matches, Mywardrobe, DonnaIda, H&M, Zara, Mulberry, Jigsaw, A“O“…
NSch Jigsaw, Joseph and Ventre-privee.
NZ OutNet – it’s a good ┘eHsite to follo┘ tヴeミds oヴ look foヴ soマethiミg speIial to tヴeat ┞ouヴself ┘ith. CR OutNet, Net-a-Porter, and the vintage clothes on Vestiarie Collective
AN ASOS, Massimo Dutti, Zara, Maミgo, etI. Foヴ fashioミ tヴeミds I look oミliミe oヴ I Hu┞ マagaziミes…
LB
8. What types of fashion items do you look for on the Internet? Why?
90
90
ChC E┗eヴ┞thiミg…shoes, uミdeヴ┘eaヴ…if I see soマethiミg iミ a マagaziミe that I like, I go oミliミe and buy it online…I ミe┗eヴ tヴ┞ aミ┞thiミg oミ iミ shops.
NSch Dresses (evening dresses) and basics (T-shirts)
NZ “hoes, haミdHags. These aヴe the マost likel┞ iteマs to Ioマe iミ the ヴight size aミd doミ’t require returns.
CR Dヴesses, Hags, je┘elヴ┞, shoes…
AN Dresses, tops, knitweaヴ, shoes…e┗eヴ┞thiミg ヴeall┞! I kミo┘ マ┞ sizes aミd it is eas┞ foヴ マe to Hu┞ oミliミe. I Iaミ also ヴetuヴミ theマ at aミ┞ tiマe…
LB
9. Ho┘ do you Ihoose your iteマs ふe.g. Ilothesぶ oミ the ┘eHsite? Do you ha┗e さa strategyざ or favorite way of doing it? Why?
ChC Usuall┞, I’┗e seeミ soマethiミg speIifiI oヴ seeミ soマethiミg oミ soマeHod┞…theミ I tヴaIk it do┘ミ oミ the iミteヴミet ふH┞ the Hヴaミd…I also seaヴIh H┞ the iマages..ぶ
NSch I al┘a┞s Google it fiヴst aミd Ioマpaヴe pヴiIes. If theヴe’s sale I’d fiヴst IliIk to see, Hut I always end up at the non-sale iteマs…┘eHsites aヴe good at diヴeItiミg ┞ou HaIk to the non-sale iteマs…
NZ I oミl┞ Hu┞ Hヴaミds that I kミo┘ oヴ fヴoマ ┘eHsites that I’┗e Hought Hefoヴe aミd I tヴust theマ.
CR I usually browse these websites to get inspiration for something, but then I do not
necessarily buy them.
AN It depeミds oミ if I ミeed soマethiミg uヴgeミtl┞ oヴ I’マ just Hヴo┘siミg. Iミ the fiヴst Iase 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 Net-a-Porter I find it aspirational, Matches and Mywardrobe
NSch Jigsaw, because their fashion is a bit different from the rest, they only use pure cotton and
silk…it’s a loミg teヴマ fashioミ
NZ OutNet because they have a selection of designers
CR The same as before: OutNet, Net-a-Porter, and the vintage clothes on Vestiarie Collective
AN 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ミI┞ 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
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 Iaヴt the da┞ Hefoヴe…Retuヴミ is also ┗eヴ┞ iマpoヴtaミt foヴ マe as I Hu┞ lots of stuff online and most of them go straight back.
NSch Different views (front, back) anything that makes it more efficient to see the colours, sizes, etc.
AN Images must be sharp and crisp with good contrast and on a model
NZ Displays (images and photos) are good and descriptions are clear
ChC Images: to be able to enlarge, see the material, to expand it
NSch Composition, details and information about the dress
CR To be able to see the dress on the mannequin
NZ Easy to maneuver
NZ The ┘a┞ ┞ou Iaミ Hヴo┘se the ┘eHsite, that’s oミ the hoマepage ふマeミuぶ AN Simple navigation, straight forward path to checkout, but also secure!
91
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 Iaミ’t zooマ iミ to see the te┝tuヴe I ┘ill ミot Hu┞ it
CR -
LB
12. Do you think that the website design could affect your purchase? How? Why?
ChC I doミ’t like it ┘heミ it is too Ilutteヴed oヴ too diffiIult to ミa┗igate. I also fiミd it ┗eヴ┞ aミミo┞iミg ┘heミ ┞ou ha┗e to joiミ iミ to Hu┞ ふeg. CoIosaぶ…ahh.. aミd I ┘aミt to see the clothes on a model and they have to give the dimensions of the clothes.
NSch
Yes, you can get so much more information and detail if the design is close to the offline
e┝peヴieミIe. If I see a Iheap ┘eHsite that puts マe off…it’s haヴd to He speIial…I hate hea┗┞ flash ┘eHsites oヴ ┘heミ ┞ou ha┗e to skip the hoマepage HeIause theヴe’ s aミ aミiマatioミ. I also find it cheap if they put too many colours or flash.
NZ Yes. Oミ soマe ┘eHsites ┞ou Iaミ’t zooマ oヴ ┞ou Iaミ’t see the details…
CR Yes, if it looks professional it gives me security and of course ease of use.
AN Of Iouヴse, if the site looks uミpヴofessioミal aミd Iheap I ┘ouldミ’t tヴust theマ. But alマost all fashioミ ┘eHsites ha┗e the saマe Iolouヴ sIheマes ふ┘hite HaIkgヴ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 Net-a-Poヴteヴ, Hut I Iaミ’t affoヴd to shop theヴe all the tiマe..I also like ┘heミ otheヴ ┘eHsites, like Zara, show what other items the model is wearing, so that if I like the whole look I can
buy everything.
NSch ンD ┗ie┘s of iマages, Pa┞Pal ふit’s ケuiIkeヴ, easieヴ, less ヴepetiti┗e, HeIause ┞ou doミ’t ha┗e to type in your card details)
NZ 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.
CR It is easy to overview, the drop down menus are clear, the navigation is easy and it is easy
to go HaIk to the last iteマ I ┘as lookiミg at. The Iategoヴies aヴe IヴuIial…to foヴ e┝aマple differentiate between evening dresses and day dresses.
AN 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 Female
NSch Female
NZ Female
CR Female
AN Female
LB Female
15. What is your age?
92
92
ChC 39
NSch 34
NZ 34
CR 38
AN 35
LB
93
93
Appendix 3: Fashion Websites for Heuristic Evaluation
Website: http://www.frenchconnection.com/
Accessed on 05/07/2012
96
96
Accessed: 05/07/2012
98
98
100
100
Website: http://comptoirdescotonniers.com/fra/Home.aspx
101
101
102
102
103
103
Appendix 4: Heuristic Evaluation Results
104
104
FCUK
Reiss
Whistles
Jaeger
Ted Baker
Comptoir desCotonniers Usability
Aesthetics
User experience
Overall experience
105
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 ミiIe that iマages Ioマe out, Hut 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 sIヴoll o┗eヴ it gi┗es a Ilose 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 Iategoヴ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ぶざ
106
106
- さThe aミiマatioミ at the top, ┘hatげs the puヴpose of it?!ざ, さDoミ't like the Hig headliミes aミd the animation (it's a ┘aste HeIause I doミ't Iaヴeぶざ
- I don't like adverts, social networks
- さI aマ ミot ┗eヴ┞ keeミ oミ the Iolouヴs ふヴed, ┘hite aミd gヴe┞ぶざ, さミo HaIkgヴouミd iマages, ミo Iolouヴsざ, さIolouヴs aヴe ┗eヴ┞ pooヴ; I thiミk the┞ aヴe ミot iミ liミe ┘ith the Hヴaミd's iマageざ
- it doesn't make me feel very special
- さ)ooマ is teヴヴiHle, ┘hite ┘ith ┘hite HaIkgヴouミd doesミ't ┘oヴk foヴ マeざ, さミo supeヴ eミlaヴge faIilit┞ざ
- images are not sharp
- the size guide is messy, I don't like it
- too マuIh iミfo aHout the dヴess…I doミ't Iaヴe, I oミl┞ ┘aミt to see ┘hat's it made of and the
care instructions
- "┞ou マight also like" is good Hut ┘heミ I IliIked oミ it, it ┘as out of stoIk…theiヴ 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 IheIkout pヴoIess ふIolouヴs, optioミsぶ, さPeヴfeIt IheIkout, 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:
107
107
o it is very annoying on the iPhone and iPad, because the pop-up is floating around
o the wish list feature is ok but it asks to log in and I find that very annoying
o it's a bit busy but the sizes of the images are good
o whilst you are zooming some info disappears from the screen (as the zoom covers it)
o colours are dull
o "Sorry, out of stock" message is very annoying and frustrating! Don't show if you don't have
it on stock
o I don't get this Wish List thing (I never click on it)
o I ミe┗eヴ ヴead the st┞le iミfo…I thiミk it is a ┘aste of space
108
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)
ヵ. IheIk the Iategoヴ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 Hasket ふIliIk oミ けAdd to Basketげ oヴ けCheIk Outげぶ 14. go to “hoppiミg Basket ふIliIk oミ the iIoミ at the top ヴightぶ oヴ ┗ia the けAdd to Basketげ Huttoミ
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:
109
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
Huildeヴげs ┘a┞. Wheミ Chaミtel has a Hit of tiマe aミd oミ heヴ o┘ミ she goes oミ the Iミteヴミet aミd IheIks 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
110
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 HeIause it is ┗eヴ┞ Ioミ┗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┞ faItoヴ iミ heヴ puヴIhasiミg pヴoIess; if she Iaミげt see the Ilothes fヴoマ a Ilose ┗ie┘ she will not
Hu┞ it. Chaミtel doesミげt like those ┘eHsites ┘heヴe she has to sigミ iミ Hefoヴe seeiミg the Ilothes 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.
111
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
┘eHsites. NiIole is ┗eヴ┞ pヴiIe IoミsIious so she doesミげt ミeIessaヴil┞ Hu┞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.
112
112
113
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, Ilothes. But I pヴefeヴ offliミe shoppiミg…I'd take the ヴefeヴeミIe 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 ふIaミげt ヴeマeマHeヴぶ
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 Ileaヴ, I Iaミ see the Woマeミ's seItioミ ヴ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…Hut I ┘ould go to a ┘eHsite if I ヴeIei┗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!
114
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 Hetteヴ, the size…I like to feel/touIh it as if I ┘eヴe iミ a shop…HeIause 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┞…Hut 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
115
115
MF: Select the dress by size, colour and by price. As for the text; black and white is fine, kind of マiミiマalistiI, Hut I aマ マoヴe iミteヴested iミ the dヴess…the マ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 Iolouヴs…if I Iaミ see that it is マ┞ st┞le theミ I'd sta┞ Hut if ミot, I'd lea┗e immediately. LB: I like that ┘eHsite ┗eヴ┞ マuIh…so I ┘ouldミ't Ihaミge aミ┞thiミg. AudC: It is too conventional and staミdaヴd…the マodels Iould He togetheヴ aミd sho┘ミ iミ Ioミ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ヴaIt ┘ith the ┘eHsite…so I suppose ┘heミ ┞ou aヴe seleItiミg the dヴess ┞ou aヴe foIusiミ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 Hut if itげs ミot ┗eヴ┞ attヴaIti┗e I ┘ill ミot go HaIk to that ┘eHsite 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ヴ it…It HeIoマes ヴealit┞, is a lot aHout ┗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.
116
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 Hヴight Iolouヴs…it 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 Ioミte┝t…Hut it is ok aミd oミ a マodel al┘a┞s e┗eヴ┞thiミg looks good…if it has a Ioミ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 Hu┞ otheヴ iteマs, ミe┘ tヴeミds, iミfo aHout 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?)
117
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 suHIategoヴ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ヴミ H┞ a マodel aミd it is sho┘ミ iミ Ioミte┝t…Hut of Iouヴ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ヴ Ilothes shoppiミg thaミ iミdi┗idual Hヴaミdsげ ┘eHsites.
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 ┘eHsiteげ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 ┘eHsiteげ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ヴtiIipaミts didミげt like aヴe: cluttered design, takes too long to load (2/6),
さwhen it’s just not clear what it doesざ, too Ioミ┗eミtioミal aミd staミdard desigミs, too loud マusiI. 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ヴaIt ┘ith the ┘eHsite…so I suppose ┘heミ ┞ou aヴe seleItiミg the dヴess ┞ou aヴe foIusiミ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
118
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
aesthetiIsぶ: good seaヴIh faIilit┞, ミot too マuIh sIヴ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ヴtiIipaミ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 speIifiI iteマ/Hヴ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 Iategoヴ┞ ふe.g. けNe┘ iミげ, けBlousesげ, け“aleげ, etI.ぶ
119
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 ヴeIoママeミd F‘ENCH CONNECTION HeIause the piItuヴes aヴe Hetteヴ, the photos…I 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…Hut 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, Hut ミot ┗eヴ┞ effeIti┗e HeIause I had to go thヴough all the pヴoduIts… 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┞ Iaヴ! Aミd ミot a ヴaIiミg Iaヴ, like a PoヴsIhe 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 マuIh…
120
120
MS: Whistles is boring, old fashioned ho┘ the┞ ミaマed theiヴ Iategoヴ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“: F‘ENCH CONNECTION: CheIkout, it's just too マuIh iミfoヴマatioミ theヴe… MF: Whistles: I'd change the structure, the menu and the navigation. FRENCH CONNECTION: I'd Ihaミge the マeミu oミ the left…like 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ミ マoHiles… 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)
121
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ヴtiIipaミtsげ ヴeaItioミ 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
122
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.
123
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ヴtiIipaミtsげ ヴespoミses oミ a siミgle sIale foヴ eaIh page to
help identify any patterns.
V. Post-interview:
Time: max 20 minutes
124
124
APPENDIX 11 – Card Sorting
125
125
Appendix 12 – Emotional Reaction Matrix
126
126
Appendix 13 - Bi-polar semantic scale
127
127
Homepage:
French Connection: Whistles:
Navigation page:
French Connection: Whistles:
Product view page:
French Connection: Whistles:
128
128
Zooming:
French Connection: Whistles:
Basket/Checkout page:
French Connection: Whistles:
129
129
APPENDIX 14 – Fashion Websites Paper Prototypes
130
130
131
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 Hヴo┘se ┘eHsite just to see ┘hatげs theヴe, Iげd al┘a┞s look oミ a ┘eHsite 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ヴ IliIk oミt he Helo┘ the fold iミfo…
E: Me neither!
A: Iげd IliIk fiヴst oミ Woマeミ aミd ┘ithiミ ┘oマeミ Iげd IliIk oミ the Iategoヴ┞, ミot oミ the shoes iIoミ HeIause i ┘ouldミげt kミo┘ if itげs ┘oマeミげs oヴ マeミげs… But i doミげt like this paヴt of the ┘eHsite ふ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 H┞ oミe to see these??? It ┘ould take a lot of tiマe…theヴeげs ミo added ┗alue foヴ マe ┘ith this design.
E: I agヴee, Iげd ミe┗eヴ IliIk oミ soマethiミg like this. It is ミot aesthetiIall┞ pleasiミg aミd it doesミげt マake the website more colourful whatsoever
A: ┞es, i doミげt like this s┞steマ at all, I ┘ouldミげt kミo┘ ┘hat to do ┘ith it: IliIk oミ eaIh of theマ oヴ what?
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 Ilick to too many places, because i can see straight away
„Bagsざ ups this is ┘hat I ┘aミt, so „IliIkざ…
E: ┞es, aミd the „“aleざ マeミu is ┗eヴ┞ good, HeIause 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 IheIk the sale fiヴst
E: yeah, Sale is the best! (both laugh)
E: Hut Iげd ミe┗eヴ IliIk heヴe at the Hottoマ..
A: ┞es, I kミo┘ ┘hat kiミd of iミfoヴマatioミ the┞ put theヴe ふIustoマeヴ seヴ┗iIes, deli┗eヴ┞, etIぶ Hut Iげd IheIk these later on, when I decidet o buy something. Not at the beginning! Maybe it is there because it
マakes the ┘eHsite look マoヴe offiIial aミd pヴofessioミal. Aミd Iげマ suヴe that at soマe poiミt Iげd IheIk the shippiミg Iosts, 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..
132
132
So, when would you check this information about the delivery and shipping?
E: If i see that I like the ┘eHsite aミd the Ilothes the┞ aヴe selliミg Iげd IheIk fiヴst ┘hetheヴ the┞ ship to Huミgaヴ┞ HeIause if I fall iミ lo┗e ┘ith oミe pieIe aミd theミ I fiミd out that the┞ doミげt ship that ┘ould He disappoiミtiミg. Thatげs ┘h┞ it is ┗eヴ┞ iマpoヴtaミt foヴ マe to IheIk 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
Iategoヴies heヴe, OK theヴeげs the マeミu that tell you that there are bags, shoes, etc But I am
IoミIeミtヴaiミg oミt he iマages so マuIh that I ┘ouldミげt ミotiIe oヴ IheIk the マeミu iteマs. It gi┗es the iマpヴessioミ that theヴe aヴeミげt マaミ┞ Iategoヴies.. The otheヴ oミe has a マagaziミe feeliミg, like Elle oヴ soマethiミg…
Is it a pヴoHleマ foヴ ┞ou if theヴe aヴeミげt マaミ┞ Iategoヴ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ママ…HeIause 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 IolleItioミ ┘eHsite aミd higheヴ ケualit┞ Ilothes. It is ケuite st┞lish aミd Ileaミ, マiミiマalistiI, so Iげd e┝peIt higheヴ ケualit┞ pヴoduIts fヴoマ this ┘eHsite…
Also, it puts マe off these iマages oミ the hoマepage ふthe Iolouヴfulぶ, itげs too マuIh foヴ マe. I doミげt ha┗e time for this.
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.
133
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 Hut ミot ミeIIessaヴil┞ e┝Ilusi┗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
HeIause it looks Hetteヴ foヴ マe. Fヴoマ the otheヴ ┘eHsite, 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 ┘eHsite so I guess if i
┘aミted to Hu┞ a speIifiI Hヴaミd oヴ desigミeヴ theミ i ┘ould Hu┞ fヴoマ this ┘eHsite…to get a good Haヴgaiミ… But the otheヴ oミe ふthe Iolouヴ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 IliIk too マuIh. I Iaミ filter the sizes, the price, the
Iolouヴs…HeIause 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 Iaミ 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 HeIause i hat IliIkiミg HaIk 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 piItuヴe is the saマe, itげs the saマe dヴess??!!
134
134
A: Yes, Hut the ┘hole piミk thiミg thatげs goiミg oミ oミ the page…it alマost feels as heヴe the┞ ヴeally want
to sell the iteマ HeIause of the マaミ┞ thiミgs goiミg oミ, ┘hile heヴe itげs マoヴe マiミiマalsitiI 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 Iolouヴfulぶ is the FaIeHookヱs Like Huttoミ and other social media icons. I hate it, they want me to advertise their products and that they come
iミto マ┞ pヴi┗aI┞…
A: Yes, Hut the┞ ha┗e the Hetteヴ „Add to asketざ Huttoミ..ふthe Iolouヴfulぶ. This is IoミIヴ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 laHel…hママ…still I pヴefeヴ this oミe ふthe Iolouヴfulぶ HeIause it looks マoヴe materialistic to me.
Checkout page:
E: For me, this oミe is the peヴfeIt oミe HeIause the┞ do Pa┞Pal. If I Iaミげt pa┞ ┘ith Pa┞Pal theミ i ┘ill ミot buy from that website.
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┘ マuIh the┞ Ihaヴge foヴ the deli┗eヴ┞…
E: Yes, ┘hiIh is good Hut…
And what about the info/picture of the dress?
E: But i just Hought it, ヴight? “o i kミo┘ it, I doミげt ミeed to ヴead i toヴ IheIk it agaiミ. I ミe┗eヴ pa┞ atteミtioミ to this. Iげ┗e just seleIted the size and the colour..My attention is on the price and the next
step to Hu┞ the dヴess. Also ┘hatげs ヴeall┞ iマpoヴtaミt to マe is the „Coミtiミue shoppiミgざ Huttoミ that takes マe HaIk to the last seeミ iteマ, ミot the hoマepage, HeIause 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 Iolouヴs, foヴ マe heヴe is ミot ヴele┗aミt.
135
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ミg…At the pa┞マeミt poiミt I oミl┞ pa┞ atteミtioミ to the pヴoIess ミ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 Hu┞ soマethiミg. Aミd oミIe I Hought soマethiミg Iげマ oミl┞ IoミIeミ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 models…i ┘aミt to see it ヴealistiIall┞ oミ ヴeal people like me.
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マ this ┘eHsite ふthe plaiミぶ, Hut Iげマ sure that I could find something from this one (the colourful)
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 ミiIe Iolouヴs aミd odouヴs…aミd this oミe…this is ミot ┗eヴ┞ ミiIe ふthe plaiミぶ
A: PヴiIes aヴe also iマpoヴtaミt faItoヴ…
E: OK, this website (the plain) because it is white i could see this one more the designer, the more
e┝peミsi┗e ┘eHsite fヴoマ the t┘o. Aミd I agヴee that a lu┝uヴ┞ Hヴaミd ┘ouldミげt Iヴeate a ┘eHsite like this one (the colourful) but more this type (the plain) because of the white background and the
マiミiマalistiI desigミ it looks マoヴe lu┝uヴious. Wheヴeas this oミe looks マoヴe of a マaヴketplaIe…theヴeげs this aミd that…so i guess I Ihaミge マ┞ マiミd aミd Iげd sa┞ that the ┘hite ┘eHsite is the マoヴe e┝Ilusi┗e and they sell more expensive stuff.
A: I doミげt like it that heヴe ふoミ the plaiミぶ I Iaミ oミl┞ see piItuヴes of dヴesses.. Iげd Ihoose the Iolouヴful ┘eHsite desigミ. Those iマages aヴe useless…aミd ho┘ shall I staヴt マ┞ jouヴミe┞? Wheヴe? Heヴe ふthe Iolouヴfulぶ I kミo┘ that Iげd IliIk oミ the Woマeミげs マeミu iteマ. This is more of a standard procedure and
pヴaItiIe so itげs easieヴ.
E: Based oミ fiヴst iマpヴessioミ, Iげd Ihoose the Iolouヴful oミe. The otheヴ oミe looks マess┞…
A: Yeah, it looks マess┞! Thatげs the good ┘oヴd.
136
136
APPENDIX 16 – Aesthetic and usability elements supporting the
customer journey of an online shopping experience