Hero Image Zara_3.png
 

ZARA

GOAL & TIMELINE

(1) Evaluate the usability of the ZARA mobile app (iOS version) by measuring the extent to which it adheres to usability heuristics, (2) Once the heuristic assessment is complete, suggest design improvements.

Academic project, duration: 1.5 weeks

CONSTRAINTS

Propose recommendations in line with the existing Zara’s branding guidelines. A UI library was created to stay consistent with the brand’s typography, color, symbols, grid, page template, etc.

TOOLS & TEAM

Figma, Zoom

UX Designers: Diana Porcescu, Meg Cameron, Neha Chawla

 
 

WHAT DO WE KNOW?

 
 

The customer is at the heart of Zara’s unique business model, which includes design, production, distribution, and sales, through an extensive retail network. The company has an ongoing commitment to its customers around the world to provide an excellent customer experience to all. This requires a website that is accessible to the widest possible audience, regardless of technology or ability.

IOS app rating: 4.0

Total reviews: 8,347 Ratings

RATING SYSTEM

 

Based on the severity of the usability problem, each heuristic is rated between 0 and 4, where 0 is not a usability problem and 4 is a catastrophic problem.

0 = I don’t agree that this is a usability problem at all
1 = Cosmetic problem only: need not be fixed unless extra time is available on the project 
2 = Minor usability problem: fixing this should be given low priority 
3 = Major usability problem: important to fix, so should be given high priority 
4 = Usability catastrophe: imperative to fix this before the product can be released

THE PROCESS

 

After conducting some preliminary research to better understand the public opinion and major concerns around the app’s usability, the team conducted evaluations based on Nielsen Norman Group’s 10 Usability Heuristics. As part of our analysis, we looked into the usability issues occurring throughout the shopping experience, from exploring the home page to initiating the check-out.

Based on the task flow analysis, it was concluded that the Zara mobile app violated the four heuristics below.

HOME PAGE

 

Aesthetic & Minimalist Design

Issue: It is difficult to read the text written over the hero image on the home page.

Recommendation: Create visual contrast to make the text more visible and/or add solid fill to the CTA buttons. We worked on redesigning the home page by adding a contrasting overlay, which improves the readability of text if compared with the original version.

Frame 2.png

PRODUCT PAGE

 

Consistency and Standards

Issue 1: Product details such as composition, care, and in-store availability are located at the bottom of the page, not under the product.

Recommendation 1: Change the order of sections to move the product details (accordion list) below the product description.

Frame 3.png
 

Consistency and Standards

Issue 2: The chat feature is displayed as part of the accordion list on the product page. The user would benefit from this feature throughout the entire shopping experience from home to product page.

Recommendation 2:  Separate the chat component from the product details section and add it as FAB across all pages.

Frame 4.png
 

Flexibility and Efficiency of Use

Issue #3: The app automatically displays the user’s size on all product pages after the user sets it up. The user’s size is highlighted in a different color on all product pages. If the product is not available in that size, it is not indicated in the highlighted section.

Recommendation #3: Indicate “Out of Stock” next to the size to clarify that the product is not available.

Frame 5.png
 

Flexibility and Efficiency of Use

Issue #4: The “Coming Soon” products aren’t marked as such on the collection pages. The user is notified the product is “coming soon” and unavailable for purchase only when he/she accesses the product page.

Recommendation #4: Notify the user that the item is “Coming Soon” on the collection pages or provide an option to “Pre-order”.

Frame 6.png

SIZE PAGE

 

Consistency and Standards

Issue: The size preference is not consistently labeled. Choosing the right fit based on three labels and five options might be challenging.

Recommendation: Include only 3 labeled options for the size preference or replace the entire sizing component keeping in mind the e-commerce best practices.

Frame 7.png

WALLET PAGE

 

Consistency and Standards

Issue: The user is currently unable to add a payment method before checking out. The only options available are gift and employee cards.

Recommendation: Add card sections with card details prompted by an individual selection on the “Payment Cards” page.

Frame 8.png
Frame 9.png

HELP PAGE

 

Help and Documentation

Issue: The user can search for help only by using the accordion list. At this time, he/she is unable to search for a specific problem on the Help page.

Recommendation: Create a search bar for users to input their specific problem to reduce the time spent performing the task.

Frame 10.png

FINAL THOUGHTS

 

The heuristics identified were evaluated and ranked based on Jakob Nielsen’s severity rating scale, with an overall rating of 2.4/4. The overall usability score was established by calculating the average of individual scores. Despite high Apple app store ratings (4/5), our analysis identified usability issues on the product page and at the check-out stage, requiring immediate attention.

While going through the redesign process, I recreated ZARA’s UI Library. The library allowed me to stay consistent with the brand.

 
 

NEXT PROJECT