Professional Documents
Culture Documents
Project Report
2012
Anna Tamasi
City University London, School of Informatics, Centre for Human Computer
Interaction Design
By submitting this work, I declare that this work is entirely my own except those parts duly
identified and referenced in my submission. It complies with any specified word limits and the
requirements and regulations detailed in the assessment instructions and any other relevant
programme and module documentation. In submitting this work I acknowledge that I have
read and understood the regulations and code regarding academic misconduct, including that
relating to plagiarism, as specified in the Programme Handbook. I also acknowledge that this
work will be subject to a variety of checks for academic misconduct.
Signed:
Abstract
I this p oje t
ai
as to e eal the digital aestheti ele e ts that d i e use s usto e
journey on fashion websites and to understand how these elements contribute to the journey
and to the user experience. I also wanted to measure the emotional responses to these
elements of the selected websites.
The ultimate goal of this project was to develop a generic mapping of the custo e s jou e
on fashion websites that shows the impacts of digital artefacts in relation to usability and also
to the user experience. This has been achieved by identifying the digital artefacts, metaphors
and perceived affordances and their impacts on the use s shoppi g e pe ie e du i g the
observed steps of the customer journey on fashion websites. Based on the methods used and
the information collected a customer journey map has been outlined and explained.
The results show that the success of a fashion website lays in the triangle of aesthetics (design,
visual power), usability (functionality and ease-of-use) and user experience (enjoyment for the
user). The most important elements of these environments are; homepage and the navigation
structure, colours, photography, zooming facilities and the relevant product information
(including the delivery and returns information).
Keywords: aesthetics, usability, e-commerce, customer journey, user experience
Table of Contents
Chapte
Methods................................................................................................................... 17
Discussion .................................................................................................................................... 69
Aesthetics And Usability Implications ..................................................................................... 70
Customer Journey Aspects ...................................................................................................... 72
Conclusion ................................................................................................................................... 74
References ................................................................................................................................... 78
Internet Resources: ..................................................................................................................... 80
Background
Academics and researchers have been trying to understand the exact nature of aesthetics for a
long time. Aesthetics are described in a great variety of ways and there are lots of different
definitions and theories to it. At the beginning of the website development era, aesthetics
were generally disregarded by computer scientists and programmers and many academics
considered it as being irrelevant to the usability of the electronic medium. Some even believed
that it could be harmful within the medium as it could distract the attention from the purpose
and functionality. As the internet and mobile electronic devices became part of our everyday
lives, usability was not anymore the only determining attribute of the success of the digital
systems and user interfaces.
Recently, there has been an emerging interest amongst software developers as well as
academics to study the aesthetics of all sorts of electronic medium. Researches in the field of
human-computer interaction (HCI) design have also demonstrated that aesthetics play an
important role when users evaluate the user interface of an electronic device; how visual
aesthetics influence the perceived usability of interfaces and how the colours and images of
websites influence the perception of appeal. E-commerce companies have also been
interested in understanding the role of aestheti ele e ts i o de to e ha e the usto e s
experience.
In order to provide an outstanding customer experience and having more and more customers
coming back to the website companies need to invest in creating excellent usability.
Furthermore, to maximise the reach of a wider customer segment companies should also
consider accessibility issues. It is not easy to create an online environment that is both usable
and aesthetically appealing at the same time. There are trade-offs all the way throughout the
user-centred design process that companies have to consider when making decisions on design
and usability.
The main motivation of this project is to better understand the e-commerce environments and
the relationship of aesthetics and usability as well as the online service design. The central idea
of this dissertation project is to uncover the online shopping experience from the user's
perspective with respect to digital artefacts and metaphors that guide users through the online
journey. For this project I will compare fashion websites as these have rich content and they
are very much dependent on the visual appearance.
The reason for the selection of the topic is that the influence of fashion and its trends on
products and services are marketed all around the world and also because researchers tend to
neglect the aesthetics of fashion products, which is mainly because of the complex
relationships between the customers and the fashion items as well as the diversity of
methodological challenges (Eckman & Wagner, 1995).
5
Having completed a one year full-time study in HCI endowed the author with academic
knowledge and skills to undertake this research. The author worked 5 years at a large online
media corporation and has sales and marketing related project management skills. The reason
for choosing this project topic is that the author has interest in continuing her career in
interaction and service design within the online retail industry.
The results of this research shall be valuable for fashion brands to better understand the roles
of the artefacts within the customer journey that will be specially tailored for online fashion
businesses in order to increase customer engagement and to reach a wider audience.
Furthermore, this research shall benefit designers as it aims to discover the emotional aspects
of responses for visual applications, such as layouts, navigation, style, colours, white space,
photographs, etc. The project shall also benefit interaction designers and researchers who
have interests in online retail. Finally, the author of this project will also benefit from this piece
of work by increasing knowledge of career area of interest.
Objectives
In this project the autho s ai
as to reveal the digital artefacts and metaphors that drive
use s a tio s a d to understand how they contribute to the customer journey and customer
experience. The author was seeking to measure user's emotional responses to design and
structure of fashion websites. The ultimate goal of this project was to develop a generic
mapping of the usto e s jou e o fashion websites that showed the impacts of digital
artefacts in relation to the user experience. pe ifi all , ithi the o te t of the usto e s
online journey the objectives of this research were:
1. To identify the digital artefacts, metaphors and perceived affordances and their impacts
o the use s shoppi g e pe ie e du i g the usto e jou e o fashio e sites.
2. To critically evaluate models and frameworks of previous researches related to customer
journey and aesthetic elements in online environments.
. To e plo e p a ti es a d stakeholde s ie s elated to use e pe ie e a d use s
perceived affordances on fashion websites as well as the use of digital artefacts on these
platforms.
4. To formulate a generic map of the usto e s o li e jou e , i ludi g iti al tu i g
points where artefacts affect emotions and user experience on fashion websites.
Research questions
a.) What are the elements of the customer journey on fashion websites? What tools,
frameworks and models are available to support measuring the online customer journey?
b.) What are the key aesthetic elements within the customer journey in online environments
that provide enjoyment for the users? What impacts design artefacts have on use s e otio s
and the shopping experience?
c.) What elements are (users) missing throughout the customer journey that could improve
the overall user experience as well as the usability of fashion websites?
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.
The definition of aesthetics dates back to ancient Greek times and architecture, but today most
dictionaries refer to aesthetics as the atu e of eaut . According to the Oxford Dictionary,
the defi itio of aestheti s is a set of principles concerned with the nature and appreciation
of eaut or the branch of philosophy which deals with questions of beauty and artistic
taste . Aesthetics is also a branch of philosophy and psychology which deals with the sensory
and emotional values of appearance, which is accomplished by the colours, shapes, textures,
materials, structure and patterns of the design. In this project the author refers to aesthetics as
design artefacts, aesthetical elements that enhance the design of fashion websites.
Aesthetics influence greatly people and their choices although most people think that their
decisions and judgements about the functional features are rational. Emphasis on aesthetic
design and the influence of emotions in design are receiving more and more attention. While
t aditio al usa ilit fo uses o use s task a d a o plish e ts, use e pe ie e UX
e phasizes a o e holisti ie ; u de sta di g the o ple it of use s e pe ie es
(Hartmann, Angeli, & Sutcliffe, 2008) as well as including aspects of look and feel, aesthetics
and design.
Usability and user experience conceptions have progressively developed in recent decades and
there is more and more focus on the user engagement and the aesthetic design of user
interfaces. There are more and more researches that focus on the user experience and
aesthetics and most e-commerce companies are increasingly interested in knowing how
customers choose what they buy when it comes to designing their websites.
Visual appeal is a significant influence on emotional appeal (Capota, Hout, & Geest, 2007).
Typically, emotion has a positive and a negative dimension and many studies have revealed
that emotion strongly influen es o su e s de isio
aki g. Aesthetics influence people
when looking and observing physical products and this influence transmits over onto the
internet as well. When viewing an electronic interface (e.g. a website) the user will make a
judgment about the aesthetic quality of the visual experience based on various subjective and
objective dimensions.
In previous studies and researches it has been found that aesthetics is a deciding factor in
whether a customer trusts a website enough to make a purchase on it and that people made
far reaching inferences about the qualities of online banking websites on the basis of simple
screen shots, or very short interaction sequences (Tractinsky & Lowengart, 2007).
Aesthetics will always influence decisions anywhere people are given a choice which means
that e-commerce companies should incorporate aesthetic design more closely with usability.
Tractinsky et al. demonstrated how people use aesthetics to judge appeal and perceived
usabilit . Although the e site s desig a gua a tee the i itial att a tio , o l the
combination of usability and aesthetics will ensure that consumers keep using it in the future.
Previous researches and studies show that aesthetics have power, but design on its own
doesn't make a website complete. There has to be a closer relationship between design and
user experience, because aesthetics and usability have to support each other in order to create
the ultimate user experience.
Online retail companies rely on digital aesthetics in order to increase the customer experience
and the online customer journey and these aesthetic factors contribute to the success of the
product or system (Hartmann, Sutcliffe, & De Angeli, 2007). But the aesthetic appeal and styles
of use s that dete i e use s pe eptio s of a desig a e also depe de t o the i di idual s
sensitivity to aesthetics and on social and cultural factors (Tractinsky & Lowengart, 2007).
Tractinsky et al. demonstrated that aesthetic perceptions were an important and culturally
variable component in the rating of the user experience and service quality in an experiment of
ATM machines in Japan. This study however only focused on low-level design features such as
buttons and colours. When Tractinsky et al. asked participants to judge the usability and
aesthetics scores of a series of ATM screens, their study found that peoples' perceived usability
scores were more closely related to the perceived aesthetics scores than the screens' actual
usability. The results suggest that people aren't able to distinguish usable and less usable
objects and that they believe that the aesthetically pleasing ones are more usable.
Designing aesthetically pleasing online visual designs and solutions is not easy and can be
expensive, therefore by focusing on the customer journey companies could target the input
towards the specific points of the customer journey and optimize the digital artefacts that push
customers through the sales channel.
Hassenzahl et al. (Hassenzahl, Burmester, & Koller, 2003) asked users to compare and evaluate
six different interface designs for user experience, hedonic and appeal qualities. Hassenzahl et
9
al. concluded that both the user experience and the hedonic qualities contributed to the
overall aesthetic judgement of the interfaces. However, none of these studies showed which
aesthetic elements (i.e. colours, layout, etc.) contributed to the overall judgement by
participants.
The given aesthetic characteristics of a website (e.g. shapes, colours, sizes, etc.) may be used to
intentionally affect users pe eptio s ut also they can be interpreted in many different ways
a o di g use s pe so al taste. Based on previous shopping experience in traditional retail
environments and on their experience online, users develop certain expectations regarding the
aesthetics of online stores. When users land on a website, their aesthetic preferences coupled
with their experiences and expectations will affect thei pe eptio s of the e site s aestheti s
(Tractinsky & Lowengart, 2007) Tractinsky says that these perceptions are likely to induce
emotions, which, in turn, will affect the use s attitudes towards the website and also their
purchase decisions (Tractinsky & Lowengart, 2007).
Alo gside T a ti sk s esea h othe studies ha e also de o st ated that aestheti s ha e a
effect on the perception of a product and its usability. The reason for why this interference
o u s is elie ed to e hat is k o as the halo effe t . This is he e the aestheti aspe t of
the design directly influences the perception of other aspects and features of the product or
interface. For example, the perception that a tailor made suit or elegant dress makes the
wearer seem smarter. However, this halo effect does not hold for long and if the o e t of
t uth does ot result in pleasure (for example if the website loads the image very slowly), no
matter how nice the design of the website is.
In relation to the halo effect many studies suggested a correlation between aesthetic quality of
an interface and its perceived usability (Tractinsky, Katz, & Ikar, 2000). Tractinsky et al. claim
that hat is eautiful is usa le (Tractinsky, Katz, & Ikar, 2000). Norman (Norman, 2003) also
states that aestheti desig a out eigh the pe ei ed usa ilit
the use s o e all
experience and argues for the emotional impact of good design. Lindegaard et al. (Lindgaard &
Dudek, 2002) also compared aesthetic elements of different websites and they found that
websites with high visual appeal and low perceived usability yielded with high user satisfaction.
According to Cskszentmihlyi (1990) the concept of flow is a fully motivated mental state
described as strongly fixated on the activity, and the essence of the flow is the pleasurable user
experience while performing the task. Use s judge e ts a e i flue ed thei e pe tatio s
of use, background experience, the criticality of the tasks and scenarios they are presented
with and the flow of interaction (Cskszentmihlyi, 1990).
Many researche s fou d that usa ilit has also g eat effe t o peoples judge e ts afte
interacting with the product or interface. But during the early stages of interaction with the
o je t o s ste , aestheti s is the ajo i flue e i people s pe eptio s a d e pe ience.
Lindegaard et al. (Lindgaard, Fernandes, Dudek, & Brown, 2006) demonstrated how first
impressions count in website design; they revealed extremely high reliability ratings of visual
appeal, both within and between participants, of a sample of 50 homepages exposed in two
10
trials in a within-subject design for 50 milliseconds each. Since impressions were made in just a
very short time, it is likely that participants were making aesthetic judgments with minimal
information and understanding of the subject. Lindegaard asked participants to view each page
for 50 milliseconds and then rate the visual appeal of the page. Results showed that the
pa ti ipa ts ati g s o es e e highl o elated et ee sessio s. That is, pa ti ipa ts isual
appeal ratings were consistent in both sessions. Lindegaard et al. concluded that users make
judgments of the visual appearance of an interface very quickly and those judgments are very
consistent over time.
Hartmann et al. investigated website attractiveness through the Adaptive Decision Making
theory (Figure 1) developed into a questionnaire to evaluate three websites that shared the
same brand and topic but had different designs. Hartmann et al. discovered a framing effect in
that user experience and perception varied according to the question (Hartmann, Sutcliffe, &
De Angeli, 2007). Users rated the aesthetically more appealing website superior to the others
which on the other hand were rated for better usability.
The Adaptive Decision Model (Payne, Bettman, & Johnson, 1993) affi s that people s de isio
making is adaptive and contingent upon the task, context and their background-experience
(Figure 1).
In another study Hartmann et al. investigates (Hartmann, Sutcliffe, & De Angeli, 2008) the
framing effect and how information and content can influence the overall user experience.
They compared three university websites that all varied in terms of content, usability and
aesthetic design. They conclude that even minor manipulations in the decision context can
i flue e use s o e all ualit judge e ts. Thei esults i pl that context and prior
i fo atio a out e sites a e po e ful i flue es of use s e pe ie e a d o e all
judgement of the quality and aesthetics of websites. They also demonstrated that not only the
information itself but the presentation of the information will influence the judgement of a
website.
11
Judgements of aesthetics and engaging designs are highly contextually dependent (Angeli,
Sutcliffe, & Hartmann, 2006); when the context is less serious aesthetics can have a strong halo
effect, however this may not be the case with more serious contexts. Positively perceived
aesthetics show a halo effect that can override a poor user experience and can influence the
overall design preference (Hartmann, Sutcliffe, & Angeli , 2008) i ag ee e t ith T a ti sk s
findings. However, Hartmann et al. also emphasises that the investigation of the halo effect
needs further research; to investigate what happens to the halo effect if the usability problems
are severe and users lose trust in the system (Hartmann, Sutcliffe, & Angeli, 2008).
According to Sutcliffe usability is a trade-off et ee i easi g the use s oti ation to
e ou age use s e plo atio a d pu hasi g o e-commerce websites, and the costs of
usability errors (Sutcliffe, 2002).
In this research I refer to design artefacts on fashion websites as e-commerce related artefacts
that influence the customer journey of online shoppers, and that exploit product-related
content and contribute to the user experience.
As earlier explained there have been a few attempts to measure aesthetics within the humancomputer interaction field. In a study called Modelling interface aesthetics (Ngo, Teo, &
Byrne, 2003) the autho s synthetized information into a framework that consisted of 14
aesthetic measures: Balance, Equilibrium, Symmetry, Sequence, Cohesion, Unity, Proportion,
Simplicity, Density, Regularity, Economy, Homogeneity, Rhythm, Order and Complexity.
This is an engineering approach also chosen by Nielsen (1998), however the only problem with
all this is that aesthetics are subjective, holistic and more valuable than the sum of its
components (Hoffmann & Krauss, 2004). Schneiderman et al. also say that this is a conflicting
model because of the a tual s ste a d the use s e tal odel (Mahajan & Schneiderman,
1997). Limitations to the role of aesthetics in user interfaces also lay in use s previous
experiences (Lindegaard, Whitfield) therefore it is not always true that what is nice is also
usable (Lindegaard, Dudek).
Lavie and Tractinsky who used to experiment the attractiveness of ATM machines in Israel and
Japan) determined two dimensions of aesthetics; classical aesthetics (visual clarity) and
expressive aesthetics (creativity, visual richness). They developed a questionnaire to measure
perceived aesthetics that consisted of these two dimensions (Lavie & Tractinsky, 2003). The
classical aesthetics dimension related to clean, symmetric and aesthetic design based on
design rules by usability experts; while the expressive aesthetic dimension consisted of original
and unconventional design elements.
12
Sutcliffe and di Angeli (Sutcliffe & deAngeli, 2005) compared two websites with different
design features and compared them on the usability, the user perception and the memory
dimensions. They created 10 heuristics to evaluate the attractiveness of the websites similarly
to Lavie and Tractinsky (Lavie & Tractinsky, 2003). Sutcliffe and Di Angeli found that interactive
metaphors strongly contributed to users attitudes in spite of the fact that their user experience
was worse with the more aesthetic design style.
An artefact may be considered beautiful or aesthetically pleasing due to its meaning,
associations, representation or its appearance that affect human senses. Aesthetics is a holistic
perception which takes into account all aspects at once and does not reflect on which
components are assessed by the user. The significance of aesthetics in the user experience is
that the effect of visual aesthetics of an interface exposes itself in the user behaviour, in the
choices between alternatives, as well as in the judgements that users make about the interface
not only after a first short period of seeing, but also after the interacting with it.
Customer Journey
Practically speaking the customer journey is the sales cycle framework in traditional business
models that seeks to understand the business-customer relationship in order to push
customers through the sales funnel leading to transaction (Dubberly & Evenson, 2008). The
customer journey is a series of customer experiences that aggregate from various impressions
gained from different parts of the business; what customers think of and how they perceive
the brand.
A o di g to Csksze t ihl i
the o ept of flo is a fully motivated mental state
described as strongly fixated on the activity, and the essence of the flow is the pleasurable user
experience while performing the task (Cskszentmihlyi, 1990).
Du e le a d E e so
alled it the experience-cycle model that o es e o d the
push model of the sales cycle and focuses on the relationship of business and customer
describing the steps and criteria to evaluate customer experiences.
Human-computer interaction design is balanced on the relationship of people with machines
and services, where goals and the circumstances of actions are well defined (Brugnoli, 2009).
Mapping the customer journey process is primarily tracking and describing the customers
experiences as they interact with an interface or service. The ap of the usto e s jou e
can reveal opportunities for improvement and innovation; therefore it acts a strategic tool to
ensure that the human-computer interaction is a positive experience. The customer journey
map not only helps companies to better understand the end to end journey of the customer
but also to improve how the various functions and tasks are involved in delivering the ultimate
customer experience.
13
Many e-commerce companies would agree that successful customer journey consists of a
quick and easy purchase on the website. But it is not only about functionality and usability;
aesthetics are also playing an important role in the overall user experience and therefore in the
customer journey. Aesthetic elements are essentials for the visual design of interfaces or
environments as well as for the design of the navigation system and the information
archite tu e i te s of the st u tu al desig of the i fo atio spa e i o de to eet use s
expectations (Figure 2). Aesthetic elements follow through the customer journey and support
the user by providing all sorts of different information. For example, in a shop customers
orientate themselves by relying on signs and symbols but they also perceive colours and
shapes as well as textures and materials. When making a phone call, users notice the colours
on the screen, the shapes of the buttons, the texture of the phone, the sounds it makes, and so
on. These all contribute to the overall customer experience; therefore they have an effect on
the customer journey.
Use e pe ie e is the conversation between the person and the system that can happen in
many scenes, situations and via different channels. Since there is only one conversation a each
interaction, we can say that the experience is what we can remember and what we learnt so
that it becomes a meaning to the users (Brugnoli, 2009).
I this stud the usto e s jou e has a slightl diffe e t i pli atio tha the t aditio al
logic. In this study I refer to the customer journey as the flow of use and navigation on fashion
14
websites by users where the touch-points are all the different digital artefacts that help the
user to drive through this journey; from departing from the homepage until arriving to the
checkout page.
User scenarios vary greatly as customers use different interfaces, in different contexts, using
different ways of interactions and producing different results. Hence it is important to take into
o side atio the use s fo us of atte tio as it a e fo used o the e pe ie e itself e.g.
how pleasurable or meaningful it is for the user) or focused on the task (e.g. how functional,
reliable and usable it is for the user).
There is no one single best wa of d a i g up the usto e s jou e . Many entry points are
possible where the user initiates the interaction depending on needs and goals. Nor task flows
always follow one single optimal process, but rather these are a combination of various actions
accomplished by the user with different tools in different contexts (Brugnoli, 2009). It is also
important to note that the results will not be delivered by one single device and that the
interaction flow will be experienced via many devices and different situations. For this reason,
the architecture of the system becomes a key design challenge. The design of the customer
journey should include the system as a whole and the possible relationships and connections
with its parts that will be triggered by the users. Users are always in the centre: they are the
protagonists who dynamically connect the parts of the system. The features and the use of
these parts will follow its role within the system, which should change automatically in an
opportunistic and situated way following the different contexts and user situations (Brugnoli,
2009).
Classical online usto e jou e sta ts ith e plo i g use s eeds a d p o le s. They either
need a specific item or a specific make (brand) or they just want to browse to search for ideas
and inspirations. Many of them will use a variety of search engines and directories as well as
adverts, affiliate or direct mail marketing to find the shop online. Many of them will come
straight to the website, because they simply know the URL for the website. Many will also look
o the o petito s e site efo e a tuall u i g so ethi g a d a
ill ot u a thi g
at all because it was not their intention to do. Many people will only look for information about
the brand, the store and the services it provides (e.g. delivery and returns information, opening
hours, etc.) and some people will only want to stay up-to-date regarding the new products,
latest offers, etc.
Most of the websites follow certain conventions that allow visitors to get around the web
pages easily. For example, the o pa s logo is al ost al a s at the uppe left o e of the
ho epage a d it also se es as a Ho e utto throughout the customer journey which takes
users back to the homepage. At the upper right corner users can find their shopping basket
and M a ou t li k at the uppe ight o e . The e s also a s alle e sio of the site ap
below the fold with contact information, terms and conditions, policies and so on.
There are also some conventions around the navigation system on e-commerce websites; the
main navigation bar is usually located along the middle of the top of the homepage and the
15
secondary navigation is situated on the left column. Those users who are used to these
conventions and frequently use the websites could feel disappointed when they encounter
with a different website design where the links and the navigation system are rearranged.
Another important thing to consider is that people use the internet for shopping because it is
quicker and easier than making the effort and actually visit the physical store. They do not
want to spend time finding out how the website works; most of them only want to make a
quick deal and then move on. For this reason it is very difficult for website designers to come
up with something different and unusual because if they violate usto e s established
practice they can put the company into jeopardy. The most valuable feature of a website is
therefore an easy navigation system.
As customers arrive to the website looking for the product they want to buy their visual
attention is o the e site s desig as well as on finding their way to complete the task which
consists of searching and browsing through the products. Aesthetic preferences are instantly
formed and measuring these could help to improve the design of the website. Many
companies put in a lot of effort researching and experiencing the best combination of colours
that sell the most products; regrettably, aesthetic preferences are subjective attitudes and it is
impossible to come up with one standard layout, colour scheme that will please everybody.
According to Tractinsky and Lowengart (2007) the shopping task can vary in different ways
depending on the circumstances. Shopping can be done in a rush or at a quick impulse, while
sometimes it is related to leisure that happens non-routinely and other times it can happen
deliberately and routinely. (Tractinsky & Lowengart, 2007)
Tractinsky and Lowengart (2007) also acknowledge that different product types will be
associated with different types of aesthetics. Different products will also be associated with
different types of needs; fashion for example is a factory that manufactures desire and fashion
creates a need where there is no real need in reality, only desire (Tungate, 2008). Fashion has a
visual vocabulary that helps people feel emotionally evolved as the exterior change derives
an interior change (Tungate, 2008). Fashion is all about aesthetics and appeal; fashion brands
a e pe suasi e a d the do e e thi g possi le to att a t people s isual atte tio . Fashion is a
sensory experience in itself; feeling the garment, the textures, seeing the colours and using
imagination to envisage ourselves wearing the ite . The autho s ai is to fi d out how do all
this translate into virtual, online digital platforms where the customer physically cannot see
and touch the clothes and where the customer only interacts with an electronic interface.
16
Chapter 3 Methods
In this section of my dissertation I explain how I developed the set of criteria for the evaluation
of the fashion websites for their aesthetic elements and customer journey as well as the
procedure and methods used for my research.
Previous studies proved that aesthetics cannot be disregarded when evaluating websites.
Use s pe eptio of a e site a i du e a a iet of e otio s a d ea tio s. These emotions
a d feeli gs i flue e use s attitudes to a ds the usa ilit a d the o pa s redibility as
ell as the e site s o te t a d the p odu ts it is selli g. Furthermore, special consideration
is required to the design principles of web designs with respect to the ever-changing fashion
industry. Since the aesthetics of a website can influence brand perception and credibility, the
importance of design must be considered; the design and the graphical presentation of a
website is very visual and users make aesthetic judgments of a site very quickly. As the
e site s likea ilit and credibility increases so does the likelihood of purchasing products
from the site (Chen, 2009). However, it is quite difficult to measure the relationship between
aesthetics and emotions because of their abstract nature, therefore creating metrics for
aesthetics is also challenging since it is very personal and subjective.
17
In the third part of the study I will report the outcomes of a focus group interview that was led
by doing A/B testing using paper prototypes and evaluating them from aesthetics and usability
point of views.
The study was carried out as follows:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
Websites Heuristics
The first and ever since the most well-known web heuristics were created by Jacob Nielsen and
Rolf Molich in 1990 (Nielsen & Molich, 1990). Nielse s heu isti s e e also adapted fo the
web by Kieth Instone, former IBM user experience designer and information architect. Instone
updated the original guidelines and refined definitions to make them more applicable to webbased interfaces. However, it is not regarded as a comprehensive and comparable as it lacks of
actual user feedback and biased preconceptions by the evaluators could lead to reporting of
problems that are not actual usability problems.
Nielse s heu isti s do ake efe e e of aestheti s a d use e gage e t (Nielsen & Molich,
1990) in the sense of visibility and information content. Nielsen claims that there should not be
more functions on an interface than is required for the user to perform the task and calls for
reducing the noise where possible. According to Nielsen a great design is the perfect
combination of a minimalist and aesthetically pleasing design.
Nielse s ten usability heuristics (1990):
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation
19
Norman also claimed that aesthetics have influential effects in user preferences (Norman,
2003) and therefore on the user experience. According to Norman beauty can be an important
quality of a product which influences our judgement of that product.
In terms of aesthetics, Tractinsky and Lavie have made most research in the field of web
commerce. Tractinsky and Lavie set up heuristics with the attempt to develop a measurement
instrument of perceived website aesthetics. They created two dimensions to measure
aesthetics: classical and expressive aesthetic. The classical aesthetics dimension included
questions on pleasant, clear, clean, symmetric and aesthetic design; while expressive aesthetic
dimension consisted of creative, fascinating, original and sophisticated design with use of
special effects. (Lavie & Tractinsky, 2003)
T a ti sk a d La ie s heu isti s (2003) are:
Factor 1 - Classic aesthetics:
Aesthetic design, Pleasant design, Clear design, Clean design,
Symmetric design
Factor 2 - Expressive aesthetics:
Creative design, Fascinating design, Use of special effects, Original
design, Sophisticated design
Factor 3 Usability:
Convenient use, Easy orientation, Easy to use, Easy to navigate, Clear
design
Factor 4- Pleasurable interaction:
Feel joyful, Feel pleasure, Feel gratified
Factor 5 - Service quality:
Can count on site, Site contains no mistakes, Site provides reliable
information
20
1. Judicious use of colour: colour use should be balanced and low saturation pastel
colours should be used for backgrounds. Designs should not use more than 2-3 fully
saturated intense colours.
2. Symmetry and style: visual layout should be symmetrical, e.g. bilateral, radial
organisation that can be folded over to show the symmetrical match. Use of curved
shapes conveys an attractive visual style when contrasted with rectangles.
3. Structured and consistent layout: use of grids to structure image components and
portray a consistent order; grids need to be composed of rectangles which do not
exceed a 5:3 height to width ratio.
4. Depth of field: use of layers in an image stimulates interest and can be attractive by
promoting a peaceful effect. Use of background image with low saturated colour
provides depth for foreground components.
5. Choice of media to attract attention: video, speech and audio all have an arousing
effect and increase attention. Music can attract by setting the appropriate mood for a
website.
6. Use of personality in media to attract and persuade: this principle applies primarily
to e-commerce websites when use of human image and speech can help to attract
users and persuade them to buy goods by being polite and praising their choices.
7. Design of unusual or challenging images that stimulate the users i agi atio a d
increase attraction: unusual images often disobey normal laws of form and
perspective.
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.
USABILITY
i.
ii.
iii.
iv.
v.
vi.
AESTHETICS
i.
ii.
iii.
iv.
v.
vi.
Use of Colour: Appropriate use of colours and contrasts. Background and foreground
colours do not interfere.
Balance: There is a good balance between the visual weight of the elements and the use of
white space.
Visual layout: Visual layout is symmetrical and each page on the site shares a consistent
layout.
Style: Use of curved shapes conveys an attractive visual style when contrasted with
rectangles.
Originality: The site takes an unorthodox approach and is distinguishable from other
fashion websites.
Unity: The site has a consistent, clearly recognisable look and feel that will engage users.
22
vii.
viii.
ix.
x.
xi.
xii.
Clarity: The intent, organization, and appearance of the website is unambiguous and
directed.
Sophistication: The website appears developed and complex. Images and text are visually
and conceptually distinct yet still harmonious.
Order: The layout helps focus attention on what to do next.
Beauty: The site is pleasant to look at and the design encourages people to explore the
site.
Special effects: The website includes animation, sound, or other unique forms of
interactivity. Attention-attracting features are used sparingly and only where relevant.
Images: Meaningful labels, effective background colours and appropriate use of borders
and white space help users identify images as discrete functional blocks.
USER EXPERIENCE
i.
ii.
iii.
iv.
v.
vi.
Although heuristic evaluation is relatively easy to conduct, the review of all the heuristics is not
quick to perform. In this study I decided to go deep into aesthetics, more than into usability
because my ultimate aim was to be able to see how fashion websites aesthetics impact the
customer journey. Because I created 24 heuristics for three dimensions (usability, aesthetics
and user experience), my session lasted longer than an hour but results were more informative
this way.
My aim was to set up heuristics that are easy to score; each heuristic had a statement
describing the guideline and participants were asked to rate these on a 5-point Likert-scale that
had Ag ee a d Disag ee o oth e ds and had a eut al poi t i the iddle Neithe ag ee
o disag ee . The points for each website given were totalled across each category to give
quantifiable sense to how usability, aesthetics and user experience were perceived on the
selected websites (Appendix 4).
Representing the data visually makes it easier to compare results as well as to identify problem
areas. I used radar diagram to visualise the analysis mainly because it gives a recognisable
shape for each type of scoring; the more circular the radar is, the more balanced the score and
the spikier the radar is the more variations are in the scoring given. Furthermore, the size of
the ada s plot o the a es i di ates the score percentage, showing better and worse areas.
(Figure 3)
23
The fashion websites selected for the heuristic evaluation were all representing the higher-end
high street brands and all had similarly priced products. However, in terms of design they were
selected to be different; they all had different zooming features, menu structures, colours,
navigation systems (flow), different checkout processes, etc.
Below is an informal assessment of the selected websites chosen and their main characteristics
(Figure 4):
Figure 4
24
expectations and to understand what users think about their experience on the website. After
the initial de-briefing interviews participants were introduced the websites (Appendix 3) and
were asked to browse the websites and to think out loud about how they felt about the design
and usability. M ai
as to e o d pa ti ipa ts fi st i p essio s when they interacted with
the websites as well as recording their user experiences as they flowed along their personal
online journeys.
Participants were asked to think out loud and to explain how they used the website, how they
searched, what they looked for, which digital artefacts they liked, which elements they found
aesthetically pleasing, etc. This was part of the initial exploratory search task and I just asked
participants to browse spontaneously while I was observing them.
Contestants were given a directed search task, that consisted of searching and finding a
specific type of dress and reporting back during their journey which aesthetic elements they
liked or disliked and why and I also asked participants to rate those elements.
You a e i ited to a wedding this summer and you are wondering what to wear. You realize
that ou do t ha e a d esses to ea so ou o e to this e site to fi d o e
Participants walked through the task as they were customers and they thought out loud while I
was making note of the key findings from their experiences; everything from how long it took
to complete the task to how many steps it took, to the obstacles in accomplishing the task on
each website. Participants were asked to think out loud whilst doing the search for the dress
and I also asked questions about various features of the website.
Participants were presented with the heuristic evaluation checklist and were asked to score
each heuristics on a Likert-scale (1-Disagree and 5-Agree). After completing the tasks
contestants were asked for their final impressions and overall user experience.
Each participant was asked to rate 6 different websites which took them on average 90
minutes to complete and the order of the websites varied to avoid any ordering effects. Each
participant received a bottle of wine for their time and feedback.
My aim was to test three dimensions; usability, aesthetics and user experience. The rating
s ale fo the heu isti s as a ked f o
Ag ee to Disag ee a d ei g Neither agree
o disag ee . The results were then aggregated and copied into an Excel file (Appendix 4) and
the results are explained in the next chapter.
Based on the results of the heuristic evaluation as well as the interviews analysis the two best
rated websites were chosen for further analysis. These were Whistles and French Connection
based on the aggregated results (Figure 5). Within the next phases of the study I will focus on
these two websites to analyse further the aesthetic elements and the perceived usability as
well as to focus on capturing how these components affect the customer journey.
26
Figure 5
My other aim with the heuristic evaluation as well as with the interviews was that I gain an
i sight to the usto e s jou e that participants take on the presented websites. While
observing them using the websites, they were asked to demonstrate how they used the
fashion websites and how they organized their online shopping activity when they were doing
it on their own.
I o de to gai a i sight to the usto e s jou e that pa ti ipa ts take o fashio e sites,
I was observing participants throughout the session and taking notes (Appendix 5) of how they
used the fashion websites and how they navigated on their own; which path they took and
which buttons they used as well as what they reported verbally (e.g. instant comments and
reactions to the aesthetics or usability features).
Before participants were given the heuristic evaluation sheets, they were introduced to each
website and were asked to talk about them and think out loud while they were navigating on
them. Participants were asked to report their feelings and experience on each website, while
their actions and voices were recorded using Camtudio e o de o the laptop. Based on the
observations and think-a-loud protocols the following customer journey was observed (Figure
6):
27
Figure 6
28
Common elements can be observed on all of them that can be classified as conventions for
fashion websites:
Of course there are more than these. The real power of conventions is that they allow users to
quickly navigate and use the website without thinking too much about it as it e o es use s
mental models. However, most fashion websites want to distance themselves from the
conventions and be different so what they try to do is to ignore the conventions. But, in most
cases, the navigation system at least follows some convention; they are commonly situated at
the top or left of the page content, in a row or column. It will be explained in more detail later
that navigation and intuitiveness are important factors that users consider when making
judgments about fashion websites. Of course there is no one standard customer journey on
fashion websites, but generally speaking we can say that most journeys will at some point
cover the main steps. These core steps are explained here.
There must be an entry point from which the customer lands on the core page, usually the
homepage or a product page. Next steps can include searching, browsing, sele ti g Add to
basket o e e lea i g the e site. Custo e s a lea e to isit a o petito s e site o go
back to a search engine page where they can re-start browsing the Internet, but this is not
covered by this project. When customers browse the website they either filter through the
29
categories or use the search box to explore the assortment of products available according to
their reference.
Going a step further towards the customer journey on fashion websites users usually can
hoose f o the follo i g e u ite s: o e s ea , e s ea , e i , sale, log a d
some other informative links usually to inform users about fashion trends, celebrities, new
clothes, etc. Once selected the main category form the top menu bar, users can see the subcategories of the menu on the left vertical column. Users can choose from different categories
such as: Coats & Jackets; Jeans; Tops; Shoes, etc. Below there are a few examples of ecommerce website wireframes (Figure 8):
1. Homepage
2. Navigation
3. Filters
4. Close view
There are also various additional services that could support the decision-making process, such
as customer reviews, product guides, comparing similar products or gift finder. After a
selection is made customers can either put the item in the virtual shopping cart and proceed to
checkout or they can enter competitions, sign-up for newsletters and other online services or
share their selection on different platforms and touch-points such as email, online social
networks, etc. The checkout stage of the customer journey usually consists of a registering or
logging in page and an administrative page where customers are required to enter personal
details such as delivery address and payment details. In this last step customers can request
specific delivery options and to specify discount codes or gift wrapping for their purchases. The
jou e fi ishes ith a o fi atio page, sa i g Tha k ou to usto e s a d p o idi g
them with a reference number for their purchase. In this project the registration and login to
the customer account are out of scope due to time and personal data concerns. After the first
part was completed and analysed, personas and a storyboard were created (Appendix 7) based
on the results and feedbacks from users.
The second part of the study consisted of an in-depth evaluation and analysis based on user
testing as well as focusing more on the aesthetic elements of the websites and evaluating
30
them within the customer journey framework. It is of course very difficult to tell whether a
website is pleasing to its users or if it creates a good first impression because aesthetics are
very subjective. For some people a design can be very appealing and for others the same
design appears to be boring and not exciting at all.
31
Methods Used
Focusing on aesthetics and the user experience think-a-loud protocols and interviews helped
this research collecting mainly qualitative data. In this part of the study I used commercial
methods to evaluate the websites in terms of their perceived aesthetics. User performance
data such as card sorting, emotional reaction scales and emotional bi-polar semantic scales
provided this part of the research with mainly quantitative data. The purpose of using these
methods was to get an insight about user experience and to get an understanding of which
design elements of the websites gain attention and which features are not found engaging.
The project plan as well as the testing session outline and timing and testing arrangements are
presented in Appendix 10. Ten women in total, all aged between 30 and 40 years old,
participated in the second part of the study. All participants had online shopping experience
and two of them had HCI or web design background. Some participants were familiar with the
brands in this study, but not necessarily with their websites. The interviews took place
between the 3rd and 24th August, 2012. Participants were introduced to the purpose of the
research and explained the consent form.
In this part of the research participants were given various types of tasks to complete such as
card sorting, emotional reaction scale and emotional bi-polar semantic scale in order to collect
quantitative data. The pre- and post-test interviews utilized open-questions to also gather
qualitative data about user satisfaction and feedback on the aesthetic features of the websites.
The testing sessions were led by the author of this study who observed test participants in
person and collected subjective feedback in the forms of pre-test and post-test interviews. The
pre-test survey (Appendix 8) asked 16 questions about the visual designs and usability
concerning:
In this interview the questions were more aesthetics-specifics. After the initial de-briefing
interviews participants were introduced to the card sorting task. The flash cards contained the
previously observed 17 steps of the customer journey. The task lasted about 10 minutes; first
participants were shown the cards, then they were asked to order the cards (cards were
always shuffled previously). After the completion participants were asked to explain why they
ordered the cards in that way, finally a photo was taken of the cards (Appendix 11). The
arrangement of the cards was logged in an Excel file (Appendix 6). This exercise helped the
author to re-iterate the customer journey set up in the first part of the study (Appendix 6).
32
For the next task I created flash cards with screen-shots of specific features of each website
that were tested and rated by my participants. These features were selected based on the
results of the interviews from the first part of the study; each card represented an aesthetic
element of a step of the customer journey. These elements were evaluated by participants by
using different commercially used methods, such as emotion and reaction scaling technique
and bi-polar emotional response. The most important data from this exercise was the
discussion with participants to understand their reaction to an image (whether positive or
negative), so I was taking good notes as well as recorded the session. The aim with this task
was to identifying commonalities in design that provided the same or similar emotional
responses.
A large matrix was created; a vertical and horizontal axis based on two sets of polar opposite
words (high quality and low quality on the vertical axis and exciting/fun and boring/dull on the
vertical axis). Participants were given two flashcards at the same time with the same element
from each website and were asked for their initial thoughts. They were asked to place the
cards on the axis of the aesthetics-usability scale and explain their rationale. I then noted the
position of the cards and put the data in Excel (Appendix 12).
The task was completed within 20 minutes on average. For this exercise I limited the number
of images to 21 because I did not want the matrix to become too cluttered and my aim was to
be able to see the groupings of images (Figures 9 and 10).
Homepage
Logo/Identity
Colours
Text (font, style)
Menu bar/Menu options
Sale/Special offers/Multi buy discounts
Buttons (button graphics, size, colour, text, texture)
Links below the fold
Browse/Search
Products categories are meaningful
Items in a row
Images sharpness
Product information page
Price tags
Select
Product information (image and text)
Sizing and stock availability
Out of stock messages
Colour pieces (samples)
Examine
Images (size quality) -> zooming, rotating, dragging
Auto-zoom
Multiple image views per product
33
Basket
View items in basket
Checkout
Structure of the checkout process
In the next task participants were shown the six main stages of the customer journey (Figure 9)
and were asked to describe their feelings about the shown screen-shots on scales with
semantic labels (bipolar adjectives were used at the end points of the scales, Appendix 13).
This task took around 20 minutes on average to perform.
Each participant was handed with a copy of the scales and were given a bit of time to
familiarize themselves with it before showing them the designs I wanted feedback on.
Then participants were shown the designs and explained its purpose; fo e a ple You e just
conducted a search for a dress, and are presented with this page . The easo fo this as that
opinions can change depending on the purpose of the design. Then participants were asked to
complete their scales individually. After the sessions, all of the pa ti ipa ts espo ses were
plot on a single scale for each design to identify any patterns or dissimilarities (Appendix 13).
I also wanted to make sure that my scales had no obvious order and that the order of the
extremes varied so that I did t have all positive on one side and all negatives on the other side
of the scale. This was done in order to prevent participants from blindly completing the scales.
I also wanted to fo e a opi io on participants; therefore I removed the neutral option and
used a 4 point scale.
34
35
The interviews took place in a focus group format. Both contestants fit the original profile of
participants. Participants were taken through the customer journey by showing them each
step on a printed screen shot and were asked to explain their initial impressions about the two
designs. The interview took about an hour and the session was recorded by iPhone (Appendix
15). The purpose of this part of the study was to re-iteration of the findings regarding fashion
e sites aestheti s a d usa ilit i elatio to the usto e jou e that e ai s the e t al
framework of this study.
whether they were considered as drivers or draw-backs throughout their journeys. This was
done on both the aesthetics and the usability dimension.
On the other hand I also wanted to map the stress points and for this I have gathered all the
complaint codes and examined where and why participants reported frustration or
dissatisfaction during their journeys on the fashion websites. Both the aesthetics and the
usability dimensions were taken into consideration when identifying the potential problems
and obstructions within the customer journey.
Emotional responses were also taken into consideration when building the customer journey.
Pa ti ipa ts e pe tatio s a d e otio le els e e depi ted o the ap a d I a ted to ake
su e that the usto e jou e ap is itte f o the usto e s pe spe tive with the
language they used themselves. For this I have used and re-used the recorded sessions with
participants and made sure that their reactions, feelings and thoughts are plotted on the
customer journey map.
I am aware that most customer journeys are unlikely to be a linear process since customers
take different steps but the flow of the journey is generic, that starts at the homepage and
finishes at the checkout page. The map created will work for some but may not work for
others; therefore I tried to be as flexible as possible to create an experience map that is
adaptable by most fashion websites. I ended up with a wobbly line across the journey that
shows the areas of interests from aesthetics point of view and also from usability point of view.
Chapter 4 Results
37
Pa ti ipa ts ost mentioned words associated with online shopping comprised: convenience,
speed, ease and sale (Figure 12). Associated feelings to online shopping included: satisfaction,
comfort (speed, mobility), excitement, happiness, guilt and vulnerability (Figure 12).
All participants reported different ways of browsing and selecting fashion items online. These
customer journeys included tracking down a previously seen item on the internet, using
Google to find the best prices, browsing on the internet to get inspiration, browsing by filtering
and sorting and buying only from trusted websites and brands.
When participants were asked to describe their favourite fashion websites the following
ha a te isti s e e e tio ed: it is aspi atio al , it provides long-te fashio , it is
diffe e t f o the est , p o ides a g eat sele tio of desig e s , it is eas to a igate , it
has a si ple desig . So the most important features mentioned were: selection, quality and
simple and easy-to-use design.
All participants agreed that the e site s desig ould affe t the purchase on a fashion
website. Participants associated zooming, navigation, trust and security with good design.
The most important functional features of a fashion website were considered to be the
zooming, the quality of the images, the navigation system, and the information provided about
the clothes as well as the checkout and return process and information, the search and filtering
options and security (Figure 13).
38
Favourite fashion website services included: 'You might also like' and 'Complete the look'
features, 3D views, PayPal, efficient checkout process, Layout, Menu structure, Navigation,
Categories, Zooming, Stock levels, Colour displays.
After the initial interviews participants were introduced the websites (Appendix 3) and were
asked to browse one website at a time and to think out loud about how they felt about the
design and usability. M ai
as to e o d pa ti ipa ts fi st i p essio s he the i te acted
with the websites as well as recording their user experiences as they flowed along their
personal online journeys. Contestants were also given a directed search task, that consisted of
searching and finding a specific type of dress and reporting back during their journey which
aesthetic elements they liked or disliked and why and also to explain how they rated those
elements. The summary of the results for each website are highlighted in the table below:
39
Figure 14
After the interviews participants were presented with the heuristic evaluation checklist and
were asked to score each heuristics on a Likert-scale (1-Disagree and 5-Agree). Each participant
was asked to rate 6 different websites and the order of the websites varied to avoid any
ordering effects. My aim was to test three dimensions; usability, aesthetics and user
experience. The results were then aggregated and copied into an Excel file (Appendix 4) and
the results are explained below (Figure 15).
40
At this point my aim was to get a quick & dirty estimate about the perception of the websites,
so calculations included basic mathematical formulas; first the points given for each heuristic
within a dimension were added up, then the total sum of the dimension was taken into
consideration for the final results.
The usability dimension had six heuristics; Ease of Use, Convenience, Readability, Consistency,
Navigability and Simplicity. The three best rated websites in terms of perceived usability were:
French Connection (85%), Ted Baker (77%) and Reiss (76%).
Results for usability dimension are:
1. French Connection = 153 (85%)
2. Ted Baker = 138 (77%)
3. Reiss = 137 (76%)
4. Whistles = 136 (76%)
5. Comptoir des Cotonniers = 99 (55%)
6. Jaeger = 96 (53%)
Aesthetics dimension had eleven heuristics; Use of Colour, Balance, Visual layout, Style,
Originality, Unity, Clarity, Order, Beauty, Special effects and Images. The three best rated
websites in terms of perceived aesthetics are: Whistles (69%), Reiss (67%) and French
Connection (64%).
Results for aesthetics dimension are:
1. Whistles = 250 (69%)
2. Reiss = 240 (67%)
3. French Connection = 230 (64%)
4. Ted Baker = 233 (65%)
5. Comptoir des Cotonniers = 222 (62%)
6. Jaeger = 177 (49%)
User Experience dimension had again six heuristics; Conformity, Intrigue, Enjoyment, Ability to
Motivate, Visual affection and Social satisfaction. The three best rated websites in terms of
perceived user experience are: Whistles (67%), Ted Baker (62%) and Reiss (57%).
Results for user experience dimension are:
1. Whistles = 120 (67%)
2. Ted Baker = 112 (62%)
3. Reiss = 103 (57%)
4. Comptoir des Cotonniers = 100 (56%)
5. French Connection = 98 (54%)
6. Jaeger = 81 (45%)
41
Overall experience was rated: Reiss (67%) and second place for French Connection and
Whistles which got 19 points (63%) respectively.
Results for overall experience dimension are:
1. Reiss = 20 (67%)
2. French Connection = 19 (63%)
2. Whistles = 19 (63%)
4. Ted Baker = 18 (60%)
5. Comptoir des Cotonniers = 17 (57%)
6. Jaeger = 13 (43%)
42
Figure 17
These two websites are actually quite different in terms of design and navigation structure. It is
Whistle s website that has the most unusual layout as it offers a secondary navigation system
right in the middle of the main content area and fills far more space on its homepage than
French Connection. Whistle has a unique design. No scrolling is required on its homepage and
the main navigation system is at the top centre of the page (Figure 18). The sub-categories are
presented spread out on the main screen with a few models as examples from each subcategory. The website has a nice movement when sub-categories are selected with the models
sliding in the screen one after the other. There are seven models in one row and the page has
white background (Figure 19).
Figure 18
Figure 19
43
French Connection website received the highest score for usability, but in terms of aesthetics it
only got the third place and only made it to the fifth place for user experience mainly because
users reported it to be too white and too simple. Still the website was rated second best in
terms of overall user experience. French Connection has a minimalistic design and it is built
upon white background with grey text a d a ed ale e u ite in the main menu (Figures 20
and 21). F e h Co e tio s e ti al la out edu es the ai o te t s spa e o the s ee
used up by the navigation system which was developed to have a drop-down menu that
reveals its secondary navigation system. French Connection displays only three models in a
row, but images of these are slightly bigger tha o Whistles pages.
Figure 20
Figure 21
In the next part of the study I will be looking at the most important features mentioned by
participants during the heuristic evaluations and then in the second part asking them to rate
those elements by various measurements.
44
Figure 22 Typical customer journey observed during the heuristic evaluation sessions
After the interviews and analysis of the data personas and a storyboard were created based on
the pa ti ipa ts eha iou s a d reported experiences (Appendix 7).
The second part of the study consisted of an in-depth evaluation based on user testing as well
as focusing more on the aesthetic elements of the websites and evaluating them within the
customer journey framework by using commercial methods. User performance data such as
card sorting, emotional reaction scales and emotional bi-polar semantic scales provided this
part of the research with mainly quantitative data. The purpose of using these methods was to
get an insight about user experience and to get an understanding of which design elements of
the websites gain attention and which features are not found engaging. Ten women in total, all
aged between 30 and 40 years old, participated in the second part of the study.
Pre-test interviews
The pre-test interview focused on the user experience with regards to fashion website s
usability and aesthetics. The results (Appendix 8) revealed that most participants (7/10) used
45
collection websites (e.g. ASOS, Net-a-Porter, Brand Alley, etc.) to buy clothes from than
individual brands websites. Reasons for choosing a specific website included; receiving email
about sales or new collections, looking for a particular brand or item that is only sold by the
selected website, security (being able to pay with PayPal), variety and selection as well as free
delivery and good usability were all listed as reasons for visiting fashion websites.
When participants were asked to describe their favourite website and to explain what they
liked about it half of the participants admitted that the colours were appealing to them as well
as that they found the website easy-to-use. About a third reported that good navigation is
essential for them in terms of website design and also that good zooming facility is a musthave requirement and that they like to see the clothes worn by models and in context.
Pa ti ipa ts fa ou ite desig featu es i luded: simplicity, user-friendliness, intuitive use,
interactivity and having a fashion magazine look (Figure 23).
Participants also reported that fashion websites should not have cluttered design or take too
long to load or he its just ot lea hat it does . espo de ts also added that too
conventional and standard designs are boring and that too loud music was irritating for them.
It was revealed from the interviews that participants isual atte tio et ee the e site a d
the items it was selling was on average focusing % o the e site s desig a d % o the
clothes and products it was selling. Also discovered from the interview sessions that all
participants preferred to have a boring design with good usability rather than the other way
round. Furthermore, they all admitted that they would prefer to buy a dress from the website
which was the easiest and quickest to use.
All participants acknowledged that the most exciting part of their journey on the fashion
websites was the step when they interacted with the visuals of the dress: observing it,
e a i i g it a d isualisi g it: hat ou goi g to do ith it, ho ou' e goi g to ea it .
46
The most boring part was considered the end of the journey; when participants had to fill out
the personal information and payment details. One participant said that for her the most
boring part was when the pages were loading and she had to wait.
Aesthetically pleasing design was described by participants as a clean design without too much
text and that had nice colours and was not too cluttered. Showing products in context was also
considered as an important aesthetic feature. It is interesting to note that functional features
were also mentioned together with the aesthetic elements (they seem to be inseparable
characteristics of aesthetics), these included; good search facility, not too much scrolling,
Anticipates what I want .
Best colours for fashion websites were considered to be black and white by half of the
respondents, while the other half preferred to see bright and primary colours on fashion
websites. Other clarifications regarding the colours included; having white background allows
better visual on the dress, it should have a contemporary and minimalistic overall look, and it
was explained by participants that context is important to make the pages more personal.
Participants said that the colours had to be consistent on all pages and that generally they all
wanted to see the colours spread out throughout the website.
All participants agreed that showing clothes in context was more appealing than just showing
the product on its own. When it comes to examining the dress half of the respondents
reported that they preferred to view the clothes on a model, others mentioned having
different views and good zooming enhances the e pe ie e a d o e pe so said that I want
to see the items combined with other items (look-book type of presentation) .
Additional information about the clothes on fashion websites that participants were looking
for included; materials information, description of the clothes (e.g. the length of a dress) as
ell as i fo atio as to he e to u othe ite s, e t e ds, i fo a out the desig e .
The interview revealed that people have many different ways of buying a dress online in
relation to their customer journey (e.g. which categories, filters they would use on the
website). But there are some patterns that can be observed. Based o pa ti ipa ts a s e s
there are two different ways of surfing on fashion websites depending on the purpose of the
visit; browsing without any specific ideas (i.e. looking for inspirations) and looking for a specific
item/brand hunting ). It is interesting that based on the commentary of participants as well
as observations there is no difference between those two scenarios in the use of the website
and participants seem to follow similar ways; they would select from the main navigation
e u a atego a d o se a o gst the esults i that atego e.g. Ne i , Blouses ,
ale , et .
47
Card sorting
After the initial interviews participants were introduced to the card sorting task to re-iterate
the customer journey observed during the heuristic evaluations. The flash cards contained the
previously observed 17 steps of the customer journey. The card sorting exercise (Figure 24)
revealed that women usually take eleven major steps on fashion websites from the homepage
to the checkout page (excluding log-in and payment pages). The steps below were taken from
the aggregated results that were recorded in an Excel file after each interview (Appendix 6).
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
Homepage
Women
Dresses
Dress type
View all
Scan through dresses
Dress selected
Examine dress
Checking additional information about the dress
Basket view
Checkout process
Homepage
The homepage and the overall look of the French Connection website were perceived by
participants as having the better contrast (Figures 25, 26). French Connection is built upon
white background and texts are dark grey, light grey, red and highlighted text is black to
maximise contrast for selected links. Although overall the white background was preferred
48
On the bipolar semantic scale participants rated the French Connection homepage brighter
tha the Whistles ho epage i spite of the fa t that F e h Co e tio s ho epage is ai l
white, grey and brown, whilst Whistles is lue, pi k, ello a d la k . Also, the French
Co e tio ho epage as ated p ettie tha Whistles. Whistles ho epage as ated
messier (1.7 vs 2.7) than the French Connection homepage which was also rated more
instinctive than Whistles.
Whistles on the other hand, uses black background and white text which was considered to be
a bad contrast. The Whistles logo and company identity was rated higher quality but less
exciting than French Co e tio s o e Figures 25 and 26).
Figure 26 - Logo/Identity
Colours on the homepage were significantly better rated for French Connection then Whistles,
which is quite surprising given that the French Connection homepage is mainly black and white
with some grey and brown tones whilst the Whistles website has some primary colours (e.g.
yellow, blue, pink) on its black background (Figure 25).
Text and font styles were better rated for French Connection in terms of aesthetics but worse
in terms of usability because of the poor contrast reported earlier (grey text on white
background).
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.
Button graphics received the same scores fo aestheti s ut fo usa ilit F e h Co e tio s
ou d shaped utto s e ei ed u h ette ates tha Whistles la k s ua e shaped utto s
(Figure 29).
Whistles utto s
F e h Co
Figure 29 - Buttons
e tio s utto s
In order to measure the homepage on the emotional bi-polar semantic scale I have created
screenshots of each website (homepage, navigation, product view, zooming, basket view and
checkout view) and participants were asked to describe their feelings about the pages on
scales with semantic labels where bipolar adjectives were used at the end points of the scales
(Appendix 13). As for the results; where ratings are located closer to each other it means that
the aesthetic perceptions for the two design elements were shared amongst participants.
When there is a major difference between the ratings, it indicates that there was an
i o siste
et ee pa ti ipa t s aestheti pe eptio s a d that thei ie s a ied a d so
did their feelings about the visual appearance. The results are explained within each section of
the customer journey.
Figure 30 shows the comparison of the two homepages. The homepage of French Connection
as o side ed to e ighte tha Whistles i spite of the fa t that F e h Co e tio s
homepage is ai l hite, g e a d o , hilst Whistles is lue, pi k, ello a d la k. The
French Connection homepage was rated friendlier, prettier and also more instinctive than
Whistles . The two most visible differences between the two homepages is that Whistles
homepage was rated much more discouragi g tha F e h Co e tio s ho epage, a d the
Whistles homepage was rated much messier than the French Connection homepage.
50
French Connection:
Whistles:
Navigation System
Fashio e sites ai a igatio s ste o tai s li ks to the ai se tio s e.g. Wo e s,
Me s, Child e , ale, et . of the e site. A navigation system contains text in order to help
users to find their ways on the website; French Connection uses bold text to indicate that the
link selected is clickable and Whistles underlines the links when users point the mouse to the
link. The examples below (Figures 31, 32) use text differently; French Connection displays links
vertically whilst Whistles lists links of the primary navigation section horizontally. The effect is
simple and minimalistic in both cases, but the contrasts are different.
Figure 31 - Whistles
Figure 32 - French Co
ai
e tio s
a igatio system
ai
a igatio system
51
While French Connection uses different font styles and sizes to indicate importance and
location to indicate the hierarchies of the links and content, Whistles does not visually
separate items in the main and secondary navigation system. This was one of the reasons for
the poor usability rate given to Whistles.
French Connection also developed a drop-down menu to reveal its secondary navigation
system. This drop-down menu appears on mouse-over, that is, when a user positions his/her
cursor over an object or link without having to click on anything. While drop-down menus can
be very effective, they can propose some usability problems in the way that they can hide
content from the users when the user mouses-over it. Figure 33 the yellow rectangle shows
Jaege s d op-down menu which is covering a significant part of the main content page and the
secondary navigation system:
52
Figure 34 - F e h Co
e tio s se o da
a igatio
Whistles visual representation of the secondary navigation system is using actual examples of
the sub-categories, as icons, in addition to the text, which provides users with appetizers of
pieces from a category.
The categorisation used to present the collection of clothes is also different on the two
websites. French Connection uses colour and size sub-categories, whilst Whistles categorises
the dresses based on occasions and types.
When participants were asked to compare the two websites French Connection website was
described as being more organized and to have better structure. It was also perceived as the
more user-f ie dl e site. This a e e plai ed pa ti ipa ts e tal odels hi h a e
similar the conventional design, structure and navigation system that French Connection is
using. Participants did admit however that the Whistles website had the better contrast and
that it used more colours. Despite of having the better contrast, Whistles was perceived as a
messy and irritating website with inferior design than French Connection.
Metaphors
In human-computer interaction design metaphors are interactive elements, objects, or tools
that represent real-life experiences. The purpose of metaphors on websites is to help users to
interact with the system by providing them clues that are based on familiar concepts.
53
On fashion websites we can refer to menus as the shelves of a wardrobe: we are presented
with different items on each shelf and in each drawer. But the most popular metaphor is
p o a l the shoppi g a t o e, which is the space where online customers store selected
products that they may later purchase. In real life it serves the purpose of carrying around
products selected from the shelves in a shop.
Out of stock messages are again differently presented to customers (Figure 38); Whistles
strikes through unavailable sizes but on the French Connection website it is shown with a cross
instead of a circle. Both worked well in terms of aesthetics as participants rated them equally,
but the latter solution received higher scores for usability and overall it was the preferred
design and according to participants it was straight forward and obvious. However, Whistles
services were rated higher than French Connection. Two participants out of ten remarked that
they found the telephone number provided next to the sizing chart very useful.
54
For each item Whistles offers four different views, three different angles and one close view
(Figure 40). This is done consistently with all their products together with the magnifier glass
which offers a full screen close view of the selected image. French Connection on the other
hand offers three model views and two single views of the product. Furthermore, they also
show the different available colours in single view (not shown on a model).
55
The feedback from participants was that in spite of the fact that French Connection showed
o e a iatio s of the lothes, Whistles displa s e e ette ated fo usa ilit , e ause it had
better contrasts and the screen was clearer. Participants also explained that the reason they
gave better usability for Whistles was the fact that French Connection was showing the jumper
underneath a leather jacket that hindered the real view of the product.
Product Information
The product information should be easily accessible and should provide important and useful
information about the product. Figure 41 shows how the two websites dealt with this part of
their online space.
56
Shopping Basket
Whistles s shoppi g asket page received far better scores than French Connection. The main
reasons for this were that Whistles had more useful information displayed on the page and
that participants were able to see the process. They said that the delivery information was
clearly explained and that it was presented in a more intuitive and streamlined way. The two
shopping basket page can be seen below on Figure 42.
Checkout
An interesting turn as French Connection received far better scores for its checkout page than
Whistles. The reason again was that the information was clearer the way it was presented and
that pa ti ipa ts e e a le to see hat is goi g to happe e t, he eas Whistles e site
was considered too crowded and particpants reported that there were too many lines that
required filling out.
As for the results of the emotional bi-polar semantic scale it shows that most ratings are
concentrated in the middle (Appendix 13) which means that there is indifference to the visual
design and aesthetics as both websites received very similar ratings. However, as the study
shows people like more the site for its functionality and usability rather than for how it looks.
Although Whistles website was perceived constantly throughout the journey as more
sophisticated, only 20% of participants would recommend this website to others.
57
Figure 44
We can see from the results that usability scores were higher than the scores given for
aesthetics. Participants reported that they found it difficult to distract their attention from the
usability aspect and only judge the image based on aesthetic characteristics. They found it
quite hard to separate the two concepts and I often had to remind them to think about the
image they were looking simply from aesthetics point of view.
Also, all participants placed the text, price tag, menu bar cards on the low quality-boring
quarter and most product image cards were placed at the high quality exciting quarter. They
are either not attracted to these elements (texts and fonts) or they found these particular font
types boring and low quality. They seemed to be more interested in the content rather than in
the way it was presented to them.
The two websites evaluated were selected based on the results of the heuristic evaluations in
the first part of the study: being the best rated in aesthetics and the best rated in usability.
These designs had very different schemes and navigation systems and the below figure (Figure
45) shows how the different design elements were perceived on the usability and aesthetics
axis. As the results show that usability has a more important role in the customer journey, but
there also has to be a good balance between aesthetics and usability to create a better user
experience and to make the journey enjoyable.
58
Usability
Aesthetics
During the interview participants were asked to compare the two websites against each other.
The intent of this question was to investigate the strengths and weaknesses of the websites.
French Connection was described as having too much white and that colours were boring on
its website, but it was recognized as the more organized and clearer design with better
structure, functionality and with a more minimalistic and fresh look. Whistles received
controversial statements. It was described as having the better contrast and better colour
choices with better services by most participants. Those ho liked Whistles desig o e
F e h Co e tio s desig said that it as o e sophisti ated a d o e edg , o e
aspirational and more appealing but they also admitted that it was not very functional. Those
who preferred the French Connection website described Whistles as old fashioned and messy.
When participants were asked to compare each website to a car, French Connection was
associated with Mini Cooper, BMW (2/10), Maserati, Fiat 500, Renault and Vauxhall (Figure
46).
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.
Most online shoppers are familiar with customer reviews and ratings so I wanted to ask my
participants to review the selected websites. I asked them to give an overall rating for the
website they preferred on a 10-point scale. Participants were also asked to explain why they
gave that score to the website. On average French Connection was rated 7.25 by the eight
participants who preferred that website. Whistles was rated 8.5 on average by the two
participants who preferred it over French Connection. F e h Co e tio s e site as
60
61
The colourful website looks like entering into a huge department store and having all sorts of
impulses; different brands, colours, smells, furniture all at the same time. Whereas the
minimalistic design is similar to a Sloan Street shopping experience; more white space and less
colourful impulses with the clothes in the centre of attention.
The interviews took place in a focus group format. Both contestants fit the original profile of
participants. The interview took about an hour and the session was recorded by iPhone
(Appendix 15).
First, participants were shown the two homepages and were asked to explain their initial
impressions about the two designs. Their answers revealed that something too crowded on the
ho epage, like the Coats & Ja kets atego o the colourful design would frustrate users
because it appears too messy for them and it is not obvious for them straight away what to do
with those images; whether to click on each of them or to click on the text to reveal the whole
collection of coats and jackets. However, they did like the different other categories on the
colourful homepage and that each had an image of a product from the category. It was
discovered that participants preferred to see the categories with illustrations on the homepage
rather than having images without links or text. The reason reported was that it was easier for
them to find what they needed on the colourful design because the categories were better
visible.
As for the more minimalistic design, one participant said that for her it was a similar
e pe ie e to the Coats & Ja kets atego o the olou ful desig , epo ted ea lie , ut i a
larger scale. The other participant disagreed and explained that because the images were
relatively large and without text, her visual attention was focusing on the dresses rather than
on the menu items in the navigation system. This participant admitted that the website gave
the impression that it had not many categories, whereas the other one had a magazine look
and feel. This was interesting to hear because actually the navigation system of the
minimalistic design had more categories than the colourful design. It appears that the
i i alisti desig a d the la ge i ages di e ted the pa ti ipa t s isual atte tio f o the
navigation system. She also said that for her it appeared that the colourful website had more
products but for her this would mean that she would spend more time on the colourful
website to finally find something to buy. The same participant also admitted that for her the
minimalistic design implies higher quality clothes and a more designer look and feel than the
colourful homepage.
A othe i te esti g aestheti ele e t o the ho epage as the ale e u ite
ithi the
main navigation. Both participants agreed that the ale e u poi t has a i po ta t ole as
they explained that they would check the clothes on sale first in order to secure a bargain on
the website. This has also been reported earlier in the previous stages of this research. The
colourful homepage has the ale e u poi t itte ith ed te t hile the othe e u
ite s a e da k g e ; this solutio as ette ated tha the othe o e hi h did t ha e the
ale e u poi t highlighted ithi the ai a igatio .
62
Another important feature mentioned on the homepage was the delivery and returns
information and policy. Participants explained that these are important information and
depending on the intention of the visit on the website they would check it either at the very
beginning of the journey or at the very end. This is because they reported that if they are
browsing on the website without any explicit idea or intention to buy something, they would
check this information at the end of the journey or when they found an item that they decided
to buy. On the other hand, if they were looking for a specific item on the website with the
precise intention to buy it, they would first check the delivery and returns information early in
the journey to avoid any disappointment later (e.g. the company does not deliver to a specific
country).
Then participants were shown the navigation pages with the sub-categories and dresses
(Figure 49). The conventional left hand side secondary navigation system was rated better
amongst participants as one of them explained that for her it works better as she can pre-set
her filters (e.g. the correct size, a particular colour, the amount she wants to spend, etc.) and
this way she can avoid the disappointment that could happen after she would fall in love with a
dress which would turn out not to be available in her size.
The other important feedback was regarding the size and quality of the images. It was
acknowledged by participants that larger images are better when browsing. This has also been
identified in earlier stages.
On the product information page the participant who preferred the minimalistic design
explained that for her the minimalistic design was more appealing because it seemed more
realistic than the colourful one (Figure 50). She said that she could better believe to the
i i alisti e site as it sho s the d ess as si ple a d a as it is i ealit , he eas the
othe o e see s like a d ea . he e plai ed e that fo he the hite a kg ou d o ked
better when it came to examining the dress and zooming in and out, because the white
a kg ou d offe ed a ette o t ast a d she ould see the d ess a d ho it looks i ealit .
She admitted that for her the white background provided better confidence and closer feel to
reality. She explained further that on the colourful website she felt that they are trying to sell
her the whole website and branding, whereas on the minimalistic design she had more
confidence that the dress observed does look and feel how it does in real life.
63
In the earlier stages of this research having white background when displaying clothes on
websites as well as when examining the clothes on the website has also been favoured by
participants.
Othe aestheti ele e ts su h as the so ial edia utto s a d the Add to asket utto s
e ei ed atte tio . It as ad itted pa ti ipa ts that Fa e ook s Like utto as e
irritating as one of the participants explained that she hated the fact that the company selling
the clothes to her had the intention to encourage her to promote their product on Facebook
and she also added that she felt that this was a violation of her privacy. Other participants from
the earlier stages also reported concerns about the social network icons and their role when
buying clothes online. They all said that they do not understand the purpose and that they
o side ed it as ei g too u h .
The othe outsta di g ele e t as the Add to Basket utton. Both participants agreed that
the si gle utto ith the Add to Bag te t as the ette optio o the olou ful e site. It
was implicit that it was a single button and it was described as being concrete about what
needed to be done with it. Whereas the other option on the minimalistic design was described
as ot ei g st aight fo a d si e the te t Add to Basket as itte i a lo g g ee
rectangle box with a little arrow at the other end. Participants reported that they were not
sure what they needed to do here in order to make it work. Aesthetically it was considered
inferior because it implied that the usability was worse than the single button design.
At the checkout point (Figure 51) participants explained that security is of primary importance
and they both said that they would only pay with PayPal, especially if they had not have
bought anything from that website before.
64
Participants also revealed that their visual attention is on the price and seeking the next step in
order to buy the dress, rather than on the aesthetic elements on the webpage. This has also
been reported previously when participants explained that at this stage it is more about the
functionality and usability rather than aesthetics. Colours and impressions are not important in
this step of the customer journey as customers only focusing on completing the process and
finish the task of buying a dress online. Their attention is now on the information; shipping
costs, return policy, price, etc.
It as also e ealed that the Co ti ue to hoppi g utto has a i po ta t ole he e.
Participants also reported this in the earlier stages that they did not like it when they were
taken back to the home page and had to start the search from the very beginning. Instead they
preferred to be taken back to the last item seen to do what the button promised them to do;
continue shopping. The experience would be the same if someone in a supermarket after
placing an item in the shopping trolley would be taken back to the entrance door of the store.
After participants discussed all the screenshots of the customer journey steps and the
aesthetic elements found on these pages, they were asked which website they would
recommend to a friend. They both said that the colourful website was more appealing not only
because of the colours but also because it had a better usability and navigation system. They
said that despite of the fact that the homepage of the colourful design looked as if it was a
marketplace and perhaps too crowded, it was obvious what they had to do with it. Whereas
the othe desig , the i i alisti o e, as o side ed to e ess
e ause o the
ho epage it as t lea fo the
he e to sta t thei jou e . This as i teresting to hear as
in the first round interviews, that was the most commonly mentioned adjective for the
Whistles e site, a d the i i alisti e site had Whistles a igatio s ste a d la out.
Based on the findings from the previous interviews and methods I drew up the online
customer journey together with the aesthetic elements at each stage in relation to the website
usability (Appendix 16).
First the re-iterated steps of the customer journey were plotted on a map, showing each step
and the sequence of the steps taken by users. In order to create a generic map I have depicted
the category and the sub-category selection in one single step. Then, I marked the moments of
truth and the critical points (e.g. receiving and out of stock message), the steps that had the
65
Once the main journey was defined, I grouped the individual steps into five main stages. The
elements of the visual attention and the affordances at each step were described to help
readers better interpret the map. We can observe from the map that the number of different
affordances is increasing as the user interacts more with the website and reaches its maximum
le el at the ele t/E a i e stage he e use s a use the zooming functionality to observe
the product (Appendix 16).
The journey starts on the homepage of the fashion website, where users perceive the most
aesthetic elements on one page (Figure 52). This stage is very important as all first impressions
about the look and feel of the website are formed here. Users instantly judge the homepage by
its isual appea a e a d appeal a d the also e aluate hethe the a d s i age is
consistent with the design of the website and if there is a good balance between the
information density and white space. The key functional element at this stage is the main
navigation system (Appendix 16).
o
Logo, identity
Colours
Background image
Structure, layout (header, footer), symmetry, space (use of space, white space) , oddity
(quirkiness)
Navigation, site-flow -> astute site-flow that guides users to follow instinctively an
obvious path set by the brand
66
Links
Lists
Audio content
Video content
The jou e o ti ues alo g the o e s se tio that is ea hed ia the ai a igatio
menu or central image and the browsing stage begins. At this step users observe the individual
products in a row by scrolling down the page or mouse over the images until selecting an item
for further investigation. The number of aesthetic elements is reduced here but some new
aesthetic elements such as price tags, items presented in a row and image sharpness become
part of the visual experience. Other important aesthetic elements are the general background
and the context in which the model and/or the clothes items are presented. At this stage
functional elements become more important for the user as they try to find their way on the
pages. Functional elements include search feature and product filtering (filter products by
brand, category and by price, etc.) with speed and stock accuracy becoming concerns as users
reported negative experiences regarding these. In the next step users would select something
that caught their attention by pointing and clicking with the mouse. Before examining the
product users can check a number of product related information, such as; product
description, special offers or multi-buy discounts, stock availability, etc. Aesthetic elements
within this step of the journey include; page layout, text style and buttons. Usability features
include; the description of the product that is easy to understand, stock information that is
accurate and affordances that are intuitive to use (e.g. buttons and links). The moment of truth
comes when the user examines the selected item by zooming in and out, rotating the product
on the screen to observe it from all angles and alternative views. It is all about functionality
here that is what the user can afford doing with the online product to make sure that it fits
their needs and expectations. Therefore, product zoom, auto-zoom and alternative view
optio s a e esse tial ele e ts of this stage. Featu es like You ight also like as ell as
Co plete the look e e all o side ed to e useful pa ti ipa ts i this p oje t. Checking
product details like sizing, the composition of the clothe (material and fabric description) as
well as checking delivery and return information are all important actions before putting the
item in the shopping basket. Putti g the d ess i to shoppi g asket
li ki g o Add to
Basket o Che k Out utto s, use s a go st aight i to thei asket ie
he e the a echeck their selection (i.e. the type, size, colour, quantity and price) and/or again have a look at
the delivery/returns policy. If they are happy with their selection users can proceed to
checkout and enter personal details or login (Appendix 16).
I also wanted to provide the reader some hints about the thoughts and feelings of users while
navigating on the fashion websites, so I incorporated three scopes defining each stage of the
67
68
Figure 53
DISCUSSION
In this project my aim was to reveal the digital aesthetic elements that d i e use s customer
journey on fashion websites and to understand how they contribute to this journey and to the
user experience. I also wanted to measure the emotional responses to these elements of the
selected websites. The ultimate goal of this project was to develop a generic mapping of the
usto e s jou e o fashio e sites that sho s the i pa ts of digital artefacts in relation
to usability and also to the user experience. This has been achieved by identifying the digital
a tefa ts, etapho s a d pe ei ed affo da es a d thei i pa ts o the use s shoppi g
experience during the observed steps of the customer journey on fashion websites. Based on
the information collected and via the various methods used to collect the information a map of
the customer journey (Appendix 16) has been outlined and explained in the previous chapters.
69
70
elements and structures and it aimed to measure the overall user experience by focusing on
both aesthetics and functional features.
Mahlke et al. (Mahlke, Lemke, & Thuring, 2007) found that although aesthetics had a great
effect on emotions and they also found that usability is more important than aesthetics when
comparing the user experience for the use of the products.
Hartmann et al. investigated website attractiveness through the Adaptive Decision Making
theory which was developed into a questionnaire to evaluate three websites that shared the
same brand and topic but had different designs. They discovered a framing effect in that user
experience and perception varied according to the question (Hartmann, Sutcliffe, & De Angeli,
Investigating Attractiveness in Web User Interfaces, 2007). Users rated the aesthetically more
appealing website superior to the others which on the other hand were rated for better
usability.
The main consequence of this research is that on fashion websites women analyse usability
features more seriously than they do with the aesthetic elements. The research revealed that
aesthetics elements of fashion websites are not as important as to have an easy-to-use and
functional interface. All participants agreed that they would rather use an aesthetically less
appealing website given that it has the better usability. Furthermore, 80% of the participants in
the second part of the research would recommend the less colourful website with the more
conventional usability, because it was clearer for them how to use it and it was easier for them
to find what they needed.
However, it is still very important that the overall aesthetics match with the style of the clothes
and with the style of the e site s desig . Participants claimed that the quality of the
e site s desig a d the ualit of the lothes it is selling are correlated; that means that the
better quality the clothes a website is selling the better the design is expected from that
website. The research also revealed that on average only 30% of use s visual attention is
focused o the e site s design and that 70% of their visual attention fixated on the clothes it
is selling.
The success of a fashion website therefore lays in the triangle of presentation (design and
visual power), usability (functionality and ease-of-use) and interactivity (enjoyment for the
user). The most important elements of these environments are; homepage, navigation
structure, the quality of photography, colours and any multimedia solution showing the clothes
from a closer and photorealistic perspective. As the user gets more involved interacting with
the fashion website, his or her satisfaction will depend more on the usability of the functional
elements, such as the navigation and zooming facilities.
71
This research found that users are predominantly looking at the clothes on the websites and
trying to find the way to access them, but as they are constantly interacting with the website it
is inevitable not to generate perception about the aesthetics and usability. The interviews
revealed that at the beginning of the custome jou e use s atte tio fo used more on the
aesthetic elements and the general design of the website and that they instantly formed
opinions about the visual appeal based on their first impressions.
Creating a good first impression is especially important for those e-commerce companies
whose services and products are in great competition with many others on the web. If there is
a la ge sele tio of si ila e sites, selli g si ila se i es o p odu ts, if use s do t like hat
they see or experience they will quickly move onto the next one. However, if customers are
looking for a specific product from a specific website, either because it is the only website
selling the product or because their previous experience was very good, then the company
could afford present in any design they prefer, because the customer has already decided to
buy from that website, therefore he is not going to be affected by the aesthetics of the
website.
Later on the journey the visual attention narrows down to the product and at the output stage
their attention is focused more on functional elements and usability. Depending on the task
use s attention on the visual and functional attributes varies; if it is an exploratory search task
their attention is on the visual, aesthetic elements, and when they are completing directed
72
actions functionality and usability become more important as the goal is to finish the task as
easily and as sooner as possible.
This study revealed that simplicity and good navigation were among participants the most
desired features of the fashion websites. It was claimed that the navigation should be intuitive
a d that the e pages should ha e a beautiful sheen where you can get to the point quickly
pa ti ipa t s feed a k, Appe di . These results also show that comfort and speed overwrite
the significance of aesthetics on fashion websites and that usability can have a great effect on
the customer journey (Appendix 16).
The most exciting part of the customer journey is the moment when users interact with the
product. This is the moment of truth of the whole journey because this is when users visualize
themselves wearing the garment and imagining what they are going to do with it, how they are
going to wear it, etc. This poi t is the i tual ealit , he the o li e i tual d ess e o es a
reality in the minds of the women as they try to visualize the dress on themselves and within
their own contexts. At this moment it is all about functionality and the zooming facility. On the
other hand the checkout stage is the most monotonous part of the journey participants
reported. Companies and web designers should make an effort and make this the last step of
the customer journey more pleasurable (Appendix 16).
Trust is also an important element in the customer journey process. The design of the website
can also influence perceptions of trust. Good quality photographs and images of the products
a i du e t ust o thi ess addi g a hu a tou h if the ga e t is sho i o te t o
worn by a model.
According to ut liffe s heu isti s the choice of media (video and audio) could attract attention
Music can attract by setting the appropriate mood for a website . This was proven not to be
true on fashion websites as automatic music and sound features as well as pop-up windows
and adverts were all considered as negative factors in the overall user experience on fashion
websites.
Use s pe eptio s of website designs can induce a wide variety of feelings and attitudes.
Aesthetics can influence the online purchasing decisions and aesthetics play an important role
in capturing the customer journey of e-commerce companies in order to build a pleasant and
trustworthy online platform.
73
CONCLUSION
I this p oje t
ai
as to e eal the digital aestheti ele e ts that d i e use s usto e
journey on fashion websites and to understand how these elements contribute to the journey
and to the user experience. I also wanted to measure the emotional responses to these
elements of the selected websites. The ultimate goal of this project was to develop a generic
mapping of the custo e s jou e o fashio e sites that sho s the i pa ts of digital
artefacts in relation to usability and also to the user experience. This has been achieved by
identifying the digital artefacts, metaphors and perceived affordances and their impacts on the
use s shoppi g e pe ie e du i g the o se ed steps of the usto e jou e o fashio
websites. Based on the methods used and the information collected a customer journey map
has been outlined and explained in the previous chapters.
What not has quite been accomplished according to my expectations and objectives is the
critical evaluation of the models and frameworks of previous researches and the analysis of
industry practices related to customer journey and aesthetic elements in online environments.
However, I have provided an overview of these in the literature review and the methodology
chapters and in order to explore practices and stakeholders views related to user experience I
have had conversations and discussions with industry experts as well as end-users.
My research questions have all been answered in this project which related to the customer
journey and the aesthetic elements that contribute to the overall user experience within this
journey. Perhaps one thing should have had more attention in this project is the missing
elements that could improve the overall user experience as well as the usability of fashion
websites, therefore this could be subject for further research within this area.
The central implication of this research is the conclusion that women s judgements of usability
features are more critical than their verdicts on aesthetic elements on fashion websites. The
research revealed that for women aesthetics elements of fashion websites are not as
important as to have an easy-to-use and functional interface. All participants agreed that they
would rather use an aesthetically less appealing website given that it has the better usability.
Furthermore, 80% of the participants in the second part of the research would recommend the
less colourful website with the more conventional usability, because it was clearer for them
how to use it and it was easier for them to find what they needed.
The main motivation of this project is to better understand the e-commerce environments and
the relationship of aesthetics and usability as well as the online service design. The central idea
of this dissertation project was to uncover the online shopping experience from the user's
perspective with respect to digital artefacts and metaphors that guide users through the online
journey. The reason for which the author of this project chose to compare fashion websites is
that these online platforms have rich content and that these are very much dependent on the
visual appearance.
74
Mapping the customer journey process is primarily tracking and describing the customers
experiences as they interact with an interface or service. The generic customer journey map
that I created reveals opportunities for e-commerce companies for improvement and
innovation; therefore it acts a strategic tool to ensure that the human-computer interaction is
a positive experience. My customer journey map not only helps companies to better
understand the end to end journey of the customer but also to improve how the various
functions and tasks are involved in delivering the ultimate customer experience.
Many e-commerce companies would agree that successful customer journey consists of a
quick and easy purchase on the website. But it is not only about functionality and usability;
aesthetics are also playing an important role in the overall user experience and therefore in the
customer journey. Aesthetic elements are essentials for the visual design of interfaces or
environments as well as for the design of the navigation system and the information
a hite tu e i te s of the st u tu al desig of the i fo atio spa e i o de to eet use s
expectations. Aesthetic elements follow through the customer journey and support the user by
providing all sorts of different information. For example, in a shop customers orientate
themselves by relying on signs and symbols but they also perceive colours and shapes as well
as textures and materials. When making a phone call, users notice the colours on the screen,
the shapes of the buttons, the texture of the phone, the sounds it makes, and so on. These all
contribute to the overall customer experience; therefore have an effect on the customer
journey.
The research started with literature review and gathering information from related websites,
as well as talking to stakeholders in the fashion industry (both owners of fashion websites as
well as end-users). From the literature review I got a good insight of previous researches that
focused on aesthetics and usability on websites and I was able to take away significant
knowledge regarding aesthetic heuristics and testing methods.
I set up my own heuristics to measure the aesthetic appeal on six high street fashion brands
websites. I have adopted several points from different sources (e.g. Travis s, Sutcliffe s,
Tractinsky s, Avery s a d Alsudani s heu isti s) since I have used many of their adjectives and
statements to compose my own set of guidelines for fashion website aesthetics. My heuristics
were composed on three different dimensions; aesthetics, usability and user experience.
Hassenzahl et al. (Hassenzahl, Burmester, & Koller, 2003) asked users to compare and evaluate
six different interface designs for user experience, hedonic and appeal qualities. Hassenzahl et
al. concluded that both the user experience and the hedonic qualities contributed to the
overall aesthetic judgement of the interfaces. However, none of these studies showed which
aesthetic elements (eg. colours, layout, etc.) contributed to the overall judgement by
participants. In this research, a customer journey map helps to identify which aesthetic
elements are being evaluated at which stage.
Some of the limitations of the methodology and techniques are that the number of
participants was not representative and the websites were only tested on women with similar
age range; between 34 and 39. However, culturally the sample was very different (included
75
English, French, Italian, Dutch, German, Swiss and Hungarian participants). The participants
were only representing a specific segment of the target population and some of them had HCI
background. The websites were not randomly chosen and they meant to represent a certain
market segment. Another restraint is the fact that the websites were tested in July during the
summer sale period and all fashion websites had an altered homepage during this period.
During the evaluation sessions contestants were given a directed search task and they were
observed using the websites. Based on the observations a customer journey was mapped. It is
quite difficult to give objective feedback on aesthetics since it is a very personal entity.
Everyone has a unique taste which is difficult to explain therefore judging aesthetics is hard
without involving o e s o su je ti e feelings. When participants were given a directed task
that requested them to find a dress that they would wear for a wedding, they started looking
for attractive objects on the websites. This could have had a bias on their overall aesthetic
judgement about the website, since when the participant found no suitable (aesthetically not
pleasing) dress then her overall opinion about the website aesthetics could have been biased.
The fa t that she has t ee a le to fi d a att a ti e ite ould ha e had a effect on her
feelings therefore her opinion about the environment (website) was prejudiced. Therefore, for
future research I would suggest asking participants to find the same item (i.e. dress) on
different websites and measure the aesthetics and usability as well as to compare the journey
on those websites. This a o e ould i i ize the ha e to ias pa ti ipa ts a s e s
regarding general website aesthetics.
The second phase the project included an intense user-testing period focusing on the aesthetic
elements of the websites and evaluating those within the customer journey framework. I used
commercial methods to gather quantitative data alongside the qualitative data. It was revealed
form these sessions that users associate online clothes shopping with convenience, speed,
ease of use and getting good deals. All participants reported different ways of browsing and
selecting fashion items online but they all agreed that the e site s desig ould affe t the
purchase on a fashion website. The most important functional features of a fashion website
were considered to be the zooming, the quality of the images, the navigation system, and the
information provided about the clothes as well as the checkout and return process and
information, the search and filtering options and security.
The results of the second phase helped to construct the final framework of the customer
journey with the aesthetic and usability elements that drive the journey. This was reiterated in
the last phase of the project which included a focus group type interview including testing two
paper prototypes of different website designs. One of the major limitations of the third stage
of the project was the low number of participants. In spite of this, the interview repeated the
earlier found effects that users prefer to have better usability than better aesthetics. Of
course, the personality and the personal taste and preference will determine which aesthetic
design they like and they all have individual mental models as to how they do their shopping
and how they use a website. For this reason it is so important for e-commerce companies to
know their users in order to design a website that is both enjoyable to use for the user and
aesthetically it is pleasing.
76
While most fashion websites will try to use the power of visuals to draw attention and to retain
the customers and to push them through the purchasing process, the success of a fashion
website will lay within the triangle of aesthetics (design, visual power), usability (functionality
and ease-of-use) and user experience (enjoyment for the user). The most important elements
of these environments are; homepage and the navigation structure, colours, photography,
zooming facilities and the relevant product information (including the delivery and returns
information). This research found that aesthetics and usability are closely related as they both
had a strong influence on the appeal of the fashion websites, but at different levels and at
different times. The homepage has a stronger appeal and influenced more by aesthetics before
use, but as the user goes further along the customer journey and interacts with the website
the usability elements and functions become more important in the overall judgement until
the point when it overwrites the importance of aesthetics (Appendix 16). Hence, it is very
i po ta t that a e site s desig p o ess i ludes use esea h hi h is o pleted efo e
the construction process and that there should be interaction between the creative and the
user experience teams. Furthermore, both creative and user experience teams should see the
process as a customer journey where different steps imply different user requirements from
both aesthetic and usability point of view.
Lessons learnt from the project include that like with most other research methods, there is no
one single right way to build an experience map and that first there has to be identified what
the map needs to point at, like the most prominent parts of the customer experience that help
identify the moments of truth, and that helps to visualize each step of the journey in a
meaningful way. Customer journey map can help e-commerce companies to identify parts of
the journey that need more control over and parts that are out of their control. The
visualisation of the customer journey map can also encourage interest and improves the
readability of the journey.
For related future work the author recommends to refine the measurements and involve
statistical analysis as well as to uncover the different motives for shopping clothes online and
to compare the real life in-store customer journey to the online experience to expose more
about the aesthetic elements during the shopping experience.
77
References
Adams, A., & Blandford, A. (2005). Digital li a ies suppo t fo the use s i fo
Denver, CO, USA: JCDL 2005, 7-11 June 2005.
atio jou e .
Angeli, D., Sutcliffe, & Hartmann. (2006). Interaction, usability and aesthetics: What influences
users' preferences? DIS '06 Proceedings of the 6th conference on Designing Interactive
systems, 271-280.
Brugnoli, G. (2009). Connecting the Dots of User Experience. Journal of information
architecture, Volume 1 Issue 1, Journalofia.org | ISSN 1903-7260.
Capota, Hout, v., & Geest, v. d. (2007). Measuring the Emotional Impact of Websites: A Study
on Combining a Dimensional and Discrete Emotion Approach in Measuring Visual
Appeal of University Websites. Designing Pleasurable Products and Interfaces, (pp.
135-147). Helsinki, Finland.
Carrie, A. (2003). Only screen deep? Evaluating aesthetics, usability, and satisfaction . A thesis
submitted in partial fulfillment of the requirements for the degree of Master of Arts in
the Department of English in the College of Arts and Sciences at the University of
Central Florida. Orlando, Florida.
Chen, J. (2009). The Impact of Aesthetics on Attitudes Towards Websites. Retrieved from
http://www.usability.gov/articles/062009news.html
Cskszentmihlyi, M. (1990). Flow. London: HarperCollins e-books.
Dubberly, & Evenson. (2008). The Experience Cycle. Interactions, 11-15.
Eckman, M., & Wagner, J. (1995). Aesthetic Aspects of the Consumption of Fashion Design: the
Conceptual and Empirical Challenge. Retrieved 09 22, 2012, from
http://www.acrwebsite.org/: http://www.acrwebsite.org/search/view-conferenceproceedings.aspx?Id=7825
Fogg, B. (2003). Persuasive Technology: Using computers to change what we think and do. San
Francisco: Kaufmann.
Hartmann, Angeli, d., & Sutcliffe. (2008). Framing the User Experience: Information Biases on
Website Quality Judgement. CHI 2008 Proceedings, Exploring Web Content, (pp. 855864.). Florence, Italy.
Hartmann, J., Sutcliffe, A., & De Angeli, A. (2007). Investigating Attractiveness in Web User
Interfaces. CHI 2007 Proceedings: Empirical Studies of Web Interaction. San Jose, CA,
USA.
78
Hartmann, J., Sutcliffe, A., & De Angeli, A. (2008). Toward a Theory of User Judgement of
Aesthetics and User Interface Quality. ACM Transactions on Computer-Human
Interaction, Vol.15, No. 4, Article 15.
Hassenzahl, Burmester, & Koller. (2003). AttrakDiff: Ein Fragebogen zur Messung
wahrgenommener hedonischer und pragmatischer Qualitat [AttracDiff: A questionnaire
to measure perceived hedonic and pragmatic quality]. Mensch&Computer, Interaktion
in Bewegung, pp.18.
Hoffmann, R., & Krauss, K. (2004). A Critical Evaluation of Literature on Visual Aesthetics for.
Annual Research Conference of the South African Institute of Computer Scientists and
Information Technologists (pp. 205-209). Western Cape, South Africa: Institute for
Computer Scientistc and Information Technologists.
Kim, J., Lee, J., & Choi, D. (2003). Designing Emotionally Evocative Home Pages: An Empirical
Study of the quantitative relations between design factors and emotional dimensions.
International Journal of Human Computer Studies, 269-298.
Lavie, T., & Tractinsky, N. (2003). Assessing dimensions of perceived visual aesthetics of web
sites. Beer Sheva, Israel: Int. J. Human-Computer Studies.
Lindegaard, G., Dudek, C., Sen, D., Sumegi, L., & Noonan, P. (2011). An Exploration of Relations
Between Visual Appeal, Trustworthiness and Perceived Usability of Homepages. ACM
Transactions on Comuter-Human Interactions, (p. 30).
Lindgaard, Fernandes, Dudek, & Brown. (2006). Attention web designers: You have 50
milliseconds to make a good first impression! Behaviour & Information Technology,
25., 115-126.
Lindgaard, G., & Dudek, C. (2002). What is this evasive beast we call user satisfaction?
Interacting with Computers 15 (pp. 429-452). Ottawa: Elsevier Science B.V.
Mahajan, R., & Schneiderman, B. (1997). Visual and Textual Consistency Checking Tools for .
IEEE Trans.Softw.Eng, (pp. 722-735).
Mahlke, S., Lemke, I., & Thuring, M. (2007). The Diversity of Non-instrumental Qualities in
Human-Technology Interaction. Berlin: MMI-Interaktiv, Nr. 13, Aug 2007, ISSN 14397854.
Molly Eckman, J. W. (1995). Aesthetic aspects of the consumption of fashion design: The
conceptual and empirical challenge. Advances in Customer Research, Volume 22, 646649.
Ngo, Teo, & Byrne. (2003). Modelling Interface Aesthetics. Information Systems, 25-46.
Nielsen, J., & Molich, R. (1990). Heuristic evaluation of user interfaces. Proc. ACM CHI'90 Conf.,
(pp. 249-256.). Seattle, WA, 1-5 April.
79
Norman, D. A. (2003). Emotional Design: Why We Love (or Hate) Everyday Things. New York:
Basic Books; 1 edition.
Payne, J. W., Bettman, J. R., & Johnson, E. J. (1993). The Adaptive Decision Maker. Cambridge:
Cambridge University Press.
Sutcliffe, A. (2002). Assessing the Reliability of Heuristic Evaluation for Website Attractiveness
and Usability. Proceedings of the 35th Hawaii Conference of System Sciences (p. 137).
Big Island, Hawaii: HICSS'02-Volume 5.
Sutcliffe, A., & deAngeli, A. (2005). Assessing Interaction Styles in Web User Interfaces. 405417.
Tractinsky, & Lowengart. (2007). Web_Store Aesthetics in E-Retailing. Academy of Marketing
Science Review, Vol.11, No.1.
Tractinsky, N., Katz, A. S., & Ikar, D. (2000). What Is Beautiful Is Usable. Interacting with
Computers, 13, 127-145.
Tungate, M. (2008). Fashion Brands: Style From Armani to Zara. London: Kogan Page Limited.
Xue Li, H. Y. (2011). Sparse representation based visual element analysis. 18th IEEE
International Conference on Image Processing.
Internet resources:
http://oxforddictionaries.com/definition/english/aesthetics (accessed 22/09/2012)
http://vestalmedia.com/2011/11/15/are-you-an-internet-expert/ (accessed 23/07/2012)
http://www.jonathanbriggs.com/ecommerce/designing-customer-journeys-lecture5,632,AR.html (accessed 22/05/2012)
http://www.mycustomer.com/topic/customer-intelligence/customer-journeymapping/105167 (accessed 22/05/2012)
http://www.plongstreet.com/dissertation-abstract (accessed 12/08/2012)
http://www.webcredible.co.uk/user-friendly-resources/web-usability/aestheticsusability.shtml (accessed 12/08/2012)
http://www.websiteoptimization.com/speed/tweak/blink/ (accessed 12/08/2012)
http://www.surl.org/usabilitynews/42/shoppingcart.asp (accessed 28/06/12)
http://www.nomensa.com/blog/2008/the-shopping-cart-metaphor-in-e-commerce-websites/
(accessed 05/09/2012)
http://wiki.answers.com/Q/What_is_aesthetics#ixzz26HzZnPa4a (accessed 14/09/2012)
http://www.attrakdiff.de/en/Services/AttrakDiff-Basic/ (accessed 04/07/2012)
http://www.userfocus.co.uk/resources/homepagechecklist.html (accessed 03/07/2012)
http://uxdesign.smashingmagazine.com/2011/12/16/guide-heuristic-website-reviews/
(accessed 12/08/2012)
http://www.uxforthemasses.com/online-survey-questions/ (accessed 24/06/2012)
http://www.thinkbuzan.com/uk/registration/freetrial (accessed 24/08/2012)
80
Introduction
User-centred approaches like service design, design thinking and customer journey mapping
(CJM) are emerging trends and are useful tools to measure the user experience as well as to
improve the quality and effectiveness of the interactions of customers with the brand.
A usto e s jou e i a shop is guided shop assista ts a d fa ilitated by customer service
representatives, but on a website the customer is on his own. Fashion websites are advertising
platforms where companies advertise and sell goods that are then bought by customers.
Customers rely on digital metaphors and artefacts that drive them through the journey and
contribute to the customer experience such as layouts, navigation, style, colours, white space,
photographs, etc. The roles of the metaphors and digital artefacts are to enhance the use of
the user interface and to guide the customer through the journey and to provide the customer
with a smooth flow of the shopping experience. These artefacts and metaphors must be
i te p eta le a d e e e ed the use s a d should eet the usto e s e pe tatio s
(Lanquetin, 2007).
In order to provide an outstanding customer experience and having customers coming back to
the website companies need to invest in creating excellent usability. Furthermore, to maximise
the reach of a wider customer segment companies should also consider accessibility issues. It is
not easy to create an online environment that is both usable and aesthetically appealing at the
same time. There are trade-offs all the way throughout the user-centred design process that
companies have to consider when making decisions on design and usability.
The central idea of this dissertation project is to uncover the online shopping experience from
the user's perspective with respect to digital artefacts and metaphors that guide users through
the online journey.
For this project the author will choose to compare fashion websites as these have rich content
and they are very much dependent on visual appearance. Fashion websites seek to blend
together the latest fashion trends with the latest technologies and aim to improve the
81
interaction between humans and computers with the ultimate aim to persuade the customer
to buy.
Every fashion house aims to create a unique style that is embodied through visual cues to
e ha e the i te a tio ithi the a d s o li e e i o e t as ell. Most fashion websites
rely on the power of visuals to draw attention and to retain the customers and to push them
through the purchasing process.
The success of a fashion website therefore lays in the triangle of presentation (design, visual
power), usability (functionality and ease-of-use) and interactivity (enjoyment for the user). The
most important elements of these environments are; homepage, photography, colours, videos
and other multimedia as well as social media and the navigation structure.
However, fashion websites tend to change and evolve rapidly; some brands re-design their
websites for each season, consequently this could be a challenge to handle in this project.
Research questions
82
a.) What are the elements of the customer journey on fashion websites? What tools,
frameworks and models are available to support measuring the online customer journey?
b.) What are the key aesthetic elements within the customer journey in online environments
that provide e jo e t fo the use s? What i pa ts desig a tefa ts ha e o use s e otio s
and the shopping experience?
c.) What elements are (users) missing throughout the customer journey that could improve
the overall user experience as well as the usability of fashion websites?
83
In this research the author is also intended to evaluate Halo-effe ts o use s judge e ts
versus perceptions and impressions of fashion websites. Theories like the Adaptive Decision
Making Theory (Roberts, 2006) will be used as tools to understand which affordances drive
customers through the experience journey. Another intention of this project is to look at the
impacts of semiotics on persuasion and seduction of the customers.
Project feasibility
Having completed a one year full-time study in HCI endows the author with academic
knowledge and skills to undertake this research.
The author worked 5 years at a large online media corporation and has sales and marketing
related project management skills. The author has interest in the online fashion business and
has connections within this industry that will benefit the research and data collection stages of
the project.
85
86
Yes/No
Number
Question
(delete as
appropriate
If the answer to any of the following questions is NO, then the project plan needs to be
modified, because the project should not continue as currently planned. Seek advice very
early about it
1.
Does the planned project pose only minimal and predictable risk to
the student?
Yes
2.
Yes
3.
Yes
4.
Yes
5.
Yes
If the answer to any of the following questions is YES, then authorisation from the Senate's
Ethics Committee is required. Seek advice very early about it
6.
No
7.
No
8.
No
9.
Does the project involve research on persons under the age of 18?
No
10.
No
11.
No
The following questions must be answered YES, i.e., the student must commit to satisfy these
conditions and have a plan to ensure they are satisfied
Will the student ensure that any people subject to observation or data collection are :
fully informed about the procedures affecting them and affecting
12.
Yes
any
information collected about them (how the data will be used, to
whom they will be disclosed, how long they will be kept)?
13.
Yes
14.
Yes
15.
Yes
16.
Yes
87
88
ChC
NSch
NZ
CR
Stay at home mum, I do general household and manage 2 children (at school).
Retaining, home studying, half-time mum.
Shopping
Entrepreneur mum of two. I am currently setting up my online jewellery shop
with my mother-in-law.
Busy (working) mum of two.
AN
LB
2. Roughly, how many hours a day altogetherjust an estimate would you say you spend
using the Internet (including browsing, email and shopping)?
ChC
NSch
NZ
CR
AN
LB
3.
ChC
NSch
NZ
CR
AN
LB
4.
NZ
ChC
CR
AN
NZ
NSch
NZ
CR
ChC
AN
NSch
CR
NSch
AN
3 hours, I use my mobile phone (iPhone), iPad, Facebook and I shop everything online
3-4 hours
2-3 hours
1 hour approximately
3- h s, ut I sit i f o t of the o pute all da
How frequently do you buy online?
Roughly, eekl o a ouple of ti es a o th..
Not e ofte , o e a o th Id sa .
Couple of times a month.
O asio all , ostl he the es a i thda o i g up o at Ch ist as ti e
Monthly, sometimes weekly
List 3 words that you associate with online shopping:
Bargain
Choice
Convenience
Convenience
Convenience
Convenience, efficiency
Designer wear
Ease
Ease (and my laziness)
Fun
Google, searching
Quick
Sale
Saving time
88
89
ChC
LB
Speed
5.
NSch
NSch
NZ
AN
AN
ChC
NSch
NZ
ChC
NZ
AN
CR
ChC
CR
CR
LB
6.
ChC
NSch
NZ
CR
AN
List 3 words that you feel when you are doing online shopping
I feel like I saved time
Bargain hunting
Comfort
Excitement
Guilt (that I spent a fortune)
Happiness
It makes me mobile (virtual mobility)
Relaxed
Satisfaction
Satisfaction
Satisfaction
atisfa tio , its Do e! a d I do ot ha e to deal ith it a
oe
Sense of guilt (to spend lots of money)
Vulnerable (that something can go wrong eg. my delivery gets lost or the company goes bust)
Wo ied that stuff do t a i e
How would you compare the online and offline shopping experience?
I p efe o li e shoppi g. It is so eas ; I a
o se e e thi g, I do t ha e to leave the
house a d d i e, I t it at ho e a d if I do t like it I etu it the o e a d olle t it f o
my house).
For me offline shopping means a more impulsive ad hoc pleasure. You treat yourself because
ou go out its a leasu e . O line shopping is for saving time, more convenience than pleasure.
It is good for saving time and to compare prices.
O li e shoppi g is good e ause fo its easi ess, o fo t a d it takes o effo t ou a still
watch TV or eat in the meantime.
I thi k that ou a t o pa e the , the a e so diffe e t. Offli e shoppi g is pleasu e hile
o li e shoppi g is to get so ethi g do e ui kl
I p efe o li e shoppi g, e ause I si pl a t affo d goi g to the shops a d spe d
whole day looking for things. Online I can do everything much quicker and more effectively;
do t eed to ueue, d i e, alk, et . But I like offli e shoppi g e ause ou a a tuall feel
the te tu es a d olou su fo tu atel I do ot ha e ti e fo this.
LB
7.
ChC
NSch
NZ
CR
AN
LB
8.
Which websites do you use to buy clothes and to learn about fashion trends? Why?
To lea a out fashio t e ds I use the agazi es I t le, Elle, et fo e sites I use:
Net-a-Porter, Matches, Mywardrobe, DonnaIda, H&M, Zara, Mulberry, Jigsaw, AO
Jigsaw, Joseph and Ventre-privee.
OutNet its a good e site to follo t e ds o look fo so ethi g spe ial to t eat ou self ith.
OutNet, Net-a-Porter, and the vintage clothes on Vestiarie Collective
ASOS, Massimo Dutti, Zara, Ma go, et . Fo fashio t e ds I look o li e o I u agazi es
What types of fashion items do you look for on the Internet? Why?
89
90
ChC
NSch
NZ
CR
AN
LB
9. Ho do you hoose your ite s e.g. lothes o the e site? Do you ha e a strategy
or favorite way of doing it? Why?
ChC
NSch
NZ
CR
AN
LB
10. Do you have any favorite fashion websites? Why those?
ChC
NSch
NZ
CR
AN
LB
11. List 3 of the most important features or parts of the website and your online shopping experience?
Which is the most important and why?
ChC
NSch
AN
NZ
ChC
NSch
CR
NZ
NZ
AN
Ease of checkout: some websites only leave you a short period of time to complete the
purchase, I think this is wrong and you should be able to see what you put in your
shoppi g a t the da efo eRetu is also e i po ta t fo e as I u lots of stuff
online and most of them go straight back.
Different views (front, back) anything that makes it more efficient to see the colours, sizes, etc.
Images must be sharp and crisp with good contrast and on a model
Displays (images and photos) are good and descriptions are clear
Images: to be able to enlarge, see the material, to expand it
Composition, details and information about the dress
To be able to see the dress on the mannequin
Easy to maneuver
The a ou a
o se the e site, thats o the ho epage e u
Simple navigation, straight forward path to checkout, but also secure!
90
91
ChC
Ease of search: to be able to drill down
NSch
Zoom
CR
Zoom to see the fabric
AN
)oo i g is p i o dial, if I a t zoo i to see the te tu e I ill ot u it
CR
LB
12. Do you think that the website design could affect your purchase? How? Why?
ChC
NSch
NZ
CR
AN
LB
13. If you were to envision your ideal fashion website, what sorts of features and information
would it contain?
ChC
NSch
NZ
CR
AN
Net-a-Po te , ut I a t affo d to shop the e all the ti e..I also like he othe e sites,
like Zara, show what other items the model is wearing, so that if I like the whole look I can
buy everything.
D ie s of i ages, Pa Pal its ui ke , easie , less epetiti e, e ause ou do t ha e to
type in your card details)
Checkout is important for me. I like to see the items I put in my basket. It is more efficient
and informative..I can just double-check what I bought before I pay for it (picture, delivery
and returns info), I just like when these are more prominent and pop-out.
It is easy to overview, the drop down menus are clear, the navigation is easy and it is easy
to go a k to the last ite I as looki g at. The atego ies a e u ialto fo e a ple
differentiate between evening dresses and day dresses.
Exceptional zooming feature with drag and rotate functions. I would display the stock
levels and the stores they are available in. Display colours and textures in daylight and
under artificial lighting.
LB
14. What is your gender?
ChC
NSch
NZ
CR
AN
LB
Female
Female
Female
Female
Female
Female
92
ChC
NSch
NZ
CR
AN
LB
39
34
34
38
35
92
93
Accessed on 05/07/2012
93
94
Website: http://www.reissonline.com/eu/
Accessed 05/07/2012
94
95
Website: http://www.whistles.co.uk/
95
96
Accessed: 05/07/2012
96
97
Website: http://www.jaeger.co.uk/
Accessed: 05/07/2012
97
98
98
99
Website: http://www.tedbaker.com/
Accessed: 05/07/2012
99
100
Website: http://comptoirdescotonniers.com/fra/Home.aspx
100
101
101
102
102
103
103
104
FCUK
Comptoir des
Cotonniers
Reiss
Usability
Aesthetics
User experience
Overall experience
Ted Baker
Whistles
Jaeger
104
105
105
106
-
The a i atio at the top, hat s the pu pose of it?! , Do 't like the ig headli es a d the
animation (it's a aste e ause I do 't a e
I don't like adverts, social networks
Ia
ot e kee o the olou s ed, hite a d g e , o a kg ou d i ages, o
olou s , olou s a e e poo ; I thi k the a e ot i li e ith the a d's i age
it doesn't make me feel very special
)oo is te i le, hite ith hite a kg ou d does 't o k fo e , o supe e la ge
fa ilit
images are not sharp
the size guide is messy, I don't like it
too u h i fo a out the d essI do 't a e, I o l a t to see hat's it made of and the
care instructions
" ou ight also like" is good ut he I li ked o it, it as out of sto kthei s ste is ot
updated and this is very annoying
107
o
o
o
o
o
o
o
o
it is very annoying on the iPhone and iPad, because the pop-up is floating around
the wish list feature is ok but it asks to log in and I find that very annoying
it's a bit busy but the sizes of the images are good
whilst you are zooming some info disappears from the screen (as the zoom covers it)
colours are dull
"Sorry, out of stock" message is very annoying and frustrating! Don't show if you don't have
it on stock
I don't get this Wish List thing (I never click on it)
I e e ead the st le i foI thi k it is a aste of space
107
108
Re-iterated customer journey by participants using card sorting in the second part of the study:
108
109
Primary persona:
Images from:
http://stylescout.blogspot.co.uk/2010_12_01_archive.html
http://www.msg-nonstatuscontracthire.co.uk/range-rover-sport-v8-hse-08-bad-credit-car-finance-882-a-month/
http://blog.zoopla.co.uk/2011/02/14/what-1million-buys-you-around-britain/
http://recipes.howstuffworks.com/diet-fads-pictures.htm
http://www.footballfancast.com/2012/03/football-blogs/the-perfect-football-treat-for-your-kids-this-easter
http://mybigfatgreekmove.blogspot.co.uk/2010/05/stylish-wardrobe-inspiration.html
http://freebies-2deals.com/as-the-rumor-has-been-said-ipad-mini-is-coming/
Chantel is 38 years old and she is a stay-at-home mum of 2 young boys. During the week she is busy
looking after the kids, doing the school runs and taking care of the household. Chantel is very
concerned about her figure which she keeps in shape by doing exercise regularly. She is currently
refurbishing the house so her schedule is rather hectic to make sure that the boys are out of the
uilde s a . Whe Cha tel has a it of ti e a d o he o she goes o the I te et a d he ks
emails, Facebook or looks for clothes online.
Chantel spends approximately 3 hours a day browsing and mostly uses her iPhone and iPad, but she
also likes to buy magazines to be updated on the latest fashion trends and celebrity fashion. When
109
110
she sees something on somebody that she likes she is not afraid to ask where the clothes or shoes
are from and she then makes sure to go on the internet and track them down for herself. She admits
buying clothes and accessories on the internet every week.
he e jo s o li e shoppi g e ause it is e o e ie t fo he as she does t ha e to lea e the
house and drive, but she also admits that she feels a bit guilty for ordering too many clothes, most of
which she ends up sending back. Therefore it is very important for her to check the delivery and
returns policy of the company selling the items online.
Chantel buys from a variety of websites but she only buys from those which have a trustworthy
reputation and design that allows her to easily navigate through the pages. Zooming technology is
also a ke fa to i he pu hasi g p o ess; if she a t see the lothes f o a lose ie she will not
u it. Cha tel does t like those e sites he e she has to sig i efo e seei g the lothes o
before viewing the items in her shopping basket.
Secondary persona:
Images:
http://blogs.babycenter.com/celebrities/jessica-alba-does-the-school-run-in-style/
http://www.friday-ad.co.uk/article/a-guide-to-organic-food
http://www.sahservices.com/homeopathy
http://www.telegraph.co.uk/property/propertypicturegalleries/6157588/On-the-property-market-London-mews-houses.html
http://roosie-fashionplace.blogspot.co.uk/2012/01/vintage-clothing.html
http://hayancafe.blogspot.co.uk/2011/06/san-diegos-vintage-shops.html
http://businessblog.winweb.com/miscellaneous/you-can-have-your-own-online-shop
Nicole is a busy mum of 2 girls. She has recently moved to London and has just settled in with her
family. She is studying homeopathy at a French college via e-course whilst her kids are in school. She
is very health conscious and only cooks with organic ingredients.
110
111
Nicole only buys quality products which means: pure silk, organic cotton, natural wool, etc. She
spends roughly 4 hours a day on the Internet to keep up with her studies as well as researching the
web for the perfect items. Although Nicole admits spending a lot of time online she prefers doing
offline shopping which she considers as a treat and leisure.
Nicole also loves vintage clothes and she uses the internet to get inspiration from different fashion
e sites. Ni ole is e p i e o s ious so she does t e essa il u s hat she sees i
ediatel ;
instead she would use Google to compare prices and would buy it from the cheapest seller. Nicole
finds it off-putting when fashion websites have heavy flash or animation on the homepage that she
has to skip. She prefers to pay with PayPal for her customs.
111
112
112
113
114
DW: It is reliable, because I have experience with it, and it has PayPal system, so I know it is secure.
It also has many options: lots of brands. And it is usually cheaper to buy online then in the shops.
LB: It is one of my favourite websites and because they sold the brand I wanted to buy.
ChC: Variety and free delivery.
AudC: I saw a dress in a shop for a wedding I was going but they didn't have it the colour I wanted, so
I went online and ordered it from their website.
AshC: All my colleagues use it, I received an email from them..
EC: I don't think it is the best website, I much rather prefer Gucci and Dior or Prada.
NZ: My friends recommended me that website
5. What do you like of that website in terms of its design? Why?
BG: Design is good. I like the checkout, there's a nice flower wallpaper that I quite like. The website is
designed for women, I really like it; it is colourful with pastel colours.
MS: Simplicity, it has a white background, the buttons and the navigation are good, and the
subcategories (like the list of blouses and then you can also change the colours for each one and
zoom and see the item from different views.
MF: The images, that I am able to click on a dress. The information about the dress; the different
colours they come in and the bigger images, to rotate to see ette , the sizeI like to feel/tou h it as
if I e e i a shop e ause o li e is diffe e t.. Ah, a d also the deli e a d etu s i fo atio !
DW: They have good promotions skills, their banner is quite prominent and I can scan the homepage
quickly to see the different clothes. Their homepage has lots of colourful content which is good for
inspiration when browsing.
LB: First of all it is very important for me that websites have apps for mobile because I browse a lot
o
iPho e. Eas to use: do t ha e more than 3 items in a row, actually 2 looks good on the
iPhone. It also has to be intuitive to use and easy to navigate.
ChC: It has a bit of a fashion magazine feeling, I like the colours, I mean it has also black&white but
also primary colours! It doesn't have that comic look neither. It has people on the front page, and I
quite like that.
AudC: It was easy to go through and I found the dress quickly, they have a good implementation and
categories. The photo was interactive and I was able to zoom. Also, it was shown on a model so I
could see the fit and the shape of the dress.
AshC: Actually, it is not very well designed, it seems a bit clunky and not totally user-f ie dl ut it
is about getting a bargain, not high quality clothes. Because it is a sales website, it is more functional.
It doesn't have that beautiful sheen that some websites have, where you can quickly get to the
point.. It doesn't matter the design of the website if the clothes it is selling is not high quality (you
wouldn't expect it to be beautiful)
EC: Gucci has the best design; because it has nice bright images and it is very easy to use. Also it is
very catchy, it keeps me on the website and makes me want to discover it further. It has a good
a igatio , side a s
NZ: It's not a pretty website, quite plain and not much colours or adverts. But it is very easy to use.
6. What would you like to see differently on that website in terms of design? Why?
BG: Nothing
MS: The music is too loud and I don't like that! But it is a peaceful website, it is not cluttered and
when it is sales going on it is not screaming in your face. Oh, actually what I really don't like is that I
have this Customer Card and it doesn't let me change my address, I mean it is not automated; I had
to call customer services and they asked me to send them an email but then I didn't get an answer
for ages...oh, it was really bad from them! I also don't like their main website the mexx.com because
it is quite an unclear website; the screen is divided into 2 parts, but it is just not clear what it does
and it takes too long to load as well
114
115
MF: Select the dress by size, colour and by price. As for the text; black and white is fine, kind of
i i alisti , ut I a
o e i te ested i the d essthe ate ials! A d I like to see the images in a
context.. so for example an evening dress is worn in the context, e.g. in a party.
DW: The speed, sometimes it can be very slow. The format is different for each brand so I would
make it all the same layout. The design would definitely affect my purchase because first impression
fo e is e i po ta t, the olou sif I a see that it is
st le the I'd sta ut if ot, I'd lea e
immediately.
LB: I like that e site e
u hso I ould 't ha ge a thi g.
AudC: It is too conventional and sta da dthe odels ould e togethe a d sho i
o te t alki g, tu i g a d i p ope da light.
7. What is the % of your visual attention between the website's design and the clothes it is selling?
AC: I predominantly look at the clothes and to try to find the way to access the clothes, but you also
i te a t ith the e siteso I suppose he ou a e sele ti g the d ess ou a e fo usi g o e o
the dress but when you are at the output stage so try to buy it or try to move on that's when you pay
more attention on the website. If it's a nice website you'd associate it with good quality (clothes).
EC: 50-50%
ChC: If the website was very poor in terms of usability I would definitely notice it, but generally I'd
say I keep a discrete attention on the website but would many looks at the clothes. I'd say 70% on
the clothes and 30% on the website.
NZ: 10% on the website and 90% on the clothes
8. You have 2 fashion websites selling similar style dresses; one has a cutting edge design with
poor usability and the other one has a boring design with very good usability. Which one would
you prefer to use to buy a dress? Why?
AC: I'd go with the one which is the quickest and easiest to use. I get so frustrated if the website is
difficult to navigate. It can be aesthetically very pleasing to go to a very beautiful website in terms of
aesthetics but if it is difficult to use it is so easy to get frustrated. For example Amazon; so easy to
use, quick checkout, you're not fluffing around, it takes 5 minutes.
EC: The easier ut if it s ot e att a ti e I ill ot go a k to that e site a d ot use it agai .
ChC: I'd go with the good usability, because I want to do it the quickest and easiest way possible.
That's why I shop online: to save time!
NZ: Good usability is more important, because if it takes me to spend more time online then I don't
want it.
9. Which step do you consider the most exciting part of your fashion website journey? Why?
AC: The most interesting part is when you buy it, because you visualize it: what you going to do with
it, ho ou' e goi g to ea itIt e o es ealit , is a lot a out isualisatio too.
EC: Observing the dress, the selection of the dress
ChC: Examining the dress
NZ: When I am looking at the dress
10. Which step is the most boring part? Why?
AC: It's putting in the card details, that was my point with Amazon; it takes a few clicks and it's done.
EC: Fill in information, payment
ChC: To log in before you proceed to checkout
NZ: When the pages are loading, it's very boring
11. What do you think it makes a website aesthetically pleasing?
BG: If it's not cluttered, no ads popping up. Also, the search box has to be good. It must point me to
the right product.
115
116
MS: Simplistic, not too much in your face (eg. sales), it has a good search facility and you can search
for all the brands, but the lists are not too long, because I don't like that, when you have to scroll
down to see the rest of the list.
MF: White background, black text, so it's clean. I don't like very busy websites or when there is too
much information, text.
DW: Colours, pictures with the model and the context of the picture; it would increase the score of
the product.
LB: That it is consistent, clear, easy to read and not too cluttered.
ChC: Clarity, not too busy, nice colours; magazine look but not like Heat, instead like Vogue
AudC: Colours, bright colours (red, green, yellow), text is not too much and with some nice fonts.
Black and white designs all look the same, I don't like them.
AshC: Clean, nice colours, b&w is ok because it tends to be cleaner look, anticipate what I want. Not
too much information, so it is clean.
EC: Colours, bright colours (red, green, yellow), sg really catchy. Catching: context! It puts you in the
ood
NZ: Colour coordination, good music (but I guess I would turn it down)
12. Which colours do you prefer to see on fashion websites? What would those colours tell you?
AC: Depends on the type of brand, but b&w works always very well.
EC: Context is important (net-a-porter is not nice, they show it against white background), it's more
pe so al
ChC: Black and white and strong primary colours like red, so that the overall look is contemporary
and minimalistic
NZ: bright colours like orange, not black and white and not dark colours
13. Where do you like to see those colours? (Hints: homepage, navigation (menu), materials, etc)
AC: I do 't i d ight olou sit depe ds
EC: Throughout the website but with certain white space
ChC: Initial banner, straplines and I like it when it is prominent and consistent on all pages
NZ: Everywhere
14. How do you like to see the clothes presented on the website? (Hints: on a model, in a context,
against white background, against coloured background, on a hanger, etc)
AC: On and off the model, with a few different views, I like zoom. The different angles, not really the
o te t ut it is ok a d o a odel al a s e e thi g looks goodif it has a o te t it akes the
clothes more appealing.
EC: on a model, context
ChC: Context is not important for me, but I want to see the items combined with other items
(lookbook type of presentation)
NZ: I prefer it with context; it is better and more realistic looking. I can better visualise myself with
the dress
15. What additional information (not only about the dress!) do you look for on fashion websites?
AC: Details: materials, but I suppose the difficulty is that you need to feel and touch it.
EC: description, length of a dress
ChC: he e to u othe ite s, e t e ds, i fo a out the desig e
NZ: sizing, material info
16. How do you usually go about buying a dress online? (What route do you follow on the
website?)
116
117
BG: Usually, I'd go first to the fitting guide/ sizing guide to check the correct size, as all websites have
different sizes and measures (e.g. in inches and in centimetres . The I ould easu e
size
MS: Well, it depends on if I am just browsing for inspiration or if I am after a specific category (eg.
blouses). So I'd go first to women's, then blouses, then brands, then view all and then the
su atego ies
MF: No, I don't have any specific route that I follow, I just look around. I look at the shape, the cut of
the d ess. I like it he it is o
a odel a d it is sho i o te t ut of ou se I u the isk
of not seeing the real colours, but that's fine.
DW: I am easily driven by the promotions, so that would be my first click; the Sales! Then I would
browse page by page and open up every single dress that I like in a separate window. After I scanned
through the website I would then look at each individual dress separately and close down the ones
that I don't find interesting.
LB: I would go straight to the 'new in' and I would sort by designers to see what they offer..
Sometimes I would sort by dresses or tops..
AudC: I only browse on well-known websites and I look at the latest collection. I like to research
before I buy something (in store and online as well)
117
118
you pay more attention on the website. If it's a nice website you'd associate it with good quality
(clothes).
All participants preferred the boring design with very good usability and they all said that they
would prefer to buy a dress from the website which was the easiest and quickest to use.
All participants said that the most exciting part of their journey on the fashion websites was the
step when they interacted with the visuals of the dress: observing it, examining it and
isualisi g it: hat ou goi g to do ith it, ho ou' e goi g to ea it .
The most boring part was considered the end of the journey; when participants had to fill out
the personal information and payment details. One participant said that for her the most
boring part was when the pages were loading and she had to wait.
Aesthetically pleasing design was described as:
6/10 mentioned not too cluttered, clean and not too much text on the website
6/10 said nice colours
2/10 mentioned products shown in context
1/10 said consistent design
Functional features were also mentioned (they seem to be inseparable characteristics of
aestheti s : good sea h fa ilit , ot too u h s olli g, Anticipates what I want
Best colours for fashion websites: black and white (50%) and bright and primary colours (50%).
Other comments included: white background allowed better visual on the dress, overall it
should have a contemporary and minimalistic look, context is important to make the pages
more personal.
Participants said that the colours mentioned earlier had to be consistent on all pages but
generally all participants wanted to see colours everywhere throughout the website.
All participants agreed that showing clothes in context is more appealing.
2/4 preferred to view the clothes on a model
1/4 said she liked the different views and the zooming
/ said she I want to see the items combined with other items (lookbook type of presentation)
Additional information on fashion websites that participants are looking for:
2/4 mentioned materials info
1/4 supposed the description of the clothes (e.g. the length of a dress)
/ e ealed that she a ted to k o where to buy other items, new trends, info about the
desig e
The interview revealed that people have many different ways of buying a dress online in relation
to their customer journey (e.g. which categories, filters they would use on the website). But
there are some patterns that can be observed:
Based o pa ti ipa ts a s ers there are two different ways of surfing on fashion websites
depending on the purpose of the visit; browsing without any specific ideas (looking for
inspirations a d looki g fo a spe ifi ite / a d hunting . It is i te esti g that the e is o
difference between those two scenarios in the use of the website and participants seem to
follow similar ways; they would select from the main navigation menu a category and browse
a o gst the esults i that atego e.g. Ne i , Blouses , ale , et .
118
119
1. Which website would you/would you not recommend to a friend? Why?/Why not?
BG: I ould e o
e d FENCH CONNECTION e ause the pi tu es a e ette , the photosI liked
the animation and the style better. The models have better hair-styles too!
MS: FRENCH CONNECTION, because it is more clear to me.
MF: FRENCH CONNECTION, because it is easier to find what I need and it is clearer information and
neater.
DW: FRENCH CONNECTION, but it is hard to say because it depe ds o hat
f ie ds st le ut
based on my experience I'd recommend FRENCH CONNECTION.
LB: FRENCH CONNECTION, I didn't like the other one at all.
ChC: Whistles, because I prefer that style, it fits me more and because I found that one the more
aesthetically pleasing
AudC: FRENCH CONNECTION, more structured, overall layout better. But they should improve on the
contrast and change the fonts!
AshC: FRENCH CONNECTION, it is more functional, but Whistles has nicer dresses
EC: FRENCH CONNECTION, the start (homepage) is very catchy and it has better usability
NZ: Whistles, because the branding is better (the logo), it is more inviting and more exciting. The set
out of the homepage is more inviting
2. How would you describe this website in one or more words?
BG: You g a d so t of hip, ut ot e effe ti e e ause I had to go th ough all the p odu ts
MS: Simplistic, fresh, vivid
MF: Neat, useful.
DW: Cutting edge, personal.
LB: Clear, basic, easy to use.
ChC: Slick, contemporary, top end high street
AudC: Good quality
AshC: Quirky but functional
EC: catchy, making you want to go in
NZ: friendly and exciting
3. If this website was a car, what car would it be?
BG: Defi itel ot a fa il a ! A d ot a a i g a , like a Po s he o so
MS: FRENCH CONNECTION = Mini Cooper
MF: FRENCH CONNECTION = BMW
DW: FRENCH CONNECTION = Maserati
LB: FRENCH CONNECTION = the new Fiat 500, because it is basic, but chic
ChC: Whistles = Audi A3, it is jazzy and exciting but still accessible
AudC: FRENCH CONNECTION = Renault, mid-range car, not a Mercedes, because the contrast is
missing!
AshC: FRENCH CONNECTION = Vauxhall, accessible to people but with caracter
EC: FRENCH CONNECTION = BMW
NZ: Whistles = Audi Q5
4. How does the 2 websites compare to each other?
BG: FRENCH CONNECTION's site is too white for me, it hurts my eyes. Whistles is a bit darker and the
contrasts are better on that one; even they also have white backgound they show more images on
the page so it does 't hu t so u h
119
120
MS: Whistles is boring, old fashioned ho the a ed thei atego ies: K it ea a d De i
FRENCH CONNECTION is more fresh and vivid.
MF: There are good and bad things about both of them, they kind of complement each other..but
FRENCH CONNECTION is more organized and clearer.
DW: Whistles has good services (eg. the telephone number) but it has worse design
LB: I wouldn't shop on Whistles because that website is irritating.
ChC: It is realy a mix, both have good and bad points. FRENCH CONNECTION I liked the cover page
but not too much the colours, it makes it a bit boring. Whistles is more sophisticated and more edgy.
AudC: FRENCH CONNECTION has overall better structure and seems more user-friendly, Whistles is
messy but has better contrast
AshC: FRENCH CONNECTION looks higher quality (more white) with more minimalism (=quality,
expensiveness) and good functionality. Whistles is more aspirational, more appealing but not very
functional.
EC: Both have good and bad points, but FRENCH CONNECTION is more modern
NZ: They are both similarly organized but the colour choices are different, Whistles is better
5. If you were to review this website what score would you give it out of 10? Why?
BG: FRENCH CONNECTION = 7
MS: FRENCH CONNECTION = 7.5
MF: FRENCH CONNECTION = 8
DW: FRENCH CONNECTION = 8
LB: FRENCH CONNECTION = 6
ChC: Whistles = 9
AudC: FRENCH CONNECTION = 6.5
AshC: FRENCH CONNECTION = 7
EC: FRENCH CONNECTION = 8
NZ: Whistles = 8
7. If you could change one thing about each website what would it be and why?
BG: Background (too much white)
FRENCH CONNECTION: Co t asts
M: FENCH CONNECTION: Che kout, it's just too u h i fo atio the e
MF: Whistles: I'd change the structure, the menu and the navigation. FRENCH CONNECTION: I'd
ha ge the e u o the leftlike Whistles.
DW: FRENCH CONNECTION: the product description and the checkout.
LB: FRENCH CONNECTION = the homepage, it needs a better type face
ChC: Whistles = Pop-up i do o
o iles
AudC: Homepage, contrast and font style
AshC: FRENCH CONNECTION = design elements to be more consistent, and navigation
EC: FRENCH CONNECTION = zooming
NZ: Whistles = the background colour (to yellow and sky blue)
120
121
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
123
3. Ask the participants to complete their scales individually.
4. Repeat steps 1-4 for each page.
5. After the session, plot all of the pa ti ipa ts espo ses o a si gle s ale fo ea h page to
help identify any patterns.
V. Post-interview:
Time: max 20 minutes
123
124
124
125
125
126
126
127
Homepage:
French Connection:
Whistles:
Navigation page:
French Connection:
Whistles:
Whistles:
127
128
Zooming:
French Connection:
Whistles:
Basket/Checkout page:
French Connection:
Whistles:
128
129
129
130
130
131
ake
at all, I ould t k o
E: I like this homepage but nor primarily because of the pictures and the colours but for the
categories
A: es, it is just easie , I do t ha e to lick to too many places, because i can see straight away
Bags ups this is hat I a t, so li k
E: es, a d the ale e u is e good, e ause I ould al a s look at the sale ite s so it is good
that it is highlighted (with red colour)
A: i agree, I d al ost al a s he k the sale fi st
E: yeah, Sale is the best! (both laugh)
E: ut I d e e
li k he e at the otto ..
A: es, I k o
hat ki d of i fo atio the put the e usto e se i es, deli e , et ut I d he k
these later on, when I decidet o buy something. Not at the beginning! Maybe it is there because it
akes the e site look o e offi ial a d p ofessio al. A d I su e that at so e poi t I d he k the
shippi g osts, deli e details
E: Oh this is good hat ou e just said! I al a s check the shipping conditions, to check whether
they ship to my country..
131
132
So, when would you check this information about the delivery and shipping?
E: If i see that I like the e site a d the lothes the a e selli g I d he k fi st hethe the ship to
Hu ga
e ause if I fall i lo e ith o e pie e a d the I fi d out that the do t ship that ould e
disappoi ti g. That s h it is e i po ta t fo e to he k this. A d also it is i po ta t that this
information should be easily located so that I find it easily.
A: yes, I need to know the conditions of shipping. I also want to know where and how can I return
the ite s
I show them the other website (the plain one) What do you think of this one? How is this different
from the previous one?
E: OK, i see this is this (points at the small images of the coats ont he colourful website) for me but in
la ge e sio
A: I disagree. For me this is more about the clothes, not the categories. I am not sure they have
atego ies he e, OK the e s the e u that tell you that there are bags, shoes, etc But I am
o e t ai g o t he i ages so u h that I ould t oti e o he k the e u ite s. It gi es the
i p essio that the e a e t a
atego ies.. The othe o e has a agazi e feeli g, like Elle o
so ethi g
Is it a p o le
fo
ou if the e a e t
atego ies?
e ause I
A: For me this website (point at the colourful one) I am sure that I would spend a lot of time here
browsing and searching because I have the feeling that they have lots of products and categories,
and here they have less categories and it is more about the dresses (Not true!!). This is more of a
desig e s olle tio e site a d highe ualit lothes. It is uite st lish a d lea , i i alisti , so
I d e pe t highe ualit p odu ts f o this e site
Also, it puts e off these i ages o the ho epage the olou ful , it s too
time for this.
u h fo
e. I do t ha e
E: For example, it is better here (point to the colourful webiste) that the Sale category is red so it
stands out and can be easily located. I do not have to search for it.
132
133
A: Here (points at the plain website) the website tells me that I can buy designer clother so this
website is good when you are looking for the latest trends and ont he other website there a lot of
thi gs ut ot e essa il e lusi el desig e s ite s
E: Yes, I like this website because of the colours, i like it better, it makes me want to explore it more
than the other one. I know that from this website (the colourful) I could easily buy something
e ause it looks ette fo e. F o the othe e site, i
ot su e
A: Yes, same here. I could easily buy something from this one (the colourful one) but this one (the
plai o e i ould ha e to e po e it o e a d it looks o e of a desig e s e site so I guess if i
a ted to u a spe ifi
a d o desig e the i ould u f o this e siteto get a good
a gai But the othe o e the olou ful o e i su e the ha e o e stuff.
But I have the feeling that if i was to explore this website I could not fi d a thi g. A d I do t like to
spend too much time with a website.
Main navigation:
E: I prefer the navigation of this one (the colorful) because i have all the requirements and categories
o the left ha dside, I do t ha e to li k too u h. I a filter the sizes, the price, the
olou s e ause i hate that he I see a d ess that I like a d the it tu s out that the do t ha e it
in my size.
A: I like the bigger pictures..
E: Me too!
A: But i also do t like it he I a o l see ite s, if i see 50 dresses i can tell which ones I like
E: I do t like it he the i ages a e too s all. Mouse o e is OK e ause i hat li ki g a k a d
fo th
Product info page:
A: For me this is much more realistic. (the plain one)
Why?
A: Because, I believe that this dress is as it is shown here. But here (points to the other website; the
colourful one) this is a model picture (both pictures are the same) somehow this seems more
realistic to me: it is more raw, minimalistic: this is it, what you can see. And this one (the colourful) is
more of a dream category.
Why do you say this? Because of the colours?
A: Maybe because of the colours, and still it is the same dress I know. It is easier to believe to this
website (plain one) than to this one (the colourful one). Yes, I think that the white background is
better because because it allows you to see the image better.
E: But this pi tu e is the sa e, it s the sa e d ess??!!
133
134
A: Yes, ut the hole pi k thi g that s goi g o o the pageit al ost feels as he e the eally want
to sell the ite
e ause of the a thi gs goi g o , hile he e it s o e i i alsiti a d a , so I
can believe them better that this is the dress how it looks in reality, no photoshop, nothing, just
hat ou ll get.
So, your confidence is better with this one (the plain)?
A: Yes, exactly.
Do you think that they put colours to divert your attention from the clothes?
A: I think here (the colourful one) they try to sell me the whole website, not only the dress. Whereas
he e the plai o e i do t get a fancy, nothing special website but when it comes to the dress this
website does it better.
E: I do t ha e this feeli g at all. What i do t like he e the olou ful is the Fa e ook s Like utto
and other social media icons. I hate it, they want me to advertise their products and that they come
i to
pi a
A: Yes, ut the ha e the ette Add to asket utto .. the olou ful . This is o ete. The othe
one is simply not straight forward. Also for the additional information: it is better this one (the
colourful) because i can see that they both have description and composition info but only this one
the plai has the etu s la elh
still I p efe this o e the olou ful e ause it looks o e
materialistic to me.
Checkout page:
E: For me, this o e is the pe fe t o e e ause the do Pa Pal. If I a t pa
buy from that website.
u h the
ha ge fo the deli e
E: Yes, hi h is good ut
And what about the info/picture of the dress?
E: But i just ought it, ight? o i k o it, I do t eed to ead i to he k it agai . I e e pa
atte tio to this. I e just sele ted the size and the colour..My attention is on the price and the next
step to u the d ess. Also hat s eall i po ta t to e is the Co ti ue shoppi g utto that
takes e a k to the last see ite , ot the ho epage, e ause that s eall a o i g!
What about the colours on these two last pages of the journey?
E: I ha e t paid atte tio o the olou s, fo
e he e is ot ele a t.
134
135
A: They are very important though at the beginning. It contributes to the first impressions and the
image of the brand: what a e the selli gAt the pa e t poi t I o l pa atte tio to the p o ess
ot the su ou di gs a d the desig . It s ot i po ta t to e this stage.
E: Yes, i agree. At the beginning i like to have nice colours and oudors that call my attention and
encourages e to u so ethi g. A d o e I ought so ethi g I o l o e t ati g o the
concrete elements and the process: PayPal, shipping, return, etc
Lookbook:
A: I like it very much because they present me the latest collections and it is inspirative. I think
would want to explore the lookbook first and then would go to the specific categories. It is important
for me to check ont he overall style of the company and brand to see how they sell what they sell.
E: Yes, but I hate when they show size zero modelsi a t to see it ealisti all o
me.
i e the plai
A: P i es a e also i po ta t fa to
E: OK, this website (the plain) because it is white i could see this one more the designer, the more
e pe si e e site f o the t o. A d I ag ee that a lu u
a d ould t eate a e site like this
one (the colourful) but more this type (the plain) because of the white background and the
i i alisti desig it looks o e lu u ious. Whe eas this o e looks o e of a a ketpla ethe e s
this a d thatso i guess I ha ge
i d a d I d sa that the hite e site is the o e e lusi e
and they sell more expensive stuff.
A: I do t like it that he e o the plai I a o l see pi tu es of d esses.. I d hoose the olou ful
e site desig . Those i ages a e uselessa d ho shall I sta t
jou e ? Whe e? He e the
olou ful I k o that I d li k o the Wo e s e u ite . This is more of a standard procedure and
p a ti e so it s easie .
E: Based o fi st i p essio , I d hoose the olou ful o e. The othe o e looks
A: Yeah, it looks
ess
135
136
136