Zara Usability Redesign

Master's Project for Loughborough University

Nov 2020
Solo Project

Evaluating Zara UK's fashion e-commerce experience and improving the design with a primary focus on usability.

Zara is one of the most valuable brands in the world. As such it's websites service millions of users every year. Poor usability is a known factor in reducing consumer spending & order completion rates. Here I wanted to study what level of usability design Zara UK achieves and how this could be improved to better serve users and therefore increase revenue.

The Zara website has thousands of pages and a review and redesign of every single one was unnecessary for this project's scope.

In order to correctly prioritise redesign focus, the top tasks of the experience were identified. Online surveying of 75 students from Loughborough University enabled this data to be collected.

Survey details

These 8 top tasks formed the key drivers of what to analyse in a usability review, which in turn would produce the key design issues to resolve.

75 students of the Loughborough University remotely completed an online survey via Microsoft forms on the tasks that were the most important to them when using a fashion e-commerce website to order clothes.

The total options consisted of 65 items, an intentionally overwhelming list for participants. This would force participants to identify the tasks that truly stuck out to them as important. Participants were limited to 5 minutes to choose their top 5 tasks.

The tasks that made up the top 50% of the votes from the survey were then classified as the top tasks.

Usability Review

To align usability evaluations a 3 stage user scenario, that integarted all 8 top tasks was written for test participants to follow.

You have a friend’s birthday party in 2 week's time and you need to find a jacket to wear using

Once you have found a jacket that you like, inspect the item details. Check the images, user review and description before you are happy to make a purchase.

Find the sizing information and use it to select the correct fit. Then work out how you can get it delivered and how you could return it.

This scenario was used to guide both participant testing scenario's as well as to focus key pages for specific evaluations such as heuristics & accessibility.

Heuristic Review

Based on the methods developed by Nielsen & Molich, a heuristic evaluation resulted in a clear list of design recommendations, these were then assigned priority levels.

Accessibility Review

Using WCAG 2.1, a full level A through to AAA accessibility review of the site was conducted. The redesign recommendations were then sorted via the MoSCoW technique.

Meaningful Sequence

On Input

Timing Adjustable

Language on Page


Non-text Content

Bypass Blocks

On focus

Link Focus

Video Captions

Pause, Stop, Hide

Info & Relationships



Use of colour

No keyboard traps

Page tilting

Order Focus

Audio Description

Audio Only

Video Only

Audio Control

Three Flashes

Error Identify


An aspirational competitor of Zara, AYR, was used to conduct a performance evaluation with 15 users in order to highlight areas requiring a systemic redesign.

A Mann-Whitney U test (one-tailed) revealed no statistically significant difference in in task completion between AYR and Zara for tasks 1 & 2.

However for task 3 a Mann-Whitney U test (one-tailed) revealed a statistically significant difference in completion percentage between AYR (Md = 66, n = 28) and Zara (Md = 100, n=28).

In task 1 a Mann-Whitney U test (one-tailed) revealed a statistically significant difference in Errors made between AYR and Zara.

Meanwhile, in tasks 2 and 3 a Mann-Whitney U test (one-tailed) revealed no statistically significant difference in Errors made between AYR and Zara.


Zara was compared against 4 competitor sites; AYR, Cotton Bureau, Pull & Bear, and Supreme in order to assess its satisfaction competitiveness in the market.

Using 75 participants, a remote survey was used to analyse multiple website's SUS score. Zara was conclusively middle of the pack and therefore presented a great opportunity to improve its user experience in order to differentiate itself.

Several think aloud sessions using the three task scenario were conducted and transcribed. These transcripts were then processed through thematic analysis to further understanding of Zara's satisfaction. These results were then used to help outline the main usability conclusions


Biometrics were the final key analysis area of the usability review and played an important role to create data with reduced user input bias.

Key Usability Issues

Extreme Lack of Dual Coding

Most key elements and product page information use pure text-based links and interaction targets. This issue is compounded because it occurs with high frequency across the entire website.

Tangled Interface

Many UI elements having no exclusive visual padding allowing many to overlap freely with content. The content can mix with the header elements causing a tangled mess with poor contrast. 

No Product Reviews

This is probably the most critical flaw of the website, being a key e-commerce website with no reviews is completely alien to many users as found in thematic analysis and satisfaction. 


Too many elements of the website such as the filter, delivery information, sizing choices/ information and product description are intentionally hidden from the user. 

Complex Product Information

Once the user actually manages to find specific pieces of information such as delivery time or sizing they are overwhelmed by the information. 

Overwhelming Content

The content on both the homepage and item search pages are too large. This makes the content both overwhelming and hard to navigate. This in turn hurts the user’s ability to easily compare items.

Inconsistent Search Layout

Content is inconsistently spaced on the main item search pages. This leads to further issues of overwhelming the user as they have no clear patterns to follow in order to understand the content more easily. 

Sidebar Chokepoint

The site creates a chokepoint of navigation through the side bar. This is operated via a hamburger icon meaning users can never see their position in the site or how to navigate away without exploring the menu first.

Key Accessibility Issues

Overlapping Content

Many elements are allowed to overlap freely causing a tangled mess of content and interface with unusable colour contrasts. This is currently a critical issue in the websites accessibility.

Unusable Keyboard Navigation

The implementation of keyboard navigation is unusable, user’s can get in stuck infinite loops or have trouble getting the navigation to work at all due to the third-party accessibility plugin being used. 

Auto-Playing Overwhelming Content

The homepage and category showcase sections are filled with auto playing, auto scrolling and overwhelming content with no immediate or instantly accessible ways to prevent this. 

Structural Issues

When analysing the site's code, hundreds of issues both in empty buttons and dead links can be found. This might explain the infinte keyboard navigation loops.

Usability Redesign

The redesign process started with analysing and sketching out a new user flows for these identified painpoints. Through the use of post-it notes and paper sketching; site maps and interaction details were drafted.

A website redesign of key pages relevant to the user top tasks was then built in Figma as an interactive prototype so that it could be feasibly A/B tested against the live Zara site.

Front Page

Product Search

Product Page

Product Details

Mobile Designs

A/B Testing

Using the data collected on the existing Zara site, my prototype was tested with the same methodology and statistically compared

The Figma prototype tested for both performance and satisfaction using 2 independent groups of 13 and 6 users. Due to the limited number of participants, only large or moderate effect sizes could be accurately diagnosed.



The main conclusion that can be made from the A/B testing is that the redesign is significantly more usable that the original Zara website, both in performance and in satisfaction. This in turn proves that the evaluation process and techniques applied during the analysis of Zara work helped create a better website with far superior SUS score.