Hypothetically, work as a design consultancy in a team to improve the user experience of the retail brand 'ZARA' by identifying usability issues of their e-commerce website.
Project outline
Duration
5 Weeks
Tools used:
Microsoft
Excel
Microsoft Powerpoint
Microsoft Teams
Accessiblity Evaluation Tool
My role:
Usability Analyst
Background of 'ZARA'
Zara is a spanish retail clothing chain specialising in fast fashion and sells products such as clothing, accessories, beauty and more.
​
The multi-national company currently has over 2000 stores worldwide and around 70 stores across Britain.
Evaluation methods
Without users
Heuristic Evaluation
With users
Quantitative Evaluation
Qualitative Evaluation
Without users
AccessibilityEvaluation
Identify usability problems by going through the whole user journey on the ZARA website
To focus and validate the high severity problems by setting specific tasks to test with participants
Look into participant’s thoughts, the reason behind and the emotions triggered. Allow participant to give feedback
To assess the content and design of the Zara website alongside the most common impairments.
Heuristics evaluation
As a team of 5
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 error
​
Based on the 10 Heuristics, we recorded each of the usability issues and where they occurred with supporting 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
Heuristic:
Visibility of system status
Principle of psychology:
Mental model
Usability issue
The categories selected in the filter function lack prominent markings and are only bolded for the black text.
2. Size guide
Heuristic:
Match between the system and the real world
Principle of psychology:
Mental model
Usability issue
When different sizes are selected, the photos remain the same, showing models of the same size so that the differences between each size are not noticed.
3. Cart
Heuristic:
Consistency and standards
Principle of psychology:
Mental model
Usability issue
There are hyperlinked texts that look the same as plain text and cannot be distinguished from texts with no function.
4. Filter
Heuristic:
Aesthetic and minimalistic design
+
Flexibility and efficiency of use
Principle of psychology:
Colour theory + Gestalt principles
Usability issue
The lack of contrast between the headings of categories and the content under them in terms of font, size and colour makes it difficult to distinguish them.
5. Filter
Heuristic:
Flexibility and efficiency of use
Principle of psychology:
Mental model
Usability issue
Prices can only be filtered through a certain range. The filtering of products doesn’t have a sort option.
e.g. sort by price(low-high), latest or by discount.
6. Cart
Heuristic:
Recognition rather than recall
Principle of psychology:
Dual coding
Usability issue
The icon for the "cart" is a shopping "bag". After clicking on "add to bag" key action button, it will show the "go to basket" button.
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 get subjective data to evaluate the user's experience and opinions based on ease of use, support needed and system consistency.
​
Based on the heuristics 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 a brown trousers for work a week before your first day.
Key findings:
Effectiveness
Click on an element which is not a button
​
• 20 counts were recorded for “click on an element which is not a button”, and the error was consistently found across 6 participants’ tests
Among the 20 clicks on a non-button element, 90% occurred on the check-out page
Participants assumed they could change the size by clicking on the size letter on the check-out page when they were given the task to “change the size of the product in the cart”
Efficiency
Time taken to complete tasks:
Time taken for Task 2 (choose the right size via the size guide)
-
+4.2s vs optimum time
Time taken for Task 3 (change the product in the cart to another size + fastest delivery date and cost)
-
+55.5s vs optimum time
Time taken looking for the cheapest product on the product result page
-
Participants took an average of 17.5s, which is 10.5s more than the optimum time
-
The maximum time taken is 26s
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 involved 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 and to ensure consistency with the data they were provided with the same set of tasks. With permission from the participants, we were screen and camera recording the test so as a group we could later analyse hidden usability problems and capture real-time emotions from the participant's faces.
Scenario: You are looking for a black trousers for work on Zara. Remember, you just spent all your salary so you don’t have much money.
Key findings:
1. Home page
Usability issue
Users found it difficult to locate the menu features on the home page due to the low contrast between the image and text.
Quotes
"It's hard to read the menu tabs when the images keep changing"
"I can't really tell what I'm clicking on or where my cursor even is"
2. Menu
Usability issue
The menu's choice of font and styling is not clear or easy to read, making it confusing for users. Categories are also not organised, causing further stress.
Quotes
I'm getting a headache just looking at the menu!"
"I can't find the trouser option"
3. Filters
Usability issue
Despite adjusting the price range to their preference, the products are not reorganised to show the cheapest options first to suit their budget.
Quotes
"It confuses me when the products are not structured according to their price and there's no option for me to adjust it myself."
4. Product page
Usability issue
Users felt there was a lack of information being provided to them regarding the product, especially with the size guide.
Quotes
"There's not a lot of guidance to help me choose a size"
"I'll just have to take guess for what my size will be"
5. Shopping cart page
Usability issue
As all the hyperlinks, buttons and standard text look the same, users assumed they could click on the size (standard text) in the cart to change it as there's no other option to edit.
Quotes
"I tried clicking on the size to change it but nothing happened"
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
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 we felt they were the pages users were most likely to visit.
​
To give the evaluation a direction, 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"
Operational
"User interface components and navigation must be operable"
Understandable
"Information and the operation of user interface must be understandable"
Robust
"Content must be robust enough that it can be interpreted reliably by a wide variety of user agents including assistive technologies"
Principle descriptions are taken from WCAG
The assessment of the website can be conducted using two techniques: Manually and Automatically.
Manually
Automatically
-
Uses a Web Content Accessibility Guidelines (WCAG) checklist. The checklist consists of three separate levels: Level A (Beginner), Level AA (Intermediate), Level AAA (Advanced).
-
Uses a popular program known as the Wave tool. The Wave tool is a browser extension that allows designers to assess web designs and content for important accessibility issues.
-
The tool has 6 different categories classified as: Errors, Contrast Errors, Alerts, Features, Structural Elements and ARIA. However, for the Zara website the focus was on Errors and Contrast, as it was most relevant.
-
Each level contains around 10 common issues found within web design.
-
We utilised the checklist by starting with the beginner level and progressing to the Advanced level while analysing issues relevant to the Zara website.
-
This program benefitted the accessibility evaluation as it helped emphasise points in more detail that the manual evaluation might have disregarded.
Key findings:
Alt text (manual + automated)
Image A
Image B
The first was alt text, which was recognised as perceivable. The images shown are evidence of the automated evaluation. On a single browsing page for trousers, there were 61 features related to missing text, including icons (Image A) and 25 errors related to missing text for the buttons (Image B).
Visibility contrast (manual)
Next is visibility contrast, which was assessed as perceivable. As discussed in the qualitative evaluation, these features are hard to find, which is important as they are what the user sees first.
This is another example of the header functions blending in with the product images. It can be found across all pages on the Zara website. Another finding mentioned in previous evaluations is that it's hard to differentiate between normal text and hyperlinks, confusing users with screen readers.
User control (manual)
User control was assessed as operational and robust. This image shows the homepage again while it is in mid-transition and nowhere on the page is there an option for the user to stop pause, or hide the automated motion.
This is another example of a lack of user control. Throughout the website, the text size is relatively small, and Zara provides no option for the user to customise the layout and styling characteristics.
Synthesis
To help us draw a broader conclusion, we grouped all our findings from each evaluation method and synthesised them into an overall set. Ensuring that each set had supporting evidence from multiple evaluation methods was important. As a team, we discovered 9 insights in total.
An example of 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: Assign a severity value of 1 (lowest) to 4 (highest) to each of the 9 insights based on the average team member's opinion (Image A).
Step 2: Create a graph with the importance of the task and severity of the usability issue as the axis.
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
Users thought they could change the size of the product on the cart page, but they could not. They have to add a new one with another size instead.
What it means
The quantity but not the size can be changed in the shopping bag, and the user will jump through multiple pages to change the basic information.
Why it matters
The website should provide a way for users to undo the product size in the cart they’ve chosen so the user can exit the error.
Insight 7 - Menu order + style
Findings
Users cannot efficiently find the product category they are looking for from the menu.
What it means
The line spacing of the menu page is too small, and the text is cramped together.
​
The items are not arranged in logical order or by categories.
Why it matters
It’s difficult to read the texts clearly if they’re cramped.
In reality, items in a shop should be arranged into different sections by detailed categories, e.g. tops and bottoms. The inefficiency makes users frustrated.
Insight 8 - Alt text
Findings
On all pages of the Zara Website, there is no text alternative for all the images including icons.
What it means
Alt text aims to improve accessibility by describing what an image shows for users who cannot view it.
Why it matters
Users who require a screen reader to view the content would find it frustrating if they cannot understand what the image is showing.
Limitations
Risk
The participants for the quantitative evaluation did not fully match our intended target user.
Impact
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 specifc behaviour encouraging bias.
Participants were not using their own 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 eyes of the user, 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 refrains from happening again.
I appreciate this opportunity to work as a Usability Analyst along with my team members. I have learned how to execute various types of Usability tests, including creating the set of tasks for the Quantitative and Qualitative evaluations. Followed by the appropriate techniques to analyse the data based on several factors with the help of Microsoft Excel. I have practised with a range of tools and programs that I look forward to using throughout my career.