Zara Redesign
UX/UI Design
Heuristic Evaluation
Zara
Zara SA, stylized as ZARA, is a Spanish apparel retailer based in Arteixo, A Coruña, Galicia, Spain. The company specializes in fast fashion, and products include clothing, accessories, shoes, swimwear, beauty, and perfumes. It is the largest company in the Inditex group, the world's largest apparel retailer.
Project Overview
Project Type
Academic
Role
UX Researcher, UX Strategy, UX/UI Designer
Tools
Figma
Design Challenge
The challenge is to conduct an effective heuristic evaluation of an existing digital product and evaluate the usability of a digital product by measuring the extent to which an existing digital product adheres to a set of usability heuristics.
Why Zara?
My group and I chose Zara because based off of personal experience and various online shopper complaints through social media, we knew that there could be improvements made to Zara app’s overall user experience.
Zara’s app currently sits at a 3.7 stars in the app store, with numerous comments stating that the usability of the app is confusing and misleading.
The following are some reviews in the app store:
The Process
What is a Heuristic Evaluation?
A heuristic evaluation is a way to test whether a website is user friendly. In other words, it tests the site’s usability. Unlike user-testing, where the site (or prototype) is evaluated by users, in a heuristic evaluation the site is evaluated by usability experts. That’s why you’ll sometimes find it referred to as an “expert review”.
Benefits:
The benefits to conducting heuristic evaluations are that it helps identify and fix usability issues, and is also a relatively quick method of gathering website feedback and it also improves business metrics such as user engagement.
Heuristic Evaluations
Visibility between system status
Match between system & real world
User control and freedom
Consistency and standards
Error prevention
Recognition rather than recall
Flexibility and efficiency
Aesthetic and minimalist design
Help users recognize, diagnose, and recover from errors
Help and documentation
For more information please visit: 10 Usability Heuristics for User Interface Design
Heuristic Rating System
We developed a severity legend made up of a 5 point rating system to see how well Zara’s app meet each principle evaluation.
Heuristic Selection
-
Consistency & Standards
Users should not have to wonder whether different words, situations, or actions mean the same thing.
-
Match between systems & real world
The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
-
Aesthetic & minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
-
User control & freedom
Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
Constraints
The following are some constraints that had to be considered for redesigning Zara’s app.
Typography: Helvetica Neue
Platform: iOS
Mood/Design: Minimalist Aesthetic
Brand Colors: Black, white, grey
User Task Flow
The main task that was chosen for the evaluation was to purchase a blouse. It requires the user to open Zara’s homepage, find a blouse, add blouse to cart, and check out the blouse.
Evaluation & Redesigns
Consistency & Standards
Zara will still be able to have a look-book feel with our redesign. With the call to action button added, users will be able to directly access a particular section based on the associated photo.
Severity Rating: 4
Solution: Users will be able to easily access a particular section when going through lookbook
Consistency & Standards
In the original design, the slider function is misleading because it is not a typical component used for online retailers. This may confuse shoppers and visitors may not ever utilize the feature. With the redesign, the single view and grid view buttons are more typical components used to view products listed. Online shoppers will understand the functionality of it and utilize the feature.
Severity Rating: 3
Solution: By changing the slider to grid view icons, users will not be confused as to what the functionality is for because they are familiar with the icons.
Match between system & real world
In the original design, in order to select a size, shoppers have to tap ‘add to bag’ and then be directed to choose their size. This is misleading because, the call to action of ‘add to bag’ does not indicate it also being a size selector. Online shoppers may spend extra time looking for the section to select their size and not know that they have to tap ‘add to bag’. With the redesign, we created a ‘Select Size’ drop down option in addition to the ‘add to bag’ button thus, online shoppers will know where to select their size. It is a more familiar process and is not misleading.
Severity Rating: 2
Solution: Allows users to select the size prior to adding to bag, this is a more familiar process for an online apparel shopper.
Aesthetic & Minimalist Design
In the original design, the chat button holds hierarchy than the buy button. This is visually distracting for the shopper when they are checking out their products. Thus, for the redesign, we placed the buy button higher than the chat button so it would speed up the check out process and creates more of a smooth shopping experience.
Severity Rating: 2
Solution: This will help speed up the check out process and users will not be visually distracted by the ‘Chat’ button.
User Control & Freedom
In the original design, to edit an item in your cart, the edit option is tucked in the top right corner in small font. It is very hard to locate, as well shoppers do not know that they can swipe left on a product to view more options. Thus for the redesign, we added a quantity drop down menu to easily edit quantity, a trash can for users to easily remove items, as well as a bookmark option for shoppers to save their items for later. This will create a more efficient and easy shopping experience for users.
Rating of Severity: 2
Solution: Users will be able to easily update and remove items which would speed up the check-out process.
Summary
The overall usability score was calculated by taking the sum of the severity scores and dividing it by the number of issues. Zara’s app has a usability score of 33%. We believe that this was accurate when comparing the current rating of the app in the App store. Thus, with the suggested redesigns, we believe this will help with the overall user experience of Zara’s app.
Key Learnings
The heuristic evaluation is a great method to use because it identifies issues that typically users don’t catch when interacting with a digital product.
Experience with best practices and patterns are needed to successfully identify the heuristic issues
To conduct a successful heuristic evaluation, you need to put yourself in the users shoes and complete a task flow to understand and identify the heuristic issues.
Next Steps
Test out designs and collect quantitative feedback through monitoring of conversion rates and sales
Conduct another round of heuristic evaluation to identify more issues