Video Presentation: A 7-Minute Dive into Heuristic Evaluation & User-Centric Improvements for Zara.com
What we did
Originally created for a presentation, me and Carlos Amestoy conducted a Heuristic Evaluation of Zara's e-commerce platform, addressing its challenging user interface.
Using Nielsen Norman's usability heuristics, this case study highlights the identified usability concerns and proposes targeted impactful solutions.
These recommendations not only align with Zara's unique brand identity but are also cost-conscious, ensuring feasibility in implementation.
Goals
Evaluate Zara's website for usability issues.
Suggest impactful feasible improvements.
Align changes with Zara's brand.
Context
Timeline: 2 Weeks (May 22 - Jun 5)
Type: Academic
Team: Los Desigños Amigos
Kevin Furtado
Tools
Figma
Photoshop
Loom
Google Suite
Noun Project
The Presentation
Usability Heuristics
Heuristic
adjective
encouraging a person to learn, discover, understand, or solve problems independently, as by experimenting, evaluating possible answers or solutions.
Heuristic evaluation is a usability engineering method for finding the usability problems in a user interface design so that they can be attended to as part of an iterative design process.
Neilson Norman's Logo
Making Zara More User Friendly
Utilizing Nielsen Norman's 10 Usability Heuristics, (NNG) Carlos and I conducted independent evaluations, uncovering usability issues. We then collaborated to synthesize these insights into on-brand, cost-effective solutions.
Neilson Norman's 10 general principles for interaction design.
How we did it
User Evaluation
Carlos and I assessed the interface using NNG's 10 heuristics and identified issues.
Collaboration & Aggregation
Combining our findings for a comprehensive overview.
Prioritization
Together, we ranked the issues based on severity and user impact
Solution Design
Finally, we brainstormed and prototyped brand-aligned solutions.
Ranking scale for assessing the severity of a usability issue.
The Core Task
Defining the Main Task
Our first step was to zero in on the most essential action users perform on the website:
buying an item, specifically this shirt.
Identifying Usability Challenges
We found challenges when trying to buy the shirt.
We discovered 5 main problems and thought of ways to fix them.
Issues and Improvements
Clearer Size Buttons
Users often add a shirt to the cart without selecting a size.
This is likely because the size options don't appear clickable which leads to an error and breaches the 'Error Prevention' heuristic.
Old
The user clicks 'add to cart' without selecting a size first generating an error.
Violating the Error Prevention Heuristic.
New
Clearer Button Design
We've adopted familiar button designs that align with user expectations. By transitioning from a list to well-labeled buttons, we've reduced confusion.
Now, users can easily see and select sizes, minimizing the chances of adding items to the cart without a size choice.
Subtle Focus for Error Prevention
Drawing inspiration from the H&M website, we replaced the stern warning message with a gentle nudge encouraging users to select a size before proceeding.
Subtle Focus for Error Prevention
Drawing inspiration from the H&M website, we replaced the stern warning message with a gentle nudge encouraging users to select a size before proceeding.
One Solution for Two Heuristic Violations
To fix both identified issues related to size selection buttons, we designed a solution that redesigns the buttons, addressing both problems at once:
Error Prevention
Recognition vs. Recall
Increased Visibility of Size Choices
After users select a size, other sizing options vanish, making it unclear how to change their choice.
This challenges the 'Recognition vs. Recall' heuristic, as users must remember previous options without a clear way to modify their selection.
Old
Upon selecting a size, other options vanish. To change, click the chosen size again.
Violating the Recognition rather than Recall Heuristic
New
Always Visible, No Need to Remember
With our redesign, every size option remains visible even after one is selected, changing color to signify its selection status.
This intuitive approach keeps users informed without relying on memory, making it easier and more straightforward to choose a size before adding an item to the cart.
Sizes stay visible with color change and animated lines highlighting the selection.
Easy Undo for Cart Additions
When users mistakenly add an item to the cart or choose the wrong size, they lack a quick way to correct their actions. Instead, they must interrupt their shopping to visit the cart and remove the item.
This challenges the 'Freedom and Control' heuristic, as users should be able to effortlessly reverse their choices.
Old
Adding an item by mistake? There's no quick undo, forcing a detour to the cart.
Violating the Freedom and Control Heuristic
New
Seamless Error Correction with 'Remove Item'
We've introduced a clearly labeled "Remove Item" button in the side modal that appears when an item is added to the cart.
Should customers accidentally add an item, this feature allows for quick removal, ensuring a continuous shopping flow without the disruption of visiting the cart page.
Added by mistake? 'Remove item' quickly and see the animation for instant feedback.
Enhanced Cart Visibility for Better Feedback
The shopping cart icon, being tiny and nestled in a corner, coupled with even smaller text inside, makes it challenging for users to discern the number of items in their cart or to proceed to checkout.
This situation is at odds with the 'Visibility of System Status' heuristic, as users aren't easily informed about their cart's status and lack sufficient visual cues when items are added.
Old
Zooming in on the diminutive cart icon illustrates its limited visibility and small text size.
This violates Visibility of System Status heuristic
New
Balanced Design with Feedback with the Cart Icon Redesign
To align with Zara's branding while improving visibility, we revamped the cart icon to create a harmonious visual balance with Zara's logo.
Positioned prominently on the screen, the refreshed icon is accompanied by a new animation that provides feedback whenever an item is added to the cart.
Discover the redesigned cart icon, now offering visual balance and animated feedback with each addition to your cart.
Streamlined Navigation After Emptying Cart
When users cleared their cart, the absence of clear navigation hindered their shopping journey.
This oversight challenged the 'Help and Documentation' heuristic, as users were left without guidance, potentially disrupting the flow and experience of online shopping.
Old
See how removing an item leaves users stranded without clear navigation options, halting their shopping flow.
This violates the Help and Documentation heuristic
New
Encouraging Continued Shopping
To facilitate uninterrupted shopping, we reintroduced the hamburger menu — consistently seen on other pages — to the cart page, coupled with a clearly labeled "Continue Shopping" button.
Furthermore, we designed a section that recommends similar items to those previously in the cart, nudging customers to browse more, particularly after emptying their cart.
Experience the revamped cart page — now featuring a 'Continue Shopping' button and personalized suggestions for your next find.
Prioritizing &
Outcomes
Outcomes
Impact Over Effort
In determining which usability issues to address first, our guiding principle was impact.
Which problems were most likely to disrupt the user experience?
Which solutions would provide the most value to both users and the business?
User Disruption
Which issues disrupt the user the most? Our focus is on high-impact problems that truly hinder the shopping experience.
Issue Frequency
How often do users face these challenges? We spotlight problems that occur frequently, ensuring that our solutions touch the majority of Zara's visitors.
Solution Efficiency
With real-world business constraints in mind, we strike a balance. We're on a mission to implement high-impact fixes that don't require hefty developmental resources.
Prioritization Matrix: Visualize issues to determine which we should solve first based on its user value vs. effort to fix.
Prioritization Process
We systematically ranked the identified usability issues from 1 to 5, with 1 as the most critical.
We focused on those issues that significantly hindered the shopping experience and occurred most often.
Our approach remained centered around proposing impactful and feasible solutions.
Limitations and Assumptions
When conducting our heuristic evaluation, our approach was rooted in best practices and extensive experience. However, every study has its set of limitations and assumptions that influence its outcomes. Here's a breakdown of some key areas where we navigated these challenges:
User Behavior Insights
We lacked actual analytics on user drop-off rates or behavior, relying instead on best-guess estimations.
Development Cost Estimations
Without consulting developers, we made approximations on development efforts and costs.
Projected ROI & Impact
Solutions' potential ROI was projected based on the immediate problem-solving impact, without exact metrics.
Next Steps
Validate with Developers & Stakeholders: Aligning our findings and recommendations with the Zara team will ensure feasible and relevant solutions.
Estimate ROI vs. Development Cost: We'll weigh the potential benefits of our changes against anticipated costs for a balanced approach.
Hand-off & Collaborate with Developers: Moving from design to action, we'll work alongside developers to bring our solutions to life.
Key Learnings
Working on this project with Carlos, we gained valuable insights into user interface design, focusing on making things simple yet effective. Here’s what stood out:
Clear Guidance is Key
Keeping things clear and straightforward is essential for a good shopping experience.
Smooth Shopping
Eliminating hurdles makes shopping easy and lets customers focus on what they enjoy.
Balancing Branding & Usability
Maintaining Zara's unique style while improving the user experience was a careful balancing act.
Moving Forward
Navigating through this project, we've learned to balance brand identity and user needs, setting a foundation for future UX projects.
These insights are valuable in aligning user-centric designs with the brand ethos, reflecting Zara's aim to deliver a swift and seamless customer experience.
Impressed by our work on Zara?
Let's connect to elevate your user experience!
Check out Carlos's Portfolio
Check out my partner Carlos's website for a closer look at his portfolio and some of our joint projects.
If you find something that piques your interest, don’t hesitate to reach out to him for a chat or potential collaboration!