Evaluating Functionality, Usability and User Experience of Fashion websites and mobile apps: Case study of Topshop

Topshop website screenshot

Research taking place at Manchester Metropolitan University could inform the way fashion retailers need to develop websites and mobile apps of the future. Mobile devices make it extremely easy for people to do things that they have never thought to be doing a decade ago, and consumers are more sophisticated and demanding for efficient and effective shopping experiences.

Zofija Tupikovskaja-Omovie, PhD Researcher in Mobile Fashion Marketing from Hollings Faculty, Department of Apparel, is currently working on a research project focused on fashion marketing communications in m-retail and their influence on consumer behaviour.

Improving shopping experience

Many fashion retailers have built mobile apps mainly for iOS and Android OS mobile devices. However, analysis of mobile app reviews suggests that many retailers struggle to find ways to make these apps useful to their customers. The research aims to identify ways of improving the shopping experience using mobile devices. Smart phones are now common every day personal devices, and seamless shopping experiences are needed to satisfy sophisticated fashion consumers’ needs.


Mobile fashion consumers seem to prefer using websites on their smartphones despite the wide range of mobile apps available. A case study helps to establish whether the same mobile apparel apps are communicating in the same way through different operating system platforms. The objectives of the project are to develop knowledge of usability issues and shopping experience which apparel consumers face during their shopping journey.

During the first phase of usability and user experience testing using eye tracking technology, the aim was to develop a link between fashion consumer behaviour, particularly the intention to purchase fashion products, and User Experience (UX) phenomena on desktop PC.

According to the survey data on mobile fashion consumers in the UK (Tupikovskaja-Omovie et al., 2014) the majority of respondents prefer to use websites on their mobile devices rather than applications, when shopping for fashion. These results suggest that websites have better usability for browsing and purchasing on the mobile, and these websites possibly are easier to use at the checkout. Therefore, there is a need to develop knowledge about fashion consumers’ behaviour online while using PC, and then to compare their experience with those using mobile devices, particularly smart phones. The following objectives were identified for this stage of the research project:

  • To develop a shopping journey map;
  • To look for similarities and differences among participants;
  • To measure the time spent during the following stages of the shopping journey:
    • browsing,
    • inspecting product pages,
    • at the checkout;
  • To identify fashion consumer habits online;
  • To identify to which consumer group the participant belongs.


The MMU team has chosen three case studies based on the data from survey about favourite fashion retailers among mobile fashion consumers in the UK: Topshop, H&M and ASOS. The usability testing was carried out at The Usability Lab based at MMU for the Topshop website, which is a favourite fashion shopping website among consumers in the UK who are active smart phone users and purchase clothing online and via mobile.

Eye-tracking experiments were designed in the way that each participant would use Topshop’s website (www.topshop.com) on desktop computer to complete a task according to specified scenario. According to Bojko (2013) tasks are important because they provide realistic goals, which help make participants’ behaviour, including their eye behaviour, more representative of what they would do in real-world situations.

There were seven participants recruited for the experiments with Topshop website, which covered a target audience – females aged 18 to 24 years old who own a smart phone and use it for fashion browsing and purchasing. These participants were given a fixed budget to spend on Topshop website to purchase up to two products for an evening out. Their online behaviour was then monitored using eye-tracking technology.


The usability testing data analysis was complemented by traditional qualitative research methods, such as interview and RTA (retrospective think aloud). After an interview, each participant was asked to think aloud. This is retrospective verbalizations of the experience on the website. During this stage, the participant had an opportunity to comment about the actual use of the website, usability and navigation. The gaze replay was used as a stimulus for RTA as a reminder about what the participant was doing on the website.


In order to have a precise picture of shopping experience on the Topshop website, shopping journeys for each participant were developed. These are the actual shopping journeys which participants have undertaken on the website during the experiment.  Through analysis of the shopping journeys’ it was possible to identify distinct fashion consumer groups with marked differences of their behaviour on the Topshop website.

P3 shopping journey actual

The key finding that emerged from the analysis of the data collected using eye tracking technology is that the number of web pages visited on Topshop website does not reflect the actual time spent on the total shopping journey. The duration of browsing, exploring product pages and at the checkout varied depending on the individual participant.

Here is an example of a heat map whilst the participant was viewing the promotional elements of the Home page on the website. The heat map shows the user’s behavioural patterns and fixed attention areas on separate areas of the screen. Although many fashion retailers assume that promotional banners are the most effective ways to influence consumers’ decision-making process, only 28 % of participants actually looked at this web page of the website.

Heat Map6

Another example shows the scan path and behaviour pattern performed by another participant who was new to the Topshop website. This participant had too many items in her shopping bag and tried to delete one item. Unfortunately, this participant had no previous experience of using the Topshop website, and encountered difficulties to perform this task, repeating the actions several times before succeeding, and finding the right button to click. This participant tried to amend the ‘Quantity’ of products, but the correct button was ‘Remove’, and it was in completely different section of the shopping bag.

Scan Path18

Analysis of the shopping journeys showed that the Topshop website has several usability problems: during the browsing stage, on product pages and at the checkout.


Eye tracking experiments unveiled several usability issues affecting the Topshop website when accessed on a desktop PC. The results of the data analysis from eye-tracking experiments suggest the Topshop website had a fundamental flaw and that there was a need to immediately implement several improvements to the design of the website in order to enhance consumers’ need for a seamless shopping experience and to create an enjoyable interaction.

How would consumers feel if they come across the same usability issues on their mobile devices which would have a significantly smaller screen? In addition, if consumers prefer to use websites than mobile applications, does this indicate a worse consumer experience on mobile applications?

The second phase of eye tracking experiments will be conducted using mobile eye tracking technology to capture user experience on mobile applications. It will reveal the true situation in apparel m-retail, and recommendations will be provided for future improvements needed to satisfy fashion consumers’ needs for seamless shopping experience via mobile devices.


Bojko, A. (2013) Eye tracking the user experience: a practical guide to research. Brooklyn, New York: Rosenfeld Media.

Tupikovskaja-Omovie, Z., Tyler, D., Dhanapala, S. and Hayes, S. (2014) Segmenting the UK Mobile Fashion Consumer. In Proceedings of the 13th International Conference on Mobile Business 2014. Paper 2. The London School of Economics and Political Science, London, UK. 4-5 June 2014. AIS eLibrary: International Conference on Mobile Business (ICMB 2014). http://aisel.aisnet.org/icmb2014/2.


Members of the team:

  • Moderator and UX analyst – Zofija Tupikovskaja-Omovie, linkedin.com/in/ZofiOmovie, zofiomovie@gmail.com
  • Usability lab technician – Sandra Fletcher
  • Academics:
    • Dr David J. Tyler
    • Sam Chandrasekara
    • Dr Steve Hayes




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s