Zara Home - heuristic evaluation

Improving online shopping, one redesign at a time.

A heuristic evaluation of the popular brand’s website, Zara Home. In a team of 3, we improved the usability of the Zara Home website to increase traffic and decrease bounce rate (i.e. the amount of people who visit one page of the website before leaving).

Project Overview

3 weeks
Project type
Academic - Team of 3
UX & UI Designer
Designed for
website for iOS mobile

We were to imagine ourselves as part of a UX Design team at a hypothetical company, Emerge Technologies. We were tasked with evaluating the usability of an existing digital product by conducting a heuristic evaluation.

Design Process

To allow us to provide the best evaluation possible, we went through the following steps in a non-linear fashion, evaluating and testing when needed. This helped to provide the best product possible.


Identifying the problem space

Secondary research

Heuristic evaluation


Listing usability issues


Design prioritization matrix

Executive summary


Redesigned task flow


Why this problem space?

According to website traffic statistics, online shopping consisted of:





It is for this reason that websites be primed for mobile viewing.

Zara itself continues to be a popular brand, with statistics to show.

£5.4 billion

net sales in 2021

5.1 million

online visitors within the last month


average number of visitors who view one webpage before leaving website*

*While not bad this could be improved through better design

Therefore, we chose to redesign the task flow of browsing and purchasing bed linen on iOS mobile

Screen shots from task flow

Home Screen

Search "bed linen"

Browse "bed linen"

Item details

Input payment information

Item summary

Heuristic Evaluation

Each of us went through the website separately to evaluate it. We made note of which usability heurstics were violated and how severe the violation was. Below are the different usability heuristics and how we categorized the severity of each.

Usability heuristics

10 principles to help guide usability for a product/design based on Nielson and Norman group

Visibility of system status

Design should keep users informed about what's going on within an appropriate amount of time and through feedback.

User control and freedom

People make mistakes! If users do make mistakes, ensure there is a clear "emergency exit" so users can get out of them. This will make it less frustrating for users and they won't get stuck.

Consistency and standards

Users don't typically interact with only one type of interface. Ensure the platform or interface matches what is typically done so users don't have to learn how to navigate something new.

Error prevention

Mistakes happen. Best designs ensure users don't make mistakes in the first place. Either eliminate error-prone conditions, or have a confirmation message before committing to an action.

Recognition rather than recall

We have enough to remember in a day already. Lessen the amount of information users have to remember by labelling elements, actions, or options or having them be easily retrievable.

Flexibility and efficiency of use

Shortcuts not only save us time but also saves us effort. Some examples are having keyboard shortcuts or allowing users to tailor content according to their needs and what they would frequently use.

Aesthetic and minimal design

Ensure information shown is relevant and needed. If a screen or interface has too much content it can be overwhelming for the user. However, be careful to still keep the user's primary goal in mind!

Help users recognize, diagnose, and recover from errors

Error messages should be clear - no jargon/error codes, indicate the problem, and suggest a solution.

Help and documentation

Great design does not need additional explanation. However, there are times where is it necessary to provide documentation to help users complete their tasks.

Match between system and the real world

Use words, phrases, and concepts familiar to the user. This allows users to navigate and learn the interface more easily.

Severity scale

Industry rating to help prioritize design decisions

Define & Ideate

Usability issues

After separately creating a list of violations, we came together and decided to focus on 9 usability issues to focus on. These are listed below. They are presented in the order of severity ranking. With each issue, this information is included: The error, the heuristic that was violated, the problem, the solution, and its severity rating.

Absence of error message

Heuristic: Help users recognize,
diagnose, and recover from errors

Problem: No error message when adding an address in an incorrect format.
Recommendation: Ensure an error message appears when users input information in an incorrect format or add helper text to indicate the correct format

Obscure "continue" button

Heuristic: Consistency and standards

Problem: The placement of the “continue” button is not immediately apparent to the user as it blends into the night mode navigation bar.

Recommendation: Make "continue" button more apparent to the user by changing its colour, shape and placement.

Absence of cart update

Heuristic: Visibility of system status/
User control and freedom

Problem: On the item view, there is no indication an item has been added to the cart and the user cannot see the cart.

Recommendation: Ensure the user can see the cart when they've just added an item to it.

Absence of billing/
shipping information

Heuristic: Help and documentation

Problem: Two address detail sections are shown but does not indicate if its shipping or billing.

Recommendation: Create subheadings to clearly show indication of billing/shipping information on summary purchase.

Absence of item

Heuristic: Help and documentation/
Recognition rather than recall

Problem: In the summary of purchase, the user cannot see the specifics of what they're about to purchase. This can cause confusion for the user.

Recommendation: Add item name, short description of item and number of that item on purchase summary screen.

Unknown link indication

Heuristic: Help and documentation

Problem: It is not apparent that the links are clickable. Users might not notice the important information that they are missing.

Recommendation: Add arrows or underline text to indicate links.

Limited guest checkout

Heuristic: Help and documentation

Problem: This message indicates if they want to download an invoice, they need to make an account. However, they wanted to check out as a guest.

Recommendation: Provide more information and clarity for users checking out as guests.

Limited instructions

Heuristic: Help and documentation/
Consistency and standards

Problem: No indication of being able to fill out credit card information.

Recommendation: Add labels or instructions to tell the user what to do next when adding payment information

Minimising instructions

Heuristic: User control and freedom

Problem: When the user maximizes the description the user has no way of minimising it again to see other parts of the description of the item.

Recommendation: Add an option to minimise item descriptions.

We collaborated and mapped these usability issues on a design prioritization matrix.

We made our redesign decisions based on the matrix above. We focused on the designs in each quadrant in this order:

  1. High impact, low effort
  2. High impact, high effort
  3. Low impact, low effort
  4. Low impact, high effort


Before moving on to our redesigns, we wanted to ensure we kept with the Zara Home branding as much as possible. Me and another one of my groupmates found two different fonts that were close to the Zara branding. Because there were two different fonts, we picked one and decided to go with the one shown below:

Throughout our redesigns, we also ensured we had the screenshots of the current Zara Home screens next to what we were designing to act as a reference. We chose current photos from Zara's website and incorporated them into our redesign.

Finally, these were our redesigns, with the “before” and “after” screens shown, and the link to the prototype below. I made the changes for redesign 1, 2, 3, and 9.

Absence of error message

Heuristic: Help users recognize, diagnose, and recover from errors

Obscure "continue" button

Heuristic: Consistency and standards

Absence of cart update

Heuristic: Visibility of system status/User control and freedom

Absence of billing/shipping information

Heuristic: Help and documentation

Absence of item information

Heuristic: Help and documentation

Unknown link indication

Heuristic: Help and documentation

Limited guest checkout information

Heuristic: Help and documentation

Limited instructions

Heuristic: Help and documentation/Consistency and standards

Minimising instructions

Heuristic: User control and freedom

Key project learnings

Add documentation where necessary = While having a minimal website was nice aesthetically, it was difficult to determine what steps to take or what different sections were for. We found adding documentation to indicate different areas made the user experience less frustrating while not interfering with the aesthetics too much

Differences in rating problems = at times we rated experiences differently. Therefore, we had to come together as a group to discuss the problem, state our case, and compromise on an agreed upon rating

Continually refer to usability heuristics and ratings = it was important for us to continue to remind ourselves of the usability heuristics and ratings to help us make good decisions on what changes to make.

What's next?

Hypothetically, if we were able to continue, these would be our next steps:

Finalize redesigns with stakeholders

Once design accepted, pass off to developers to implement

next project


See first project >