Saniya Sethi
Work as a design consultancy to improve the user experience of the retail brand 'ZARA' by identifying usability issues of their e-commerce website.
My vision
After analysing the results from the four evaluations and deciding on the final usability insights, I designed some potential solutions to address the issues, communicating my vision of improving the UI design and enhancing the overall user experience.
From this
To this
Tap to enlarge
Project outline
Duration
5 weeks
Tools used
Microsoft Excel
_svg.webp){kind=small}
Microsoft Teams
Microsoft Powerpoint
Accessiblity Evaluation Tool
My roles
Usability Analyst
Background of 'ZARA'
Zara is a Spanish retail clothing chain specialising in fast fashion. It sells clothing, accessories, beauty products, and more.
​The multi-national company currently has over 2000 stores worldwide and around 70 stores across Britain.
Our evaluation methods
Without users
Heuristic evaluation
Identify usability problems by going through the whole user journey on the ZARA website.
Heuristics evaluation
As a team of 5 evaluators, we reviewed the ZARA website, assessing the functionality page by page. This was conducted against a set of 10 Usability Heuristics by the Nielsen Norman Group.
The Heuristics are as follows:
​
1. Visibility of system status
2. Match between the system and the real world
3. User control and freedom
4. Consistency and standards
5. Help and documentation
6. Flexibility and efficiency of use
7. Recognition rather than recall
8. Aesthetics and minimalist design
9. Error prevention
10. Help users recognise, diagnose and recover from errors
​
Based on the 10 Heuristics, we recorded each of the usability issues and where they occurred, supporting them with evidence from the principles of psychology. Each evaluator then rated the severity of the individual recorded problems to decide our focus for the quantitative evaluation.
Key findings
1. Filter
Usability issue
Low contrast in font, size, and colour between category headings and content makes them hard to differentiate.
Heuristic
Aesthetic and minimalistic design
Flexibility and efficiency of use
Principle of psychology
Colour theory
Gestalt principles
1.1 Filter
Usability issue
The categories selected in the filter lack prominent markings and are only indicated by bolded black text.
Heuristic
Visibility of system status
Principle of psychology:
Mental model
1.2 Filter
Usability issue
Prices can only be filtered through a specific range, with no 'sort by' option
Heuristic:
Flexibility and efficiency of use
Principle of psychology:
Mental model
2. Size guide
Usability issue
When different sizes are selected, the model photos don’t change, making it hard to see how each size fits.
Heuristic:
Match between the system
and the real world
Principle of psychology:
Mental model
3. Cart
Usability issue
The "cart" icon is a shopping bag. After clicking on the "add to bag" CTA, the "go to basket" button will appear.
Heuristic:
Recongition rather than recall
Principle of psychology:
Dual coding
3.1 Cart
Usability issue
Hyperlinked text looks identical to plain text, making it difficult to tell what is clickable.
Heuristic:
Consistency and standards
Principle of psychology:
Mental model
Quantitative usability evaluation
The Quantitative Usability Evaluation aimed to test the user journey of Zara's website using 3 defined tasks. We sought objective data to evaluate the user's task performance based on the time taken, errors and efficiency of the route through the website.
​
We also planned to collect subjective data to evaluate the users' experience and opinions based on ease of use, needed support, and system consistency.
​
Based on the heuristic evaluation, a set of tasks was designed to validate the identified issues. Below are the tasks that we set out. Each task relates to a problem or procedure we aimed to evaluate. The test was carried out with 6 participants, and they were all given the same set of tasks, with the process recorded using Teams. We've collected and analysed data about effectiveness (task completion, errors made), efficiency (task time, lostness) and satisfaction (System Usability Scale - SUS).
Goal: You just got your first job. You are looking for brown trousers for work a week before your first day.
Key findings:
Mental model and Gestalt principles
Effectiveness
Our most popular error made: click(s) on an element that is not a button
20 counts were recorded, and the error was consistently found across 6 participants’ tests
Among the 20 clicks, 90% occurred on the check-out page
When asked to change the product size in the cart, participants assumed they could do so by clicking the size letter on the checkout page.
Efficiency
Time taken to complete tasks
Task 1: Search and Filter - Step 4
-
Participants took an average of 17.5s, 10.5s more than the optimum time.
-
The maximum time taken was 26s.
Task 2: Product Information
+4.2s vs optimum time
Task 3: Check-out
+55.5s vs optimum time
Hick's law and Selective attention
Satisfaction
The mean SUS score for the 6 participants is 59.6, which is marginal
Qualitative usability evaluation
Similar to the previous evaluation, the objective of the Qualitative Usability Evaluation was to test the user journey of Zara's website using 2 defined tasks. We aimed to gather a deeper understanding of the gaps between what the participants were doing and saying.
​
Based on the common findings from the quantitative evaluation and what we discovered from the heuristics issues, the tasks related to what the participants would see, do, think, and feel. To help us achieve that, we also used the think-aloud technique as a robust and flexible way to assist the participants in opening up while completing the tasks. Below are the tasks that we set out.
The test was carried out with 3 participants who were novices to the Zara website. To ensure consistency with the data, they were provided with the same set of tasks. With permission from the participants, we recorded the test using a screen and a camera so that, as a group, we could later analyse hidden usability problems and capture real-time emotions from the participants' faces.
Scenario: You are looking for a black trousers for work at Zara. Remember, you just spent all your salary, so you don’t have much money.
Key findings:
1. Home page
Usability issue
Low contrast between the background image and foreground elements made it difficult for users to locate the menu on the homepage.
Principle of psychology
Figure-ground
Cognitive load
"It's hard to read the menu tabs when the images keep changing"
- Participant 2
"I can't really tell what I'm clicking on or where my cursor even is"
- Participant 3
2. Menu
Usability issue
The menu’s unclear font and disorganised categories confuse users and make navigation confusing and stressful.
Principle of psychology
Recongition over recall
"I'm getting a headache just looking at the menu!"
- Paricipant 1
"I can't find the trouser option"
- Participant 1
3. Filters
Usability issue
Despite setting a preferred price range, products aren’t reordered to show the cheapest options, and there’s no sort-by function.
Principle of psychology
Mental model
Cognitive load
"It confuses me when the products are not structured according to their price, and there's no option to adjust it myself."
- Participant 3
4. Product page
Usability issue
Lack of information being provided to the users regarding the product, especially with the size guide.
Principle of psychology
Information scent
"There's not a lot of guidance to help me choose a size"
- Paricipant 1
"I'll just have to take guess for what my size will be"
- Participant 2
5. Cart
Usability issue
All text elements look the same, so users mistakenly assumed the size label in the cart was clickable, as there's no other option to edit.
Principle of psychology
Mental model
"I tried clicking on the size to change it, but nothing happened"
- Participant 3
Experience map
Below is an experience map displaying our participants' emotions while completing the tasks. The line shown is an average for what all 3 participants felt, and as you can see, the line height increased as the tasks progressed. The number of emojis present represents the level of confusion and stress the participants were under, caused by some of the steps involved in the tasks.
​
The map helps paint a picture of how Zara's website consumers must feel if this is how our participants were after 10 minutes.
Accessibility evaluation
Principle descriptions are taken from WCAG
The final evaluation aimed to discover important features on the Zara website that people with impairments might struggle with.
​
The 3 impairments we focused on were:
Colourblindness - Individuals experience difficulties distinguishing between colours.
​
Dyslexia - A learning difficulty affecting skills in reading, writing and spelling.
​
Physical Disabilities - Long-term conditions affecting a particular area of a person's body, limiting their physical functioning, mobility or stamina.
​
We decided on these impairments as they are the most common among individuals in society. We also focused on assessing the home page, browsing page, and product page, as based on the insights, they were the pages users were more likely to visit.​
To help us think about the different ways people interact with digital content, we utilised the following principles to guide us along:
Perceivable
"Information and user interface components must be presentable to users in ways they can perceive"
The website was assessed using two techniques: Manual and Automatic, to gain a deeper insight into "why" accessibility issues are occurring.
Manual
-
Uses a Web Content Accessibility Guidelines (WCAG) checklist consisting of three separate levels: Level A (Beginner), Level AA (Intermediate), Level AAA (Advanced).
-
Each level contains around 10 common issues found within web design.
-
We followed the checklist from Beginner to Advanced to analyse issues on the Zara website.
Automatic
-
Uses a popular program known as the Wave tool, to assess web designs and content for important accessibility issues.
-
The tool has 6 different categories known as: Errors, Contrast Errors, Alerts, Features, Structural Elements and ARIA.
-
Helped us expand on points that the manual evaluation might have disregarded.
Key findings:
Among the six categories assessed in the automated evaluation, the most issues across all three pages were found in Errors, Contrast Errors, and Alerts. The remaining categories, including Features, Structural Elements, and ARIA, received mostly positive results, with evidence of various factors such as well-structured, presentable page layouts.
The manual evaluation found most issues across all three pages at Level A (Beginner) and Level AA (Intermediate). Below is a summary of findings from both the manual and automated evaluations for the home, browsing, and product pages.
Home page
No descriptive text
Automated
38 buttons were found with no text content (or alt text).
Manual
Low contrast
Automated
137 elements have a very low contrast against their background.
Manual
Small text
Automated
The text is very small and not an acceptable reading size.
Manual
No control over media
Automated
No option to pause, stop or hide the video content and audio.
Manual
Browsing page
Low contrast and lack of clarity
Automated
The plus icon has poor contrast when it's above the product image, and it lacks a clear purpose.
Manual
Watch the video to find out what the plus icon does
No descriptive text
Automated
30 of those icons mentioned above had no text content (or alt text).
Manual
Duplicate links
Automated
The same link is present multiple times throughout the trouser browsing page.
Manual
Small text
Automated
Important information, such as product name and price, has been identified as being very small and an unacceptable reading size.
Manual
Product page
No descriptive text
Automated
11 empty buttons (including product images) were detected with no text content (or alt text).
Manual
Small text
Automated
Elements like product description and care requirements were found to be very small and an unacceptable reading size.
Manual
Synthesis
To help us draw a broader conclusion, we grouped all our findings from each evaluation method and synthesised them into an overall set. It was important to ensure that each set had supporting evidence from multiple evaluation methods. As a team, we discovered 9 insights in total (highlighted in yellow).
Our synthesis is shown in the image below:
Prioritise and finalise
After thoroughly reviewing the insights again, we prioritised and finalised the most significant ones. Our process to do this was as follows:
​
Step 1: Based on the average team member's opinion, assign a severity value of 1 (lowest) to 4 (highest) to each of the 9 insights (Image A).
Step 2: Create a graph with the importance of the task and severity of the usability issue as the axes.
Step 3: Place the 9 insights on the graph and highlight the ones within the 'High importance of task' and 'High severity of usability issue' areas (Image B).
Image A
Image B
Insight 2 - Cart page
Findings
90% of 'clicks on an element that is not a button' were found on the cart page.
What it means
Users assumed they could change the product size from the cart, but they have to go back and adjust it instead.
Improving it will...
Reduce user frustration
Prevent abandoned purchases
Insight 7 - Menu
Findings
Users found the menu confusing and difficult to find what they were looking for.
​
"I'm getting a headache just looking at the menu!"
What it means
The menu page has cramped line spacing and poorly organised items, with no clear categorisation or logical order.
Improving it will...
Reduce cognitive load
Improve navigation
Enhance readability
Insight 8 - Descriptive text
Findings
Across all three pages assessed, 79 empty buttons were identified during the accessibility evaluation.
What it means
When an empty button lacks descriptive text, it becomes inaccessible, especially for screen reader users who rely on it to understand the button’s purpose.
Improving it will...
Enhance accessibility
Make a better user experience
Potential solutions
According to the final usability insights, I proactively designed potential solutions for the cart page and menu. While there wasn't enough time to validate these with user testing, the goal was to communicate my vision for improving the UI, resolving key issues, and enhancing the overall user experience based on findings from the four evaluations.
Insight 2 - Cart page
-
​Renamed 'cart' to 'bag' to align terminology with common e-commerce language, creating familiarity and reducing cognitive load.
-
Improved the layout of the product details for better readability and hierarchy, and introduced an accessible 'edit' button directly on the page. This allows users to quickly make changes to the size, quantity, or colour without going backwards in the journey.
-
Made “Remove” and “Save to Wishlist” buttons clearer and more intuitive to avoid accidental removals and encourage continued browsing.
-
Reduced visual clutter by adding increased spacing between items and sections.
Before
After
Tap to enlarge
Insight 7 - Menu
-
Grouped all Zara-related collections under a single category: 'Zara Edits', making the menu less cluttered and easier to scan.
-
The Beauty section had fewer items, so it has been merged into Accessories, allowing for a cleaner layout without removing content.
-
Reordered categories to follow a natural flow, supporting faster user navigation. Accessories and Trending tabs are now in a second column, creating a visual difference from core clothing items.
-
Included subtle beige accents to highlight active menu selections or hovered items while ensuring the primary colours (black, white, and grey) were still prominent without overwhelming the design.
-
Added an image on the right to make the menu look more visually appealing instead of text-heavy.
Before
After
Tap to enlarge
Limitations
Risk
Impact
Our quantitative evaluation participants did not fully match our intended target user.
Affects the validity of the feedback and results obtained from the test.
Some of the tasks were leading e.g. 'search for a brown trouser' changed to 'browse'.
Unintentionally guides the participants towards a specific behaviour, encouraging bias.
Participants were not using their computers for the test.
Unrealistic representation of how they would interact with the website naturally.
Personal reflection
Overall, I thoroughly enjoyed playing the Usability Analyst role throughout this Usability project for the Zara website. I was able to successfully work with my team in conducting the Heuristic, Quantitative, Qualitative, and Accessibility evaluations. Delving into the Zara website has been a fulfilling experience to understand, from the user's perspective, factors that can be particularly frustrating for them, especially with the help of the Accessibility evaluation.
As this was the first of many projects, one of the challenges I faced was being unsure of what to expect, especially during the tests. I felt nervous beforehand, experiencing thoughts like "What if something goes wrong?" "I hope the computer works". Over time, as we progressed through the project, I learned to expect the unexpected. Getting over this challenge at the start of my transition into UX design taught me to be open to learning from the unexpected and how I can ensure it doesn't happen again.
I appreciate this opportunity to work as a Usability Analyst with my team members. I have learned how to execute various types of Usability tests, including creating a set of tasks for the Quantitative and Qualitative evaluations. This is followed by the appropriate techniques to analyse the data based on several factors with the help of Microsoft Excel. I have practised with various tools and programs and look forward to using them throughout my career.