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.
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 Zara.co.uk.
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.
Performance
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 Lostness between AYR and Zara.
A Mann-Whitney U test (one-tailed) revealed no statistically significant difference in all three task times between AYR and Zara.
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.
Satisfaction
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
Biometrics were the final key analysis area of the usability review and played an important role to create data with reduced user input bias.
Scan path data of using Zara was conducted using the university's eye tracking lab equipment. The data was then analysed in terms of attention, direction, and regressive saccades.
Attention maps were generated using the AI EyeQuant tool, which allowed accurate replication of the initial 10 seconds of visual attention by a human.
A full psychological analysis was conducted against the 5 key psychology principles over the 3 levels of human psychology.
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.
Over-Minimalisation
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.
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.
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
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.
Performance
A Mann-Whitney U test (one-tailed) revealed no significant difference in lostness between the live site and redesign. However, reviewing the graph shows a clear improvement over the variability of lostness experience achieved in the redesign.
Satisfaction
A Mann-Whitney U test (one-tailed) revealed a statistically significant SUS score between the redesign and the live site. This result allows me to see my redesign as a success in terms of improving the usability.
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.
