ZARA Redesign
Background
A multi national retail clothing chain, Zara has become one of the most recognized and influential fast fashion brands.
Their success lies in their ability to stay on top of fast changing trends and bring new designs for all men, women, and children.
In our technology driven society, especially post-pandemic, Zara’s dependence on online shopping has become pivotal for revenue generation and growth.
Role
UX/UI designer
Timeline
80 hours (4 weeks)
Project type
Create a responsive web design
DISCOVER
Problem
With Zara’s massive following and consumer base, online shopping is an essential for growth and success. However, their website has garnered a poor reputation and faces these challenges:
1
User experience: lack of intuitive navigation leads to customer frustration
2
Competitive market: as the number of fast fashion brands increase, Zara must offer a cutting edge online experience to distinguish itself
3
Mobile optimization: slow loading times and a non responsive design hinder the user experience
4
Checkout process: a complicated checkout process results in high cart abandonment rates
“Inconvenient”
“Hard to find anything”
“Makes me want to shop somewhere else”
Confusing and hard on the eyes
Counterintuitive
Prefer shopping in person
Goal
Enhance user experience: improve navigation, browsing process, and overall usability
Foster customer engagement, loyalty, and satisfaction
Increase user retention and sales
Our Process
Discover
Define
Ideate
Design
DISCOVER
Heuristic Evaluation
Creating the site to resemble a fashion editorial more than an online store, Zara’s homepage is unfamiliar to most new customers. The navigation bar, a 10px font size, poses readability challenges and lacks user-friendliness.
Zara has garnered a reputation for its perplexing browsing experience as it presents its products with oversized images that occupy the entire screen, demanding additional scrolling and user effort to access more information
Competitive Analysis
Most of the competitors have their website layout in a similar format- detailed menus and subsections, thorough details, and clear CTA’s.
In their efforts to stand out and have a unique design, Zara misses key features of an online shopping website like reviews and extensive filters.
Compared to other brands, Zara has received the lowest score among website reviewers, garnering a rating of only 1.3 out of 5 stars on Trustpilot.com. It is important to note that not all of the poor ratings are targeted towards the UX/UI but other Zara related issues.
Primary Research: Field Testing
I asked four participants who had never used Zara before to complete a number of tasks
Browse through the home and product page
Find a specific product
Filter and sort through products
View product details
Add to cart
All participants stated that the text was too difficult to read
Upon first arrival, 3 out of the 4 participants felt discouraged from shopping on Zara because it felt unfamiliar and disorganized
Common pain points: hard to focus on anything with the large prominent images, lack of reviews, certain UI elements are not identifiable, difficult to browse
User Surveys
24 participants, between the ages of 18 and 32 years
46%
said they were less than satisfied with their experience shopping at Zara
50%
said they faced a problem with finding what they were looking for
80%
of participants used negative keywords like “confusing, unintuitive, inconsistent” to describe the website
Being a multinational company in the fashion industry, it is noteworthy when half the customers express dissatisfaction with their shopping experience. While some participants appreciated the sleek and fashionable design, others highlighted the need for a more seamless browsing experience.
DEFINE
User Personas
The user persona represents a frustrated shopper whose goal was to discover fashionable items but is hindered by poor design and usability. Ultimately, this can drive customers towards other fast fashion competitors.
Empathy Map
I created an empathy map to serve as a guide to understand their behavior and mood when facing certain challenges on the Zara website.
User often feel confusion
Users consider the choice of abandoning cart due to their frustrations
Users say that they want to see more product information
Affinity Map
These themes were clustered together on an affinity map based on the commonalities and patterns found in the pain points they addressed.
Overall:
Zara’s website does not feel like a shopping experience
The images take away too much attention from relevant information
The design is fitting for the brand, but not functional
Sketches
Keeping with Zara’s minimalistic and sleek design, I sketched out ideas and modifications I had in mind. The left sketch features a horizontal navigation bar rather than a vertical one, with a hero banner that does not consume the entire homepage. The right contains a different layout of the product details including a clearer CTA and a breadcrumb trail for easy tracking.
Wireframes
I incorporated smaller details that enhance users' enjoyment of their Zara experience, such as the model vs. product view option. This feature allows users to identify the product more quickly and browse in their preferred manner.
TEST
Usability Testing
After creating a prototype version, I shared my design to test functionality and intuitiveness of the new features implemented.
Main tasks:
Find Women’s Tops section
Use filters and sort by options to find a specific item
View product details
Add to cart
Create an account
Check out
Key Findings
All tasks were completed successfully
9 out of the 25 participants rated their experience using the prototype as a 10/10
Participants expressed content with ease in finding and browsing items
Users would like to see clearer CTA’s and more details in filters and sorting options.
“Very easy” was used in 20 out of the 25 answers when asked about their experience with the tasks
Iterations
Implemented interactive size button to help validate flow and navigation
More options for users during checkout process
Added “Sort by” and “Filter” options to provide more customization
Being able to view based on rating or specific size can help increase user confidence in purchasing products
Clearer and more distinguishable CTA’s
SUMMARY
Conclusion
Results & Impact:
All participants expressed positive feedback regarding their experience using the redesigned Zara website.
When asked about their experience, 23 out of the 25 participants used keywords such as "very good" and "easy to use".
On a scale of 1 to 10, with 10 representing exceptional ease of navigation and usability, participants rated the prototype with an average score of 9 out of 10.
Reflections
Zara’s website faces numerous challenges when it comes to usability, accessibility, and user-friendliness. This research and building process reinforced the importance of user-centric design and continuous improvement.
The perspectives and recommendations from this case study have the potential to drive meaningful improvements in Zara’s website usability and user experience.
I gained a deeper understanding of web usability while honing my Figma skills.
PRODUCT
Final Design
Thank you for reading!
Check out my other case studies below!
Queue Up
End to End Mobile App
View case study
On the Block
Student Project
View case study
YouTube Socials
Add a Feature
View case study
Copyright © 2023 Rebby Kim. All Rights Reserved.
