Zara Case Study
Duration:
Jan 2021 (1 week)
Context:
Personal Project,
Website Redesign
Focus:
UX Research,
UI/UX Design
Tools:
Figma
Overview
Zara is a retailer recognized internationally for its clothing and business model. The Spanish company sells fashion apparel with a high-fashion brand image to young, fashion-conscious shoppers at reasonable prices. Zara differentiates itself from its competitors using this high-fashion brand image, which it preserves by spending very little on advertising and by creating scarcity— when clothes are sold out, they are rarely restocked.
Zara describes itself using 4 characteristics: beauty, clarity, functionality, and sustainability. Unfortunately, its current website sacrifices clarity and functionality for beauty, reducing usability for aesthetics. It breaks from typical design patterns seen on retailer websites, causing users unnecessary friction in their shopping process.
How can I redesign the Zara website to be more user-friendly? Can the website better align with its brand image and marketing strategies?
Goal
Redesign the Zara website to be more user-friendly while preserving a unique appearance. Communicate the scarcity of Zara’s products in a way that adds value to both the user and the company.
Problem Space
I conducted informal interviews and online research to understand the problem space. I wanted to hear the sentiments of real people after using the Zara website.
“The fashion influencers I watch always find the cutest things from Zara, but the website prevents me from wanting to go on it”
“I love going in Zara stores, but the website turns me off from ordering online”
“The website gives me anxiety! Shopping shouldn’t be so complicated. There’s too much going on for me.”
“I like shopping with the Zara app much more. It’s so much easier and you get notifications when new collections drop!”
Pain Points
The pain points I will be addressing can be separated into two primary complaints.
The Zara website is:
Overwhelming - Users feel stress and/or anxiety from viewing the page
Confusing - Users cannot easily find the information they want
Problem 1: To identify why the website caused users to feel overwhelmed, I studied the website with two perspectives: zoomed out to observe its overall grid layout and zoomed to 100%, how users see it.
Problem 2: Next, I identified areas that were hard to navigate or would cause frustration.
Persona
Using my initial research, I created 2 personas that represent the types of shoppers Zara caters to:
The Zara website currently only meets Cece’s needs. Because of her strong love for fashion, she can spend hours searching for clothing without feeling frustrated by the website design. However, Rachel is a better representation of the typical consumer. Zara’s website does not currently meet her needs, rather, it acts as a deterrent, preventing Rachel from being able to browse Zara’s website.
Hi-Fi Prototype
Following multiple rounds of iterative design, I made the following changes to reach my current high-fidelity prototype:
Because the website looks balanced and appears similar to other online stores, Rachel no longer feels too intimidated to shop at Zara. With the large, white margins and smaller images, Rachel can easily read the product names to identify the clothing she is looking at. She can now shop on Zara’s website without feeling intimidated.
Cece also has an easier time browsing for new clothes as she is no longer distracted by the website layout. The website still keeps a traditional “Zara” feel with its varying image placement, yet it feels more organized to her since the grid is more apparent. Now, Cece can focus more on what she loves: the clothing.
Rachel and Cece both appreciate the new "Member Favorite" tag found in the top left corner of certain products. This small indication warns them that the article of clothing is popular, and it may sell out quicker than other pieces.
For Rachel, this indication highlights certain products to her as she likes to follow popular trends. Often, she recognizes a piece of clothing worn by a fashion influencer she follows and feels more inclined to purchase it too.
For Cece, this indication causes her to quickly check if the item is in stock in her size, before adding her size to her cart and trying place an order quickly. If many of her cart items are tagged as member favorites, she will place an order before browsing some more.
When Rachel shops, she typically is looking for a certain type of clothing. She uses the new Zara navigation to easily find what she is looking for, a new favorite sweater, by clicking on “Sweaters” under “All Tops.” The new menu has a clear visual hierarchy, with varying text sizing and weight, and information hierarchy that helps Rachel find exactly what she is looking for.
Cece likes to see what is new, so she first clicks on “New In” to see if anything catches her eye.
Future Iterations & Final Takeaways
Moving forward, my next steps are to:
Experiment with adding animation to the website to further enhance its usability
Conduct user tests to further iterate on the high fidelity prototype
Overall, this personal project was a fun way to experiment with balancing aesthetics with usability. While I wanted to keep the unique, interesting appearance of the Zara website, I explored ways to make the experience more enjoyable for the user.
My favorite part of the project was creating the “Member Favorite” section as I enjoyed brainstorming different solutions to communicate scarcity in a way that would further support the high-fashion, elegant brand image.