Enhancing User’s Experience with Zara’s Interface through Heuristics Evaluation method
Client Zara
Role UX Researcher & Lead Evaluator
Secondary Evaluators Tess Porter, Roey Wang
Research Methods Heuristics Evaluation
Tools Figma, Miro
Discipline Usability Theory & Practice
Duration Sept. 2022
Project Overview
Zara is a Spanish clothing retailer with its dramatic introduction of the concept of “fast fashion” retail since it was founded in 1975. The brand aspires to create responsible passion for fashion amongst a broad spectrum of consumers, spread across different cultures and age groups. The brand also offers its customers to access their shop through their eCommerce website in which people can virtually access the shop and spend their money on the latest collection.
A Heuristic Evaluation was conducted to further investigate how usable Zara’s interface is on from a desktop‘s point of view and identified with references to Nielson’s ten usability principles, a set of problems which we later gathered in order to come up with better ways to fix these errors.
1
IDENTIFYING VIOLATIONS
Jakob Nielsen’s Ten Usability Heuristics for Interface Design
2
One scenario and four corresponding tasks were given to evaluators to assess the usability of Zara's website.
TASK #2
Look up “OVER THE KNEE TALL LUG SOLE BOOTS” on the search bar and click on the item.
The interface’s grid gives the impression that it looks like a tetris game. As you scroll through the list of recommendations presented, you can see big blocks, small blocks, full width grids, a content container width grid and some few gaps creating lots of unnecessary white space around the art board. Also, the lack of contrast resulting from the size of the fonts results in confusion from a user’s end.
All in all, while Zara has some really good solutions such as product filters, this stilll is the most impractical and non-interactive eCommerce website but could actually win a lot more if they had a more client-oriented website.
Each heuristic was used as a guideline to evaluate the website's design and functionality. Violations of these heuristics were recorded whenever discrepancies between the design and the principles were found.
For instance, violations could be noted if the website lacked clear feedback on user actions, had inconsistent navigation elements, or failed to prevent common user errors effectively. Through this process, areas of improvement were identified to enhance the usability and user experience of Zara's website.
TASK #1
On the landing page, head to the “shoes” section.
TASK #4
Complete your purchase by checking out
A severity scale ranging from 0 to 5 was employed to measure the ease with which these tasks could be accomplished, providing insights into potential usability issues.
Each evaluator (2) was instructed to perform the outlined tasks on Zara's website using their preferred web browser on a desktop or laptop. They were provided with a shared spreadsheet to document any encountered usability issues, including details such as the specific page or location where the problem occurred, the heuristic(s) violated as a result of the problem, and a severity rating assigned to the problem. This standardized approach allowed for systematic identification and documentation of usability problems across myself and both evaluators.
3
DATA ANALYSIS & RECOMMENDATIONS
HEURISTICS EVALUATION
Snippet of Spreadsheet describing problems, where they occurred, heuristics violated and severity ratings
Recommendation 1 - Engaging Landing Page and visible navigation bar
Figure 1.a (before)
Landing Page (ACTUAL)
After identifying our problems and usability issues, the goal was to come up with recommendations that will better enhance the user’s experience with Zara’s interface. Changes were presented to improve the Landing Page and Product Page.
Adding a call-to-action (CTA) button on the homepage of an e-commerce website is crucial for enhancing customer engagement. A prominent CTA button encourages users to take specific actions, such as exploring product categories, viewing promotions, or starting the checkout process. By strategically placing CTAs, Zara can guide visitors towards desired actions, ultimately increasing conversion rates and improving user experience.
Moreover, maintaining a visible navigation bar is essential, particularly when the background image is dark, as it prevents user confusion and frustration. A clear and accessible navigation bar enables users to easily explore different sections of the website, find relevant information, and navigate between pages without feeling disoriented. By ensuring visibility and usability of the navigation bar, Zara can enhance user satisfaction and facilitate seamless browsing experiences, ultimately leading to improved engagement and retention.
Recommendation 2 - Product Page Typography, Visual Hierarchy & Flexibility and efficiency of use
Figure 2.a (before)
Product Page (ACTUAL)
Figure 2.b (after)
Product Page (RECOMMENDATION)
>>>>>>>>>
Font size plays a critical role in website interface design as it directly impacts readability and user experience. Choosing an appropriate font size ensures that text content is easily legible across various devices and screen sizes, enhancing accessibility for all users. By utilizing larger font sizes for headings and important information, and smaller sizes for supplementary text, this can establish a clear hierarchy that guides users through the content effectively.
A well-defined hierarchy is essential for presenting information about price and product description. Placing the price prominently near the product image ensures that users can quickly identify it, while providing detailed product descriptions in a structured manner allows for informed purchasing decisions. Clear visual separation through font size and layout helps users navigate the page seamlessly, enhancing their overall shopping experience.
Furthermore, providing feedback to users as they navigate Zara's product pages is crucial for maintaining engagement and transparency. Whether it's through visual cues like hover effects or interactive elements such as adding items to the cart, offering immediate feedback reinforces user actions and instills confidence in their interactions with the website.
Figure 2.b (after)
Maximize Product Image
Having a user-controlled exit feature for magnified images of the product enhances user experience by offering its users complete freedom over their actions, reduces frustration and ensures a smoother browsing experience.
4
CONCLUSION
Figure 1.b (after)
Usability Heuristics for Zara Interface Design
Landing Page (RECOMMENDATION)
PREPARING
Formulating Scenario & Tasks for Evaluators
These tasks were designed to evaluate actions such as browsing for products, adding items to the cart, completing a purchase, and navigating through different sections of the website:
Scenario
Your friend’s birthday is coming up and you don’t have time to go shop at the official store. You want to get her the black boots she had her eyes on. Head to the Zara Official Website (https://www.zara.com)
TASK #3
Click on the image to make sure this is it, then add 2 orders of the boots to your cart.
>>>>>>>>>
In conclusion, conducting a heuristics evaluation to examine Zara's usability and interface issues offers its many advantages. Firstly, it provides a structured framework for identifying potential usability problems based on established principles, allowing for a comprehensive assessment of the website's design and functionality.
Secondly, involving evaluators in the process allows for more diverse perspectives and insights to be gathered, enhancing the accuracy of the evaluation.
Ultimately, this iterative approach to evaluation and improvement supports Zara in creating a more intuitive and user-friendly e-commerce platform for its customers.