top of page
zaralogo 1.png
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

smartmockups_lfg3n5lm.png
smartmockups_lfg3nhxd.png
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.

The customer is at the heart of our unique business model” - Zara

The fashion giant, Zara, has racked up some seriously impressive stats:

4.7 

451K reviews on Google Play

50M+

downloads on Google Play

$21B

in sales in 2021

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.

U4 1.png

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.

Frame 2 (2).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

Group 4.png

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

Recording 2023-03-19 at 16.17.06.gif

#4 Consistency and standards

Recording 2023-03-19 at 16.23.39.gif

Problem

Buttons for ‘Delete’ and ‘Save For Later’ appear as simple text with unusual placement

Group 4 (1).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.

Group 4 (2).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

Recording 2023-03-19 at 16.48.36.gif

#8 Aesthetic and minimalist design

Recording 2023-03-19 at 17.10.10.gif

Problem

Hierarchy of information was unclear, forcing user to work to categorize information.

Group 4 (1).png

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.

Group 4 (2).png

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

Recording 2023-03-19 at 17.24.22.gif

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

bottom of page