A heuristic evaluation and redesign of Zara's e-commerce application for android users.
Role: UX/UI Designer
Team: Scott Boyd, Odette Yeh
Timeline: 2 Weeks (Nov 2022)
Tools: Figma
Platform: Android
THE PROBLEM
Zara's app features several usability issues impacting customer enjoyment and usability of the app.
THE SOLUTION
Improve Zara’s customer journey and experience to increase sales and retention rate on Zara’s Android app.
THE PROCESS
Heuristic evaluation of Zara's existing app, identifying and implementing design improvements.
Perfect on paper, right? Well...
Zara’s brand value has actually been in decline since 2019.
Zara's website notes the focus of their business model is on the consumer, but recent reviews seem to suggest another story.
‘Didn’t expect this from zara...I hate their shopping experience, it makes you frustrated...You can’t be the leader in the market and have the sh*ttest experience for users’ - Nov 9, 2022
‘They have removed a lot of useful information...I wanted to check which payment method I used...and it’s just nowhere, not listed ANYWHERE.’ - April 22, 2021
‘Frustrating after clicking in a product and return to the previous page always showing different clothes make me think twice before clicking into a product.’ - June , 2022
With online shopping projected to become a main revenue stream for Zara, the issue of usability needs to be addressed to avoid a decline in revenue.
We need to...
Improve customer experience and app usability through the key task of a returning user searching for and purchasing an item.
Simulating the customer experience.
As a team, we set to reconstruct the task flow through screenshots so we could analyze and evaluate the experience.
After simulating the experience of purchasing an item, and due to project time constraints, we focused on a few key heuristics and analyzed their adherence to the heuristic principles, detailing our findings below.
Design improvements.
Visual Hierarchy
-
Apply consistent headings on all pages as context indicators for user
-
Apply visual hierarchy to text particularly ‘filter search results’ process
Shopping Cart
-
Add signifying features to ‘Delete’ and ‘Save For Later’ buttons
Checkout
-
Add a progress indicator during all steps of checkout process
-
Edit wording for delivery/pickup options
Chat Support
-
Optimize wording on “chat” exit option buttons
Checking out the competition.
During our initial wireframing and sketching process, we conducted some informal competitor analysis to inform our design decisions and to ensure we met existing design standards.
.png)
After evaluating the heuristic violations with a design prioritization matrix, we focused our attention on the following issues:
#1 Visibility of system status
Problem
Absence of a progress indicator means user lacks context and orientation
Solution
Addition of progress indicator:
-
provides orientation for user and context of steps ahead
-
communicates to user what they need to do in this moment
#4 Consistency and standards
Problem
Buttons for ‘Delete’ and ‘Save For Later’ appear as simple text with unusual placement
.png)
Solution
Button redesign:
-
maintains external consistency of design by aligning with competitive retailers
-
communicates user freedom and control
#5 Error Prevention
Problem
When confirming to end a chat session, wording of two choices can be easily misinterpreted.
.png)
Solution
-
Header acknowledges the user’s attempt to close chat
-
Body clearly informs user that conversation will be saved to access later
-
Button wording removes ambiguity of choice
#8 Aesthetic and minimalist design
Problem
Hierarchy of information was unclear, forcing user to work to categorize information.
Solution
-
Bold font weights help users understand what category they are in
-
Contrasting font sizes establish a hierarchy of information
-
Colour samples provided to clarify meaning and increase scanability
-
Alphabetized list aids colour-impaired users
#10 Help and documentation
Problem
Chat option is only available on certain pages, with low visibility and uncommon placement.
Solution
Redesign of chat option
-
complies with user’s expectations by using common placement and visual style
-
increases accessibility when scrolling with fixed floating position
-
maintains brand colors
Benefits to Zara's stakeholders.
With our improved scalable design, the user journey would be smoother and more positive, leading to happier customers who are more likely to return and spend more time on the app.
Increased customer satisfaction and engagement
Increase in customer brand loyalty
Increase in in-app purchases
Scalable and integratable redesign
Lessons learned.
Zara's minimalistic style guide and monochromatic palette leaves nowhere to hide bad design choices, unlike apps with more colourful palettes. This was a constant consideration as we tried to balance the desire for an optimized user experience without diverting from brand identity.
We also learned that:
Form over function
will often result in a frustrating user experience
Accessibility
should be considered when designing button/text sizing
Going Digital
can often be a complex challenge, even for multi-million dollar companies