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.
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.
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.
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.
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”.
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.
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.
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.
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.
