Aesthetic Elements Supporting the Online Shopping Experience - Anna Tamasi 2012-Libre

City University London

MSc in Human-Centred Systems

Project Report

2012

Aesthetic Elements Supporting The Customer Journey Of

An Online Shopping Experience

Anna Tamasi

City University London, School of Informatics, Centre for Human Computer

Interaction Design

Supervised by: Dr. George Buchanan

26th September 2012

http://www.city.ac.uk/informatics

http://www.city.ac.uk/informatics/school-organisation/centre-for-human-computer-interaction-design

http://www.city.ac.uk/informatics/school-organisation/centre-for-human-computer-interaction-design

1

By submitting this work, I declare that this work is entirely my own except those parts duly

identified and referenced in my submission. It complies with any specified word limits and the

requirements and regulations detailed in the assessment instructions and any other relevant

programme and module documentation. In submitting this work I acknowledge that I have

read and understood the regulations and code regarding academic misconduct, including that

relating to plagiarism, as specified in the Programme Handbook. I also acknowledge that this

work will be subject to a variety of checks for academic misconduct.

Signed:

2

Abstract

Iﾐ this pヴojeIt ﾏ┞ aiﾏ ┘as to ヴe┗eal the digital aesthetiI eleﾏeﾐts that dヴi┗e useヴsげ Iustoﾏeヴ journey on fashion websites and to understand how these elements contribute to the journey

and to the user experience. I also wanted to measure the emotional responses to these

elements of the selected websites.

The ultimate goal of this project was to develop a generic mapping of the custoﾏeヴげs jouヴﾐe┞ on fashion websites that shows the impacts of digital artefacts in relation to usability and also

to the user experience. This has been achieved by identifying the digital artefacts, metaphors

and perceived affordances and their impacts on the useヴげs shoppiﾐg e┝peヴieﾐIe duヴiﾐg the observed steps of the customer journey on fashion websites. Based on the methods used and

the information collected a customer journey map has been outlined and explained.

The results show that the success of a fashion website lays in the triangle of aesthetics (design,

visual power), usability (functionality and ease-of-use) and user experience (enjoyment for the

user). The most important elements of these environments are; homepage and the navigation

structure, colours, photography, zooming facilities and the relevant product information

(including the delivery and returns information).

Keywords: aesthetics, usability, e-commerce, customer journey, user experience

3

Table of Contents

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

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

Quantifying And Measuring Aesthetics ................................................................................... 12

Customer Journey ................................................................................................................... 13

Chapteヴン − Methods................................................................................................................... 17

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

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

Websites Heuristics ............................................................................................................. 19

Other Attempts To Measure Website Aesthetics ............................................................... 21

Setting Up New Website Heuristics .................................................................................... 22

Participants And The Evaluation Arrangements ................................................................. 25

Part 1/B – Capturing The Customer Journey ........................................................................... 27

Customer Journey Framework ............................................................................................ 28

Part 2 - User Testing For Aesthetics ........................................................................................ 30

Aesthetics And General Website Design ............................................................................. 31

Methods Used ..................................................................................................................... 32

Part 3 - Focus Group Interview With Paper Prototypes .......................................................... 35

Part 4 - Mapping The Customer Journey ................................................................................ 36

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

Results – Heuristic Evaluation ................................................................................................. 37

Results – Customer Journey .................................................................................................... 45

Results - User Testing .............................................................................................................. 45

Pre-Test Interviews ............................................................................................................. 45

Card Sorting ......................................................................................................................... 48

Overview Of The Aesthetic Elements On Fashion Websites ............................................... 48

Emotional Reaction Scale .................................................................................................... 58

4

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

Results - Focus Group Interview With Paper Prototypes ........................................................ 61

Results - Customer Journey Framework ................................................................................. 65

Discussion .................................................................................................................................... 69

Aesthetics And Usability Implications ..................................................................................... 70

Customer Journey Aspects ...................................................................................................... 72

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

References ................................................................................................................................... 78

Internet Resources: ..................................................................................................................... 80

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

Appendix 2: Heuristic Evaluation – Pre-Test Questions .............................................................. 88

Appendix 3: Fashion Websites For Heuristic Evaluation ............................................................. 93

Appendix 4: Heuristic Evaluation Results .................................................................................. 103

Appendix 5 – Interview Notes ................................................................................................... 105

Appendix 6 – Customer Journey Observed ............................................................................... 108

Appendix 7 – Personas And Storyboards .................................................................................. 109

Appendix 8 – User Testing Pre-Test Interview .......................................................................... 113

Appendix 9 – User Testing, Post-Task Interview ....................................................................... 119

Appendix 10 – User Testing Plan ............................................................................................... 121

Appendix 11 – Card Sorting ....................................................................................................... 124

Appendix 12 – Emotional Reaction Matrix................................................................................ 125

Appendix 13 - Bi-Polar Semantic Scale ...................................................................................... 126

Appendix 14 – Fashion Websites Paper Prototypes ................................................................. 129

Appendix 15 – Focus Group Interview And Paper Prototype Testing ....................................... 131

Appendix 16 – Aesthetic And Usability Elements Supporting The Customer Journey Of An

Online Shopping Experience ..................................................................................................... 136

5

Chapter 1 - Introduction and Objectives

Background

Academics and researchers have been trying to understand the exact nature of aesthetics for a

long time. Aesthetics are described in a great variety of ways and there are lots of different

definitions and theories to it. At the beginning of the website development era, aesthetics

were generally disregarded by computer scientists and programmers and many academics

considered it as being irrelevant to the usability of the electronic medium. Some even believed

that it could be harmful within the medium as it could distract the attention from the purpose

and functionality. As the internet and mobile electronic devices became part of our everyday

lives, usability was not anymore the only determining attribute of the success of the digital

systems and user interfaces.

Recently, there has been an emerging interest amongst software developers as well as

academics to study the aesthetics of all sorts of electronic medium. Researches in the field of

human-computer interaction (HCI) design have also demonstrated that aesthetics play an

important role when users evaluate the user interface of an electronic device; how visual

aesthetics influence the perceived usability of interfaces and how the colours and images of

websites influence the perception of appeal. E-commerce companies have also been

interested in understanding the role of aesthetiI eleﾏeﾐts iﾐ oヴdeヴ to eﾐhaﾐIe the Iustoﾏeヴげs

experience.

In order to provide an outstanding customer experience and having more and more customers

coming back to the website companies need to invest in creating excellent usability.

Furthermore, to maximise the reach of a wider customer segment companies should also

consider accessibility issues. It is not easy to create an online environment that is both usable

and aesthetically appealing at the same time. There are trade-offs all the way throughout the

user-centred design process that companies have to consider when making decisions on design

and usability.

The main motivation of this project is to better understand the e-commerce environments and

the relationship of aesthetics and usability as well as the online service design. The central idea

of this dissertation project is to uncover the online shopping experience from the user's

perspective with respect to digital artefacts and metaphors that guide users through the online

journey. For this project I will compare fashion websites as these have rich content and they

are very much dependent on the visual appearance.

The reason for the selection of the topic is that the influence of fashion and its trends on

products and services are marketed all around the world and also because researchers tend to

neglect the aesthetics of fashion products, which is mainly because of the complex

relationships between the customers and the fashion items as well as the diversity of

methodological challenges (Eckman & Wagner, 1995).

6

Having completed a one year full-time study in HCI endowed the author with academic

knowledge and skills to undertake this research. The author worked 5 years at a large online

media corporation and has sales and marketing related project management skills. The reason

for choosing this project topic is that the author has interest in continuing her career in

interaction and service design within the online retail industry.

The results of this research shall be valuable for fashion brands to better understand the roles

of the artefacts within the customer journey that will be specially tailored for online fashion

businesses in order to increase customer engagement and to reach a wider audience.

Furthermore, this research shall benefit designers as it aims to discover the emotional aspects

of responses for visual applications, such as layouts, navigation, style, colours, white space,

photographs, etc. The project shall also benefit interaction designers and researchers who

have interests in online retail. Finally, the author of this project will also benefit from this piece

of work by increasing knowledge of career area of interest.

Objectives

In this project the authoヴげs aiﾏ ┘as to reveal the digital artefacts and metaphors that drive

useヴsげ aItioﾐs aﾐd to understand how they contribute to the customer journey and customer

experience. The author was seeking to measure user's emotional responses to design and

structure of fashion websites. The ultimate goal of this project was to develop a generic

mapping of the Iustoﾏeヴげs jouヴﾐe┞ oﾐ fashion websites that showed the impacts of digital

artefacts in relation to the user experience. “peIifiIall┞, ┘ithiﾐ the Ioﾐte┝t of the Iustoﾏeヴげs online journey the objectives of this research were:

1. To identify the digital artefacts, metaphors and perceived affordances and their impacts

oﾐ the useヴげs shoppiﾐg e┝peヴieﾐIe duヴiﾐg the Iustoﾏeヴ jouヴﾐe┞ oﾐ fashioﾐ ┘eHsites.

2. To critically evaluate models and frameworks of previous researches related to customer

journey and aesthetic elements in online environments.

ン. To e┝ploヴe pヴaItiIes aﾐd stakeholdeヴs ┗ie┘s ヴelated to useヴ e┝peヴieﾐIe aﾐd useヴげs perceived affordances on fashion websites as well as the use of digital artefacts on these

platforms.

4. To formulate a generic map of the Iustoﾏeヴげs oﾐliﾐe jouヴﾐe┞, iﾐIludiﾐg IヴitiIal tuヴﾐiﾐg points where artefacts affect emotions and user experience on fashion websites.

7

Research questions

a.) What are the elements of the customer journey on fashion websites? What tools,

frameworks and models are available to support measuring the online customer journey?

b.) What are the key aesthetic elements within the customer journey in online environments

that provide enjoyment for the users? What impacts design artefacts have on useヴげs eﾏotioﾐs and the shopping experience?

c.) What elements are (users) missing throughout the customer journey that could improve

the overall user experience as well as the usability of fashion websites?

Intended methods and tools

The project followed a user-centred design approach in order to develop a generic mapping of

the Iustoﾏeヴげs jouヴﾐe┞ oﾐ fashioﾐ ┘eHsites that sho┘s the iﾏpaIts of digital aヴtefaIts iﾐ relation to the user experience. Users were involved in all phases of the project.

The project started with a research phase which consisted of a secondary research that

included reviewing previous academic researches, professional journals and articles, as well as

books, and online literature such as expert websites and social media. The research phase also

involved primary research that consisted of meeting and interviewing the owner of an online

fashion company as well as end-users about the nature of their online shopping habits and

routines. The author also reviewed the online fashion market in relation to aesthetics and

functionalities as well as studied the customer journey mapping processes, frameworks and

models. The main goal of the research phase was to reveal answers for research questions (a.)

and to meet objectives (1.) and (2.).

The next phase of this project included website evaluations and user testing. The aim was to

meet objectives 2. and 3. The program of this phase consisted of three distinct evaluation

methods. The first part of the analysis included heuristic evaluations, task analysis and

customer journey mapping. The author used previous academic researches to set up common

fashion website development practices and techniques to develop a comprehensive list of

heuristics and a list of elements that form the visual appeal of fashion websites. During this

process six fashion websites were evaluated based on their aesthetic appeals by a specific

customer segment. After analysis of the data obtained from participants the two of the best

rated websites were selected for further analysis. This was followed by more data collection

aHout useヴsげ ┗isual aﾐd aesthetiI peヴIeptioﾐs aﾐd useヴsげ testiﾐg ┘as Iaヴヴied out in order to

analyse further the two best rated websites in terms of aesthetic appeal and usability. Several

data collecting methods were used in order to gather both qualitative and quantitative data.

The results of each phase were re-iterated within the next phase of the process to reassure the

validity of the data obtained from participants. For the final part of the analysis phase the

8

author created two different paper prototypes that were used to re-iterate findings with a

focus group.

The third phase of the project was the design phase which had the intention to meet

objectives 3. and 4. The purpose of this phase was to sketch the user experience on a customer

journey map and to reflect the moments of truths as well as the roles of the aesthetic

elements together with the functional requirements.

The fourth phase of this project is the evaluation phase which aims to find and aggregate the

answers to all research questions and to meet all four objectives. This phase was carried out on

a re-iterative process, which means that the design and evaluation phases were built in from

the first phase of the project, through the proposal of the final customer journey map.

Chapter 2 – Academic Context

The definition of aesthetics dates back to ancient Greek times and architecture, but today most

dictionaries refer to aesthetics as the さﾐatuヴe of Heaut┞ざ. According to the Oxford Dictionary,

the defiﾐitioﾐ of aesthetiIs is さa set of principles concerned with the nature and appreciation

of Heaut┞ざ or さthe branch of philosophy which deals with questions of beauty and artistic

tasteざ. Aesthetics is also a branch of philosophy and psychology which deals with the sensory

and emotional values of appearance, which is accomplished by the colours, shapes, textures,

materials, structure and patterns of the design. In this project the author refers to aesthetics as

design artefacts, aesthetical elements that enhance the design of fashion websites.

Aesthetics influence greatly people and their choices although most people think that their

decisions and judgements about the functional features are rational. Emphasis on aesthetic

design and the influence of emotions in design are receiving more and more attention. While

tヴaditioﾐal usaHilit┞ foIuses oﾐ useヴげs task aﾐd aIIoﾏplishﾏeﾐts, useヴ e┝peヴieﾐIe ふUXぶ eﾏphasizes a ﾏoヴe holistiI ┗ie┘; uﾐdeヴstaﾐdiﾐg the Ioﾏple┝it┞ of useヴげs e┝peヴieﾐIes (Hartmann, Angeli, & Sutcliffe, 2008) as well as including aspects of look and feel, aesthetics

and design.

Usability and user experience conceptions have progressively developed in recent decades and

there is more and more focus on the user engagement and the aesthetic design of user

interfaces. There are more and more researches that focus on the user experience and

aesthetics and most e-commerce companies are increasingly interested in knowing how

customers choose what they buy when it comes to designing their websites.

9

Visual appeal is a significant influence on emotional appeal (Capota, Hout, & Geest, 2007).

Typically, emotion has a positive and a negative dimension and many studies have revealed

that emotion strongly influenIes Ioﾐsuﾏeヴげs deIisioﾐﾏakiﾐg. Aesthetics influence people

when looking and observing physical products and this influence transmits over onto the

internet as well. When viewing an electronic interface (e.g. a website) the user will make a

judgment about the aesthetic quality of the visual experience based on various subjective and

objective dimensions.

In previous studies and researches it has been found that aesthetics is a deciding factor in

whether a customer trusts a website enough to make a purchase on it and that people made

さfar reaching inferences about the qualities of online banking websites on the basis of simple

screen shots, or very short interaction sequencesざ (Tractinsky & Lowengart, 2007).

Aesthetics will always influence decisions anywhere people are given a choice which means

that e-commerce companies should incorporate aesthetic design more closely with usability.

Tractinsky et al. demonstrated how people use aesthetics to judge appeal and perceived

usabilit┞. Although the ┘eHsiteげs desigﾐ Iaﾐ guaヴaﾐtee the iﾐitial attヴaItioﾐ, oﾐl┞ the combination of usability and aesthetics will ensure that consumers keep using it in the future.

Previous researches and studies show that aesthetics have power, but design on its own

doesn't make a website complete. There has to be a closer relationship between design and

user experience, because aesthetics and usability have to support each other in order to create

the ultimate user experience.

Online retail companies rely on digital aesthetics in order to increase the customer experience

and the online customer journey and these aesthetic factors contribute to the success of the

product or system (Hartmann, Sutcliffe, & De Angeli, 2007). But the aesthetic appeal and styles

of useヴs that deteヴﾏiﾐe useヴsげ peヴIeptioﾐs of a desigﾐ aヴe also depeﾐdeﾐt oﾐ the iﾐdi┗idualげs sensitivity to aesthetics and on social and cultural factors (Tractinsky & Lowengart, 2007).

Tractinsky et al. demonstrated that aesthetic perceptions were an important and culturally

variable component in the rating of the user experience and service quality in an experiment of

ATM machines in Japan. This study however only focused on low-level design features such as

buttons and colours. When Tractinsky et al. asked participants to judge the usability and

aesthetics scores of a series of ATM screens, their study found that peoples' perceived usability

scores were more closely related to the perceived aesthetics scores than the screens' actual

usability. The results suggest that people aren't able to distinguish usable and less usable

objects and that they believe that the aesthetically pleasing ones are more usable.

Designing aesthetically pleasing online visual designs and solutions is not easy and can be

expensive, therefore by focusing on the customer journey companies could target the input

towards the specific points of the customer journey and optimize the digital artefacts that push

customers through the sales channel.

Hassenzahl et al. (Hassenzahl, Burmester, & Koller, 2003) asked users to compare and evaluate

six different interface designs for user experience, hedonic and appeal qualities. Hassenzahl et

10

al. concluded that both the user experience and the hedonic qualities contributed to the

overall aesthetic judgement of the interfaces. However, none of these studies showed which

aesthetic elements (i.e. colours, layout, etc.) contributed to the overall judgement by

participants.

The given aesthetic characteristics of a website (e.g. shapes, colours, sizes, etc.) may be used to

intentionally affect usersげ peヴIeptioﾐs Hut also they can be interpreted in many different ways

aIIoヴdiﾐg useヴsげ peヴsoﾐal taste. Based on previous shopping experience in traditional retail

environments and on their experience online, users develop certain expectations regarding the

aesthetics of online stores. When users land on a website, their aesthetic preferences coupled

with their experiences and expectations will affect theiヴ peヴIeptioﾐs of the ┘eHsiteげs aesthetiIs (Tractinsky & Lowengart, 2007) Tractinsky says that these perceptions are likely to induce

emotions, which, in turn, will affect the useヴsげ attitudes towards the website and also their

purchase decisions (Tractinsky & Lowengart, 2007).

Aloﾐgside TヴaItiﾐsk┞げs ヴeseaヴIh otheヴ studies ha┗e also deﾏoﾐstヴated that aesthetiIs ha┗e aﾐ effect on the perception of a product and its usability. The reason for why this interference

oIIuヴs is Helie┗ed to He ┘hat is kﾐo┘ﾐ as the けhalo effeItげ. This is ┘heヴe the aesthetiI aspeIt of the design directly influences the perception of other aspects and features of the product or

interface. For example, the perception that a tailor made suit or elegant dress makes the

wearer seem smarter. However, this halo effect does not hold for long and if the けﾏoﾏeﾐt of tヴuthげ does ﾐot result in pleasure (for example if the website loads the image very slowly), no

matter how nice the design of the website is.

In relation to the halo effect many studies suggested a correlation between aesthetic quality of

an interface and its perceived usability (Tractinsky, Katz, & Ikar, 2000). Tractinsky et al. claim

that さ┘hat is Heautiful is usaHleざ (Tractinsky, Katz, & Ikar, 2000). Norman (Norman, 2003) also

states that aesthetiI desigﾐ Iaﾐ out┘eigh the peヴIei┗ed usaHilit┞ H┞ the useヴげs o┗eヴall experience and argues for the emotional impact of good design. Lindegaard et al. (Lindgaard &

Dudek, 2002) also compared aesthetic elements of different websites and they found that

websites with high visual appeal and low perceived usability yielded with high user satisfaction.

According to Csíkszentmihályi (1990) the concept of flow is さa fully motivated mental stateざ

described as strongly fixated on the activity, and the essence of the flow is the pleasurable user

experience while performing the task. Useヴげs judgeﾏeﾐts aヴe iﾐflueﾐIed H┞ theiヴ e┝peItatioﾐs of use, background experience, the criticality of the tasks and scenarios they are presented

with and the flow of interaction (Csíkszentmihályi, 1990).

Many researcheヴs fouﾐd that usaHilit┞ has also gヴeat effeIt oﾐ peoplesげ judgeﾏeﾐts afteヴ interacting with the product or interface. But during the early stages of interaction with the

oHjeIt oヴ s┞steﾏ, aesthetiIs is the ﾏajoヴ iﾐflueﾐIe iﾐ peopleげs peヴIeptioﾐs aﾐd e┝peヴience.

Lindegaard et al. (Lindgaard, Fernandes, Dudek, & Brown, 2006) demonstrated how first

impressions count in website design; they revealed extremely high reliability ratings of visual

appeal, both within and between participants, of a sample of 50 homepages exposed in two

11

trials in a within-subject design for 50 milliseconds each. Since impressions were made in just a

very short time, it is likely that participants were making aesthetic judgments with minimal

information and understanding of the subject. Lindegaard asked participants to view each page

for 50 milliseconds and then rate the visual appeal of the page. Results showed that the

paヴtiIipaﾐtsげヴatiﾐg sIoヴes ┘eヴe highl┞ Ioヴヴelated Het┘eeﾐ sessioﾐs. That is, paヴtiIipaﾐtsげ ┗isual appeal ratings were consistent in both sessions. Lindegaard et al. concluded that users make

judgments of the visual appearance of an interface very quickly and those judgments are very

consistent over time.

Hartmann et al. investigated website attractiveness through the Adaptive Decision Making

theory (Figure 1) developed into a questionnaire to evaluate three websites that shared the

same brand and topic but had different designs. Hartmann et al. discovered a framing effect in

that user experience and perception varied according to the question (Hartmann, Sutcliffe, &

De Angeli, 2007). Users rated the aesthetically more appealing website superior to the others

which on the other hand were rated for better usability.

The Adaptive Decision Model (Payne, Bettman, & Johnson, 1993) affiヴﾏs that peopleげs deIisioﾐ making is adaptive and contingent upon the task, context and their background-experience

(Figure 1).

In another study Hartmann et al. investigates (Hartmann, Sutcliffe, & De Angeli, 2008) the

framing effect and how information and content can influence the overall user experience.

They compared three university websites that all varied in terms of content, usability and

aesthetic design. They conclude that even minor manipulations in the decision context can

iﾐflueﾐIe useヴげs o┗eヴall ケualit┞ judgeﾏeﾐts. Theiヴヴesults iﾏpl┞ that context and prior

iﾐfoヴﾏatioﾐ aHout ┘eHsites aヴe po┘eヴful iﾐflueﾐIes of useヴげs e┝peヴieﾐIe aﾐd o┗eヴall judgement of the quality and aesthetics of websites. They also demonstrated that not only the

information itself but the presentation of the information will influence the judgement of a

website.

12

Judgements of aesthetics and engaging designs are highly contextually dependent (Angeli,

Sutcliffe, & Hartmann, 2006); when the context is less serious aesthetics can have a strong halo

effect, however this may not be the case with more serious contexts. Positively perceived

aesthetics show a halo effect that can override a poor user experience and can influence the

overall design preference (Hartmann, Sutcliffe, & Angeli , 2008) iﾐ agヴeeﾏeﾐt ┘ith TヴaItiﾐsk┞げs findings. However, Hartmann et al. also emphasises that the investigation of the halo effect

needs further research; to investigate what happens to the halo effect if the usability problems

are severe and users lose trust in the system (Hartmann, Sutcliffe, & Angeli, 2008).

According to Sutcliffe usability is a trade-off Het┘eeﾐ iﾐIヴeasiﾐg the useヴげs ﾏoti┗ation to

eﾐIouヴage useヴげs e┝ploヴatioﾐ aﾐd puヴIhasiﾐg oﾐ e-commerce websites, and the costs of

usability errors (Sutcliffe, 2002).

Quantifying and Measuring Aesthetics

In this research I refer to design artefacts on fashion websites as e-commerce related artefacts

that influence the customer journey of online shoppers, and that exploit product-related

content and contribute to the user experience.

As earlier explained there have been a few attempts to measure aesthetics within the human-

computer interaction field. In a study called さModelling interface aestheticsざ (Ngo, Teo, &

Byrne, 2003) the authoヴsげ synthetized information into a framework that consisted of 14

aesthetic measures: Balance, Equilibrium, Symmetry, Sequence, Cohesion, Unity, Proportion,

Simplicity, Density, Regularity, Economy, Homogeneity, Rhythm, Order and Complexity.

This is an engineering approach also chosen by Nielsen (1998), however the only problem with

all this is that aesthetics are subjective, holistic and さmore valuable than the sum of its

componentsざ (Hoffmann & Krauss, 2004). Schneiderman et al. also say that this is a conflicting

model because of the さaItual s┞steﾏ aﾐd the useヴ’s ﾏeﾐtal ﾏodelざ (Mahajan & Schneiderman,

1997). Limitations to the role of aesthetics in user interfaces also lay in useヴsげ previous

experiences (Lindegaard, Whitfield) therefore it is not always true that what is nice is also

usable (Lindegaard, Dudek).

Lavie and Tractinsky who used to experiment the attractiveness of ATM machines in Israel and

Japan) determined two dimensions of aesthetics; classical aesthetics (visual clarity) and

expressive aesthetics (creativity, visual richness). They developed a questionnaire to measure

perceived aesthetics that consisted of these two dimensions (Lavie & Tractinsky, 2003). The

classical aesthetics dimension related to clean, symmetric and aesthetic design based on

design rules by usability experts; while the expressive aesthetic dimension consisted of original

and unconventional design elements.

13

Sutcliffe and di Angeli (Sutcliffe & deAngeli, 2005) compared two websites with different

design features and compared them on the usability, the user perception and the memory

dimensions. They created 10 heuristics to evaluate the attractiveness of the websites similarly

to Lavie and Tractinsky (Lavie & Tractinsky, 2003). Sutcliffe and Di Angeli found that interactive

metaphors strongly contributed to users attitudes in spite of the fact that their user experience

was worse with the more aesthetic design style.

An artefact may be considered beautiful or aesthetically pleasing due to its meaning,

associations, representation or its appearance that affect human senses. Aesthetics is a holistic

perception which takes into account all aspects at once and does not reflect on which

components are assessed by the user. The significance of aesthetics in the user experience is

that the effect of visual aesthetics of an interface exposes itself in the user behaviour, in the

choices between alternatives, as well as in the judgements that users make about the interface

– not only after a first short period of seeing, but also after the interacting with it.

Customer Journey

Practically speaking the customer journey is the sales cycle framework in traditional business

models that seeks to understand the business-customer relationship in order to push

customers through the sales funnel leading to transaction (Dubberly & Evenson, 2008). The

customer journey is a series of customer experiences that aggregate from various impressions

gained from different parts of the business; what customers think of and how they perceive

the brand.

AIIoヴdiﾐg to Csíkszeﾐtﾏihál┞i ふヱΓΓヰぶ the IoﾐIept of flo┘ is さa fully motivated mental stateざ

described as strongly fixated on the activity, and the essence of the flow is the pleasurable user

experience while performing the task (Csíkszentmihályi, 1990).

DuHHeヴle┞ aﾐd E┗eﾐsoﾐふヲヰヰΒぶ Ialled it けthe experience-cycle modelげ that ﾏo┗es He┞oﾐd the push model of the sales cycle and focuses on the relationship of business and customer

describing the steps and criteria to evaluate customer experiences.

Human-computer interaction design is balanced on the relationship of people with machines

and services, where goals and the circumstances of actions are well defined (Brugnoli, 2009).

Mapping the customer journey process is primarily tracking and describing the customersげ experiences as they interact with an interface or service. The ﾏap of the Iustoﾏeヴsげ jouヴﾐe┞

can reveal opportunities for improvement and innovation; therefore it acts a strategic tool to

ensure that the human-computer interaction is a positive experience. The customer journey

map not only helps companies to better understand the end to end journey of the customer

but also to improve how the various functions and tasks are involved in delivering the ultimate

customer experience.

14

Many e-commerce companies would agree that successful customer journey consists of a

quick and easy purchase on the website. But it is not only about functionality and usability;

aesthetics are also playing an important role in the overall user experience and therefore in the

customer journey. Aesthetic elements are essentials for the visual design of interfaces or

environments as well as for the design of the navigation system and the information

architeItuヴe iﾐ teヴﾏs of the stヴuItuヴal desigﾐ of the iﾐfoヴﾏatioﾐ spaIe iﾐ oヴdeヴ to ﾏeet useヴsげ expectations (Figure 2). Aesthetic elements follow through the customer journey and support

the user by providing all sorts of different information. For example, in a shop customers

orientate themselves by relying on signs and symbols but they also perceive colours and

shapes as well as textures and materials. When making a phone call, users notice the colours

on the screen, the shapes of the buttons, the texture of the phone, the sounds it makes, and so

on. These all contribute to the overall customer experience; therefore they have an effect on

the customer journey.

Figure 2 – Jesse Jaﾏes Gaヴヴett’s useヴ e┝peヴieﾐIe eleﾏeﾐts

Useヴ e┝peヴieﾐIe is the さconversationざ between the person and the system that can happen in

many scenes, situations and via different channels. Since there is only one conversation a each

interaction, we can say that the experience is what we can remember and what we learnt so

that it becomes a meaning to the users (Brugnoli, 2009).

Iﾐ this stud┞ the Iustoﾏeヴげs jouヴﾐe┞ has a slightl┞ diffeヴeﾐt iﾏpliIatioﾐ thaﾐ the tヴaditioﾐal logic. In this study I refer to the customer journey as the flow of use and navigation on fashion

15

websites by users where the touch-points are all the different digital artefacts that help the

user to drive through this journey; from departing from the homepage until arriving to the

checkout page.

User scenarios vary greatly as customers use different interfaces, in different contexts, using

different ways of interactions and producing different results. Hence it is important to take into

Ioﾐsideヴatioﾐ the useヴsげ foIus of atteﾐtioﾐ as it Iaﾐ He foIused oﾐ the e┝peヴieﾐIe itself ふe.g. how pleasurable or meaningful it is for the user) or focused on the task (e.g. how functional,

reliable and usable it is for the user).

There is no one single best wa┞ of dヴa┘iﾐg up the Iustoﾏeヴげs jouヴﾐe┞. Many entry points are

possible where the user initiates the interaction depending on needs and goals. Nor task flows

always follow one single optimal process, but rather these are a combination of various actions

accomplished by the user with different tools in different contexts (Brugnoli, 2009). It is also

important to note that the results will not be delivered by one single device and that the

interaction flow will be experienced via many devices and different situations. For this reason,

the architecture of the system becomes a key design challenge. The design of the customer

journey should include the system as a whole and the possible relationships and connections

with its parts that will be triggered by the users. Users are always in the centre: they are the

protagonists who dynamically connect the parts of the system. The features and the use of

these parts will follow its role within the system, which should change automatically in an

opportunistic and situated way following the different contexts and user situations (Brugnoli,

2009).

Classical online Iustoﾏeヴ jouヴﾐe┞ staヴts ┘ith e┝ploヴiﾐg useヴsげﾐeeds aﾐd pヴoHleﾏs. They either

need a specific item or a specific make (brand) or they just want to browse to search for ideas

and inspirations. Many of them will use a variety of search engines and directories as well as

adverts, affiliate or direct mail marketing to find the shop online. Many of them will come

straight to the website, because they simply know the URL for the website. Many will also look

oﾐ the Ioﾏpetitoヴげs ┘eHsite Hefoヴe aItuall┞ Hu┞iﾐg soﾏethiﾐg aﾐd ﾏaﾐ┞ ┘ill ﾐot Hu┞ aﾐ┞thiﾐg at all because it was not their intention to do. Many people will only look for information about

the brand, the store and the services it provides (e.g. delivery and returns information, opening

hours, etc.) and some people will only want to stay up-to-date regarding the new products,

latest offers, etc.

Most of the websites follow certain conventions that allow visitors to get around the web

pages easily. For example, the Ioﾏpaﾐ┞げs logo is alﾏost al┘a┞s at the uppeヴ left Ioヴﾐeヴ of the hoﾏepage aﾐd it also seヴ┗es as a けHoﾏeげ Huttoﾐ throughout the customer journey which takes

users back to the homepage. At the upper right corner users can find their shopping basket

and けM┞ aIIouﾐtげ liﾐk at the uppeヴヴight Ioヴﾐeヴ. Theヴeげs also a sﾏalleヴ ┗eヴsioﾐ of the site ﾏap below the fold with contact information, terms and conditions, policies and so on.

There are also some conventions around the navigation system on e-commerce websites; the

main navigation bar is usually located along the middle of the top of the homepage and the

16

secondary navigation is situated on the left column. Those users who are used to these

conventions and frequently use the websites could feel disappointed when they encounter

with a different website design where the links and the navigation system are rearranged.

Another important thing to consider is that people use the internet for shopping because it is

quicker and easier than making the effort and actually visit the physical store. They do not

want to spend time finding out how the website works; most of them only want to make a

quick deal and then move on. For this reason it is very difficult for website designers to come

up with something different and unusual because if they violate Iustoﾏeヴsげ established

practice they can put the company into jeopardy. The most valuable feature of a website is

therefore an easy navigation system.

As customers arrive to the website looking for the product they want to buy their visual

attention is oﾐ the ┘eHsiteげs desigﾐ as well as on finding their way to complete the task which

consists of searching and browsing through the products. Aesthetic preferences are instantly

formed and measuring these could help to improve the design of the website. Many

companies put in a lot of effort researching and experiencing the best combination of colours

that sell the most products; regrettably, aesthetic preferences are subjective attitudes and it is

impossible to come up with one standard layout, colour scheme that will please everybody.

According to Tractinsky and Lowengart (2007) the shopping task can vary in different ways

depending on the circumstances. Shopping can be done in a rush or at a quick impulse, while

sometimes it is related to leisure that happens non-routinely and other times it can happen

deliberately and routinely. (Tractinsky & Lowengart, 2007)

Tractinsky and Lowengart (2007) also acknowledge that different product types will be

associated with different types of aesthetics. Different products will also be associated with

different types of needs; fashion for example is a factory that manufactures desire and fashion

creates a need where there is no real need in reality, only desire (Tungate, 2008). Fashion has a

さvisual vocabularyざ that helps people feel emotionally evolved as the exterior change derives

an interior change (Tungate, 2008). Fashion is all about aesthetics and appeal; fashion brands

aヴe peヴsuasi┗e aﾐd the┞ do e┗eヴ┞thiﾐg possiHle to attヴaIt peopleげs ┗isual atteﾐtioﾐ. Fashion is a

sensory experience in itself; feeling the garment, the textures, seeing the colours and using

imagination to envisage ourselves wearing the iteﾏ. The authoヴげs aiﾏ is to fiﾐd out how do all

this translate into virtual, online digital platforms where the customer physically cannot see

and touch the clothes and where the customer only interacts with an electronic interface.

17

Chapter 3 − Methods

In this section of my dissertation I explain how I developed the set of criteria for the evaluation

of the fashion websites for their aesthetic elements and customer journey as well as the

procedure and methods used for my research.

Previous studies proved that aesthetics cannot be disregarded when evaluating websites.

Useヴsげ peヴIeptioﾐ of a ┘eHsite Iaﾐ iﾐduIe a ┗aヴiet┞ of eﾏotioﾐs aﾐd ヴeaItioﾐs. These emotions

aﾐd feeliﾐgs iﾐflueﾐIe useヴsげ attitudes to┘aヴds the usaHilit┞ aﾐd the Ioﾏpaﾐ┞げs Iredibility as

┘ell as the ┘eHsiteげs Ioﾐteﾐt aﾐd the pヴoduIts it is selliﾐg. Furthermore, special consideration

is required to the design principles of web designs with respect to the ever-changing fashion

industry. Since the aesthetics of a website can influence brand perception and credibility, the

importance of design must be considered; the design and the graphical presentation of a

website is very visual and users make aesthetic judgments of a site very quickly. As the

┘eHsiteげs likeaHilit┞ and credibility increases so does the likelihood of purchasing products

from the site (Chen, 2009). However, it is quite difficult to measure the relationship between

aesthetics and emotions because of their abstract nature, therefore creating metrics for

aesthetics is also challenging since it is very personal and subjective.

The Design of the Study

The idea of combining multiple methods within a research is to increase the knowledge

produced by the study. This project approached usersげ emotional experience to aesthetic

elements on fashion websites through interviews, observations, heuristic evaluations, card

sorting, and emotional reaction- and emotional bi-polar semantic scales to create an

interconnecting set of different methods and data types. In this research I collected both

qualitative and quantitative data through various techniques and tools. The study consists of 3

main parts.

In the first part of the study I will demonstrate the existing guidelines for user interfaces,

particularly online e-commerce interfaces. I will then discuss how those existing heuristics

differ from my own heuristics set up for fashion websites. Finally, I will explain how I

incorporated the information from my interviews and observations with the heuristics and

other survey methods.

In the second part of the study I will use some commercial methods to evaluate the websites in

terms of their perceived aesthetics. These methods include card sorting, emotional reaction

scales and emotional bi-polar semantic scales.

18

In the third part of the study I will report the outcomes of a focus group interview that was led

by doing A/B testing using paper prototypes and evaluating them from aesthetics and usability

point of views.

The study was carried out as follows:

1. The analysis of collected methods.

2. Setting up my heuristics for evaluation based on previous studies.

3. The collection of websites to be evaluated.

4. The evaluation of websites – participants answer the interview questions, participants are

observed and asked for additional feedback about the websites in terms of aesthetics and

their experience;

i. Participants recruited

ii. Personal pre-interview about online shopping and fashion websites

iii. Following topic to search for a dress on 6 fashion websites

iv. Think-aloud exercise with participant observation regarding customer journey

v. Participants are rating each fashion websites based on aesthetics heuristics

5. The analysis of the heuristic evaluations – qualitative and quantitative data analysis,

calculations based evaluation is carried out.

6. Description and interpretation of results.

7. Setting up my next stage interview methods based on the findings of the first round

heuristic evaluations. The collection of websites to be evaluated; based on the results of

the first round heuristic evaluations.

8. Researching for methods to measure website aesthetics.

i. The evaluation of websites – participants answer the interview questions,

reiterating customer journey with participants through card sorting exercise,

measuring the aesthetic elements of customer journey, participants asked for

additional feedback about the websites in terms of aesthetics and their

experience;

ii. Participants recruited

iii. Personal pre-interview about the design and aesthetics of fashion websites

iv. Following card sorting to reiterate customer journey of buying a dress online

v. Measuring aesthetic elements on emotional reaction scale – participants describe

their emotional experience with each element selected from the stages of the

customer journey. Capturing personal suggestions for each element.

vi. Post-interview – continuing collecting data not yet captured in previous stages

9. The analysis of the interviews, card sorting and emotional rating scales – qualitative and

quantitative data analysis.

i. Categorise findings by website/design content,

ii. by website/design function,

iii. by the visual representation of website/design/products,

iv. by website/design interface


11. Creation of paper prototypes.

12. Focus group interview.

19


14. Setting up the customer journey and highlighting the aesthetic elements and their

perceived attractiveness and user experience.

i. Develop customer journey to measure the effects of the aesthetic elements of the

user experience.

Part 1/a - Heuristic Evaluation

Websites Heuristics

The first and ever since the most well-known web heuristics were created by Jacob Nielsen and

Rolf Molich in 1990 (Nielsen & Molich, 1990). Nielseﾐげs heuヴistiIs ┘eヴe also adapted foヴ the web by Kieth Instone, former IBM user experience designer and information architect. Instone

updated the original guidelines and refined definitions to make them more applicable to web-

based interfaces. However, it is not regarded as a comprehensive and comparable as it lacks of

actual user feedback and biased preconceptions by the evaluators could lead to reporting of

problems that are not actual usability problems.

Nielseﾐげs heuヴistiIs do ﾏake ヴefeヴeﾐIe of aesthetiIs aﾐd useヴ eﾐgageﾏeﾐt (Nielsen & Molich,

1990) in the sense of visibility and information content. Nielsen claims that there should not be

more functions on an interface than is required for the user to perform the task and calls for

reducing the noise where possible. According to Nielsen a great design is the perfect

combination of a minimalist and aesthetically pleasing design.

Nielseﾐげs ten usability heuristics (1990):

1. Visibility of system status

2. Match between system and the real world

3. User control and freedom

4. Consistency and standards

5. Error prevention

6. Recognition rather than recall

7. Flexibility and efficiency of use

8. Aesthetic and minimalist design

9. Help users recognize, diagnose, and recover from errors

10. Help and documentation

20

Norman also claimed that aesthetics have influential effects in user preferences (Norman,

2003) and therefore on the user experience. According to Norman beauty can be an important

quality of a product which influences our judgement of that product.

In terms of aesthetics, Tractinsky and Lavie have made most research in the field of web

commerce. Tractinsky and Lavie set up heuristics with the attempt to develop a measurement

instrument of perceived website aesthetics. They created two dimensions to measure

aesthetics: classical and expressive aesthetic. The classical aesthetics dimension included

questions on pleasant, clear, clean, symmetric and aesthetic design; while expressive aesthetic

dimension consisted of creative, fascinating, original and sophisticated design with use of

special effects. (Lavie & Tractinsky, 2003)

TヴaItiﾐsk┞ aﾐd La┗ieげs heuヴistiIs (2003) are:

Factor 1 - Classic aesthetics:

Aesthetic design, Pleasant design, Clear design, Clean design,

Symmetric design

Factor 2 - Expressive aesthetics:

Creative design, Fascinating design, Use of special effects, Original

design, Sophisticated design

Factor 3 – Usability:

Convenient use, Easy orientation, Easy to use, Easy to navigate, Clear

design

Factor 4- Pleasurable interaction:

Feel joyful, Feel pleasure, Feel gratified

Factor 5 - Service quality:

Can count on site, Site contains no mistakes, Site provides reliable

information

Sutcliffe evaluated 3 airline companiesげ websites with 9 undergraduate students investigating

the role of aesthetic and other factors in re-defining website usability. (Sutcliffe, Assessing the

Reliability of Heuristic Evaluation for Website Attractiveness and Usability, 2002) In his study

Sutcliffe says that heuristics should not be used for subjective rating style judgement, but this

does not mean that these cannot be used as an analytical support in usability evaluations.

The generic heuristics for attractiveness and aesthetic design according to Sutcliffe, de Angeli

and Hartmann (2002) are as follows:

21

1. Judicious use of colour: colour use should be balanced and low saturation pastel

colours should be used for backgrounds. Designs should not use more than 2-3 fully

saturated intense colours.

2. Symmetry and style: visual layout should be symmetrical, e.g. bilateral, radial

organisation that can be folded over to show the symmetrical match. Use of curved

shapes conveys an attractive visual style when contrasted with rectangles.

3. Structured and consistent layout: use of grids to structure image components and

portray a consistent order; grids need to be composed of rectangles which do not

exceed a 5:3 height to width ratio.

4. Depth of field: use of layers in an image stimulates interest and can be attractive by

promoting a peaceful effect. Use of background image with low saturated colour

provides depth for foreground components.

5. Choice of media to attract attention: video, speech and audio all have an arousing

effect and increase attention. Music can attract by setting the appropriate mood for a

website.

6. Use of personality in media to attract and persuade: this principle applies primarily

to e-commerce websites when use of human image and speech can help to attract

users and persuade them to buy goods by being polite and praising their choices.

7. Design of unusual or challenging images that stimulate the users’ iﾏagiﾐatioﾐ aﾐd increase attraction: unusual images often disobey normal laws of form and

perspective.

Other Attempts To Measure Website Aesthetics

AttrakDiff was developed by Hassenzahl et al. (2003) and it is measured on a semantic

differential scale, aiming to evaluate both pragmatic (usability, usefulness) and hedonic

(emotional) qualities in a product or system. AttrakDiff assesses the user's feelings about the

system with a questionnaire. The strength of AttrakDiff is that it produces quantitative and

comparative data, but it only assesses reflection on experiences, not actual experiences.

(Hassenzahl, Burmester, & Koller, 2003)

Visual Aesthetics of Website Inventory (VisAWI) consists of four aspects with various questions

in categories of simplicity, diversity, colourfulness, and craftsmanship. It has been developed

by Moshagen and Thielsch (2010) to measure visual aesthetics of an interface. Apart from

simplicity and diversity, the use of colours and expertise of design are taken into account. It

consists of 18 questions in total.

22

There are of course many other methods to measure website aesthetics but for the purpose of

this research the author only studied these ones in depth.

Setting Up New Website Heuristics

Website heuristics vary according to the type of website and the criteria as well as the purpose

of evaluation and each set of heuristics has its limitations and benefits. There are three

dimensions to my research: usability, aesthetics and user experience. I created a set of criteria

for my heuristics that correspond to these measurements. I have adopted several points from

different sources (eg. Travisげs, Sutcliffeげs, Tractinskyげs, Averyげs aﾐd Alsudaniげs heuヴistiIs) since I

have used many of their adjectives and statements to compose my own set of guidelines for

fashion website aesthetics.

My heuristics are presented below:

USABILITY

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

ii. Convenience: Information can be found and used within a few clicks of the mouse.

iii. Readability: The fonts are appropriate in size, colour and style. The user can easily locate

and read the text.

iv. Consistency: The visual elements are applied consistently throughout the website.

v. Navigability: It is easy to manoeuvre from one link to the next. The links are in logical

order.

vi. Simplicity: Every element seems to perform a clear function.

AESTHETICS

i. Use of Colour: Appropriate use of colours and contrasts. Background and foreground

colours do not interfere.

ii. Balance: There is a good balance between the visual weight of the elements and the use of

white space.

iii. Visual layout: Visual layout is symmetrical and each page on the site shares a consistent

layout.

iv. Style: Use of curved shapes conveys an attractive visual style when contrasted with

rectangles.

v. Originality: The site takes an unorthodox approach and is distinguishable from other

fashion websites.

vi. Unity: The site has a consistent, clearly recognisable look and feel that will engage users.

23

vii. Clarity: The intent, organization, and appearance of the website is unambiguous and

directed.

viii. Sophistication: The website appears developed and complex. Images and text are visually

and conceptually distinct yet still harmonious.

ix. Order: The layout helps focus attention on what to do next.

x. Beauty: The site is pleasant to look at and the design encourages people to explore the

site.

xi. Special effects: The website includes animation, sound, or other unique forms of

interactivity. Attention-attracting features are used sparingly and only where relevant.

xii. Images: Meaningful labels, effective background colours and appropriate use of borders

and white space help users identify images as discrete functional blocks.

USER EXPERIENCE

i. Conformity: The site follows convention of other fashion websites.

ii. Intrigue: The website captures my attention.

iii. Enjoyment: The website is enjoyable to interact with.

iv. Ability to Motivate: The website encourages me to act.

v. Visual affection: The images and other visual elements are consistent and appealing.

vi. Social satisfaction: There is a sense of community on the site, allowing for interaction with

others.

Although heuristic evaluation is relatively easy to conduct, the review of all the heuristics is not

quick to perform. In this study I decided to go deep into aesthetics, more than into usability

because my ultimate aim was to be able to see how fashion websites aesthetics impact the

customer journey. Because I created 24 heuristics for three dimensions (usability, aesthetics

and user experience), my session lasted longer than an hour but results were more informative

this way.

My aim was to set up heuristics that are easy to score; each heuristic had a statement

describing the guideline and participants were asked to rate these on a 5-point Likert-scale that

had けAgヴeeげ aﾐd けDisagヴeeげ oﾐ Hoth eﾐds and had a ﾐeutヴal poiﾐt iﾐ the ﾏiddle けNeitheヴ agヴee ﾐoヴ disagヴeeげ. The points for each website given were totalled across each category to give

quantifiable sense to how usability, aesthetics and user experience were perceived on the

selected websites (Appendix 4).

Representing the data visually makes it easier to compare results as well as to identify problem

areas. I used radar diagram to visualise the analysis mainly because it gives a recognisable

shape for each type of scoring; the more circular the radar is, the more balanced the score and

the spikier the radar is the more variations are in the scoring given. Furthermore, the size of

the ヴadaヴげs plot oﾐ the a┝es iﾐdiIates the score percentage, showing better and worse areas.

(Figure 3)

24

Figure 3 – Heuristic Evaluation Results

The fashion websites selected for the heuristic evaluation were all representing the higher-end

high street brands and all had similarly priced products. However, in terms of design they were

selected to be different; they all had different zooming features, menu structures, colours,

navigation systems (flow), different checkout processes, etc.

Below is an informal assessment of the selected websites chosen and their main characteristics

(Figure 4):

Figure 4

25

Participants And The Evaluation Arrangements

Six women in total, all aged between 30 and 40 years old, participated in the first part of the

study and conducted the heuristic evaluations. All participants had online shopping experience,

as they reported that on average they spend 3 hours a day using the internet (including emails,

browsing and shopping) but none of them had HCI or web design background. Participants also

stated that on average they bought something online once a month. The most common

fashion items purchased online by participants were: shoes, dresses and bags. All participants

were familiar with the brands in this study, but not necessarily with their websites.

The interviews took place between the 6th and 24th July, 2012. The participants were

introduced to the purpose of the research and explained the consent form. The heuristic

evaluations as well as the pre- and post-test interviews were conducted by using a personal

laptop as equipment which was operating under normal circumstances and settings; with good

internet connection and resolution. Participants were sitting in front of the laptop at a large

desk aﾐd the authoヴﾐe┝t to theﾏ oHseヴ┗iﾐg Hoth the sIヴeeﾐ aﾐd the paヴtiIipaﾐtげs faIe. Participants were using the laptop to access the selected fashion websites. The environment of

the evaluation and interviews was normal with good lighting and quiet surroundings (i.e.

mobiles switched off, no TV or other disruptive devices). Participants started completing the

heuristic evaluations from the homepages of the websites on the screen.

In this part of the research I combined think-a-loud protocol, observation and heuristic

evaluation. Participants were given various types of tasks to complete while interacting with

the selection of websites to be evaluated later.

Focusing on the user experience think-a-loud protocols and interviews helped this research

collecting mainly qualitative data (formative evaluation). The heuristic evaluation was led by

one moderator (the author) who observed test participants in person and collected feedback

in the forms of a pre-test and post-test interviews as well as observations. The purpose of the

pre-test questionnaire (Appendix 2) was to make sure that participants fit in the target

audience group and it asked 14 short questions about the homepage concerning mainly their

online shopping experience and their favourite fashion website features.

During completing the website reviews participants were were observed and asked regarding

their experience of the websites collecting subjective feedbacks regarding their overall

impression, what participants liked and disliked of the websites designs, any recommendations

for improvement, their experience using each website, the ease of task and the challenges in

the task.

Pre-test interview was conducted regarding users impressions about the usability and

aesthetics of the selected fashion websites. The detailed summary of the outcome can be seen

in Appendix 2. The purpose of the pre-test and the post-test ﾏethods ┘as to get useヴsげ

26

expectations and to understand what users think about their experience on the website. After

the initial de-briefing interviews participants were introduced the websites (Appendix 3) and

were asked to browse the websites and to think out loud about how they felt about the design

and usability. M┞ aiﾏ ┘as to ヴeIoヴd paヴtiIipaﾐtsげ fiヴst iﾏpヴessioﾐs when they interacted with

the websites as well as recording their user experiences as they flowed along their personal

online journeys.

Participants were asked to think out loud and to explain how they used the website, how they

searched, what they looked for, which digital artefacts they liked, which elements they found

aesthetically pleasing, etc. This was part of the initial exploratory search task and I just asked

participants to browse spontaneously while I was observing them.

Contestants were given a directed search task, that consisted of searching and finding a

specific type of dress and reporting back during their journey which aesthetic elements they

liked or disliked and why and I also asked participants to rate those elements.

さYou aヴe iﾐ┗ited to a wedding this summer and you are wondering what to wear. You realize

that ┞ou doﾐ’t ha┗e aﾐ┞ dヴesses to ┘eaヴ so ┞ou Ioﾏe to this ┘eHsite to fiﾐd oﾐe…ざ

Participants walked through the task as they were customers and they thought out loud while I

was making note of the key findings from their experiences; everything from how long it took

to complete the task to how many steps it took, to the obstacles in accomplishing the task on

each website. Participants were asked to think out loud whilst doing the search for the dress

and I also asked questions about various features of the website.

Participants were presented with the heuristic evaluation checklist and were asked to score

each heuristics on a Likert-scale (1-Disagree and 5-Agree). After completing the tasks

contestants were asked for their final impressions and overall user experience.

Each participant was asked to rate 6 different websites which took them on average 90

minutes to complete and the order of the websites varied to avoid any ordering effects. Each

participant received a bottle of wine for their time and feedback.

My aim was to test three dimensions; usability, aesthetics and user experience. The rating

sIale foヴ the heuヴistiIs ┘as ﾏaヴked fヴoﾏヱふAgヴeeぶ to ヵふDisagヴeeぶ aﾐd ン Heiﾐg けNeither agree

ﾐoヴ disagヴeeげ. The results were then aggregated and copied into an Excel file (Appendix 4) and

the results are explained in the next chapter.

Based on the results of the heuristic evaluation as well as the interviews analysis the two best

rated websites were chosen for further analysis. These were Whistles and French Connection

based on the aggregated results (Figure 5). Within the next phases of the study I will focus on

these two websites to analyse further the aesthetic elements and the perceived usability as

well as to focus on capturing how these components affect the customer journey.

27

Figure 5

Part 1/b – Capturing The Customer Journey

My other aim with the heuristic evaluation as well as with the interviews was that I gain an

iﾐsight to the Iustoﾏeヴげs jouヴﾐe┞ that participants take on the presented websites. While

observing them using the websites, they were asked to demonstrate how they used the

fashion websites and how they organized their online shopping activity when they were doing

it on their own.

Iﾐ oヴdeヴ to gaiﾐ aﾐ iﾐsight to the Iustoﾏeヴげs jouヴﾐe┞ that paヴtiIipaﾐts take oﾐ fashioﾐ ┘eHsites, I was observing participants throughout the session and taking notes (Appendix 5) of how they

used the fashion websites and how they navigated on their own; which path they took and

which buttons they used as well as what they reported verbally (e.g. instant comments and

reactions to the aesthetics or usability features).

Before participants were given the heuristic evaluation sheets, they were introduced to each

website and were asked to talk about them and think out loud while they were navigating on

them. Participants were asked to report their feelings and experience on each website, while

their actions and voices were recorded using Cam“tudio™ ヴeIoヴdeヴ oﾐ the laptop. Based on the

observations and think-a-loud protocols the following customer journey was observed (Figure

6):

28

Figure 6

Customer Journey Framework

Adams and Blandford set up three stages of useヴげs iﾐfoヴﾏatioﾐ journey on informational

websites (Adams & Blandford, 2005):

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

2. Information facilitation: system facilitates the required information retrieval

3. Information interpretation: system supports contextual information interpretation

and/or modification

The customer journey on fashion websites is however different to informational websites as it

is easier to recognize layout conventions on fashion websites. Figure 7 below shows some

fashion website conventions looking at tertiary pages (Home > Women > Shoes):

29

Figure 7 – Fashion website layouts

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

fashion websites:

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

Shopping basket/My account features are positioned at the top-right of the homepage.

Secondary categories are located vertically on the left side of the homepage.

Clothing items are laid out in a grid-like style in the main content area.

Clicking on an individual clothing item brings up a larger view of the item, usually

featuring:

- text description,

- colour choices,

- size choices,

- けAdd to Hasketげ featuヴe and

- zooming.

Of course there are more than these. The real power of conventions is that they allow users to

quickly navigate and use the website without thinking too much about it as it HeIoﾏes useヴsげ mental models. However, most fashion websites want to distance themselves from the

conventions and be different so what they try to do is to ignore the conventions. But, in most

cases, the navigation system at least follows some convention; they are commonly situated at

the top or left of the page content, in a row or column. It will be explained in more detail later

that navigation and intuitiveness are important factors that users consider when making

judgments about fashion websites. Of course there is no one standard customer journey on

fashion websites, but generally speaking we can say that most journeys will at some point

cover the main steps. These core steps are explained here.

There must be an entry point from which the customer lands on the core page, usually the

homepage or a product page. Next steps can include searching, browsing, seleItiﾐg ふさAdd to

basketざぶ oヴ e┗eﾐ lea┗iﾐg the ┘eHsite. Custoﾏeヴs Iaﾐ lea┗e to ┗isit a Ioﾏpetitoヴげs ┘eHsite oヴ go back to a search engine page where they can re-start browsing the Internet, but this is not

covered by this project. When customers browse the website they either filter through the

30

categories or use the search box to explore the assortment of products available according to

their reference.

Going a step further towards the customer journey on fashion websites users usually can

Ihoose fヴoﾏ the follo┘iﾐg ﾏeﾐu iteﾏs: ┘oﾏeﾐげs ┘eaヴ, ﾏeﾐげs ┘eaヴ, ﾐe┘ iﾐ, sale, Hlog aﾐd some other informative links usually to inform users about fashion trends, celebrities, new

clothes, etc. Once selected the main category form the top menu bar, users can see the sub-

categories of the menu on the left vertical column. Users can choose from different categories

such as: Coats & Jackets; Jeans; Tops; Shoes, etc. Below there are a few examples of e-

commerce website wireframes (Figure 8):

1. Homepage 2. Navigation 3. Filters 4. Close view

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

Figure 8 – E-commerce website wireframes

There are also various additional services that could support the decision-making process, such

as customer reviews, product guides, comparing similar products or gift finder. After a

selection is made customers can either put the item in the virtual shopping cart and proceed to

checkout or they can enter competitions, sign-up for newsletters and other online services or

share their selection on different platforms and touch-points such as email, online social

networks, etc. The checkout stage of the customer journey usually consists of a registering or

logging in page and an administrative page where customers are required to enter personal

details such as delivery address and payment details. In this last step customers can request

specific delivery options and to specify discount codes or gift wrapping for their purchases. The

jouヴﾐe┞ fiﾐishes ┘ith a Ioﾐfiヴﾏatioﾐ page, sa┞iﾐg さThaﾐk ┞ouざ to Iustoﾏeヴs aﾐd pヴo┗idiﾐg them with a reference number for their purchase. In this project the registration and login to

the customer account are out of scope due to time and personal data concerns. After the first

part was completed and analysed, personas and a storyboard were created (Appendix 7) based

on the results and feedbacks from users.

Part 2 - User Testing For Aesthetics

The second part of the study consisted of an in-depth evaluation and analysis based on user

testing as well as focusing more on the aesthetic elements of the websites and evaluating

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

31

them within the customer journey framework. It is of course very difficult to tell whether a

website is pleasing to its users or if it creates a good first impression because aesthetics are

very subjective. For some people a design can be very appealing and for others the same

design appears to be boring and not exciting at all.

Aesthetics and General Website Design

First impressions can make or break potential transactions. An experiment by Lindegaard et al.

showed that on average, people spend less than thirty seconds on the homepage before

deciding to stay or go (Lindgaard, Fernandes, Dudek, & Brown, 2006). Customers immediately

foヴﾏ judgeﾏeﾐts aHout the Ioﾏpaﾐ┞げs IoﾏpeteﾐIe H┞ the ┘a┞ theiヴ ┘eHsite looks. These aヴe of course subjective judgements but a well-organized and structured website with coherent

design can transmit trustworthiness and professionalism.

Keeping in mind the needs of the target personas when designing websites is also very

important, because apart from selling products on the website companies are also selling

experiences. Therefore they have to make sure that they know who the audience is and

address and address their needs on the website at the appropriate level and in the appropriate

moment.

Good usability is of primary importance and there has to be an appealing sheen that flows

thヴough the ┘eHsiteげs desigﾐ as ┘ell as aloﾐg ┘ith the Iustoﾏeヴげs jouヴﾐey that makes it easy

and quick for customers to find and purchase what they are looking for. Signs and design

elements should also be clear to help the users manoeuvre through the website.

Another issue with fashion websites is that people are looking for clothes that involve looking

for aesthetically pleasing items in itself (i.e. the clothes), therefore it can interfere with the

aesthetic judgement of the actual website design. In this study, my aim is to focus on the

┘eHsiteげs desigﾐ aesthetiIs aﾐd ﾐot oﾐ the aesthetiIs of the fashioﾐ pヴoduIts it is selliﾐg. An

image of a dress can usually affect the observer by the type of clothes it is as well as by its

shape, colour and fabric material (Xue Li, 2011), but unlike other forms of art the aesthetic

consequence of a fashion item will ultimately depend on how it appears on the human body

(Molly Eckman, 1995). Since the online customer cannot interact with the physical garment, he

or she is reliant on the virtual environment to judge and to evaluate the silhouette, the

colours, the details, the texture and the necessary care that the garment requires.

32

Methods Used

Focusing on aesthetics and the user experience think-a-loud protocols and interviews helped

this research collecting mainly qualitative data. In this part of the study I used commercial

methods to evaluate the websites in terms of their perceived aesthetics. User performance

data such as card sorting, emotional reaction scales and emotional bi-polar semantic scales

provided this part of the research with mainly quantitative data. The purpose of using these

methods was to get an insight about user experience and to get an understanding of which

design elements of the websites gain attention and which features are not found engaging.

The project plan as well as the testing session outline and timing and testing arrangements are

presented in Appendix 10. Ten women in total, all aged between 30 and 40 years old,

participated in the second part of the study. All participants had online shopping experience

and two of them had HCI or web design background. Some participants were familiar with the

brands in this study, but not necessarily with their websites. The interviews took place

between the 3rd and 24th August, 2012. Participants were introduced to the purpose of the

research and explained the consent form.

In this part of the research participants were given various types of tasks to complete such as

card sorting, emotional reaction scale and emotional bi-polar semantic scale in order to collect

quantitative data. The pre- and post-test interviews utilized open-questions to also gather

qualitative data about user satisfaction and feedback on the aesthetic features of the websites.

The testing sessions were led by the author of this study who observed test participants in

person and collected subjective feedback in the forms of pre-test and post-test interviews. The

pre-test survey (Appendix 8) asked 16 questions about the visual designs and usability

concerning:

preferred design features;

purpose of the design elements;

design and usability correlation;

preferred colours and

presentation of the products.

In this interview the questions were more aesthetics-specifics. After the initial de-briefing

interviews participants were introduced to the card sorting task. The flash cards contained the

previously observed 17 steps of the customer journey. The task lasted about 10 minutes; first

participants were shown the cards, then they were asked to order the cards (cards were

always shuffled previously). After the completion participants were asked to explain why they

ordered the cards in that way, finally a photo was taken of the cards (Appendix 11). The

arrangement of the cards was logged in an Excel file (Appendix 6). This exercise helped the

author to re-iterate the customer journey set up in the first part of the study (Appendix 6).

33

For the next task I created flash cards with screen-shots of specific features of each website

that were tested and rated by my participants. These features were selected based on the

results of the interviews from the first part of the study; each card represented an aesthetic

element of a step of the customer journey. These elements were evaluated by participants by

using different commercially used methods, such as emotion and reaction scaling technique

and bi-polar emotional response. The most important data from this exercise was the

discussion with participants to understand their reaction to an image (whether positive or

negative), so I was taking good notes as well as recorded the session. The aim with this task

was to identifying commonalities in design that provided the same or similar emotional

responses.

A large matrix was created; a vertical and horizontal axis based on two sets of polar opposite

words (high quality and low quality on the vertical axis and exciting/fun and boring/dull on the

vertical axis). Participants were given two flashcards at the same time with the same element

from each website and were asked for their initial thoughts. They were asked to place the

cards on the axis of the aesthetics-usability scale and explain their rationale. I then noted the

position of the cards and put the data in Excel (Appendix 12).

The task was completed within 20 minutes on average. For this exercise I limited the number

of images to 21 because I did not want the matrix to become too cluttered and my aim was to

be able to see the groupings of images (Figures 9 and 10).

Homepage

Logo/Identity

Colours

Text (font, style)

Menu bar/Menu options

Sale/Special offers/Multi buy discounts

Buttons (button graphics, size, colour, text, texture)

Links below the fold

Browse/Search

Products categories are meaningful

Items in a row

Images sharpness

Product information page

Price tags

Select

Product information (image and text)

Sizing and stock availability

Out of stock messages

Colour pieces (samples)

Examine

Images (size quality) -> zooming, rotating, dragging

Auto-zoom

Multiple image views per product

34

Basket

View items in basket

Checkout

Structure of the checkout process

Figure 9 – Main steps of the customer journey

as observed in the first part of the study

Figure 10 – Emotional reaction scale

In the next task participants were shown the six main stages of the customer journey (Figure 9)

and were asked to describe their feelings about the shown screen-shots on scales with

semantic labels (bipolar adjectives were used at the end points of the scales, Appendix 13).

This task took around 20 minutes on average to perform.

Each participant was handed with a copy of the scales and were given a bit of time to

familiarize themselves with it before showing them the designs I wanted feedback on.

Then participants were shown the designs and explained its purpose; foヴ e┝aﾏple さYouげ┗e just conducted a search for a dress, and are presented with this pageざ. The ヴeasoﾐ foヴ this ┘as that

opinions can change depending on the purpose of the design. Then participants were asked to

complete their scales individually. After the sessions, all of the paヴtiIipaﾐtsげヴespoﾐses were

plot on a single scale for each design to identify any patterns or dissimilarities (Appendix 13).

I also wanted to make sure that my scales had no obvious order and that the order of the

extremes varied so that I didﾐげt have all positive on one side and all negatives on the other side

of the scale. This was done in order to prevent participants from blindly completing the scales.

I also wanted to けfoヴIeげ aﾐ opiﾐioﾐ on participants; therefore I removed the neutral option and

used a 4 point scale.

35

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

different designed fashion website both in terms of aesthetics and usability allowing

participants to reflect feelings and thoughts about these. Participants were asked to compare

the two website designs as well as to report strengths and weaknesses of each website. My

intention was to find out how the two websites were perceived against each other.

Participants were asked to rate the websites and to report the best and the worst things about

each website. Because a lot of fashion websites focus on showing more and more features that

attract attention, rather than ensuring that existing features work really well (e.g. sorting,

viewing, stock availability, etc.), the answers gave me a better understanding of what is most

important for them and what is causing major frustrations and how existing features can be

improved.

The interviews lasted about an hour on average and within this part of the study I gained a

large amount of quantitative as well as qualitative data. In the next chapter I will demonstrate

the main findings of the method used here. After completed the analysis of the second part of

the study I have created two different styled and designed paper prototypes of two fashion

websites (Appendix 14) Hased oﾐ paヴtiIipaﾐtsげ feedHaIks fヴoﾏ the seIoﾐd ヴouﾐd iﾐteヴ┗ie┘s. These paper prototypes were tested in a focus group setting with two participants to gain

reflection and reiteration of the findings so far.

Part 3 - Focus Group Interview With Paper Prototypes

For the third round interviews I have created two different style paper prototypes (Appendix

14ぶ Hased oﾐ paヴtiIipaﾐtsげ feedHaIks fヴoﾏ the seIoﾐd ヴouﾐd iﾐteヴ┗ie┘s. The two designs

ヴefleIted paヴtiIipaﾐtsげ feedHaIks aﾐd ┘eヴe Iヴeated to please their reported feelings and

thoughts of the previously tested websites. Both designs had the same branding but one had a

minimalistic mainly black and white design and the other one had a colourful scheme (Figure

11).

My intention with the focus group interview was to depict more knowledge about the purpose

of colours and the importance of the overall design and aesthetics in the customer journey

process. The navigation systems, the product information pages as well as the shopping basket

and checkout pages were all taken from the real websites but were mixed in with my own

design features. I have created a website that was colourful and had the navigation system of

French Connection, the website that was preferred by 80% of the participants in the previous

part of the study. The other design was created by taking the minimalistic design of French

Connection and was paired ┘ith Whistlesげ unconventional navigation system. Both paper

prototypes displayed the same dresses and price tags were concealed to make sure they do

ﾐot Hias paヴtiIipaﾐtsげ aﾐs┘eヴs.

36

Figure 11 – Paper prototypes of fashion websites

The interviews took place in a focus group format. Both contestants fit the original profile of

participants. Participants were taken through the customer journey by showing them each

step on a printed screen shot and were asked to explain their initial impressions about the two

designs. The interview took about an hour and the session was recorded by iPhone (Appendix

15). The purpose of this part of the study was to re-iteration of the findings regarding fashion

┘eHsitesげ aesthetiIs aﾐd usaHilit┞ iﾐヴelatioﾐ to the Iustoﾏeヴ jouヴﾐe┞ that ヴeﾏaiﾐs the Ieﾐtヴal framework of this study.

Part 4 - Mapping the customer journey

I have collected both qualitative and quantitative data through previously explained methods.

My ultimate aim in this study is to set up the customer journey that reflects the roles and

effects of the aesthetic artefacts in relation to usability and user experience.

I started the mapping process of the customer journey by using frequently mentioned words

and statements by customers. At this stage I was aiming to have about six levels corresponding

to the results I got through the card sorting exercise. I used the previously created personas

and storyboards to help the initial process mapping. I looked at all the evidence from the

previous interviews and testing methods and tried to write down the journey like a story from

the Iustoﾏeヴsげ peヴspeIti┗e. The earlier created storyboard also helped with this.

Then I gathered all the different aesthetic elements from the reported evidence and tried to

map them on the customer journey plan. For the purpose of this project I call them touch-

points, but I am aware that traditionally touch-points are meant in a different way (i.e.

different types of channels that customers use to interact with the system, for example offline

or online channels). These eleﾏeﾐts ┘eヴe theﾐヴated aIIoヴdiﾐg to paヴtiIipaﾐtsげ feedHaIks

37

whether they were considered as drivers or draw-backs throughout their journeys. This was

done on both the aesthetics and the usability dimension.

On the other hand I also wanted to map the stress points and for this I have gathered all the

complaint codes and examined where and why participants reported frustration or

dissatisfaction during their journeys on the fashion websites. Both the aesthetics and the

usability dimensions were taken into consideration when identifying the potential problems

and obstructions within the customer journey.

Emotional responses were also taken into consideration when building the customer journey.

PaヴtiIipaﾐtsげ e┝peItatioﾐs aﾐd eﾏotioﾐ le┗els ┘eヴe depiIted oﾐ the ﾏap aﾐd I ┘aﾐted to ﾏake suヴe that the Iustoﾏeヴ jouヴﾐe┞ ﾏap is ┘ヴitteﾐ fヴoﾏ the Iustoﾏeヴげs peヴspeItive with the

language they used themselves. For this I have used and re-used the recorded sessions with

participants and made sure that their reactions, feelings and thoughts are plotted on the

customer journey map.

I am aware that most customer journeys are unlikely to be a linear process since customers

take different steps but the flow of the journey is generic, that starts at the homepage and

finishes at the checkout page. The map created will work for some but may not work for

others; therefore I tried to be as flexible as possible to create an experience map that is

adaptable by most fashion websites. I ended up with a wobbly line across the journey that

shows the areas of interests from aesthetics point of view and also from usability point of view.

Chapter 4 – Results

Results – Heuristic Evaluation

The purpose of the pre-test interview ┘as to get useヴsげ e┝peItatioﾐs aﾐd to uﾐdeヴstaﾐd ┘hat users think about their experience on the website. The detailed summary of the outcome can

be seen in Appendices 2, 4, 5 and 6.

When participants were asked how they compared the online and the offline shopping

experience they all associated online shopping with convenience. But when they were asked to

describe the offline shopping experience it was considered to be leisure by half of the

participants while the other half considered it a time-consuming activity.

38

PaヴtiIipaﾐtsげﾏost mentioned words associated with online shopping comprised: convenience,

speed, ease and sale (Figure 12). Associated feelings to online shopping included: satisfaction,

comfort (speed, mobility), excitement, happiness, guilt and vulnerability (Figure 12).

Figure 12 – Words and feelings associated with online clothes shopping

All participants reported different ways of browsing and selecting fashion items online. These

customer journeys included tracking down a previously seen item on the internet, using

Google to find the best prices, browsing on the internet to get inspiration, browsing by filtering

and sorting and buying only from trusted websites and brands.

When participants were asked to describe their favourite fashion websites the following

IhaヴaIteヴistiIs ┘eヴe ﾏeﾐtioﾐed: さit is aspiヴatioﾐalざ, ざit provides long-teヴﾏ fashioﾐざ, ざit is diffeヴeﾐt fヴoﾏ the ヴestざ, さpヴo┗ides a gヴeat seleItioﾐ of desigﾐeヴsざ, さit is eas┞ to ﾐa┗igateざ, さit has a siﾏple desigﾐざ. So the most important features mentioned were: selection, quality and

simple and easy-to-use design.

All participants agreed that the ┘eHsiteげs desigﾐ Iould affeIt the purchase on a fashion

website. Participants associated zooming, navigation, trust and security with good design.

The most important functional features of a fashion website were considered to be the

zooming, the quality of the images, the navigation system, and the information provided about

the clothes as well as the checkout and return process and information, the search and filtering

options and security (Figure 13).

39

Figure 13 – Most important features of fashion

websites as reported by participants

Favourite fashion website services included: 'You might also like' and 'Complete the look'

features, 3D views, PayPal, efficient checkout process, Layout, Menu structure, Navigation,

Categories, Zooming, Stock levels, Colour displays.

After the initial interviews participants were introduced the websites (Appendix 3) and were

asked to browse one website at a time and to think out loud about how they felt about the

design and usability. M┞ aiﾏ ┘as to ヴeIoヴd paヴtiIipaﾐtsげ fiヴst iﾏpヴessioﾐs ┘heﾐ the┞ iﾐteヴacted

with the websites as well as recording their user experiences as they flowed along their

personal online journeys. Contestants were also given a directed search task, that consisted of

searching and finding a specific type of dress and reporting back during their journey which

aesthetic elements they liked or disliked and why and also to explain how they rated those

elements. The summary of the results for each website are highlighted in the table below:

40

Figure 14

After the interviews participants were presented with the heuristic evaluation checklist and

were asked to score each heuristics on a Likert-scale (1-Disagree and 5-Agree). Each participant

was asked to rate 6 different websites and the order of the websites varied to avoid any

ordering effects. My aim was to test three dimensions; usability, aesthetics and user

experience. The results were then aggregated and copied into an Excel file (Appendix 4) and

the results are explained below (Figure 15).

41

Figure 15 – Results of the Heuristic Evaluations

At this point my aim was to get a quick & dirty estimate about the perception of the websites,

so calculations included basic mathematical formulas; first the points given for each heuristic

within a dimension were added up, then the total sum of the dimension was taken into

consideration for the final results.

The usability dimension had six heuristics; Ease of Use, Convenience, Readability, Consistency,

Navigability and Simplicity. The three best rated websites in terms of perceived usability were:

French Connection (85%), Ted Baker (77%) and Reiss (76%).

Results for usability dimension are:

1. French Connection = 153 (85%)

2. Ted Baker = 138 (77%)

3. Reiss = 137 (76%)

4. Whistles = 136 (76%)

5. Comptoir des Cotonniers = 99 (55%)

6. Jaeger = 96 (53%)

Aesthetics dimension had eleven heuristics; Use of Colour, Balance, Visual layout, Style, Originality, Unity, Clarity, Order, Beauty, Special effects and Images. The three best rated websites in terms of perceived aesthetics are: Whistles (69%), Reiss (67%) and French Connection (64%).

Results for aesthetics dimension are:

1. Whistles = 250 (69%)

2. Reiss = 240 (67%)


4. Ted Baker = 233 (65%)


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%)



6. Jaeger = 81 (45%)

42

Overall experience was rated: Reiss (67%) and second place for French Connection and

Whistles which got 19 points (63%) respectively.

Results for overall experience dimension are:

1. Reiss = 20 (67%)


2. Whistles = 19 (63%)

4. Ted Baker = 18 (60%)


6. Jaeger = 13 (43%)

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

summary we can say that in terms of usability and user experience the three most favoured

websites were: French Connection, Whistles and Ted Baker. In terms of aesthetics the three

best rated websites were: Whistles, Reiss and Ted Baker.

Figure 16 – Spider chart showing the aggregated

results of the heuristic evaluation

Based on the results of the heuristic evaluation as well as the interviews analysis the two best

rated websites were chosen for further analysis. These were Whistles and French Connection

based on the aggregated results (Figures 16 and 17). In the next phases of the study I will focus

on these two websites to analyse further the aesthetic elements and the perceived usability as

well as to focus on capturing how these components affect the customer journey.

43

Figure 17

These two websites are actually quite different in terms of design and navigation structure. It is

Whistleげs website that has the most unusual layout as it offers a secondary navigation system

right in the middle of the main content area and fills far more space on its homepage than

French Connection. Whistle has a unique design. No scrolling is required on its homepage and

the main navigation system is at the top centre of the page (Figure 18). The sub-categories are

presented spread out on the main screen with a few models as examples from each sub-

category. The website has a nice movement when sub-categories are selected with the models

sliding in the screen one after the other. There are seven models in one row and the page has

white background (Figure 19).

Figure 18

Figure 19

44

French Connection website received the highest score for usability, but in terms of aesthetics it

only got the third place and only made it to the fifth place for user experience mainly because

users reported it to be too white and too simple. Still the website was rated second best in

terms of overall user experience. French Connection has a minimalistic design and it is built

upon white background with grey text aﾐd a ヴed け“aleげﾏeﾐu iteﾏ in the main menu (Figures 20

and 21). FヴeﾐIh CoﾐﾐeItioﾐげs ┗eヴtiIal la┞out ヴeduIes the ﾏaiﾐ Ioﾐteﾐtげs spaIe oﾐ the sIヴeeﾐ used up by the navigation system which was developed to have a drop-down menu that

reveals its secondary navigation system. French Connection displays only three models in a

row, but images of these are slightly bigger thaﾐ oﾐ Whistlesげ pages.

Figure 20

Figure 21

In the next part of the study I will be looking at the most important features mentioned by

participants during the heuristic evaluations and then in the second part asking them to rate

those elements by various measurements.

45

Results – Customer Journey

Iﾐ oヴdeヴ to gaiﾐ aﾐ iﾐsight to the Iustoﾏeヴげs jouヴﾐe┞ that paヴtiIipaﾐts take oﾐ fashioﾐ ┘eHsites, I was observing participants throughout the session and taking notes (Appendix 5 and 6) of

how they used the fashion websites and how they navigated on their own; which path they

took and which buttons they used as well as what they reported verbally (e.g. instant

comments and reactions to the aesthetics or usability features). Based on the observations and

think-a-loud protocols the following customer journey was observed:

Figure 22 – Typical customer journey observed during the heuristic evaluation sessions

After the interviews and analysis of the data personas and a storyboard were created based on

the paヴtiIipaﾐtsげ Heha┗iouヴs aﾐd reported experiences (Appendix 7).

Results - User testing

The second part of the study consisted of an in-depth evaluation based on user testing as well

as focusing more on the aesthetic elements of the websites and evaluating them within the

customer journey framework by using commercial methods. User performance data such as

card sorting, emotional reaction scales and emotional bi-polar semantic scales provided this

part of the research with mainly quantitative data. The purpose of using these methods was to

get an insight about user experience and to get an understanding of which design elements of

the websites gain attention and which features are not found engaging. Ten women in total, all

aged between 30 and 40 years old, participated in the second part of the study.

Pre-test interviews

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

46

collection websites (e.g. ASOS, Net-a-Porter, Brand Alley, etc.) to buy clothes from than

individual brands websites. Reasons for choosing a specific website included; receiving email

about sales or new collections, looking for a particular brand or item that is only sold by the

selected website, security (being able to pay with PayPal), variety and selection as well as free

delivery and good usability were all listed as reasons for visiting fashion websites.

When participants were asked to describe their favourite website and to explain what they

liked about it half of the participants admitted that the colours were appealing to them as well

as that they found the website easy-to-use. About a third reported that good navigation is

essential for them in terms of website design and also that good zooming facility is a must-

have requirement and that they like to see the clothes worn by models and in context.

PaヴtiIipaﾐtsげ fa┗ouヴite desigﾐ featuヴes iﾐIluded: simplicity, user-friendliness, intuitive use,

interactivity and having a fashion magazine look (Figure 23).

Figure 23 – Favourite design features

reported by participants

Participants also reported that fashion websites should not have cluttered design or take too

long to load or さ┘heﾐ it’s just ﾐot Ileaヴ ┘hat it doesざ. ‘espoﾐdeﾐts also added that too

conventional and standard designs are boring and that too loud music was irritating for them.

It was revealed from the interviews that participantsげ ┗isual atteﾐtioﾐ Het┘eeﾐ the ┘eHsite aﾐd the items it was selling was on average focusing ンヰ% oﾐ the ┘eHsiteげs desigﾐ aﾐd Αヰ% oﾐ the clothes and products it was selling. Also discovered from the interview sessions that all

participants preferred to have a boring design with good usability rather than the other way

round. Furthermore, they all admitted that they would prefer to buy a dress from the website

which was the easiest and quickest to use.

All participants acknowledged that the most exciting part of their journey on the fashion

websites was the step when they interacted with the visuals of the dress: observing it,

e┝aﾏiﾐiﾐg it aﾐd ┗isualisiﾐg it: さ┘hat ┞ou goiﾐg to do ┘ith it, ho┘ ┞ou'ヴe goiﾐg to ┘eaヴ it…ざ.

47

The most boring part was considered the end of the journey; when participants had to fill out

the personal information and payment details. One participant said that for her the most

boring part was when the pages were loading and she had to wait.

Aesthetically pleasing design was described by participants as a clean design without too much

text and that had nice colours and was not too cluttered. Showing products in context was also

considered as an important aesthetic feature. It is interesting to note that functional features

were also mentioned together with the aesthetic elements (they seem to be inseparable

characteristics of aesthetics), these included; good search facility, not too much scrolling,

さAnticipates what I wantざ.

Best colours for fashion websites were considered to be black and white by half of the

respondents, while the other half preferred to see bright and primary colours on fashion

websites. Other clarifications regarding the colours included; having white background allows

better visual on the dress, it should have a contemporary and minimalistic overall look, and it

was explained by participants that context is important to make the pages more personal.

Participants said that the colours had to be consistent on all pages and that generally they all

wanted to see the colours spread out throughout the website.

All participants agreed that showing clothes in context was more appealing than just showing

the product on its own. When it comes to examining the dress half of the respondents

reported that they preferred to view the clothes on a model, others mentioned having

different views and good zooming enhances the e┝peヴieﾐIe aﾐd oﾐe peヴsoﾐ said that さI want

to see the items combined with other items (look-book type of presentation)さ.

Additional information about the clothes on fashion websites that participants were looking

for included; materials information, description of the clothes (e.g. the length of a dress) as

┘ell as iﾐfoヴﾏatioﾐ as to さ┘heヴe to Hu┞ otheヴ iteﾏs, ﾐe┘ tヴeﾐds, iﾐfo aHout the desigﾐeヴ…ざ.

The interview revealed that people have many different ways of buying a dress online in

relation to their customer journey (e.g. which categories, filters they would use on the

website). But there are some patterns that can be observed. Based oﾐ paヴtiIipaﾐtsげ aﾐs┘eヴs there are two different ways of surfing on fashion websites depending on the purpose of the

visit; browsing without any specific ideas (i.e. looking for inspirations) and looking for a specific

item/brand ふさhuntingざ). It is interesting that based on the commentary of participants as well

as observations there is no difference between those two scenarios in the use of the website

and participants seem to follow similar ways; they would select from the main navigation

ﾏeﾐu a Iategoヴ┞ aﾐd Hヴo┘se aﾏoﾐgst the ヴesults iﾐ that Iategoヴ┞ ふe.g. けNe┘ iﾐげ, けBlousesげ, け“aleげ, etI.ぶ

48

Card sorting

After the initial interviews participants were introduced to the card sorting task to re-iterate

the customer journey observed during the heuristic evaluations. The flash cards contained the

previously observed 17 steps of the customer journey. The card sorting exercise (Figure 24)

revealed that women usually take eleven major steps on fashion websites from the homepage

to the checkout page (excluding log-in and payment pages). The steps below were taken from

the aggregated results that were recorded in an Excel file after each interview (Appendix 6).

1. Homepage

2. Women

3. Dresses

4. Dress type

5. View all

6. Scan through dresses

7. Dress selected

8. Examine dress

9. Checking additional information about the dress

10. Basket view

11. Checkout process

Figure 24 – Participants completing the card sorting exercise

Overview of the aesthetic elements on fashion websites

Homepage

The homepage and the overall look of the French Connection website were perceived by

participants as having the better contrast (Figures 25, 26). French Connection is built upon

white background and texts are dark grey, light grey, red and highlighted text is black to

maximise contrast for selected links. Although overall the white background was preferred

49

soﾏe paヴtiIipaﾐts ヴeﾏaヴked that too ﾏuIh ┘hite さhuヴt theiヴ e┞esざ and that it should have a

softer white effect.

On the bipolar semantic scale participants rated the French Connection homepage brighter

thaﾐ the Whistles hoﾏepage ふiﾐ spite of the faIt that FヴeﾐIh CoﾐﾐeItioﾐげs hoﾏepage is ﾏaiﾐl┞ white, grey and brown, whilst Whistlesげ is Hlue, piﾐk, ┞ello┘ aﾐd HlaIkぶ. Also, the French

CoﾐﾐeItioﾐ hoﾏepage ┘as ヴated pヴettieヴ thaﾐ Whistles. Whistlesげ hoﾏepage ┘as ヴated messier (1.7 vs 2.7) than the French Connection homepage which was also rated more

instinctive than Whistles.

Figure 25 - Colours (background and images)

Whistles on the other hand, uses black background and white text which was considered to be

a bad contrast. The Whistles logo and company identity was rated higher quality but less

exciting than French CoﾐﾐeItioﾐげs oﾐe ふFigures 25 and 26).

Figure 26 - Logo/Identity

Colours on the homepage were significantly better rated for French Connection then Whistles,

which is quite surprising given that the French Connection homepage is mainly black and white

with some grey and brown tones whilst the Whistles website has some primary colours (e.g.

yellow, blue, pink) on its black background (Figure 25).

Text and font styles were better rated for French Connection in terms of aesthetics but worse

in terms of usability because of the poor contrast reported earlier (grey text on white

background).

Figure 27 - Text (font, style)

Whistlesげ liﾐks Helo┘ the fold ふFigure 28ぶヴeIei┗ed Hetteヴ sIoヴes thaﾐ FヴeﾐIh CoﾐﾐeItioﾐげs foヴ both aesthetics and usability. It is interesting that so far the white background was preferred

50

but with the links below the fold area participants preferred the black background and white

text. The other reason participants gave me was that it looks brighter since it has more colours

than French Connection grey over white below the fold design. The only criticism that Whistles

received was that the texts are over the images which was rated as bad usability.

Figure 28 - Links below the fold

Button graphics received the same scores foヴ aesthetiIs Hut foヴ usaHilit┞ FヴeﾐIh CoﾐﾐeItioﾐげs ヴouﾐd shaped Huttoﾐs ヴeIei┗ed ﾏuIh Hetteヴヴates thaﾐ Whistlesげ HlaIk sケuaヴe shaped Huttoﾐs (Figure 29).

Whistlesげ Huttoﾐs FヴeﾐIh CoﾐﾐeItioﾐげs Huttoﾐs

Figure 29 - Buttons

In order to measure the homepage on the emotional bi-polar semantic scale I have created

screenshots of each website (homepage, navigation, product view, zooming, basket view and

checkout view) and participants were asked to describe their feelings about the pages on

scales with semantic labels where bipolar adjectives were used at the end points of the scales

(Appendix 13). As for the results; where ratings are located closer to each other it means that

the aesthetic perceptions for the two design elements were shared amongst participants.

When there is a major difference between the ratings, it indicates that there was an

iﾐIoﾐsisteﾐI┞ Het┘eeﾐ paヴtiIipaﾐtげs aesthetiI peヴIeptioﾐs aﾐd that theiヴ ┗ie┘s ┗aヴied aﾐd so did their feelings about the visual appearance. The results are explained within each section of

the customer journey.

Figure 30 shows the comparison of the two homepages. The homepage of French Connection

┘as Ioﾐsideヴed to He Hヴighteヴ thaﾐ Whistles iﾐ spite of the faIt that FヴeﾐIh CoﾐﾐeItioﾐげs homepage is ﾏaiﾐl┞ ┘hite, gヴe┞ aﾐd Hヴo┘ﾐ, ┘hilst Whistlesげ is Hlue, piﾐk, ┞ello┘ aﾐd HlaIk. The French Connection homepage was rated friendlier, prettier and also more instinctive than

Whistlesげ. The two most visible differences between the two homepages is that Whistlesげ homepage was rated much more discouragiﾐg thaﾐ FヴeﾐIh CoﾐﾐeItioﾐげs hoﾏepage, aﾐd the Whistles homepage was rated much messier than the French Connection homepage.

51

French Connection: Whistles:

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

Navigation System

Fashioﾐ ┘eHsites ﾏaiﾐﾐa┗igatioﾐ s┞steﾏ Ioﾐtaiﾐs liﾐks to the ﾏaiﾐ seItioﾐs ふe.g. Woﾏeﾐげs, Meﾐげs, Childヴeﾐ, “ale, etI.ぶ of the ┘eHsite. A navigation system contains text in order to help

users to find their ways on the website; French Connection uses bold text to indicate that the

link selected is clickable and Whistles underlines the links when users point the mouse to the

link. The examples below (Figures 31, 32) use text differently; French Connection displays links

vertically whilst Whistles lists links of the primary navigation section horizontally. The effect is

simple and minimalistic in both cases, but the contrasts are different.

Figure 31 - Whistles’ ﾏaiﾐﾐa┗igatioﾐ system

Figure 32 - French CoﾐﾐeItioﾐ’s ﾏaiﾐﾐa┗igatioﾐ system

52

While French Connection uses different font styles and sizes to indicate importance and

location to indicate the hierarchies of the links and content, Whistles does not visually

separate items in the main and secondary navigation system. This was one of the reasons for

the poor usability rate given to Whistles.

French Connection also developed a drop-down menu to reveal its secondary navigation

system. This drop-down menu appears on mouse-over, that is, when a user positions his/her

cursor over an object or link without having to click on anything. While drop-down menus can

be very effective, they can propose some usability problems in the way that they can hide

content from the users when the user mouses-over it. Figure 33 the yellow rectangle shows

Jaegeヴげs dヴop-down menu which is covering a significant part of the main content page and the

secondary navigation system:

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

French Connectionげs ┗eヴtiIal la┞out ヴeduIes the ﾏaiﾐ Ioﾐteﾐtげs spaIe oﾐ the sIヴeeﾐ used up H┞ the navigation system, while the horizontal layout is hardly visible oﾐ Whistlesげ website

because it is using the same colours and fonts and the same small text as links appear directly

below the primary section header.

There was an agreement among participants that the location and the look of any local

navigation system should be consistent across all content pages, and should be similar or even

identical to the location and the look of the main navigation system found on the home page.

Both Whistlesげ aﾐd FヴeﾐIh CoﾐﾐeItioﾐげs primary navigations are at the top of the homepage,

but the secondary navigation systems of the two websites are different. The examples below

show these different navigation systems; a conventional one from French Connection and a

more exclusive one from Whistles (Figures 34, 35).

53

Figure 34 - FヴeﾐIh CoﾐﾐeItioﾐ’s seIoﾐdaヴ┞ ﾐa┗igatioﾐ

Figure 35 - Whistles’ secondary navigation

Whistlesげ visual representation of the secondary navigation system is using actual examples of

the sub-categories, as icons, in addition to the text, which provides users with appetizers of

pieces from a category.

The categorisation used to present the collection of clothes is also different on the two

websites. French Connection uses colour and size sub-categories, whilst Whistles categorises

the dresses based on occasions and types.

When participants were asked to compare the two websites French Connection website was

described as being more organized and to have better structure. It was also perceived as the

more user-fヴieﾐdl┞ ┘eHsite. This Iaﾐ He e┝plaiﾐed H┞ paヴtiIipaﾐtsげﾏeﾐtal ﾏodels ┘hiIh aヴe similar the conventional design, structure and navigation system that French Connection is

using. Participants did admit however that the Whistles website had the better contrast and

that it used more colours. Despite of having the better contrast, Whistles was perceived as a

messy and irritating website with inferior design than French Connection.

Metaphors

In human-computer interaction design metaphors are interactive elements, objects, or tools

that represent real-life experiences. The purpose of metaphors on websites is to help users to

interact with the system by providing them clues that are based on familiar concepts.

54

On fashion websites we can refer to menus as the shelves of a wardrobe: we are presented

with different items on each shelf and in each drawer. But the most popular metaphor is

pヴoHaHl┞ the さshoppiﾐg Iaヴtざ oﾐe, which is the space where online customers store selected

products that they may later purchase. In real life it serves the purpose of carrying around

products selected from the shelves in a shop.

Figure 36 – Add to basket buttons

French Connectioﾐ uses the teヴﾏさHagざ ┘hile Whistles uses さHasketざ aﾐd also has aﾐさAdd to Wish Listざ Huttoﾐ (Figure 36). Wheﾐ paヴtiIipaﾐts seleIted the さAdd to Wish Listざ Huttoﾐ the┞ were asked to log in or to create an account. This was considered on several occasions as a

negative feature and some participants got even angry and frustrated by the fact that they

were asked for personal data because they considered it as an unnecessary and unjustified

step. As oﾐe paヴtiIipaﾐt e┝plaiﾐed this ┘as a さtヴust issueざ foヴ heヴ aﾐd she reported that she

would immediately leave the website if this would happen to her.

As participants want a quick and easy-to-use website, e-commerce companies should consider

and use a metaphor only if it fits the task and makes the website easier to use.

The Huttoﾐs used foヴ zooﾏiﾐg, oヴ the さmagnifier glassざﾏetaphoヴ, is also diffeヴeﾐt oﾐ the t┘o websites. French Connection only uses text and two little black arrows to show the alternative

views, but the text suggest different thing than the buttons do (Figure 37). On the Whistles

website in order to operate the metaphor, users have to click on the arrow buttons to change

the view of the clothes and on the magnifier glass to expand the image. The magnifier glass has

a さ+ざ sigﾐ iﾐ it ┘hiIh also suggest users that it will expand and not minimize the garment.

Figure 37 – Zooming buttons

Out of stock messages are again differently presented to customers (Figure 38); Whistles

strikes through unavailable sizes but on the French Connection website it is shown with a cross

instead of a circle. Both worked well in terms of aesthetics as participants rated them equally,

but the latter solution received higher scores for usability and overall it was the preferred

design and according to participants it was straight forward and obvious. However, Whistlesげ services were rated higher than French Connection. Two participants out of ten remarked that

they found the telephone number provided next to the sizing chart very useful.

55

Figure 38 – Out of stock messages

Examining the product and zooming

Half of the participants preferred the dress to be shown on a model whereas the other half

preferred the dress to be presented in different angles, on and off the model and also

combined with other products (e.g., けLookHookげ st┞leぶ. Those ┘ho pヴefeヴヴed to see the dヴess worn by a model acknowledged that they can better imagine and visualize the real dress

because they can understand the dimensions of the dress better. There were participants who

Ilaiﾏed that さe┗eヴ┞thiﾐg looks good oﾐ a ﾏodelざ aﾐd foヴ theﾏ it ┘as ﾏoヴe iﾏpoヴtaﾐt the

context and different background colours (not only white). As the reader can see from Figure

39, both websites have white background.

Figure 39 – Auto-zooming feature

For each item Whistles offers four different views, three different angles and one close view

(Figure 40). This is done consistently with all their products together with the magnifier glass

which offers a full screen close view of the selected image. French Connection on the other

hand offers three model views and two single views of the product. Furthermore, they also

show the different available colours in single view (not shown on a model).

56

Figure 40 – Alternative product views

The feedback from participants was that in spite of the fact that French Connection showed

ﾏoヴe ┗aヴiatioﾐs of the Ilothes, Whistlesげ displa┞s ┘eヴe Hetteヴヴated foヴ usaHilit┞, HeIause it had better contrasts and the screen was clearer. Participants also explained that the reason they

gave better usability for Whistles was the fact that French Connection was showing the jumper

underneath a leather jacket that hindered the real view of the product.

Product Information

The product information should be easily accessible and should provide important and useful

information about the product. Figure 41 shows how the two websites dealt with this part of

their online space.

Figure 41 – Product information page

Participants rated the two pages similarly (Appendix 13); that means that both presentation

received impartial scores (0) for aesthetics and received the equal scores for usability (1). Also,

both websites received positive comments for having recommendations with the dress

ふさCoﾏplete the lookざ oﾐ Whistles aﾐd さWe also lo┗eざ oﾐ FヴeﾐIh CoﾐﾐeItioﾐぶ. As foヴ the description participants explained that they needed useful information and not codes, like

“KUげs aﾐd pヴoduIt Iodes, aﾐd that the desIヴiptioﾐ of the dヴess should He shoヴt aﾐd IoﾐIise aﾐd long marketing publicity was not necessary on these pages. Half of the participants said that it

is very important to point out the size of the dress shown on the model, because they can then

better relate to the real measurements.

57

Shopping Basket

Whistlesげs shoppiﾐg Hasket page received far better scores than French Connection. The main

reasons for this were that Whistles had more useful information displayed on the page and

that participants were able to see the process. They said that the delivery information was

clearly explained and that it was presented in a more intuitive and streamlined way. The two

shopping basket page can be seen below on Figure 42.

Figure 42 – Shopping basket page

Checkout

An interesting turn as French Connection received far better scores for its checkout page than

Whistles. The reason again was that the information was clearer the way it was presented and

that paヴtiIipaﾐts ┘eヴe aHle to see ┘hat is goiﾐg to happeﾐﾐe┝t, ┘heヴeas Whistlesげ ┘eHsite was considered too crowded and particpants reported that there were too many lines that

required filling out.

Figure 43 – Checkout pages

As for the results of the emotional bi-polar semantic scale it shows that most ratings are

concentrated in the middle (Appendix 13) which means that there is indifference to the visual

design and aesthetics as both websites received very similar ratings. However, as the study

shows people like more the site for its functionality and usability rather than for how it looks.

Although Whistles website was perceived constantly throughout the journey as more

sophisticated, only 20% of participants would recommend this website to others.

58

Emotional reaction scale

For this exercise participants were given two flashcards at the same time with the same design

element from each website. They were asked to place the cards on the axis of the aesthetics-

usability scale. I then noted the point of the cards and put the data in Excel (Appendix 12). I

averaged the results and then added the negative axis (e.g. boring) to the positive axis (e.g.

exciting) to get the accumulated results for both the aesthetics and usability dimensions. The

results are presented in Appendix 12 and the aggregated results were plotted on an Excel chart

(Figure 44).

Figure 44

We can see from the results that usability scores were higher than the scores given for

aesthetics. Participants reported that they found it difficult to distract their attention from the

usability aspect and only judge the image based on aesthetic characteristics. They found it

quite hard to separate the two concepts and I often had to remind them to think about the

image they were looking simply from aesthetics point of view.

Also, all participants placed the text, price tag, menu bar cards on the low quality-boring

quarter and most product image cards were placed at the high quality exciting quarter. They

are either not attracted to these elements (texts and fonts) or they found these particular font

types boring and low quality. They seemed to be more interested in the content rather than in

the way it was presented to them.

The two websites evaluated were selected based on the results of the heuristic evaluations in

the first part of the study: being the best rated in aesthetics and the best rated in usability.

These designs had very different schemes and navigation systems and the below figure (Figure

45) shows how the different design elements were perceived on the usability and aesthetics

axis. As the results show that usability has a more important role in the customer journey, but

there also has to be a good balance between aesthetics and usability to create a better user

experience and to make the journey enjoyable.

59

Figure 45 – Perception of aesthetics and

usability on two fashion websites

Interviews after the test

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

different designed fashion website both in terms of aesthetics and usability allowing

participants to reflect feelings and thoughts about these. Participants were asked to compare

the two website designs as well as to report strengths and weaknesses of each website. My

intention was to find out how the two websites were perceived against each other.

The post-test interview revealed that 80% of the respondents would recommend French

Connection website to a friend, because for them it had a better style and images and it was

clearer and easier to use. They also said that French Connection website was better structured

and that its overall layout was better, as well as that it was more functional and had better

usability. The other 20% who would recommend Whistles website to a friend, argued that: さI

prefer that style, it fits me more and because I found that one the more aesthetically pleasingざ,

and さThe branding is better, it is more inviting and more excitingざ.

The French Connection was described by participants as a simplistic, easy-to-use, useful,

cutting edge website while Whistles was described as slick, contemporary, friendly and exciting

website. As participants found it very difficult to distract the aesthetic qualities from the

functional qualities it is interesting to see that French Connection received more functional

adjectives while Whistles received more aesthetic adjectives.

Usability

Aesthetics

60

During the interview participants were asked to compare the two websites against each other.

The intent of this question was to investigate the strengths and weaknesses of the websites.

French Connection was described as having too much white and that colours were boring on

its website, but it was recognized as the more organized and clearer design with better

structure, functionality and with a more minimalistic and fresh look. Whistles received

controversial statements. It was described as having the better contrast and better colour

choices with better services by most participants. Those ┘ho liked Whistlesげ desigﾐ o┗eヴ FヴeﾐIh CoﾐﾐeItioﾐげs desigﾐ said that it ┘as ﾏoヴe sophistiIated aﾐd ﾏoヴe edg┞, ﾏoヴe aspirational and more appealing but they also admitted that it was not very functional. Those

who preferred the French Connection website described Whistles as old fashioned and messy.

When participants were asked to compare each website to a car, French Connection was

associated with Mini Cooper, BMW (2/10), Maserati, Fiat 500, Renault and Vauxhall (Figure

46).

Figure 46 – Associations of the French Connection website with cars

Whistles on the other hand was compared to Audi A3 and Audi Q5 (Figure 47). By asking

participants to compare the websites to a different product from a different domain (i.e.

analogical thinking) helps to better examine their perceptions of the websites.

Figure 47 – Associations of the Whistles website with cars

Most online shoppers are familiar with customer reviews and ratings so I wanted to ask my

participants to review the selected websites. I asked them to give an overall rating for the

website they preferred on a 10-point scale. Participants were also asked to explain why they

gave that score to the website. On average French Connection was rated 7.25 by the eight

participants who preferred that website. Whistles was rated 8.5 on average by the two

participants who preferred it over French Connection. FヴeﾐIh CoﾐﾐeItioﾐげs ┘eHsite ┘as

61

preferred by ﾏoヴe paヴtiIipaﾐts HeIause of its fuﾐItioﾐal featuヴes aﾐd usaHilit┞ Hut Whistlesげ website got better rates for its colours on the website. Bottom line is that usability is more

important than aesthetics but appealing aesthetics (i.e. colours) is also a desirable feature.

A lot of fashion websites focus on showing more and more features that attract attention,

rather than ensuring that existing features work really well (e.g. sorting, viewing, stock

availability, etc.). Asking what frustrates users is a good way to investigate how existing

features can be improved. Things that participants reported that they would improve on the

French Connection website are; contrasts (2/8), background colour, checkout (2/8), too much

information (2/8), homepage (2/8), zoomiﾐg, さI'd change the menu on the left…like Whistlesざ, design elements to be more consistent, and font style. On the Whistles website participants

reported that they would change the background colour (to yellow and sky blue) and they

would change the pop-up window to be suitable for mobile (iPhone) usage.

Results - Focus group interview with paper prototypes

For the third round interviews I have created two different style paper prototypes (Appendix

14ぶ Hased oﾐ paヴtiIipaﾐtsげ feedHaIks fヴoﾏ the seIoﾐd ヴound interviews. Both designs had the

same branding but one had a minimalistic mainly black and white design and the other one

had a colourful scheme (Figure 48). My intention was to expose more knowledge about the

purpose of colours and the importance of the overall design and aesthetics in the customer

journey process. The navigation systems, the product information pages as well as the

shopping basket and checkout pages were all taken from the real websites but mixed in with

my own design features. I have created a website that is colourful and had the navigation

system of French Connection, the website that was preferred by 80% of the participants in the

previous stage. The other design was created by taking the minimalistic design of French

Connection and paiヴ it ┘ith Whistlesげ e┝Ilusi┗e ﾐa┗igatioﾐ s┞steﾏ. Both papeヴ pヴotot┞pes displayed the same dresses and price tags were concealed to make sure they do not bias

paヴtiIipaﾐtsげ aﾐs┘eヴs.

Figure 48 – Homepage design of the paper prototypes

62

The colourful website looks like entering into a huge department store and having all sorts of

impulses; different brands, colours, smells, furniture all at the same time. Whereas the

minimalistic design is similar to a Sloan Street shopping experience; more white space and less

colourful impulses with the clothes in the centre of attention.

The interviews took place in a focus group format. Both contestants fit the original profile of

participants. The interview took about an hour and the session was recorded by iPhone

(Appendix 15).

First, participants were shown the two homepages and were asked to explain their initial

impressions about the two designs. Their answers revealed that something too crowded on the

hoﾏepage, like the けCoats & JaIketsげ Iategoヴ┞ oﾐ the colourful design would frustrate users

because it appears too messy for them and it is not obvious for them straight away what to do

with those images; whether to click on each of them or to click on the text to reveal the whole

collection of coats and jackets. However, they did like the different other categories on the

colourful homepage and that each had an image of a product from the category. It was

discovered that participants preferred to see the categories with illustrations on the homepage

rather than having images without links or text. The reason reported was that it was easier for

them to find what they needed on the colourful design because the categories were better

visible.

As for the more minimalistic design, one participant said that for her it was a similar

e┝peヴieﾐIe to the けCoats & JaIketsげ Iategoヴ┞ oﾐ the Iolouヴful desigﾐ, ヴepoヴted eaヴlieヴ, Hut iﾐ a larger scale. The other participant disagreed and explained that because the images were

relatively large and without text, her visual attention was focusing on the dresses rather than

on the menu items in the navigation system. This participant admitted that the website gave

the impression that it had not many categories, whereas the other one had a magazine look

and feel. This was interesting to hear because actually the navigation system of the

minimalistic design had more categories than the colourful design. It appears that the

ﾏiﾐiﾏalistiI desigﾐ aﾐd the laヴge iﾏages di┗eヴted the paヴtiIipaﾐtげs ┗isual atteﾐtioﾐ fヴoﾏ the navigation system. She also said that for her it appeared that the colourful website had more

products but for her this would mean that she would spend more time on the colourful

website to finally find something to buy. The same participant also admitted that for her the

minimalistic design implies higher quality clothes and a more designer look and feel than the

colourful homepage.

Aﾐotheヴ iﾐteヴestiﾐg aesthetiI eleﾏeﾐt oﾐ the hoﾏepage ┘as the け“aleげﾏeﾐu iteﾏ ┘ithiﾐ the main navigation. Both participants agreed that the け“aleげﾏeﾐu poiﾐt has aﾐ iﾏpoヴtaﾐt ヴole as they explained that they would check the clothes on sale first in order to secure a bargain on

the website. This has also been reported earlier in the previous stages of this research. The

colourful homepage has the け“aleげﾏeﾐu poiﾐt ┘ヴitteﾐ ┘ith ヴed te┝t ┘hile the otheヴﾏeﾐu iteﾏs aヴe daヴk gヴe┞; this solutioﾐ ┘as Hetteヴヴated thaﾐ the otheヴ oﾐe ┘hiIh didﾐげt ha┗e the け“aleげﾏeﾐu poiﾐt highlighted ┘ithiﾐ the ﾏaiﾐﾐa┗igatioﾐ.

63

Another important feature mentioned on the homepage was the delivery and returns

information and policy. Participants explained that these are important information and

depending on the intention of the visit on the website they would check it either at the very

beginning of the journey or at the very end. This is because they reported that if they are

browsing on the website without any explicit idea or intention to buy something, they would

check this information at the end of the journey or when they found an item that they decided

to buy. On the other hand, if they were looking for a specific item on the website with the

precise intention to buy it, they would first check the delivery and returns information early in

the journey to avoid any disappointment later (e.g. the company does not deliver to a specific

country).

Then participants were shown the navigation pages with the sub-categories and dresses

(Figure 49). The conventional left hand side secondary navigation system was rated better

amongst participants as one of them explained that for her it works better as she can pre-set

her filters (e.g. the correct size, a particular colour, the amount she wants to spend, etc.) and

this way she can avoid the disappointment that could happen after she would fall in love with a

dress which would turn out not to be available in her size.

Figure 49 – Navigation system of the two paper prototypes

The other important feedback was regarding the size and quality of the images. It was

acknowledged by participants that larger images are better when browsing. This has also been

identified in earlier stages.

On the product information page the participant who preferred the minimalistic design

explained that for her the minimalistic design was more appealing because it seemed more

realistic than the colourful one (Figure 50). She said that she could better believe to the

ﾏiﾐiﾏalistiI ┘eHsite as it sho┘s the dヴess さas siﾏple aﾐd ヴa┘ as it is iﾐヴealit┞, ┘heヴeas the otheヴ oﾐe seeﾏs like a dヴeaﾏざ. “he e┝plaiﾐed ﾏe that foヴ heヴ the ┘hite HaIkgヴouﾐd ┘oヴked

better when it came to examining the dress and zooming in and out, because the white

HaIkgヴouﾐd offeヴed a Hetteヴ Ioﾐtヴast aﾐd she Iould see the dヴess aﾐd さho┘ it looks iﾐヴealit┞ざ. She admitted that for her the white background provided better confidence and closer feel to

reality. She explained further that on the colourful website she felt that they are trying to sell

her the whole website and branding, whereas on the minimalistic design she had more

confidence that the dress observed does look and feel how it does in real life.

64

Figure 50 – Product view page on the paper prototypes

In the earlier stages of this research having white background when displaying clothes on

websites as well as when examining the clothes on the website has also been favoured by

participants.

Otheヴ aesthetiI eleﾏeﾐts suIh as the soIial ﾏedia Huttoﾐs aﾐd the さAdd to Hasketざ Huttoﾐs ヴeIei┗ed atteﾐtioﾐ. It ┘as adﾏitted H┞ paヴtiIipaﾐts that FaIeHookげs Like Huttoﾐ ┘as ┗eヴ┞ irritating as one of the participants explained that she hated the fact that the company selling

the clothes to her had the intention to encourage her to promote their product on Facebook

and she also added that she felt that this was a violation of her privacy. Other participants from

the earlier stages also reported concerns about the social network icons and their role when

buying clothes online. They all said that they do not understand the purpose and that they

Ioﾐsideヴed it as Heiﾐg さtoo ﾏuIhざ.

The otheヴ outstaﾐdiﾐg eleﾏeﾐt ┘as the さAdd to Basketざ Hutton. Both participants agreed that

the siﾐgle Huttoﾐ ┘ith the さAdd to Bagざ te┝t ┘as the Hetteヴ optioﾐ oﾐ the Iolouヴful ┘eHsite. It was implicit that it was a single button and it was described as being concrete about what

needed to be done with it. Whereas the other option on the minimalistic design was described

as ﾐot Heiﾐg stヴaight foヴ┘aヴd siﾐIe the te┝t さAdd to Basketざ ┘as ┘ヴitteﾐ iﾐ a loﾐg gヴeeﾐ rectangle box with a little arrow at the other end. Participants reported that they were not

sure what they needed to do here in order to make it work. Aesthetically it was considered

inferior because it implied that the usability was worse than the single button design.

At the checkout point (Figure 51) participants explained that security is of primary importance

and they both said that they would only pay with PayPal, especially if they had not have

bought anything from that website before.

65

Figure 51 – Checkout pages on the paper prototypes

Participants also revealed that their visual attention is on the price and seeking the next step in

order to buy the dress, rather than on the aesthetic elements on the webpage. This has also

been reported previously when participants explained that at this stage it is more about the

functionality and usability rather than aesthetics. Colours and impressions are not important in

this step of the customer journey as customers only focusing on completing the process and

finish the task of buying a dress online. Their attention is now on the information; shipping

costs, return policy, price, etc.

It ┘as also ヴe┗ealed that the さCoﾐtiﾐue to “hoppiﾐgざ Huttoﾐ has aﾐ iﾏpoヴtaﾐt ヴole heヴe. Participants also reported this in the earlier stages that they did not like it when they were

taken back to the home page and had to start the search from the very beginning. Instead they

preferred to be taken back to the last item seen to do what the button promised them to do;

continue shopping. The experience would be the same if someone in a supermarket after

placing an item in the shopping trolley would be taken back to the entrance door of the store.

After participants discussed all the screenshots of the customer journey steps and the

aesthetic elements found on these pages, they were asked which website they would

recommend to a friend. They both said that the colourful website was more appealing not only

because of the colours but also because it had a better usability and navigation system. They

said that despite of the fact that the homepage of the colourful design looked as if it was a

marketplace and perhaps too crowded, it was obvious what they had to do with it. Whereas

the otheヴ desigﾐ, the ﾏiﾐiﾏalistiI oﾐe, ┘as Ioﾐsideヴed to He さﾏess┞ざ HeIause oﾐ the hoﾏepage it ┘asﾐげt Ileaヴ foヴ theﾏ ┘heヴe to staヴt theiヴ jouヴﾐe┞. This ┘as iﾐteresting to hear as

in the first round interviews, that was the most commonly mentioned adjective for the

Whistles ┘eHsite, aﾐd the ﾏiﾐiﾏalistiI ┘eHsite had Whistlesげﾐa┗igatioﾐ s┞steﾏ aﾐd la┞out.

Results - Customer journey framework

Based on the findings from the previous interviews and methods I drew up the online

customer journey together with the aesthetic elements at each stage in relation to the website

usability (Appendix 16).

First the re-iterated steps of the customer journey were plotted on a map, showing each step

and the sequence of the steps taken by users. In order to create a generic map I have depicted

the category and the sub-category selection in one single step. Then, I marked the moments of

truth and the critical points (e.g. receiving and out of stock message), the steps that had the

66

ﾏost effeIt oﾐ paヴtiIipaﾐtsげ jouヴﾐe┞s ふhoﾏepage, zooﾏiﾐg, etI.) based on the feedback

received from participants.

Theヴe Iaﾐ He ┗aヴious ヴeasoﾐs foヴ useヴs to aヴヴi┗e oﾐ the fashioﾐ ┘eHsiteげs hoﾏepage ┘here my

customer journey starts. As users reported during the interviews they receive direct marketing

emails that encourage them to visit the website and to check out the current promotions or

the latest collection. Other reasons for visiting fashion websites included; looking for a specific

type of clothes item or brand, just browsing to get inspiration, and to buy online something

that has already been examined in-store before. Major motivations to visit fashion websites

are reported to be; convenience, speed, ease and sale (bargain hunting). I showed the main

motivating factors to use fashion websites as well as the most mentioned characteristics by

participants relating the online shopping experience with orange at the top left corner next to

the homepage. I also exposed the main reasons for users visiting fashion websites. These are

presented written in turquoise colour below the homepage. Related usability and aesthetic

elements that were observed and re-iterated during the user testing sessions are presented in

green and purple respectively at each step of the customer journey (Appendix 16).

Once the main journey was defined, I grouped the individual steps into five main stages. The

elements of the visual attention and the affordances at each step were described to help

readers better interpret the map. We can observe from the map that the number of different

affordances is increasing as the user interacts more with the website and reaches its maximum

le┗el at the さ“eleIt/E┝aﾏiﾐeざ stage ┘heヴe useヴs Iaﾐ use the zooming functionality to observe

the product (Appendix 16).

The journey starts on the homepage of the fashion website, where users perceive the most

aesthetic elements on one page (Figure 52). This stage is very important as all first impressions

about the look and feel of the website are formed here. Users instantly judge the homepage by

its ┗isual appeaヴaﾐIe aﾐd appeal aﾐd the┞ also e┗aluate ┘hetheヴ the Hヴaﾐdげs iﾏage is consistent with the design of the website and if there is a good balance between the

information density and white space. The key functional element at this stage is the main

navigation system (Appendix 16).

o Logo, identity

o Colours

o Text (font, style)

o Background image

o Menu bar, menu options

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

(quirkiness)

o Navigation, site-flow -> astute site-flow that guides users to follow instinctively an

obvious path set by the brand

o Sale, special offers, multi buy discounts

67

o Buttons: button graphics, size, colour, text

o Links

o Lists

o Animation (size, quality)

o Audio content

o Video content

o Pop-ups, banners, ads

Figure 52 – Aesthetic elements on the homepage

The jouヴﾐe┞ Ioﾐtiﾐues aloﾐg the ┘oﾏeﾐげs seItioﾐ that is ヴeaIhed ┗ia the ﾏaiﾐﾐa┗igatioﾐ menu or central image and the browsing stage begins. At this step users observe the individual

products in a row by scrolling down the page or mouse over the images until selecting an item

for further investigation. The number of aesthetic elements is reduced here but some new

aesthetic elements such as price tags, items presented in a row and image sharpness become

part of the visual experience. Other important aesthetic elements are the general background

and the context in which the model and/or the clothes items are presented. At this stage

functional elements become more important for the user as they try to find their way on the

pages. Functional elements include search feature and product filtering (filter products by

brand, category and by price, etc.) with speed and stock accuracy becoming concerns as users

reported negative experiences regarding these. In the next step users would select something

that caught their attention by pointing and clicking with the mouse. Before examining the

product users can check a number of product related information, such as; product

description, special offers or multi-buy discounts, stock availability, etc. Aesthetic elements

within this step of the journey include; page layout, text style and buttons. Usability features

include; the description of the product that is easy to understand, stock information that is

accurate and affordances that are intuitive to use (e.g. buttons and links). The moment of truth

comes when the user examines the selected item by zooming in and out, rotating the product

on the screen to observe it from all angles and alternative views. It is all about functionality

here that is what the user can afford doing with the online product to make sure that it fits

their needs and expectations. Therefore, product zoom, auto-zoom and alternative view

optioﾐs aヴe esseﾐtial eleﾏeﾐts of this stage. Featuヴes like けYou ﾏight also likeげ as ┘ell as けCoﾏplete the lookげ ┘eヴe all Ioﾐsideヴed to He useful H┞ paヴtiIipaﾐts iﾐ this pヴojeIt. Checking

product details like sizing, the composition of the clothe (material and fabric description) as

well as checking delivery and return information are all important actions before putting the

item in the shopping basket. Puttiﾐg the dヴess iﾐto shoppiﾐg Hasket H┞ IliIkiﾐg oﾐけAdd to Basketげ oヴけCheIk Outげ Huttoﾐs, useヴs Iaﾐ go stヴaight iﾐto theiヴ Hasket ┗ie┘ ┘heヴe the┞ Iaﾐヴe-

check their selection (i.e. the type, size, colour, quantity and price) and/or again have a look at

the delivery/returns policy. If they are happy with their selection users can proceed to

checkout and enter personal details or login (Appendix 16).

I also wanted to provide the reader some hints about the thoughts and feelings of users while

navigating on the fashion websites, so I incorporated three scopes defining each stage of the

68

jouヴﾐe┞ fヴoﾏ the useヴsげ peヴspeIti┗e; さThiﾐkiﾐgざ, さFeeliﾐgざ aﾐd さE┝peヴieﾐIeざ. These include

quotes from the participants taken from the testing and interview sessions (Appendix 16).

One of the most prominent outcomes of this study and this drawing is that the observer can

see how the visual attention shifts form the aesthetic elements to the usability of the website

and its functional elements. In the next section of the drawing I depicted the relationship

between the aesthetic and usability elements at each stage of the customer journey. I drew

different sized and coloured circles representing each element of the journey; the purple

coloured circles relate to aesthetics and the green circles to usability. The bigger the size of the

circle the more participants mentioned that element (either in a good or bad way), and the

higher it is positioned the stronger emotions were observed with participants. Where the

element received positive comment the circle was drew on the enriched experience side of the

piItuヴe, ┘heヴeas if the eleﾏeﾐt had a ﾐegati┗e effeIt oﾐ paヴtiIipaﾐtsげ jouヴﾐe┞ it ┘as dヴe┘ oﾐ the deprived experience side of the diagram (Appendix 16).

It is interesting to note that on the homepage conventional design and look got on the

deprived experience side but the conventional navigation system received positive comments

and is on the enriched experience side. The main outcome of the study is shown on the last

diagram (at the bottom of my customer journey map) that shows how the visual attention

shifts from aesthetics towards usability as the customer goes along the online journey

(Appendix 16).

I also showed opportunities to delight customers as well as opportunities for future

improvements; the homepage is a stage of the journey where customers can be highly

influenced by the design (as explained in previous chapters about the importance of first

impressions on e-commerce websites) and at this stage they are the less influenced by the

usaHilit┞ HeIause the┞ ha┗eﾐげt ヴeall┞ staヴted to e┝plore and use the website. At the navigation

stage users can be highly disappointed if the navigation system is not instinctive enough to

easil┞ iﾐteヴaIt ┘ith. It is the e┝peItatioﾐ of the useヴs that a ┘eHsiteげs ﾐa┗igatioﾐ s┞steﾏ should follow their mental models and should be easy to use which implies that opportunity to delight

at this stage is not high. At the zooming point customers get really close to the product and this

is the main moment of truth of the whole journey, therefore here both the opportunity to

delight and the opportunity to dismay are high as this is a critical point. The rest of the stages

aヴe siﾏilaヴl┞ ﾏoﾐotoﾐous to the useヴ, the┞ ┘ould ヴoutiﾐel┞ oHe┞ to the けNe┝tげ Huttoﾐ aﾐd follow instructions of the system to complete the journey as quickly as possible. The

opportunity to delight here is minimum as customers have to pay, but if there is not enough

information on the site customers could be disappointed and this could lead to abandoned

shopping basket (Appendix 16).

69

Figure 53

DISCUSSION

In this project my aim was to reveal the digital aesthetic elements that dヴi┗e useヴsげ customer

journey on fashion websites and to understand how they contribute to this journey and to the

user experience. I also wanted to measure the emotional responses to these elements of the

selected websites. The ultimate goal of this project was to develop a generic mapping of the

Iustoﾏeヴげs jouヴﾐe┞ oﾐ fashioﾐ ┘eHsites that sho┘s the iﾏpaIts of digital artefacts in relation

to usability and also to the user experience. This has been achieved by identifying the digital

aヴtefaIts, ﾏetaphoヴs aﾐd peヴIei┗ed affoヴdaﾐIes aﾐd theiヴ iﾏpaIts oﾐ the useヴげs shoppiﾐg experience during the observed steps of the customer journey on fashion websites. Based on

the information collected and via the various methods used to collect the information a map of

the customer journey (Appendix 16) has been outlined and explained in the previous chapters.

70

Aesthetics and usability implications

Usability and user experience conceptions have developed so much in the recent years and

there is more and more focus on the user engagement and the aesthetic design of user

interfaces. There are more and more academic researches that focus on the user experience

and aesthetics and most e-commerce companies are interested in how we choose what we

buy when they are designing their websites. AesthetiIs iﾐflueﾐIe gヴeatl┞ peopleげs deIisioﾐs

and their choices although most people think that their decisions and judgements of the

functional features of products are rational.

Emphasis on aesthetic design and the influence of emotions in design are receiving more and

ﾏoヴe atteﾐtioﾐ. While tヴaditioﾐal usaHilit┞ foIuses oﾐ useヴげs task aﾐd aIIoﾏplishﾏeﾐts, useヴ experience (UX) emphasizes a more holistic vie┘; uﾐdeヴstaﾐdiﾐg the Ioﾏple┝it┞ of useヴげs experiences (Hartmann, Angeli, & Sutcliffe, 2008) as well as including aspects of look and feel,

aesthetics and design.

Aesthetics influence people when looking and observing physical products and this influence

transmits over onto the internet as well. When viewing an electronic interface (e.g. a website)

the user will make a judgment about the aesthetic quality of the visual experience based on

various subjective and objective dimensions.

In previous studies and researches it has been found that aesthetics is a deciding factor in

whether a customer trusts a website enough to make a purchase on it and that people made

さfar reaching inferences about the qualities of online banking websites on the basis of simple

screen shots, or very short interaction sequencesざ (Tractinsky & Lowengart, 2007).

Aesthetics will always influence decisions anywhere people are given a choice which means

that e-commerce companies should incorporate aesthetic design more closely with usability.

Tractinsky et al. demonstrated that people use aesthetics to judge appeal and perceived

usability. However, as revealed by this research this さhalo effeItざ appeaヴs to fade afteヴ iﾐitial use.

Although the ┘eHsiteげs design can guarantee the initial attraction, only the combination of

usability and aesthetics will ensure that consumers keep using it in the future. Previous

researches and studies show that aesthetics have power, but design on its own doesn't make a

website complete. Perceptions of usability are also affected by perceptions of aesthetics.

There has to be a closer relationship between design and user experience, because aesthetics

and usability have to complement and support each other in order to create the ultimate user

experience.

Tractinsky et al. demonstrated that aesthetic perceptions were an important and culturally

variable component in the rating of the user experience and service quality in an experiment of

ATM machines in Japan which focused on low-level design elements such as buttons and

colours. My research however used fashion websites that have more complex interface

71

elements and structures and it aimed to measure the overall user experience by focusing on

both aesthetics and functional features.

Mahlke et al. (Mahlke, Lemke, & Thuring, 2007) found that although aesthetics had a great effect on emotions and they also found that usability is more important than aesthetics when comparing the user experience for the use of the products.

Hartmann et al. investigated website attractiveness through the Adaptive Decision Making

theory which was developed into a questionnaire to evaluate three websites that shared the

same brand and topic but had different designs. They discovered a framing effect in that user

experience and perception varied according to the question (Hartmann, Sutcliffe, & De Angeli,

Investigating Attractiveness in Web User Interfaces, 2007). Users rated the aesthetically more

appealing website superior to the others which on the other hand were rated for better

usability.

The main consequence of this research is that on fashion websites women analyse usability

features more seriously than they do with the aesthetic elements. The research revealed that

aesthetics elements of fashion websites are not as important as to have an easy-to-use and

functional interface. All participants agreed that they would rather use an aesthetically less

appealing website given that it has the better usability. Furthermore, 80% of the participants in

the second part of the research would recommend the less colourful website with the more

conventional usability, because it was clearer for them how to use it and it was easier for them

to find what they needed.

However, it is still very important that the overall aesthetics match with the style of the clothes

and with the style of the ┘eHsiteげs desigﾐ. Participants claimed that the quality of the

┘eHsiteげs desigﾐ aﾐd the ケualit┞ of the Ilothes it is selling are correlated; that means that the

better quality the clothes a website is selling the better the design is expected from that

website. The research also revealed that on average only 30% of useヴsげ visual attention is

focused oﾐ the ┘eHsiteげs design and that 70% of their visual attention fixated on the clothes it

is selling.

The success of a fashion website therefore lays in the triangle of presentation (design and

visual power), usability (functionality and ease-of-use) and interactivity (enjoyment for the

user). The most important elements of these environments are; homepage, navigation

structure, the quality of photography, colours and any multimedia solution showing the clothes

from a closer and photorealistic perspective. As the user gets more involved interacting with

the fashion website, his or her satisfaction will depend more on the usability of the functional

elements, such as the navigation and zooming facilities.

72

Customer journey aspects

Fashion websites as well as other e-commerce platforms are seeking to blend together the

latest fashion trends with the latest technologies and are aiming to improve the interaction

between humans and computers with the ultimate intention of persuading the customer to

buy. Every fashion brand aims to create a unique style that is embodied through visual cues to

eﾐhaﾐIe the iﾐteヴaItioﾐ ┘ithiﾐ the Hヴaﾐdげs oﾐliﾐe eﾐ┗iヴoﾐﾏeﾐt as ┘ell.

It is important to note that the type of clothes as well as the price of the clothes will influence

the information gathering process. For example, expensive pieces of clothes and fashion

accessories will be subject of a more intense research process and more conscious and rational

decisions, whereas with cheaper type of clothes (i.e. high street fashion) users will usually

spending less time researching and will make a more spontaneous decision.

This could be the reason why many exclusive fashion house use a minimalistic design that

keeps the Iustoﾏeヴげs atteﾐtioﾐ oﾐ the pヴoduIt aﾐd tries to stimulate positive emotions after a

rational consideration (Chen, 2009) while high street brands use more colours to favour the

けlook aﾐd feelげ heuヴistiIs (Chen, 2009).

さThe desigﾐ of the ┘eHsite doesﾐ’t ﾏatteヴ if the Ilothes it is selliﾐg is ﾐot high ケualit┞ざ. ふPaヴtiIipaﾐtげs Ioﾏﾏeﾐt iﾐ the seIoﾐd paヴt of the testiﾐg sessioﾐs, Appeﾐdi┝ Β)

This research found that users are predominantly looking at the clothes on the websites and

trying to find the way to access them, but as they are constantly interacting with the website it

is inevitable not to generate perception about the aesthetics and usability. The interviews

revealed that at the beginning of the customeヴ jouヴﾐe┞ useヴsげ atteﾐtioﾐ foIused more on the

aesthetic elements and the general design of the website and that they instantly formed

opinions about the visual appeal based on their first impressions.

Creating a good first impression is especially important for those e-commerce companies

whose services and products are in great competition with many others on the web. If there is

a laヴge seleItioﾐ of siﾏilaヴ ┘eHsites, selliﾐg siﾏilaヴ seヴ┗iIes oヴ pヴoduIts, if useヴs doﾐげt like ┘hat they see or experience they will quickly move onto the next one. However, if customers are

looking for a specific product from a specific website, either because it is the only website

selling the product or because their previous experience was very good, then the company

could afford present in any design they prefer, because the customer has already decided to

buy from that website, therefore he is not going to be affected by the aesthetics of the

website.

Later on the journey the visual attention narrows down to the product and at the output stage

their attention is focused more on functional elements and usability. Depending on the task

useヴsげ attention on the visual and functional attributes varies; if it is an exploratory search task

their attention is on the visual, aesthetic elements, and when they are completing directed

73

actions functionality and usability become more important as the goal is to finish the task as

easily and as sooner as possible.

This study revealed that simplicity and good navigation were among participants the most

desired features of the fashion websites. It was claimed that the navigation should be intuitive

aﾐd that the ┘eH pages should ha┗e a さbeautiful sheen where you can get to the point quicklyざ

ふpaヴtiIipaﾐtげs feedHaIk, Appeﾐdi┝ Βぶ. These results also show that comfort and speed overwrite

the significance of aesthetics on fashion websites and that usability can have a great effect on

the customer journey (Appendix 16).

The most exciting part of the customer journey is the moment when users interact with the

product. This is the moment of truth of the whole journey because this is when users visualize

themselves wearing the garment and imagining what they are going to do with it, how they are

going to wear it, etc. This poiﾐt is the さ┗iヴtual ヴealit┞ざ, ┘heﾐ the oﾐliﾐe ┗iヴtual dヴess HeIoﾏes a reality in the minds of the women as they try to visualize the dress on themselves and within

their own contexts. At this moment it is all about functionality and the zooming facility. On the

other hand the checkout stage is the most monotonous part of the journey participants

reported. Companies and web designers should make an effort and make this the last step of

the customer journey more pleasurable (Appendix 16).

Trust is also an important element in the customer journey process. The design of the website

can also influence perceptions of trust. Good quality photographs and images of the products

Iaﾐ iﾐduIe tヴust┘oヴthiﾐess H┞ addiﾐg a けhuﾏaﾐ touIhげ if the gaヴﾏeﾐt is sho┘ﾐ iﾐ Ioﾐte┝t oヴ worn by a model.

According to “utIliffeげs heuヴistiIs the choice of media (video and audio) could attract attention

ふさMusic can attract by setting the appropriate mood for a websiteざぶ. This was proven not to be

true on fashion websites as automatic music and sound features as well as pop-up windows

and adverts were all considered as negative factors in the overall user experience on fashion

websites.

Useヴげs peヴIeptioﾐs of website designs can induce a wide variety of feelings and attitudes.

Aesthetics can influence the online purchasing decisions and aesthetics play an important role

in capturing the customer journey of e-commerce companies in order to build a pleasant and

trustworthy online platform.

74

CONCLUSION

Iﾐ this pヴojeIt ﾏ┞ aiﾏ ┘as to ヴe┗eal the digital aesthetiI eleﾏeﾐts that dヴi┗e useヴsげ Iustoﾏeヴ journey on fashion websites and to understand how these elements contribute to the journey

and to the user experience. I also wanted to measure the emotional responses to these

elements of the selected websites. The ultimate goal of this project was to develop a generic

mapping of the custoﾏeヴげs jouヴﾐe┞ oﾐ fashioﾐ ┘eHsites that sho┘s the iﾏpaIts of digital artefacts in relation to usability and also to the user experience. This has been achieved by

identifying the digital artefacts, metaphors and perceived affordances and their impacts on the

useヴげs shoppiﾐg e┝peヴieﾐIe duヴiﾐg the oHseヴ┗ed steps of the Iustoﾏeヴ jouヴﾐe┞ oﾐ fashioﾐ websites. Based on the methods used and the information collected a customer journey map

has been outlined and explained in the previous chapters.

What not has quite been accomplished according to my expectations and objectives is the

critical evaluation of the models and frameworks of previous researches and the analysis of

industry practices related to customer journey and aesthetic elements in online environments.

However, I have provided an overview of these in the literature review and the methodology

chapters and in order to explore practices and stakeholders views related to user experience I

have had conversations and discussions with industry experts as well as end-users.

My research questions have all been answered in this project which related to the customer

journey and the aesthetic elements that contribute to the overall user experience within this

journey. Perhaps one thing should have had more attention in this project is the missing

elements that could improve the overall user experience as well as the usability of fashion

websites, therefore this could be subject for further research within this area.

The central implication of this research is the conclusion that womenげs judgements of usability

features are more critical than their verdicts on aesthetic elements on fashion websites. The

research revealed that for women aesthetics elements of fashion websites are not as

important as to have an easy-to-use and functional interface. All participants agreed that they

would rather use an aesthetically less appealing website given that it has the better usability.

Furthermore, 80% of the participants in the second part of the research would recommend the

less colourful website with the more conventional usability, because it was clearer for them

how to use it and it was easier for them to find what they needed.

The main motivation of this project is to better understand the e-commerce environments and

the relationship of aesthetics and usability as well as the online service design. The central idea

of this dissertation project was to uncover the online shopping experience from the user's

perspective with respect to digital artefacts and metaphors that guide users through the online

journey. The reason for which the author of this project chose to compare fashion websites is

that these online platforms have rich content and that these are very much dependent on the

visual appearance.

75

Mapping the customer journey process is primarily tracking and describing the customersげ experiences as they interact with an interface or service. The generic customer journey map

that I created reveals opportunities for e-commerce companies for improvement and

innovation; therefore it acts a strategic tool to ensure that the human-computer interaction is

a positive experience. My customer journey map not only helps companies to better

understand the end to end journey of the customer but also to improve how the various

functions and tasks are involved in delivering the ultimate customer experience.

Many e-commerce companies would agree that successful customer journey consists of a

quick and easy purchase on the website. But it is not only about functionality and usability;

aesthetics are also playing an important role in the overall user experience and therefore in the

customer journey. Aesthetic elements are essentials for the visual design of interfaces or

environments as well as for the design of the navigation system and the information

aヴIhiteItuヴe iﾐ teヴﾏs of the stヴuItuヴal desigﾐ of the iﾐfoヴﾏatioﾐ spaIe iﾐ oヴdeヴ to ﾏeet useヴsげ expectations. Aesthetic elements follow through the customer journey and support the user by

providing all sorts of different information. For example, in a shop customers orientate

themselves by relying on signs and symbols but they also perceive colours and shapes as well

as textures and materials. When making a phone call, users notice the colours on the screen,

the shapes of the buttons, the texture of the phone, the sounds it makes, and so on. These all

contribute to the overall customer experience; therefore have an effect on the customer

journey.

The research started with literature review and gathering information from related websites,

as well as talking to stakeholders in the fashion industry (both owners of fashion websites as

well as end-users). From the literature review I got a good insight of previous researches that

focused on aesthetics and usability on websites and I was able to take away significant

knowledge regarding aesthetic heuristics and testing methods.

I set up my own heuristics to measure the aesthetic appeal on six high street fashion brandsげ websites. I have adopted several points from different sources (e.g. Travisげs, Sutcliffeげs,

Tractinskyげs, Averyげs aﾐd Alsudaniげs heuヴistiIs) since I have used many of their adjectives and

statements to compose my own set of guidelines for fashion website aesthetics. My heuristics

were composed on three different dimensions; aesthetics, usability and user experience.

Hassenzahl et al. (Hassenzahl, Burmester, & Koller, 2003) asked users to compare and evaluate

six different interface designs for user experience, hedonic and appeal qualities. Hassenzahl et

al. concluded that both the user experience and the hedonic qualities contributed to the

overall aesthetic judgement of the interfaces. However, none of these studies showed which

aesthetic elements (eg. colours, layout, etc.) contributed to the overall judgement by

participants. In this research, a customer journey map helps to identify which aesthetic

elements are being evaluated at which stage.

Some of the limitations of the methodology and techniques are that the number of

participants was not representative and the websites were only tested on women with similar

age range; between 34 and 39. However, culturally the sample was very different (included

76

English, French, Italian, Dutch, German, Swiss and Hungarian participants). The participants

were only representing a specific segment of the target population and some of them had HCI

background. The websites were not randomly chosen and they meant to represent a certain

market segment. Another restraint is the fact that the websites were tested in July during the

summer sale period and all fashion websites had an altered homepage during this period.

During the evaluation sessions contestants were given a directed search task and they were

observed using the websites. Based on the observations a customer journey was mapped. It is

quite difficult to give objective feedback on aesthetics since it is a very personal entity.

Everyone has a unique taste which is difficult to explain therefore judging aesthetics is hard

without involving oﾐeげs o┘ﾐ suHjeIti┗e feelings. When participants were given a directed task

that requested them to find a dress that they would wear for a wedding, they started looking

for attractive objects on the websites. This could have had a bias on their overall aesthetic

judgement about the website, since when the participant found no suitable (aesthetically not

pleasing) dress then her overall opinion about the website aesthetics could have been biased.

The faIt that she hasﾐげt Heeﾐ aHle to fiﾐd aﾐ┞ attヴaIti┗e iteﾏ Iould ha┗e had aﾐ effect on her

feelings therefore her opinion about the environment (website) was prejudiced. Therefore, for

future research I would suggest asking participants to find the same item (i.e. dress) on

different websites and measure the aesthetics and usability as well as to compare the journey

on those websites. This ┘a┞ oﾐe Iould ﾏiﾐiﾏize the IhaﾐIe to Hias paヴtiIipaﾐtsげ aﾐs┘eヴs regarding general website aesthetics.

The second phase the project included an intense user-testing period focusing on the aesthetic

elements of the websites and evaluating those within the customer journey framework. I used

commercial methods to gather quantitative data alongside the qualitative data. It was revealed

form these sessions that users associate online clothes shopping with convenience, speed,

ease of use and getting good deals. All participants reported different ways of browsing and

selecting fashion items online but they all agreed that the ┘eHsiteげs desigﾐ Iould affeIt the purchase on a fashion website. The most important functional features of a fashion website

were considered to be the zooming, the quality of the images, the navigation system, and the

information provided about the clothes as well as the checkout and return process and

information, the search and filtering options and security.

The results of the second phase helped to construct the final framework of the customer

journey with the aesthetic and usability elements that drive the journey. This was reiterated in

the last phase of the project which included a focus group type interview including testing two

paper prototypes of different website designs. One of the major limitations of the third stage

of the project was the low number of participants. In spite of this, the interview repeated the

earlier found effects that users prefer to have better usability than better aesthetics. Of

course, the personality and the personal taste and preference will determine which aesthetic

design they like and they all have individual mental models as to how they do their shopping

and how they use a website. For this reason it is so important for e-commerce companies to

know their users in order to design a website that is both enjoyable to use for the user and

aesthetically it is pleasing.

77

While most fashion websites will try to use the power of visuals to draw attention and to retain

the customers and to push them through the purchasing process, the success of a fashion

website will lay within the triangle of aesthetics (design, visual power), usability (functionality

and ease-of-use) and user experience (enjoyment for the user). The most important elements

of these environments are; homepage and the navigation structure, colours, photography,

zooming facilities and the relevant product information (including the delivery and returns

information). This research found that aesthetics and usability are closely related as they both

had a strong influence on the appeal of the fashion websites, but at different levels and at

different times. The homepage has a stronger appeal and influenced more by aesthetics before

use, but as the user goes further along the customer journey and interacts with the website

the usability elements and functions become more important in the overall judgement until

the point when it overwrites the importance of aesthetics (Appendix 16). Hence, it is very

iﾏpoヴtaﾐt that a ┘eHsiteげs desigﾐ pヴoIess iﾐIludes useヴヴeseaヴIh ┘hiIh is Ioﾏpleted Hefoヴe the construction process and that there should be interaction between the creative and the

user experience teams. Furthermore, both creative and user experience teams should see the

process as a customer journey where different steps imply different user requirements from

both aesthetic and usability point of view.

Lessons learnt from the project include that like with most other research methods, there is no

one single right way to build an experience map and that first there has to be identified what

the map needs to point at, like the most prominent parts of the customer experience that help

identify the moments of truth, and that helps to visualize each step of the journey in a

meaningful way. Customer journey map can help e-commerce companies to identify parts of

the journey that need more control over and parts that are out of their control. The

visualisation of the customer journey map can also encourage interest and improves the

readability of the journey.

For related future work the author recommends to refine the measurements and involve

statistical analysis as well as to uncover the different motives for shopping clothes online and

to compare the real life in-store customer journey to the online experience to expose more

about the aesthetic elements during the shopping experience.

78

References

Adams, A., & Blandford, A. (2005). Digital liHヴaヴies’ suppoヴt foヴ the useヴ’s iﾐfoヴﾏatioﾐ jouヴﾐe┞. Denver, CO, USA: JCDL 2005, 7-11 June 2005.

Angeli, D., Sutcliffe, & Hartmann. (2006). Interaction, usability and aesthetics: What influences

users' preferences? DIS '06 Proceedings of the 6th conference on Designing Interactive

systems, 271-280.

Brugnoli, G. (2009). Connecting the Dots of User Experience. Journal of information

architecture, Volume 1 Issue 1, Journalofia.org | ISSN 1903-7260.

Capota, Hout, v., & Geest, v. d. (2007). Measuring the Emotional Impact of Websites: A Study

on Combining a Dimensional and Discrete Emotion Approach in Measuring Visual

Appeal of University Websites. Designing Pleasurable Products and Interfaces, (pp.

135-147). Helsinki, Finland.

Carrie, A. (2003). Only screen deep? Evaluating aesthetics, usability, and satisfaction . A thesis

submitted in partial fulfillment of the requirements for the degree of Master of Arts in

the Department of English in the College of Arts and Sciences at the University of

Central Florida. Orlando, Florida.

Chen, J. (2009). The Impact of Aesthetics on Attitudes Towards Websites. Retrieved from

http://www.usability.gov/articles/062009news.html

Csíkszentmihályi, M. (1990). Flow. London: HarperCollins e-books.

Dubberly, & Evenson. (2008). The Experience Cycle. Interactions, 11-15.

Eckman, M., & Wagner, J. (1995). Aesthetic Aspects of the Consumption of Fashion Design: the

Conceptual and Empirical Challenge. Retrieved 09 22, 2012, from

http://www.acrwebsite.org/: http://www.acrwebsite.org/search/view-conference-

proceedings.aspx?Id=7825

Fogg, B. (2003). Persuasive Technology: Using computers to change what we think and do. San

Francisco: Kaufmann.

Hartmann, Angeli, d., & Sutcliffe. (2008). Framing the User Experience: Information Biases on

Website Quality Judgement. CHI 2008 Proceedings, Exploring Web Content, (pp. 855-

864.). Florence, Italy.

Hartmann, J., Sutcliffe, A., & De Angeli, A. (2007). Investigating Attractiveness in Web User

Interfaces. CHI 2007 Proceedings: Empirical Studies of Web Interaction. San Jose, CA,

USA.

79

Hartmann, J., Sutcliffe, A., & De Angeli, A. (2008). Toward a Theory of User Judgement of

Aesthetics and User Interface Quality. ACM Transactions on Computer-Human

Interaction, Vol.15, No. 4, Article 15.

Hassenzahl, Burmester, & Koller. (2003). AttrakDiff: Ein Fragebogen zur Messung

wahrgenommener hedonischer und pragmatischer Qualitat [AttracDiff: A questionnaire

to measure perceived hedonic and pragmatic quality]. Mensch&Computer, Interaktion

in Bewegung, pp.18.

Hoffmann, R., & Krauss, K. (2004). A Critical Evaluation of Literature on Visual Aesthetics for.

Annual Research Conference of the South African Institute of Computer Scientists and

Information Technologists (pp. 205-209). Western Cape, South Africa: Institute for

Computer Scientistc and Information Technologists.

Kim, J., Lee, J., & Choi, D. (2003). Designing Emotionally Evocative Home Pages: An Empirical

Study of the quantitative relations between design factors and emotional dimensions.

International Journal of Human Computer Studies, 269-298.

Lavie, T., & Tractinsky, N. (2003). Assessing dimensions of perceived visual aesthetics of web

sites. Beer Sheva, Israel: Int. J. Human-Computer Studies.

Lindegaard, G., Dudek, C., Sen, D., Sumegi, L., & Noonan, P. (2011). An Exploration of Relations

Between Visual Appeal, Trustworthiness and Perceived Usability of Homepages. ACM

Transactions on Comuter-Human Interactions, (p. 30).

Lindgaard, Fernandes, Dudek, & Brown. (2006). Attention web designers: You have 50

milliseconds to make a good first impression! Behaviour & Information Technology,

25., 115-126.

Lindgaard, G., & Dudek, C. (2002). What is this evasive beast we call user satisfaction?

Interacting with Computers 15 (pp. 429-452). Ottawa: Elsevier Science B.V.

Mahajan, R., & Schneiderman, B. (1997). Visual and Textual Consistency Checking Tools for .

IEEE Trans.Softw.Eng, (pp. 722-735).

Mahlke, S., Lemke, I., & Thuring, M. (2007). The Diversity of Non-instrumental Qualities in

Human-Technology Interaction. Berlin: MMI-Interaktiv, Nr. 13, Aug 2007, ISSN 1439-

7854.

Molly Eckman, J. W. (1995). Aesthetic aspects of the consumption of fashion design: The

conceptual and empirical challenge. Advances in Customer Research, Volume 22, 646-

649.

Ngo, Teo, & Byrne. (2003). Modelling Interface Aesthetics. Information Systems, 25-46.

Nielsen, J., & Molich, R. (1990). Heuristic evaluation of user interfaces. Proc. ACM CHI'90 Conf.,

(pp. 249-256.). Seattle, WA, 1-5 April.

80

Norman, D. A. (2003). Emotional Design: Why We Love (or Hate) Everyday Things. New York:

Basic Books; 1 edition.

Payne, J. W., Bettman, J. R., & Johnson, E. J. (1993). The Adaptive Decision Maker. Cambridge:

Cambridge University Press.

Sutcliffe, A. (2002). Assessing the Reliability of Heuristic Evaluation for Website Attractiveness

and Usability. Proceedings of the 35th Hawaii Conference of System Sciences (p. 137).

Big Island, Hawaii: HICSS'02-Volume 5.

Sutcliffe, A., & deAngeli, A. (2005). Assessing Interaction Styles in Web User Interfaces. 405-

417.

Tractinsky, & Lowengart. (2007). Web_Store Aesthetics in E-Retailing. Academy of Marketing

Science Review, Vol.11, No.1.

Tractinsky, N., Katz, A. S., & Ikar, D. (2000). What Is Beautiful Is Usable. Interacting with

Computers, 13, 127-145.

Tungate, M. (2008). Fashion Brands: Style From Armani to Zara. London: Kogan Page Limited.

Xue Li, H. Y. (2011). Sparse representation based visual element analysis. 18th IEEE

International Conference on Image Processing.

Internet resources: http://oxforddictionaries.com/definition/english/aesthetics (accessed 22/09/2012)

http://vestalmedia.com/2011/11/15/are-you-an-internet-expert/ (accessed 23/07/2012)

http://www.jonathanbriggs.com/ecommerce/designing-customer-journeys-lecture-

5,632,AR.html (accessed 22/05/2012)

http://www.mycustomer.com/topic/customer-intelligence/customer-journey-

mapping/105167 (accessed 22/05/2012)

http://www.plongstreet.com/dissertation-abstract (accessed 12/08/2012)

http://www.webcredible.co.uk/user-friendly-resources/web-usability/aesthetics-

usability.shtml (accessed 12/08/2012)

http://www.websiteoptimization.com/speed/tweak/blink/ (accessed 12/08/2012)

http://www.surl.org/usabilitynews/42/shoppingcart.asp (accessed 28/06/12)

http://www.nomensa.com/blog/2008/the-shopping-cart-metaphor-in-e-commerce-websites/

(accessed 05/09/2012)

http://wiki.answers.com/Q/What_is_aesthetics#ixzz26HzZnPa4a (accessed 14/09/2012)

http://www.attrakdiff.de/en/Services/AttrakDiff-Basic/ (accessed 04/07/2012)

http://www.userfocus.co.uk/resources/homepagechecklist.html (accessed 03/07/2012)

http://uxdesign.smashingmagazine.com/2011/12/16/guide-heuristic-website-reviews/

(accessed 12/08/2012)

http://www.uxforthemasses.com/online-survey-questions/ (accessed 24/06/2012)

http://www.thinkbuzan.com/uk/registration/freetrial (accessed 24/08/2012)

http://oxforddictionaries.com/definition/english/aesthetics

http://vestalmedia.com/2011/11/15/are-you-an-internet-expert/

http://www.jonathanbriggs.com/ecommerce/designing-customer-journeys-lecture-5,632,AR.html

http://www.jonathanbriggs.com/ecommerce/designing-customer-journeys-lecture-5,632,AR.html

http://www.mycustomer.com/topic/customer-intelligence/customer-journey-mapping/105167

http://www.mycustomer.com/topic/customer-intelligence/customer-journey-mapping/105167

http://www.plongstreet.com/dissertation-abstract

http://www.webcredible.co.uk/user-friendly-resources/web-usability/aesthetics-usability.shtml

http://www.webcredible.co.uk/user-friendly-resources/web-usability/aesthetics-usability.shtml

http://www.websiteoptimization.com/speed/tweak/blink/

http://www.surl.org/usabilitynews/42/shoppingcart.asp

http://www.nomensa.com/blog/2008/the-shopping-cart-metaphor-in-e-commerce-websites/

http://wiki.answers.com/Q/What_is_aesthetics#ixzz26HzZnPa4a

http://www.attrakdiff.de/en/Services/AttrakDiff-Basic/

http://www.userfocus.co.uk/resources/homepagechecklist.html

http://uxdesign.smashingmagazine.com/2011/12/16/guide-heuristic-website-reviews/

http://www.uxforthemasses.com/online-survey-questions/

http://www.thinkbuzan.com/uk/registration/freetrial

81

Appendix 1: Project Proposal for MSc Human-Centred Systems

Name: Anna Tamasi

E-mail address: [email protected]; [email protected]

Contact Phone number: 07703737718

Project Title: Aesthetic elements supporting the customer journey of an online shopping

experience

Supervisor: Dr. George Buchanan

Introduction

User-centred approaches like service design, design thinking and customer journey mapping

(CJM) are emerging trends and are useful tools to measure the user experience as well as to

improve the quality and effectiveness of the interactions of customers with the brand.

A Iustoﾏeヴげs jouヴﾐe┞ iﾐ a shop is guided H┞ shop assistaﾐts aﾐd faIilitated by customer service

representatives, but on a website the customer is on his own. Fashion websites are advertising

platforms where companies advertise and sell goods that are then bought by customers.

Customers rely on digital metaphors and artefacts that drive them through the journey and

contribute to the customer experience such as layouts, navigation, style, colours, white space,

photographs, etc. The roles of the metaphors and digital artefacts are to enhance the use of

the user interface and to guide the customer through the journey and to provide the customer

with a smooth flow of the shopping experience. These artefacts and metaphors must be

iﾐteヴpヴetaHle aﾐd ヴeﾏeﾏHeヴed H┞ the useヴs aﾐd should ﾏeet the Iustoﾏeヴげs e┝peItatioﾐs (Lanquetin, 2007).

In order to provide an outstanding customer experience and having customers coming back to

the website companies need to invest in creating excellent usability. Furthermore, to maximise

the reach of a wider customer segment companies should also consider accessibility issues. It is

not easy to create an online environment that is both usable and aesthetically appealing at the

same time. There are trade-offs all the way throughout the user-centred design process that

companies have to consider when making decisions on design and usability.

The central idea of this dissertation project is to uncover the online shopping experience from

the user's perspective with respect to digital artefacts and metaphors that guide users through

the online journey.

For this project the author will choose to compare fashion websites as these have rich content

and they are very much dependent on visual appearance. Fashion websites seek to blend

together the latest fashion trends with the latest technologies and aim to improve the

mailto:[email protected]

mailto:[email protected]

82

interaction between humans and computers with the ultimate aim to persuade the customer

to buy.

Every fashion house aims to create a unique style that is embodied through visual cues to

eﾐhaﾐIe the iﾐteヴaItioﾐ ┘ithiﾐ the Hヴaﾐdげs oﾐliﾐe eﾐ┗iヴoﾐﾏeﾐt as ┘ell. Most fashion websites

rely on the power of visuals to draw attention and to retain the customers and to push them

through the purchasing process.

The success of a fashion website therefore lays in the triangle of presentation (design, visual

power), usability (functionality and ease-of-use) and interactivity (enjoyment for the user). The

most important elements of these environments are; homepage, photography, colours, videos

and other multimedia as well as social media and the navigation structure.

However, fashion websites tend to change and evolve rapidly; some brands re-design their

websites for each season, consequently this could be a challenge to handle in this project.

Objectives of the project

Iﾐ this pヴojeIt the authoヴげs aiﾏ is to ヴe┗eal the digital aヴtefaIts aﾐd ﾏetaphoヴs that dヴi┗e useヴsげ actions and to understand how they contribute to the customer journey and customer

experience. The author also seeks to measure user's emotional responses to design and

structure of fashion websites.

The ultiﾏate goal of this pヴojeIt is to de┗elop a geﾐeヴiI ﾏappiﾐg of the Iustoﾏeヴげs jouヴﾐe┞ oﾐ fashion websites that shows the impacts of digital artefacts in relation to the user experience.

“peIifiIall┞, ┘ithiﾐ the Ioﾐte┝t of the Iustoﾏeヴげs oﾐliﾐe jouヴﾐe┞ the objectives of this research

are:

1. To identify the digital artefacts, metaphors and perceived affordances and their impacts

oﾐ the useヴげs shoppiﾐg e┝peヴieﾐIe duヴiﾐg the Iustoﾏeヴ jouヴﾐe┞ oﾐ fashioﾐ ┘eHsites.

2. To critically evaluate models and frameworks of previous researches related to customer

journey and aesthetic elements in online environments.

ン. To e┝ploヴe pヴaItiIes aﾐd stakeholdeヴs ┗ie┘s ヴelated to useヴ e┝peヴieﾐIe aﾐd useヴげs perceived affordances on fashion websites as well as the use of digital artefacts on these

platforms.

ヴ. To foヴﾏulate a geﾐeヴiI ﾏap of the Iustoﾏeヴげs oﾐliﾐe jouヴﾐe┞, iﾐIludiﾐg IヴitiIal tuヴﾐiﾐg points where artefacts affect emotions and user experience on fashion websites.

Research questions

83

a.) What are the elements of the customer journey on fashion websites? What tools,

frameworks and models are available to support measuring the online customer journey?

b.) What are the key aesthetic elements within the customer journey in online environments

that provide eﾐjo┞ﾏeﾐt foヴ the useヴs? What iﾏpaIts desigﾐ aヴtefaIts ha┗e oﾐ useヴげs eﾏotioﾐs and the shopping experience?

c.) What elements are (users) missing throughout the customer journey that could improve

the overall user experience as well as the usability of fashion websites?

Areas of theory underpinning the project, including key references

Practically speaking the customer journey is the sales cycle framework in traditional business

models that seeks to understand the business-customer relationship in order to push

customers through the sales funnel leading to transaction. (Dubberly & Evenson, 2008)

The customer journey is a series of customer experiences that aggregate from various

impressions gained from different parts of the business; what customers think of and how they

perceive the brand.

According to Csíkszentmihályi (1990) the concept of flow is a fully motivated mental state

described as deeply fixated merely on the activity, and the essence of the flow is the feeling

of joy while performing a task.

DuHHeヴle┞ aﾐd E┗eﾐsoﾐふヲヰヰΒぶ Ialled it けthe e┝peヴieﾐIe-I┞Ile ﾏodelげ that ﾏo┗es He┞oﾐd the push model of the sales cycle and focuses on the relationship of business and customer

describing the steps and criteria to evaluate customer experiences.

Visual appeal is a significant influence on emotional appeal (Capota, Hout, & Geest, 2007).

Typically, emotion has a positive and a negative dimension and many studies have revealed

that emotion strongl┞ iﾐflueﾐIes Ioﾐsuﾏeヴげs deIisioﾐﾏakiﾐg.

Lindgaard et al. (2006) performed a study regarding first impressions of websites in which they

found that people can make a consistent evaluation of visual appeal within just 50 milliseconds

(Capota, Hout, & Geest, 2007).

Hartmann et al. have done a few researches assessing the attractiveness of websites and

finding correlation between the perceived aesthetic quality and the overall user satisfaction.

They argued that many user experience research has focused on aesthetics and initial user

perceptions of the interfaces and websites but the nature of information presentation has

received less attention (Hartmann, Angeli, & Sutcliffe, 2008).

84

In this research the author is also intended to evaluate Halo-effeIts oﾐ useヴsげ judgeﾏeﾐts versus perceptions and impressions of fashion websites. Theories like the Adaptive Decision

Making Theory (Roberts, 2006) will be used as tools to understand which affordances drive

customers through the experience journey. Another intention of this project is to look at the

impacts of semiotics on persuasion and seduction of the customers.

Why and for whom it will be useful

This research shall be valuable for fashion brands to better understand the roles of the

artefacts within the customer journey that will be specially tailored for online fashion

businesses in order to increase customer engagement and to reach a wider audience.

This research shall benefit designers as it aims to discover the emotional aspects of responses

for visual applications, such as layouts, navigation, style, colours, white space, photographs,

etc.

The project shall also benefit interaction designers and researchers who have interests in

online retail.

The author of this project will also benefit from this piece of work by increasing knowledge of

career area of interest.

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

The project will follow a user-centred design approach in order to develop a generic mapping

of the Iustoﾏeヴげs jouヴﾐe┞ oﾐ fashioﾐ ┘eHsites ┘eHsites that sho┘s the iﾏpaIts of digital artefacts in relation to the user experience. Users will be involved in all phases of the project.

I. Research – to meet objectives 1 and 2

Secondary research: academic research, books, websites, social media

Primary research: interviews, questionnaires, observations

Revising fashion websites (testing them on mobile and desktop platforms)

Studying customer journey mapping processes, frameworks and models

II. Analysis - to meet objectives 2 and 3

Evaluate websites and the user experience

Evaluation of existing systems

Task analysis

Requirements acquisition

Set the criteria (measurements, key experience labels)

Map the customer journey

III. Design – to meet objectives 3 and 4

85

Sketching the user experience

Produce design solutions

IV. Evaluate – to meet all objectives, this will be an iterative process

Re-iterate journey

Means envisaged for evaluating results

This research will collect both qualitative and quantitative data through various techniques and

tools, including:

- Interviews

- Observations (thinkaloud protocols)

- Query methods (SUS, QUIS, SUMI, SAM, etc.)

- 5-second tests (by Christine Perfetti)

- A/B tests or other comparative studies

- Eye-tracking study (depending on the availability of resources and timeframe)

Choice of tools, resources include:

- Mobile devices (iPhone, Blackberry)

- Desktop PC and laptop, iPad

- Internet connection

- Audio/video recording software

- Screen recording software

- Design software to aid visualisation of results

The ultimate aim is to develop a generic customer journey map for fashion websites that

indicates the emotional hotspots, moments of truth, critical success and failure points.

A set of websites will be chosen to be tested based on a wide variety of stimuli in order to

induce different responses. Participants will also be observed using their favourite websites.

Project feasibility

Having completed a one year full-time study in HCI endows the author with academic

knowledge and skills to undertake this research.

The author worked 5 years at a large online media corporation and has sales and marketing

related project management skills. The author has interest in the online fashion business and

has connections within this industry that will benefit the research and data collection stages of

the project.

86

Project time table

The timing of the different parts of the dissertation is scheduled as:

1. Aims/Objectives: 2 weeks (June)

2. Literature review: 4 weeks (June–July)

3. Research methods: 2 weeks (July)

4. Data collection: 3 weeks (Aug.)

5. Findings: 3 weeks (Aug.–Sep.)

6. Conclusion: 2 weeks (Sep.)

87

Research Ethics Checklist

Number Question

Yes/No

(delete as

appropriate

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

early about it

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

2. Does it pose only minimal and predictable risk to other people Yes affected by the project?

3. Are arrangements for the supervision of the project appropriate? Yes

4. Is the project carried out or supervised by competent researchers? Yes

5. Do the foreseeable benefits of the project outweigh the foreseeable Yes risks?

If the answer to any of the following questions is YES, then authorisation from the Senate's

Ethics Committee is required. Seek advice very early about it

6. Does the project involve interaction with, or collecting personal No information about, people who are vulnerable because of their social, psychological or medical circumstances?

7. Does the project involve animals? No

8. Does the project involve research on pregnant women or women in No labour?

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

10. Does the project involve research on human tissue? No

11. Does the project involve research on vulnerable categories of No people who may include minority groups?

The following questions must be answered YES, i.e., the student must commit to satisfy these

conditions and have a plan to ensure they are satisfied

Will the student ensure that any people subject to observation or data collection are :

12. fully informed about the procedures affecting them and affecting any Yes

information collected about them (how the data will be used, to whom they will be disclosed, how long they will be kept)?

13. fully informed about the purpose of the research? Yes

14. Will the consent of these people be obtained? Yes

15. When these people can be classified as research subjects, will it be Yes clear to them that they may withdraw at any time?

16. Will the student make arrangements to ensure that material or Yes private information obtained from or about these people remains confidential?

88

88

Appendix 2: Heuristic Evaluation – pre-test questions

1. First, ┘hat’s your oIIupatioﾐ? What do you do all day?

ChC Stay at home mum, I do general household and manage 2 children (at school).

NSch Retaining, home studying, half-time mum.

NZ Shopping

CR Entrepreneur mum of two. I am currently setting up my online jewellery shop

with my mother-in-law.

AN Busy (working) mum of two.

LB

2. Roughly, how many hours a day altogether—just an estimate— would you say you spend

using the Internet (including browsing, email and shopping)?

ChC 3 hours, I use my mobile phone (iPhone), iPad, Facebook and I shop everything online

NSch 3-4 hours

NZ 2-3 hours

CR 1 hour approximately

AN 3-ヴ hヴs, Hut I sit iﾐ fヴoﾐt of the Ioﾏputeヴ all da┞…

LB

3. How frequently do you buy online?

ChC Roughly, ┘eekl┞ … oヴ a Iouple of tiﾏes a ﾏoﾐth.. NSch Not ┗eヴ┞ ofteﾐ, oﾐIe a ﾏoﾐth I’d sa┞. NZ Couple of times a month.

CR OIIasioﾐall┞, ﾏostl┞ ┘heﾐ theヴe’s a Hiヴthda┞ Ioﾏiﾐg up oヴ at Chヴistﾏas tiﾏe…

AN Monthly, sometimes weekly

LB

4. List 3 words that you associate with online shopping:

NZ Bargain

ChC Choice

CR Convenience

AN Convenience

NZ Convenience

NSch Convenience, efficiency

NZ Designer wear

CR Ease

ChC Ease (and my laziness)

AN Fun

NSch Google, searching

CR Quick

NSch Sale

AN Saving time

89

89

ChC Speed

LB

5. List 3 words that you feel when you are doing online shopping

NSch I feel like I saved time

NSch Bargain hunting

NZ Comfort

AN Excitement

AN Guilt (that I spent a fortune)

ChC Happiness

NSch It makes me mobile (virtual mobility)

NZ Relaxed

ChC Satisfaction

NZ Satisfaction

AN Satisfaction

CR “atisfaItioﾐ, it’s さDoﾐe!ざ aﾐd I do ﾐot ha┗e to deal ┘ith it aﾐ┞ ﾏoヴe

ChC Sense of guilt (to spend lots of money)

CR Vulnerable (that something can go wrong – eg. my delivery gets lost or the company goes bust)

CR Woヴヴied that stuff doﾐ’t aヴヴi┗e

LB

6. How would you compare the online and offline shopping experience?

ChC I pヴefeヴ oﾐliﾐe shoppiﾐg. It is so eas┞; I Iaﾐ Hヴo┘se e┗eヴ┞thiﾐg, I doﾐ’t ha┗e to leave the

house aﾐd dヴi┗e, I tヴ┞ it at hoﾏe aﾐd if I doﾐ’t like it I ヴetuヴﾐ it ふthe┞ Ioﾏe aﾐd IolleIt it fヴoﾏ my house).

NSch For me offline shopping means a more impulsive ad hoc pleasure. You treat yourself because

┞ou go out ふit’s a leasuヴeぶ. Oﾐline shopping is for saving time, more convenience than pleasure.

It is good for saving time and to compare prices.

NZ Oﾐliﾐe shoppiﾐg is good HeIause foヴ its easiﾐess, Ioﾏfoヴt aﾐd it takes ﾐo effoヴt…┞ou Iaﾐ still watch TV or eat in the meantime.

CR I thiﾐk that ┞ou Iaﾐ’t Ioﾏpaヴe theﾏ, the┞ aヴe so diffeヴeﾐt. Offliﾐe shoppiﾐg is pleasuヴe ┘hile oﾐliﾐe shoppiﾐg is to get soﾏethiﾐg doﾐe ふケuiIkl┞ぶ…

AN

I pヴefeヴ oﾐliﾐe shoppiﾐg, HeIause I siﾏpl┞ Iaﾐ’t affoヴd goiﾐg to the shops aﾐd speﾐd ﾏ┞ whole day looking for things. Online I can do everything much quicker and more effectively;

doﾐ’t ﾐeed to ケueue, dヴi┗e, ┘alk, etI. But I like offliﾐe shoppiﾐg HeIause ┞ou Iaﾐ aItuall┞ feel the te┝tuヴes aﾐd Iolouヴs…uﾐfoヴtuﾐatel┞ I do ﾐot ha┗e tiﾏe foヴ this.

LB

7. Which websites do you use to buy clothes and to learn about fashion trends? Why?

ChC To leaヴﾐ aHout fashioﾐ tヴeﾐds I use the ﾏagaziﾐes ふIﾐ“t┞le, Elle, etIぶ…foヴ ┘eHsites I use: Net-a-Porter, Matches, Mywardrobe, DonnaIda, H&M, Zara, Mulberry, Jigsaw, A“O“…

NSch Jigsaw, Joseph and Ventre-privee.

NZ OutNet – it’s a good ┘eHsite to follo┘ tヴeﾐds oヴ look foヴ soﾏethiﾐg speIial to tヴeat ┞ouヴself ┘ith. CR OutNet, Net-a-Porter, and the vintage clothes on Vestiarie Collective

AN ASOS, Massimo Dutti, Zara, Maﾐgo, etI. Foヴ fashioﾐ tヴeﾐds I look oﾐliﾐe oヴ I Hu┞ ﾏagaziﾐes…

LB

8. What types of fashion items do you look for on the Internet? Why?

90

90

ChC E┗eヴ┞thiﾐg…shoes, uﾐdeヴ┘eaヴ…if I see soﾏethiﾐg iﾐ a ﾏagaziﾐe that I like, I go oﾐliﾐe and buy it online…I ﾐe┗eヴ tヴ┞ aﾐ┞thiﾐg oﾐ iﾐ shops.

NSch Dresses (evening dresses) and basics (T-shirts)

NZ “hoes, haﾐdHags. These aヴe the ﾏost likel┞ iteﾏs to Ioﾏe iﾐ the ヴight size aﾐd doﾐ’t require returns.

CR Dヴesses, Hags, je┘elヴ┞, shoes…

AN Dresses, tops, knitweaヴ, shoes…e┗eヴ┞thiﾐg ヴeall┞! I kﾐo┘ ﾏ┞ sizes aﾐd it is eas┞ foヴﾏe to Hu┞ oﾐliﾐe. I Iaﾐ also ヴetuヴﾐ theﾏ at aﾐ┞ tiﾏe…

LB

9. Ho┘ do you Ihoose your iteﾏs ふe.g. Ilothesぶ oﾐ the ┘eHsite? Do you ha┗e さa strategyざ or favorite way of doing it? Why?

ChC Usuall┞, I’┗e seeﾐ soﾏethiﾐg speIifiI oヴ seeﾐ soﾏethiﾐg oﾐ soﾏeHod┞…theﾐ I tヴaIk it do┘ﾐ oﾐ the iﾐteヴﾐet ふH┞ the Hヴaﾐd…I also seaヴIh H┞ the iﾏages..ぶ

NSch I al┘a┞s Google it fiヴst aﾐd Ioﾏpaヴe pヴiIes. If theヴe’s sale I’d fiヴst IliIk to see, Hut I always end up at the non-sale iteﾏs…┘eHsites aヴe good at diヴeItiﾐg ┞ou HaIk to the non-sale iteﾏs…

NZ I oﾐl┞ Hu┞ Hヴaﾐds that I kﾐo┘ oヴ fヴoﾏ ┘eHsites that I’┗e Hought Hefoヴe aﾐd I tヴust theﾏ.

CR I usually browse these websites to get inspiration for something, but then I do not

necessarily buy them.

AN It depeﾐds oﾐ if I ﾐeed soﾏethiﾐg uヴgeﾐtl┞ oヴ I’ﾏ just Hヴo┘siﾐg. Iﾐ the fiヴst Iase I specifically filter and sort, in the latter case I just click on view all and scan through the pages.

LB

10. Do you have any favorite fashion websites? Why those?

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

NSch Jigsaw, because their fashion is a bit different from the rest, they only use pure cotton and

silk…it’s a loﾐg teヴﾏ fashioﾐ

NZ OutNet because they have a selection of designers

CR The same as before: OutNet, Net-a-Porter, and the vintage clothes on Vestiarie Collective

AN I quite like Mango and Massimo Dutti because they are easy to navigate and they have a

clear and simple desigﾐ…ﾐothiﾐg too faﾐI┞ oヴ e┝peﾐsi┗e

LB

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

Which is the most important and why?

ChC

Ease of checkout: some websites only leave you a short period of time to complete the

purchase, I think this is wrong and you should be able to see what you put in your

shoppiﾐg Iaヴt the da┞ Hefoヴe…Retuヴﾐ is also ┗eヴ┞ iﾏpoヴtaﾐt foヴﾏe as I Hu┞ lots of stuff online and most of them go straight back.

NSch Different views (front, back) anything that makes it more efficient to see the colours, sizes, etc.

AN Images must be sharp and crisp with good contrast and on a model

NZ Displays (images and photos) are good and descriptions are clear

ChC Images: to be able to enlarge, see the material, to expand it

NSch Composition, details and information about the dress

CR To be able to see the dress on the mannequin

NZ Easy to maneuver

NZ The ┘a┞ ┞ou Iaﾐ Hヴo┘se the ┘eHsite, that’s oﾐ the hoﾏepage ふﾏeﾐuぶ AN Simple navigation, straight forward path to checkout, but also secure!

91

91

ChC Ease of search: to be able to drill down

NSch Zoom

CR Zoom – to see the fabric

AN )ooﾏiﾐg is pヴiﾏoヴdial, if I Iaﾐ’t zooﾏ iﾐ to see the te┝tuヴe I ┘ill ﾐot Hu┞ it

CR -

LB

12. Do you think that the website design could affect your purchase? How? Why?

ChC I doﾐ’t like it ┘heﾐ it is too Ilutteヴed oヴ too diffiIult to ﾐa┗igate. I also fiﾐd it ┗eヴ┞ aﾐﾐo┞iﾐg ┘heﾐ ┞ou ha┗e to joiﾐ iﾐ to Hu┞ ふeg. CoIosaぶ…ahh.. aﾐd I ┘aﾐt to see the clothes on a model and they have to give the dimensions of the clothes.

NSch

Yes, you can get so much more information and detail if the design is close to the offline

e┝peヴieﾐIe. If I see a Iheap ┘eHsite that puts ﾏe off…it’s haヴd to He speIial…I hate hea┗┞ flash ┘eHsites oヴ ┘heﾐ ┞ou ha┗e to skip the hoﾏepage HeIause theヴe’ s aﾐ aﾐiﾏatioﾐ. I also find it cheap if they put too many colours or flash.

NZ Yes. Oﾐ soﾏe ┘eHsites ┞ou Iaﾐ’t zooﾏ oヴ ┞ou Iaﾐ’t see the details…

CR Yes, if it looks professional it gives me security and of course ease of use.

AN Of Iouヴse, if the site looks uﾐpヴofessioﾐal aﾐd Iheap I ┘ouldﾐ’t tヴust theﾏ. But alﾏost all fashioﾐ ┘eHsites ha┗e the saﾏe Iolouヴ sIheﾏes ふ┘hite HaIkgヴouﾐdぶ aﾐd la┞outs…

LB

13. If you were to envision your ideal fashion website, what sorts of features and information

would it contain?

ChC Net-a-Poヴteヴ, Hut I Iaﾐ’t affoヴd to shop theヴe all the tiﾏe..I also like ┘heﾐ otheヴ ┘eHsites, like Zara, show what other items the model is wearing, so that if I like the whole look I can

buy everything.

NSch ンD ┗ie┘s of iﾏages, Pa┞Pal ふit’s ケuiIkeヴ, easieヴ, less ヴepetiti┗e, HeIause ┞ou doﾐ’t ha┗e to type in your card details)

NZ Checkout is important for me. I like to see the items I put in my basket. It is more efficient

and informative..I can just double-check what I bought before I pay for it (picture, delivery

and returns info), I just like when these are more prominent and pop-out.

CR It is easy to overview, the drop down menus are clear, the navigation is easy and it is easy

to go HaIk to the last iteﾏ I ┘as lookiﾐg at. The Iategoヴies aヴe IヴuIial…to foヴ e┝aﾏple differentiate between evening dresses and day dresses.

AN Exceptional zooming feature with drag and rotate functions. I would display the stock

levels and the stores they are available in. Display colours and textures in daylight and

under artificial lighting.

LB

14. What is your gender?

ChC Female

NSch Female

NZ Female

CR Female

AN Female

LB Female

15. What is your age?

92

92

ChC 39

NSch 34

NZ 34

CR 38

AN 35

LB

93

93

Appendix 3: Fashion Websites for Heuristic Evaluation

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

Accessed on 05/07/2012

http://www.frenchconnection.com/

94

94

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

Accessed 05/07/2012

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

95

95

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

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

96

96

Accessed: 05/07/2012

97

97

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


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

98

98

99

99

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


http://www.tedbaker.com/

100

100

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

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

101

101

102

102

103

103

Appendix 4: Heuristic Evaluation Results

104

104

FCUK

Reiss

Whistles

Jaeger

Ted Baker

Comptoir desCotonniers Usability

Aesthetics

User experience

Overall experience

105

105

APPENDIX 5 – Interview Notes

Feedback from the 2 selected websites:

FRENCH CONNECTION positive feedback:

easy to navigate

clear and simple design, not too fussy

colours are good

returns information policy is clear

さIt's ﾐiIe that iﾏages Ioﾏe out, Hut the otheヴ ┘a┞ aヴouﾐd ふヱst dヴess oﾐ its o┘ﾐ, ヲﾐd dヴess oﾐﾏaﾐﾐeケuiﾐぶざ, さI like it that ┞ou fiヴst see the dヴess oﾐ the ﾏaﾐﾐeケuiﾐ aﾐd ┘heﾐ ┞ou sIヴoll o┗eヴ it gi┗es a Ilose upざ

it goes back to the last item seen

quick view was good

zoom is good

the suggestions is good ("You might also like..")

Checkout is good but I'd like to see it the other way around (the left side content to the

right)

FRENCH CONNECTION negative feedback:

- さI doﾐ't thiﾐk that the┞ ﾐailed the Iategoヴies ヴight ふe┗eﾐiﾐg dヴesses aヴe doﾐ't look e┗eﾐiﾐg dヴesses to ﾏe…ﾏoヴe da┞ dヴessesぶざ

106

106

- さThe aﾐiﾏatioﾐ at the top, ┘hatげs the puヴpose of it?!ざ, さDoﾐ't like the Hig headliﾐes aﾐd the animation (it's a ┘aste HeIause I doﾐ't Iaヴeぶざ

- I don't like adverts, social networks

- さI aﾏﾐot ┗eヴ┞ keeﾐ oﾐ the Iolouヴs ふヴed, ┘hite aﾐd gヴe┞ぶざ, さﾐo HaIkgヴouﾐd iﾏages, ﾐo Iolouヴsざ, さIolouヴs aヴe ┗eヴ┞ pooヴ; I thiﾐk the┞ aヴe ﾐot iﾐ liﾐe ┘ith the Hヴaﾐd's iﾏageざ

- it doesn't make me feel very special

- さ)ooﾏ is teヴヴiHle, ┘hite ┘ith ┘hite HaIkgヴouﾐd doesﾐ't ┘oヴk foヴﾏeざ, さﾐo supeヴ eﾐlaヴge faIilit┞ざ

- images are not sharp

- the size guide is messy, I don't like it

- too ﾏuIh iﾐfo aHout the dヴess…I doﾐ't Iaヴe, I oﾐl┞ ┘aﾐt to see ┘hat's it made of and the

care instructions

- "┞ou ﾏight also like" is good Hut ┘heﾐ I IliIked oﾐ it, it ┘as out of stoIk…theiヴ s┞steﾏ is ﾐot updated and this is very annoying

FRENCH CONNECTION suggestions:

o Make it more consistent and update the system.

o Delivery information should stand out more

o Party dress and evening dress - what's the difference??

o Some dresses are shown with mannequins and some without – consistency.

o Change the odd names of the dresses (eg. "Lost and Found")

o Only show clothes that are on stock.

Whistles positive feedback:

full screen views

nice to have more dresses in a line (page layout)

selecting sizes is OK

good IheIkout pヴoIess ふIolouヴs, optioﾐsぶ, さPeヴfeIt IheIkout, all iﾐfo I ﾐeed is theヴeざ

I like the homepage, it looks as a fashion website and I do not have to scroll (everything is on

one page)

I like the menu style and the fact the I'm not drawn in by the prices (prices are not shown)

good zoom

Whistles negative:

- too busy

- the pop-up is annoying on the iPad

- wish list - annoying to log in

- cold colours - don't like it

- pictures are too crowded and can't roll over and zoom

- returns policy is too long

- confusing menu structure

- Recommendation is good but I can't see the jacket with the dress I chose (usability)

Whistles suggestions:

107

107

o it is very annoying on the iPhone and iPad, because the pop-up is floating around

o the wish list feature is ok but it asks to log in and I find that very annoying

o it's a bit busy but the sizes of the images are good

o whilst you are zooming some info disappears from the screen (as the zoom covers it)

o colours are dull

o "Sorry, out of stock" message is very annoying and frustrating! Don't show if you don't have

it on stock

o I don't get this Wish List thing (I never click on it)

o I ﾐe┗eヴヴead the st┞le iﾐfo…I thiﾐk it is a ┘aste of space

108

108

APPENDIX 6 – Customer Journey Observed

1. home page

2. women section (from top menu or from central image)

3. dresses (directly from top menu or from side menu bar)

4. click on view all (all did click on view all even before looking at the categories)

ヵ. IheIk the Iategoヴisatioﾐ of dヴesses ふif theヴeげs oﾐeぶ 6. scan through the list of dresses

7. observe the individual dresses in a row by scrolling mouse over it and looking at the different images (when they change as the user drags the cursor over it) 8. some mentioned the names of the dresses but no one mentioned price (although on some website it is clearly visible below the dress)

9. select dress (click on dress)

10. check dress: zooming, alternative views, etc

11. check info next to the dress

16. look for the delivery/returns policy

12. go back to dresses (continue looking in the list) or select size/colour (check the size chart or sizing info)

ヱン. put dヴess iﾐto shoppiﾐg Hasket ふIliIk oﾐけAdd to Basketげ oヴけCheIk Outげぶ 14. go to “hoppiﾐg Basket ふIliIk oﾐ the iIoﾐ at the top ヴightぶ oヴ ┗ia the けAdd to Basketげ Huttoﾐ

15. check dress in the basket: recheck dress type, size, colour, quantity, price

16. look for the delivery/returns policy

17. click on checkout to enter personal details or login

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

109

109

APPENDIX 7 – Personas and Storyboards

Primary persona:

Images from:

http://stylescout.blogspot.co.uk/2010_12_01_archive.html

http://www.msg-nonstatuscontracthire.co.uk/range-rover-sport-v8-hse-08-bad-credit-car-finance-882-a-month/

http://blog.zoopla.co.uk/2011/02/14/what-1million-buys-you-around-britain/

http://recipes.howstuffworks.com/diet-fads-pictures.htm

http://www.footballfancast.com/2012/03/football-blogs/the-perfect-football-treat-for-your-kids-this-easter http://mybigfatgreekmove.blogspot.co.uk/2010/05/stylish-wardrobe-inspiration.html

http://freebies-2deals.com/as-the-rumor-has-been-said-ipad-mini-is-coming/

Chantel is 38 years old and she is a stay-at-home mum of 2 young boys. During the week she is busy

looking after the kids, doing the school runs and taking care of the household. Chantel is very

concerned about her figure which she keeps in shape by doing exercise regularly. She is currently

refurbishing the house so her schedule is rather hectic to make sure that the boys are out of the

Huildeヴげs ┘a┞. Wheﾐ Chaﾐtel has a Hit of tiﾏe aﾐd oﾐ heヴ o┘ﾐ she goes oﾐ the Iﾐteヴﾐet aﾐd IheIks emails, Facebook or looks for clothes online.

Chantel spends approximately 3 hours a day browsing and mostly uses her iPhone and iPad, but she

also likes to buy magazines to be updated on the latest fashion trends and celebrity fashion. When

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/

110

110

she sees something on somebody that she likes she is not afraid to ask where the clothes or shoes

are from and she then makes sure to go on the internet and track them down for herself. She admits

buying clothes and accessories on the internet every week.

“he eﾐjo┞s oﾐliﾐe shoppiﾐg HeIause it is ┗eヴ┞ Ioﾐ┗eﾐieﾐt foヴ heヴ as she doesﾐげt ha┗e to lea┗e the house and drive, but she also admits that she feels a bit guilty for ordering too many clothes, most of

which she ends up sending back. Therefore it is very important for her to check the delivery and

returns policy of the company selling the items online.

Chantel buys from a variety of websites but she only buys from those which have a trustworthy

reputation and design that allows her to easily navigate through the pages. Zooming technology is

also a ke┞ faItoヴ iﾐ heヴ puヴIhasiﾐg pヴoIess; if she Iaﾐげt see the Ilothes fヴoﾏ a Ilose ┗ie┘ she will not

Hu┞ it. Chaﾐtel doesﾐげt like those ┘eHsites ┘heヴe she has to sigﾐ iﾐ Hefoヴe seeiﾐg the Ilothes oヴ before viewing the items in her shopping basket.

Secondary persona:

Images: http://blogs.babycenter.com/celebrities/jessica-alba-does-the-school-run-in-style/

http://www.friday-ad.co.uk/article/a-guide-to-organic-food http://www.sahservices.com/homeopathy http://www.telegraph.co.uk/property/propertypicturegalleries/6157588/On-the-property-market-London-mews-houses.html

http://roosie-fashionplace.blogspot.co.uk/2012/01/vintage-clothing.html http://hayancafe.blogspot.co.uk/2011/06/san-diegos-vintage-shops.html http://businessblog.winweb.com/miscellaneous/you-can-have-your-own-online-shop

Nicole is a busy mum of 2 girls. She has recently moved to London and has just settled in with her

family. She is studying homeopathy at a French college via e-course whilst her kids are in school. She

is very health conscious and only cooks with organic ingredients.

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

111

111

Nicole only buys quality products which means: pure silk, organic cotton, natural wool, etc. She

spends roughly 4 hours a day on the Internet to keep up with her studies as well as researching the

web for the perfect items. Although Nicole admits spending a lot of time online she prefers doing

offline shopping which she considers as a treat and leisure.

Nicole also loves vintage clothes and she uses the internet to get inspiration from different fashion

┘eHsites. NiIole is ┗eヴ┞ pヴiIe IoﾐsIious so she doesﾐげt ﾐeIessaヴil┞ Hu┞s ┘hat she sees iﾏﾏediatel┞; instead she would use Google to compare prices and would buy it from the cheapest seller. Nicole

finds it off-putting when fashion websites have heavy flash or animation on the homepage that she

has to skip. She prefers to pay with PayPal for her customs.

112

112

113

113

APPENDIX 8 – User Testing Pre-test Interview

1. Do you have experience with online shopping?

BG: Yes, I buy something online about 5 times in a month. MS: Yes, I like shopping online because I don't have to leave the house. MF: Yes, I do buy things online; for example when I received an email from Debenhams with a discount voucher. But I do browse a lot on ASOS and Monsoon too. DW: Yes, clothes, food, electricals and books. LB: Yes, I speﾐd lots of tiﾏe oﾐliﾐe… ChC: Yes, I buy everything online. AudC: Yes, Ilothes. But I pヴefeヴ offliﾐe shoppiﾐg…I'd take the ヴefeヴeﾐIe fヴoﾏ the oﾐliﾐe shop aﾐd also wait for the sales. AshC: Yes, but not just clothes, I also buy other stuff as well; books.. EC: Not really, I prefer to shop instore NZ: I prefer to shop instore but I browse a lot online.

2. When was the last time you bought clothes online?

BG: Bathing suit, a week ago. MS: A week ago, I received an email about promotions. MF: In March (5 months ago) DW: A year ago. LB: Yesterday, I bought a handbag. ChC: Yesterday, I bought clothes (dresses) and sandals. AudC: 1 month ago AshC: 1 month ago EC: A year ago. NZ: long time ago ふIaﾐげt ヴeﾏeﾏHeヴぶ

3. Which website was it?

BG: JoJo Maman Bebe MS: Mexx, I've known and used this website for a long time and I quite like it because the images and the colours are good. MF: ASOS DW: It's a Chinese website, called tmall.com LB: Net-a-Porter ChC: ASOS AudC: L.K. Bennett AshC: Brand Alley, it's good for bargains EC: Net-a-Porter NZ: OutNet

4. Why did you choose that website?

BG: They keep sending me their brochures. Also they have a good selection of items and the accessories are also good. M“: It is Ileaヴ, I Iaﾐ see the Woﾏeﾐ's seItioﾐヴight a┘a┞ aﾐd the┞ also ha┗e a けLook Bookげ t┞pe feature so they show the combination of items, so you can see the whole picture. It is also more personal because it is shown on a model. MF: I was browsing just to see ┘hat the┞ aヴe selliﾐg…Hut I ┘ould go to a ┘eHsite if I ヴeIei┗ed discount vouchers from them, like I did with Debenhams. It was also good because I just needed a dress for a wedding, so it was perfect timing!

114

114

DW: It is reliable, because I have experience with it, and it has PayPal system, so I know it is secure. It also has many options: lots of brands. And it is usually cheaper to buy online then in the shops. LB: It is one of my favourite websites and because they sold the brand I wanted to buy. ChC: Variety and free delivery. AudC: I saw a dress in a shop for a wedding I was going but they didn't have it the colour I wanted, so I went online and ordered it from their website. AshC: All my colleagues use it, I received an email from them.. EC: I don't think it is the best website, I much rather prefer Gucci and Dior or Prada. NZ: My friends recommended me that website 5. What do you like of that website in terms of its design? Why?

BG: Design is good. I like the checkout, there's a nice flower wallpaper that I quite like. The website is designed for women, I really like it; it is colourful with pastel colours. MS: Simplicity, it has a white background, the buttons and the navigation are good, and the subcategories (like the list of blouses and then you can also change the colours for each one and zoom and see the item from different views. MF: The images, that I am able to click on a dress. The information about the dress; the different colours they come in and the bigger images, to rotate to see Hetteヴ, the size…I like to feel/touIh it as if I ┘eヴe iﾐ a shop…HeIause oﾐliﾐe is diffeヴeﾐt.. Ah, aﾐd also the deli┗eヴ┞ aﾐd ヴetuヴﾐs iﾐfoヴﾏatioﾐ! DW: They have good promotions skills, their banner is quite prominent and I can scan the homepage quickly to see the different clothes. Their homepage has lots of colourful content which is good for inspiration when browsing. LB: First of all it is very important for me that websites have apps for mobile because I browse a lot oﾐﾏ┞ iPhoﾐe. Eas┞ to use: doﾐげt ha┗e more than 3 items in a row, actually 2 looks good on the iPhone. It also has to be intuitive to use and easy to navigate. ChC: It has a bit of a fashion magazine feeling, I like the colours, I mean it has also black&white but also primary colours! It doesn't have that comic look neither. It has people on the front page, and I quite like that. AudC: It was easy to go through and I found the dress quickly, they have a good implementation and categories. The photo was interactive and I was able to zoom. Also, it was shown on a model so I could see the fit and the shape of the dress. AshC: Actually, it is not very well designed, it seems a bit clunky and not totally user-fヴieﾐdl┞…Hut it is about getting a bargain, not high quality clothes. Because it is a sales website, it is more functional. It doesn't have that beautiful sheen that some websites have, where you can quickly get to the point.. It doesn't matter the design of the website if the clothes it is selling is not high quality (you wouldn't expect it to be beautiful) EC: Gucci has the best design; because it has nice bright images and it is very easy to use. Also it is very catchy, it keeps me on the website and makes me want to discover it further. It has a good ﾐa┗igatioﾐ, side┘a┞s… NZ: It's not a pretty website, quite plain and not much colours or adverts. But it is very easy to use.

6. What would you like to see differently on that website in terms of design? Why?

BG: Nothing MS: The music is too loud and I don't like that! But it is a peaceful website, it is not cluttered and when it is sales going on it is not screaming in your face. Oh, actually what I really don't like is that I have this Customer Card and it doesn't let me change my address, I mean it is not automated; I had to call customer services and they asked me to send them an email but then I didn't get an answer for ages...oh, it was really bad from them! I also don't like their main website the mexx.com because it is quite an unclear website; the screen is divided into 2 parts, but it is just not clear what it does and it takes too long to load as well

115

115

MF: Select the dress by size, colour and by price. As for the text; black and white is fine, kind of ﾏiﾐiﾏalistiI, Hut I aﾏﾏoヴe iﾐteヴested iﾐ the dヴess…the ﾏateヴials! Aﾐd I like to see the images in a context.. so for example an evening dress is worn in the context, e.g. in a party. DW: The speed, sometimes it can be very slow. The format is different for each brand so I would make it all the same layout. The design would definitely affect my purchase because first impression foヴﾏe is ┗eヴ┞ iﾏpoヴtaﾐt, the Iolouヴs…if I Iaﾐ see that it is ﾏ┞ st┞le theﾐ I'd sta┞ Hut if ﾐot, I'd lea┗e immediately. LB: I like that ┘eHsite ┗eヴ┞ ﾏuIh…so I ┘ouldﾐ't Ihaﾐge aﾐ┞thiﾐg. AudC: It is too conventional and staﾐdaヴd…the ﾏodels Iould He togetheヴ aﾐd sho┘ﾐ iﾐ Ioﾐte┝t…┘alkiﾐg, tuヴﾐiﾐg aﾐd iﾐ pヴopeヴ da┞ light. 7. What is the % of your visual attention between the website's design and the clothes it is selling?

AC: I predominantly look at the clothes and to try to find the way to access the clothes, but you also iﾐteヴaIt ┘ith the ┘eHsite…so I suppose ┘heﾐ ┞ou aヴe seleItiﾐg the dヴess ┞ou aヴe foIusiﾐg ﾏoヴe oﾐ the dress but when you are at the output stage so try to buy it or try to move on that's when you pay more attention on the website. If it's a nice website you'd associate it with good quality (clothes). EC: 50-50% ChC: If the website was very poor in terms of usability I would definitely notice it, but generally I'd say I keep a discrete attention on the website but would many looks at the clothes. I'd say 70% on the clothes and 30% on the website. NZ: 10% on the website and 90% on the clothes

8. You have 2 fashion websites selling similar style dresses; one has a cutting edge design with

poor usability and the other one has a boring design with very good usability. Which one would

you prefer to use to buy a dress? Why?

AC: I'd go with the one which is the quickest and easiest to use. I get so frustrated if the website is difficult to navigate. It can be aesthetically very pleasing to go to a very beautiful website in terms of aesthetics but if it is difficult to use it is so easy to get frustrated. For example Amazon; so easy to use, quick checkout, you're not fluffing around, it takes 5 minutes. EC: The easier Hut if itげs ﾐot ┗eヴ┞ attヴaIti┗e I ┘ill ﾐot go HaIk to that ┘eHsite aﾐd ﾐot use it agaiﾐ. ChC: I'd go with the good usability, because I want to do it the quickest and easiest way possible. That's why I shop online: to save time! NZ: Good usability is more important, because if it takes me to spend more time online then I don't want it.

9. Which step do you consider the most exciting part of your fashion website journey? Why?

AC: The most interesting part is when you buy it, because you visualize it: what you going to do with it, ho┘ ┞ou'ヴe goiﾐg to ┘eaヴ it…It HeIoﾏes ヴealit┞, is a lot aHout ┗isualisatioﾐ too. EC: Observing the dress, the selection of the dress ChC: Examining the dress NZ: When I am looking at the dress

10. Which step is the most boring part? Why?

AC: It's putting in the card details, that was my point with Amazon; it takes a few clicks and it's done. EC: Fill in information, payment ChC: To log in before you proceed to checkout NZ: When the pages are loading, it's very boring

11. What do you think it makes a website aesthetically pleasing?

BG: If it's not cluttered, no ads popping up. Also, the search box has to be good. It must point me to the right product.

116

116

MS: Simplistic, not too much in your face (eg. sales), it has a good search facility and you can search for all the brands, but the lists are not too long, because I don't like that, when you have to scroll down to see the rest of the list. MF: White background, black text, so it's clean. I don't like very busy websites or when there is too much information, text. DW: Colours, pictures with the model and the context of the picture; it would increase the score of the product. LB: That it is consistent, clear, easy to read and not too cluttered. ChC: Clarity, not too busy, nice colours; magazine look but not like Heat, instead like Vogue AudC: Colours, bright colours (red, green, yellow), text is not too much and with some nice fonts. Black and white designs all look the same, I don't like them. AshC: Clean, nice colours, b&w is ok because it tends to be cleaner look, anticipate what I want. Not too much information, so it is clean. EC: Colours, bright colours (red, green, yellow), sg really catchy. Catching: context! It puts you in the ﾏood… NZ: Colour coordination, good music (but I guess I would turn it down)

12. Which colours do you prefer to see on fashion websites? What would those colours tell you?

AC: Depends on the type of brand, but b&w works always very well. EC: Context is important (net-a-porter is not nice, they show it against white background), it's more peヴsoﾐal… ChC: Black and white and strong primary colours like red, so that the overall look is contemporary and minimalistic NZ: bright colours like orange, not black and white and not dark colours

13. Where do you like to see those colours? (Hints: homepage, navigation (menu), materials, etc)

AC: I doﾐ't ﾏiﾐd Hヴight Iolouヴs…it depeﾐds EC: Throughout the website but with certain white space ChC: Initial banner, straplines and I like it when it is prominent and consistent on all pages NZ: Everywhere

14. How do you like to see the clothes presented on the website? (Hints: on a model, in a context,

against white background, against coloured background, on a hanger, etc)

AC: On and off the model, with a few different views, I like zoom. The different angles, not really the Ioﾐte┝t…Hut it is ok aﾐd oﾐ a ﾏodel al┘a┞s e┗eヴ┞thiﾐg looks good…if it has a Ioﾐte┝t it ﾏakes the clothes more appealing. EC: on a model, context ChC: Context is not important for me, but I want to see the items combined with other items (lookbook type of presentation) NZ: I prefer it with context; it is better and more realistic looking. I can better visualise myself with the dress

15. What additional information (not only about the dress!) do you look for on fashion websites?

AC: Details: materials, but I suppose the difficulty is that you need to feel and touch it. EC: description, length of a dress ChC: ┘heヴe to Hu┞ otheヴ iteﾏs, ﾐe┘ tヴeﾐds, iﾐfo aHout the desigﾐeヴ… NZ: sizing, material info

16. How do you usually go about buying a dress online? (What route do you follow on the

website?)

117

117

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

Interviews before the test:

All participants had experience buying clothes online.

6/10 said they bought clothes online in the last month.

3/10 said that in spite of the fact that they do buy clothes online, they prefer the offline

shopping experience.

Collection websites (e.g. ASOS, Net-a-Porter, Brand Alley, tmall.com, OutNet) were used more

ofteﾐふΑ/ヱヰぶ foヴ Ilothes shoppiﾐg thaﾐ iﾐdi┗idual Hヴaﾐdsげ ┘eHsites.

3/10 choose the website because they received targeted sales emails.

2/10 said that they were not keen on the website but the website sold the specific item/brand

they wanted to buy.

Other reasons mentioned were: security (PayPal), variety, free delivery, good usability.

6/10 mentioned that they liked the colours of the ┘eHsiteげs desigﾐ. 5/10 said they liked that the website is easy-to-use.

3/10 said that good navigation is part of their preferred website design.

3/10 said good zooming is important foヴ theﾏ iﾐ teヴﾏs of the ┘eHsiteげs desigﾐ. 2/6 said that they like to see the clothes worn by models and in context.

Other favourite design features included: simplicity, user-friendly, intuitive, interactive, has a

fashion magazine look.

Design features that paヴtiIipaﾐts didﾐげt like aヴe: cluttered design, takes too long to load (2/6),

さwhen it’s just not clear what it doesざ, too Ioﾐ┗eﾐtioﾐal aﾐd staﾐdard desigﾐs, too loud ﾏusiI. Visual attention between the website and the items it is selling on average was 30% (website)

and 70% (clothes).

さI predominantly look at the clothes and to try to find the way to access the clothes, but you also

iﾐteヴaIt ┘ith the ┘eHsite…so I suppose ┘heﾐ ┞ou aヴe seleItiﾐg the dヴess ┞ou aヴe foIusiﾐg ﾏoヴe on the dress but when you are at the output stage so try to buy it or try to move on that's when

118

118

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

(clothes).ざ

All participants preferred the boring design with very good usability and they all said that they

would prefer to buy a dress from the website which was the easiest and quickest to use.

All participants said that the most exciting part of their journey on the fashion websites was the

step when they interacted with the visuals of the dress: observing it, examining it and

┗isualisiﾐg it: さ┘hat ┞ou goiﾐg to do ┘ith it, ho┘ ┞ou'ヴe goiﾐg to ┘eaヴ it…ざ. The most boring part was considered the end of the journey; when participants had to fill out

the personal information and payment details. One participant said that for her the most

boring part was when the pages were loading and she had to wait.

Aesthetically pleasing design was described as:

6/10 mentioned not too cluttered, clean and not too much text on the website

6/10 said nice colours

2/10 mentioned products shown in context

1/10 said consistent design

Functional features were also mentioned (they seem to be inseparable characteristics of

aesthetiIsぶ: good seaヴIh faIilit┞, ﾐot too ﾏuIh sIヴolliﾐg, さAnticipates what I wantざ

Best colours for fashion websites: black and white (50%) and bright and primary colours (50%).

Other comments included: white background allowed better visual on the dress, overall it

should have a contemporary and minimalistic look, context is important to make the pages

more personal.

Participants said that the colours mentioned earlier had to be consistent on all pages but

generally all participants wanted to see colours everywhere throughout the website.

All participants agreed that showing clothes in context is more appealing. 2/4 preferred to view the clothes on a model 1/4 said she liked the different views and the zooming ヱ/ヴ said she さI want to see the items combined with other items (lookbook type of presentation)さ

Additional information on fashion websites that participants are looking for: 2/4 mentioned materials info 1/4 supposed the description of the clothes (e.g. the length of a dress) ヱ/ヴヴe┗ealed that she ┘aﾐted to kﾐo┘ さwhere to buy other items, new trends, info about the

desigﾐeヴ…ざ

The interview revealed that people have many different ways of buying a dress online in relation to their customer journey (e.g. which categories, filters they would use on the website). But there are some patterns that can be observed: Based oﾐ paヴtiIipaﾐtsげ aﾐs┘ers there are two different ways of surfing on fashion websites depending on the purpose of the visit; browsing without any specific ideas (looking for

inspirationsぶ aﾐd lookiﾐg foヴ a speIifiI iteﾏ/Hヴaﾐd ふさhuntingざぶ. It is iﾐteヴestiﾐg that theヴe is ﾐo difference between those two scenarios in the use of the website and participants seem to follow similar ways; they would select from the main navigation menu a category and browse aﾏoﾐgst the ヴesults iﾐ that Iategoヴ┞ ふe.g. けNe┘ iﾐげ, けBlousesげ, け“aleげ, etI.ぶ

119

119

APPENDIX 9 – User Testing, Post-task Interview

1. Which website would you/would you not recommend to a friend? Why?/Why not?

BG: I ┘ould ヴeIoﾏﾏeﾐd F‘ENCH CONNECTION HeIause the piItuヴes aヴe Hetteヴ, the photos…I liked the animation and the style better. The models have better hair-styles too! MS: FRENCH CONNECTION, because it is more clear to me. MF: FRENCH CONNECTION, because it is easier to find what I need and it is clearer information and neater. DW: FRENCH CONNECTION, but it is hard to say because it depeﾐds oﾐ ┘hat ﾏ┞ fヴieﾐds st┞le…Hut based on my experience I'd recommend FRENCH CONNECTION. LB: FRENCH CONNECTION, I didn't like the other one at all. ChC: Whistles, because I prefer that style, it fits me more and because I found that one the more aesthetically pleasing AudC: FRENCH CONNECTION, more structured, overall layout better. But they should improve on the contrast and change the fonts! AshC: FRENCH CONNECTION, it is more functional, but Whistles has nicer dresses EC: FRENCH CONNECTION, the start (homepage) is very catchy and it has better usability NZ: Whistles, because the branding is better (the logo), it is more inviting and more exciting. The set out of the homepage is more inviting

2. How would you describe this website in one or more words?

BG: Youﾐg aﾐd soヴt of hip, Hut ﾐot ┗eヴ┞ effeIti┗e HeIause I had to go thヴough all the pヴoduIts… MS: Simplistic, fresh, vivid MF: Neat, useful. DW: Cutting edge, personal. LB: Clear, basic, easy to use. ChC: Slick, contemporary, top end high street AudC: Good quality AshC: Quirky but functional EC: catchy, making you want to go in NZ: friendly and exciting

3. If this website was a car, what car would it be?

BG: Defiﾐitel┞ ﾐot a faﾏil┞ Iaヴ! Aﾐd ﾐot a ヴaIiﾐg Iaヴ, like a PoヴsIhe oヴ so… MS: FRENCH CONNECTION = Mini Cooper MF: FRENCH CONNECTION = BMW DW: FRENCH CONNECTION = Maserati LB: FRENCH CONNECTION = the new Fiat 500, because it is basic, but chic ChC: Whistles = Audi A3, it is jazzy and exciting but still accessible AudC: FRENCH CONNECTION = Renault, mid-range car, not a Mercedes, because the contrast is missing! AshC: FRENCH CONNECTION = Vauxhall, accessible to people but with caracter EC: FRENCH CONNECTION = BMW NZ: Whistles = Audi Q5

4. How does the 2 websites compare to each other?

BG: FRENCH CONNECTION's site is too white for me, it hurts my eyes. Whistles is a bit darker and the contrasts are better on that one; even they also have white backgound they show more images on the page so it doesﾐ't huヴt so ﾏuIh…

120

120

MS: Whistles is boring, old fashioned ho┘ the┞ ﾐaﾏed theiヴ Iategoヴies: Kﾐit┘eaヴ aﾐd Deﾐiﾏ… FRENCH CONNECTION is more fresh and vivid. MF: There are good and bad things about both of them, they kind of complement each other..but FRENCH CONNECTION is more organized and clearer. DW: Whistles has good services (eg. the telephone number) but it has worse design LB: I wouldn't shop on Whistles because that website is irritating. ChC: It is realy a mix, both have good and bad points. FRENCH CONNECTION I liked the cover page but not too much the colours, it makes it a bit boring. Whistles is more sophisticated and more edgy. AudC: FRENCH CONNECTION has overall better structure and seems more user-friendly, Whistles is messy but has better contrast AshC: FRENCH CONNECTION looks higher quality (more white) with more minimalism (=quality, expensiveness) and good functionality. Whistles is more aspirational, more appealing but not very functional. EC: Both have good and bad points, but FRENCH CONNECTION is more modern NZ: They are both similarly organized but the colour choices are different, Whistles is better 5. If you were to review this website what score would you give it out of 10? Why?

BG: FRENCH CONNECTION = 7 MS: FRENCH CONNECTION = 7.5 MF: FRENCH CONNECTION = 8 DW: FRENCH CONNECTION = 8 LB: FRENCH CONNECTION = 6 ChC: Whistles = 9 AudC: FRENCH CONNECTION = 6.5 AshC: FRENCH CONNECTION = 7 EC: FRENCH CONNECTION = 8 NZ: Whistles = 8 7. If you could change one thing about each website what would it be and why?

BG: Background (too much white) FRENCH CONNECTION: Coﾐtヴasts… M“: F‘ENCH CONNECTION: CheIkout, it's just too ﾏuIh iﾐfoヴﾏatioﾐ theヴe… MF: Whistles: I'd change the structure, the menu and the navigation. FRENCH CONNECTION: I'd Ihaﾐge the ﾏeﾐu oﾐ the left…like Whistles. DW: FRENCH CONNECTION: the product description and the checkout. LB: FRENCH CONNECTION = the homepage, it needs a better type face ChC: Whistles = Pop-up ┘iﾐdo┘ oﾐﾏoHiles… AudC: Homepage, contrast and font style AshC: FRENCH CONNECTION = design elements to be more consistent, and navigation EC: FRENCH CONNECTION = zooming NZ: Whistles = the background colour (to yellow and sky blue)

121

121

APPENDIX 10 – User Testing Plan

1 hour/interview

I. Pre-test interview:

Time: max. 15 minutes

II. Card sorting:

Aim: to re-iterate customer journey process.

Preparation: create flash-cards based on proposed customer journey


Method:

1. Show the cards

2. Let them order the cards (always shuffle the order of the cards)

3. Ask them to explain why they ordered the cards in that way

4. Take a photo of the cards

III. Emotion & Reaction Scale:

Aim: To identifying commonalities in design that provide the same emotional responses and to understand

paヴtiIipaﾐtsげヴeaItioﾐ to aﾐ iﾏage ふ┘hetheヴ positi┗e oヴﾐegati┗eぶ. Preparation: create matrix, image print outs and bring bluetak


Method:

1. Create a vertical and horizontal axis based on two sets of polar opposite words.

2. Hand the participant an image and ask for her initial thoughts.

3. Ask her to place the image on the matrix and explain her rationale.

4. Repeat steps 1-3 until all images are on the matrix.

Selection of images:

Homepage

Logo/Identity

Colours

Text (font, style)

Menu bar/Menu options

Sale/Special offers/Multi buy discounts

Buttons (button graphics, size, colour, text, texture)

Links below the fold

Browse/Search

Products categories are meaningful

Items in a row

Images sharpness

Product information page

122

122

Price tags

Select

Product information (image and text)

Sizing and stock availability

Out of stock messages

Colour pieces (samples)

Examine

Images (size quality) -> zooming, rotating, dragging

Auto-zoom

Multiple image views per product

Basket

View items in basket

Checkout

Structure of the checkout process

IV. Bi-polar Emotional Response:

Aim: To get participants describe their feelings about the websites on scales with semantic labels.

Preparation: images print outs, scale printouts

Time: max. 20 minutes (around 10 minutes per website)

Method:

1. Hand each participant a copy of the scales and give them time to familiarize themselves before showing them the printouts.

2. Show the participants the design and explain its purpose.

123

123

3. Ask the participants to complete their scales individually. 4. Repeat steps 1-4 for each page. 5. After the session, plot all of the paヴtiIipaﾐtsげヴespoﾐses oﾐ a siﾐgle sIale foヴ eaIh page to

help identify any patterns.

V. Post-interview:

Time: max 20 minutes

124

124

APPENDIX 11 – Card Sorting

125

125

Appendix 12 – Emotional Reaction Matrix

126

126

Appendix 13 - Bi-polar semantic scale

127

127

Homepage:


Navigation page:


Product view page:


128

128

Zooming:


Basket/Checkout page:


129

129

APPENDIX 14 – Fashion Websites Paper Prototypes

130

130

131

131

APPENDIX 15 – Focus Group Interview and Paper Prototype Testing

Where would you click first? How would you explore these websites?

A: It depend what do i want to do..

E: (Gets the colourful homepage screenshot) Shoes and dresses, because this is what i would need

ﾐo┘. I doﾐげt Hヴo┘se ┘eHsite just to see ┘hatげs theヴe, Iげd al┘a┞s look oﾐ a ┘eHsite foヴ the stuff I need. And when I see the icons on the website e.g. shoes and dresses then I click on those icons. So

here I would click on the shoes because these look nice.

A: Iげd do it diffeヴeﾐtl┞: foヴ e┝aﾏple Iげd ﾐe┗eヴ IliIk oﾐt he Helo┘ the fold iﾐfo…

E: Me neither!

A: Iげd IliIk fiヴst oﾐ Woﾏeﾐ aﾐd ┘ithiﾐ ┘oﾏeﾐ Iげd IliIk oﾐ the Iategoヴ┞, ﾐot oﾐ the shoes iIoﾐ HeIause i ┘ouldﾐげt kﾐo┘ if itげs ┘oﾏeﾐげs oヴﾏeﾐげs… But i doﾐげt like this paヴt of the ┘eHsite ふpoiﾐts to the top row where there are lots of small images of coats), these are just too small, do I have to click

oﾐe H┞ oﾐe to see these??? It ┘ould take a lot of tiﾏe…theヴeげs ﾐo added ┗alue foヴﾏe ┘ith this design.

E: I agヴee, Iげd ﾐe┗eヴ IliIk oﾐ soﾏethiﾐg like this. It is ﾐot aesthetiIall┞ pleasiﾐg aﾐd it doesﾐげt ﾏake the website more colourful whatsoever

A: ┞es, i doﾐげt like this s┞steﾏ at all, I ┘ouldﾐげt kﾐo┘ ┘hat to do ┘ith it: IliIk oﾐ eaIh of theﾏ oヴ what?

E: I like this homepage but nor primarily because of the pictures and the colours but for the

categories

A: ┞es, it is just easieヴ, I doﾐげt ha┗e to Ilick to too many places, because i can see straight away

„Bagsざ ups this is ┘hat I ┘aﾐt, so „IliIkざ…

E: ┞es, aﾐd the „“aleざﾏeﾐu is ┗eヴ┞ good, HeIause I ┘ould al┘a┞s look at the sale iteﾏs so it is good that it is highlighted (with red colour)

A: i agree, Iげd alﾏost al┘a┞s IheIk the sale fiヴst

E: yeah, Sale is the best! (both laugh)

E: Hut Iげd ﾐe┗eヴ IliIk heヴe at the Hottoﾏ..

A: ┞es, I kﾐo┘ ┘hat kiﾐd of iﾐfoヴﾏatioﾐ the┞ put theヴe ふIustoﾏeヴ seヴ┗iIes, deli┗eヴ┞, etIぶ Hut Iげd IheIk these later on, when I decidet o buy something. Not at the beginning! Maybe it is there because it

ﾏakes the ┘eHsite look ﾏoヴe offiIial aﾐd pヴofessioﾐal. Aﾐd Iげﾏ suヴe that at soﾏe poiﾐt Iげd IheIk the shippiﾐg Iosts, deli┗eヴ┞ details…

E: Oh this is good ┘hat ┞ouげ┗e just said! I al┘a┞s check the shipping conditions, to check whether

they ship to my country..

132

132

So, when would you check this information about the delivery and shipping?

E: If i see that I like the ┘eHsite aﾐd the Ilothes the┞ aヴe selliﾐg Iげd IheIk fiヴst ┘hetheヴ the┞ ship to Huﾐgaヴ┞ HeIause if I fall iﾐ lo┗e ┘ith oﾐe pieIe aﾐd theﾐ I fiﾐd out that the┞ doﾐげt ship that ┘ould He disappoiﾐtiﾐg. Thatげs ┘h┞ it is ┗eヴ┞ iﾏpoヴtaﾐt foヴﾏe to IheIk this. Aﾐd also it is iﾏpoヴtaﾐt that this information should be easily located so that I find it easily.

A: yes, I need to know the conditions of shipping. I also want to know where and how can I return

the iteﾏs…

I show them the other website (the plain one) What do you think of this one? How is this different

from the previous one?

E: OK, i see this is this (points at the small images of the coats ont he colourful website) for me but in

laヴgeヴ ┗eヴsioﾐ…

A: I disagree. For me this is more about the clothes, not the categories. I am not sure they have

Iategoヴies heヴe, OK theヴeげs the ﾏeﾐu that tell you that there are bags, shoes, etc But I am

IoﾐIeﾐtヴaiﾐg oﾐt he iﾏages so ﾏuIh that I ┘ouldﾐげt ﾐotiIe oヴ IheIk the ﾏeﾐu iteﾏs. It gi┗es the iﾏpヴessioﾐ that theヴe aヴeﾐげt ﾏaﾐ┞ Iategoヴies.. The otheヴ oﾐe has a ﾏagaziﾐe feeliﾐg, like Elle oヴ soﾏethiﾐg…

Is it a pヴoHleﾏ foヴ ┞ou if theヴe aヴeﾐげt ﾏaﾐ┞ Iategoヴies?

A: No, not neccessaily.

E: Yeah, it depends on what you want.

How would you describe this website?

A: For me this is cleaner (the plain). I can see this website through better.

E: I like the other one better (the colourful).

Why?

E: Hﾏﾏ…HeIause Iげﾏ lookiﾐg foヴ shoes.. ふlaughsぶ

A: For me this website (point at the colourful one) I am sure that I would spend a lot of time here

browsing and searching because I have the feeling that they have lots of products and categories,

and here they have less categories and it is more about the dresses (Not true!!). This is more of a

desigﾐeヴげs IolleItioﾐ ┘eHsite aﾐd higheヴケualit┞ Ilothes. It is ケuite st┞lish aﾐd Ileaﾐ, ﾏiﾐiﾏalistiI, so Iげd e┝peIt higheヴケualit┞ pヴoduIts fヴoﾏ this ┘eHsite…

Also, it puts ﾏe off these iﾏages oﾐ the hoﾏepage ふthe Iolouヴfulぶ, itげs too ﾏuIh foヴﾏe. I doﾐげt ha┗e time for this.

E: For example, it is better here (point to the colourful webiste) that the Sale category is red so it

stands out and can be easily located. I do not have to search for it.

133

133

A: Here (points at the plain website) the website tells me that I can buy designer clother so this

website is good when you are looking for the latest trends and ont he other website there a lot of

thiﾐgs Hut ﾐot ﾐeIIessaヴil┞ e┝Ilusi┗el┞ desigﾐeヴsげ iteﾏs…

E: Yes, I like this website because of the colours, i like it better, it makes me want to explore it more

than the other one. I know that from this website (the colourful) I could easily buy something

HeIause it looks Hetteヴ foヴﾏe. Fヴoﾏ the otheヴ ┘eHsite, iげﾏﾐot suヴe…

A: Yes, same here. I could easily buy something from this one (the colourful one) but this one (the

plaiﾐ oﾐeぶ i ┘ould ha┗e to e┝poヴe it ﾏoヴe aﾐd it looks ﾏoヴe of a desigﾐeヴげs ┘eHsite so I guess if i

┘aﾐted to Hu┞ a speIifiI Hヴaﾐd oヴ desigﾐeヴ theﾐ i ┘ould Hu┞ fヴoﾏ this ┘eHsite…to get a good Haヴgaiﾐ… But the otheヴ oﾐe ふthe Iolouヴful oﾐeぶ iげﾏ suヴe the┞ ha┗e ﾏoヴe stuff.

But I have the feeling that if i was to explore this website I could not fiﾐd aﾐ┞thiﾐg. Aﾐd I doﾐげt like to spend too much time with a website.

Main navigation:

E: I prefer the navigation of this one (the colorful) because i have all the requirements and categories

oﾐ the left haﾐdside, I doﾐげt ha┗e to IliIk too ﾏuIh. I Iaﾐ filter the sizes, the price, the

Iolouヴs…HeIause i hate that ┘heﾐ I see a dヴess that I like aﾐd theﾐ it tuヴﾐs out that the┞ doﾐげt ha┗e it in my size.

A: I like the bigger pictures..

E: Me too!

A: But i also doﾐげt like it ┘heﾐ I Iaﾐ oﾐl┞ see ン iteﾏs, if i see 50 dresses i can tell which ones I like

E: I doﾐげt like it ┘heﾐ the iﾏages aヴe too sﾏall. Mouse o┗eヴ is OK HeIause i hat IliIkiﾐg HaIk aﾐd foヴth…

Product info page:

A: For me this is much more realistic. (the plain one)

Why?

A: Because, I believe that this dress is as it is shown here. But here (points to the other website; the

colourful one) this is a model picture (both pictures are the same) somehow this seems more

realistic to me: it is more raw, minimalistic: this is it, what you can see. And this one (the colourful) is

more of a dream category.

Why do you say this? Because of the colours?

A: Maybe because of the colours, and still it is the same dress I know. It is easier to believe to this

website (plain one) than to this one (the colourful one). Yes, I think that the white background is

better because because it allows you to see the image better.

E: But this piItuヴe is the saﾏe, itげs the saﾏe dヴess??!!

134

134

A: Yes, Hut the ┘hole piﾐk thiﾐg thatげs goiﾐg oﾐ oﾐ the page…it alﾏost feels as heヴe the┞ ヴeally want

to sell the iteﾏ HeIause of the ﾏaﾐ┞ thiﾐgs goiﾐg oﾐ, ┘hile heヴe itげs ﾏoヴe ﾏiﾐiﾏalsitiI aﾐd ヴa┘, so I can believe them better that this is the dress how it looks in reality, no photoshop, nothing, just

┘hat ┞ouげll get.

So, your confidence is better with this one (the plain)?

A: Yes, exactly.

Do you think that they put colours to divert your attention from the clothes?

A: I think here (the colourful one) they try to sell me the whole website, not only the dress. Whereas

heヴe ふthe plaiﾐ oﾐeぶ i doﾐげt get a fancy, nothing special website but when it comes to the dress this

website does it better.

E: I doﾐげt ha┗e this feeliﾐg at all. What i doﾐげt like heヴe ふthe Iolouヴfulぶ is the FaIeHookヱs Like Huttoﾐ and other social media icons. I hate it, they want me to advertise their products and that they come

iﾐto ﾏ┞ pヴi┗aI┞…

A: Yes, Hut the┞ ha┗e the Hetteヴ „Add to asketざ Huttoﾐ..ふthe Iolouヴfulぶ. This is IoﾐIヴete. The otheヴ one is simply not straight forward. Also for the additional information: it is better this one (the

colourful) because i can see that they both have description and composition info but only this one

ふthe plaiﾐぶ has the ヴetuヴﾐs laHel…hﾏﾏ…still I pヴefeヴ this oﾐe ふthe Iolouヴfulぶ HeIause it looks ﾏoヴe materialistic to me.

Checkout page:

E: For me, this oﾐe is the peヴfeIt oﾐe HeIause the┞ do Pa┞Pal. If I Iaﾐげt pa┞ ┘ith Pa┞Pal theﾐ i ┘ill ﾐot buy from that website.

A: Yes, security is very important!

E: Here ont he other hand (the plain) where is PayPal?! What is all this information?

A: But it gives ┞ou ho┘ ﾏuIh the┞ Ihaヴge foヴ the deli┗eヴ┞…

E: Yes, ┘hiIh is good Hut…

And what about the info/picture of the dress?

E: But i just Hought it, ヴight? “o i kﾐo┘ it, I doﾐげt ﾐeed to ヴead i toヴ IheIk it agaiﾐ. I ﾐe┗eヴ pa┞ atteﾐtioﾐ to this. Iげ┗e just seleIted the size and the colour..My attention is on the price and the next

step to Hu┞ the dヴess. Also ┘hatげs ヴeall┞ iﾏpoヴtaﾐt to ﾏe is the „Coﾐtiﾐue shoppiﾐgざ Huttoﾐ that takes ﾏe HaIk to the last seeﾐ iteﾏ, ﾐot the hoﾏepage, HeIause thatげs ヴeall┞ aﾐﾐo┞iﾐg!

What about the colours on these two last pages of the journey?

E: I ha┗eﾐげt paid atteﾐtioﾐ oﾐ the Iolouヴs, foヴﾏe heヴe is ﾐot ヴele┗aﾐt.

135

135

A: They are very important though at the beginning. It contributes to the first impressions and the

image of the brand: what aヴe the┞ selliﾐg…At the pa┞ﾏeﾐt poiﾐt I oﾐl┞ pa┞ atteﾐtioﾐ to the pヴoIess ﾐot the suヴヴouﾐdiﾐgs aﾐd the desigﾐ. Itげs ﾐot iﾏpoヴtaﾐt to ﾏe this stage.

E: Yes, i agree. At the beginning i like to have nice colours and oudors that call my attention and

encourages ﾏe to Hu┞ soﾏethiﾐg. Aﾐd oﾐIe I Hought soﾏethiﾐg Iげﾏ oﾐl┞ IoﾐIeﾐtヴatiﾐg oﾐ the concrete elements and the process: PayPal, shipping, return, etc

Lookbook:

A: I like it very much because they present me the latest collections and it is inspirative. I think Í

would want to explore the lookbook first and then would go to the specific categories. It is important

for me to check ont he overall style of the company and brand to see how they sell what they sell.

E: Yes, but I hate when they show size zero models…i ┘aﾐt to see it ヴealistiIall┞ oﾐヴeal people like me.

E: Breadcrumbs are very important for me.

A: I feel that I aﾏﾐot suヴe that i ┘ould fiﾐd a dヴess foヴﾏ┞ taste fヴoﾏ this ┘eHsite ふthe plaiﾐぶ, Hut Iげﾏ sure that I could find something from this one (the colourful)

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

A: and my first impression is that i can buy something from here (colourful), but not sure if I can find

something here (the plain). I have to dig deep to find a good piece, but i guess I like to do this, to

search and dig until i find one piece that I really really like.

E: this oﾐe has this feeliﾐg of ﾐiIe Iolouヴs aﾐd odouヴs…aﾐd this oﾐe…this is ﾐot ┗eヴ┞ ﾐiIe ふthe plaiﾐぶ

A: PヴiIes aヴe also iﾏpoヴtaﾐt faItoヴ…

E: OK, this website (the plain) because it is white i could see this one more the designer, the more

e┝peﾐsi┗e ┘eHsite fヴoﾏ the t┘o. Aﾐd I agヴee that a lu┝uヴ┞ Hヴaﾐd ┘ouldﾐげt Iヴeate a ┘eHsite like this one (the colourful) but more this type (the plain) because of the white background and the

ﾏiﾐiﾏalistiI desigﾐ it looks ﾏoヴe lu┝uヴious. Wheヴeas this oﾐe looks ﾏoヴe of a ﾏaヴketplaIe…theヴeげs this aﾐd that…so i guess I Ihaﾐge ﾏ┞ ﾏiﾐd aﾐd Iげd sa┞ that the ┘hite ┘eHsite is the ﾏoヴe e┝Ilusi┗e and they sell more expensive stuff.

A: I doﾐげt like it that heヴe ふoﾐ the plaiﾐぶ I Iaﾐ oﾐl┞ see piItuヴes of dヴesses.. Iげd Ihoose the Iolouヴful ┘eHsite desigﾐ. Those iﾏages aヴe useless…aﾐd ho┘ shall I staヴt ﾏ┞ jouヴﾐe┞? Wheヴe? Heヴe ふthe Iolouヴfulぶ I kﾐo┘ that Iげd IliIk oﾐ the Woﾏeﾐげs ﾏeﾐu iteﾏ. This is more of a standard procedure and

pヴaItiIe so itげs easieヴ.

E: Based oﾐ fiヴst iﾏpヴessioﾐ, Iげd Ihoose the Iolouヴful oﾐe. The otheヴ oﾐe looks ﾏess┞…

A: Yeah, it looks ﾏess┞! Thatげs the good ┘oヴd.

136

136

APPENDIX 16 – Aesthetic and usability elements supporting the

customer journey of an online shopping experience

Aesthetic Elements Supporting the Online Shopping Experience - Anna Tamasi 2012-Libre

Documents

Transcript of Aesthetic Elements Supporting the Online Shopping Experience - Anna Tamasi 2012-Libre