Project Background
Zara is one of the largest and most recognizable clothing brands in the world. They have a devoted customer base that is both global and spans an age group between 18-55. While best known for clothing, Zara also sells accessories, shoes, swimwear, beauty products, perfumes, and home goods. In August 2025, Zara’s website had 80.2 million visits. I am conducting a case study for the redesign of Zara’s website.
Problem
Despite high web traffic, Zara's website sacrifices standard e-commerce usability for a minimalist, editorial aesthetic, leading to a frustrating experience where users struggle to: navigate, find products efficiently, and make informed purchasing decisions.
Goals
To redevelop Zara.com into a seamless, intuitive shopping experience that allows customers to discover, select, and purchase fashion effortlessly. The new platform will prioritize clarity, speed, and ease of navigation, enabling users to move fluidly from inspiration to checkout—reflecting Zara’s commitment to beauty, functionality, and simplicity in every interaction.
Time Frame
8 weeks
My Role
UX + UI Design, Visual design, Branding, User flow, Research, Prototyping, Testing
Tools
UX Pilot, Figma, Canva, Squarespace, Wix
My Design Process
Background
Since this is a case study about revamping Zara's Website, I was not able to gather users to interview. I did research and found online reviews from multiple sources detailing their experience with the site. I gave the reviews stock images to make them feel more real.
Janielle Rose
Its one of the worst retail websites our there. Seriously awful.
Alexa Smith
Cant Stand it. All the giant pictures and are sorted by looks rather than categories, plus half the pictures don't load. Its useless.
Sara Lee
Yep its terrible. Website very user unfriendly and the models stand in weird poses so you cant get a reel feel for the clothes! Got knows where I'm going to try for my autumn/winter wardrobe.
Jack Dawson
I stopped shopping there for that exact reason. Its a terrible website.
Kylie Miller
Love their clothes but the site is so clunky. Also the sizing is all over the place atm. My last three large orders have all been sent back. Ugh so frustrating!
Jessica Rhodes
This site is awful and the clothes look so bad on the models too. When I go in the store, the nearest on is quite far away so can't do it much, I find loads that I like but never can when I look in the site. I think I am going to shop at Lululemon or aritzia
Based on the reviews, multiple users for years have been voicing their frustration about the companies website. This gave me a huge opportunity to mitigate some pain points and enhance the User Experience.
Market Research
The next phase of research began with an exploration of current market trends and user needs. I conducted a competitive analysis of four other direct and indirect businesses. All four competitors had varying features and catered to or met diverse needs.
Zara Business Competitive Analysis
Zara Tech Stack Competitive Analysis
Pain Points
Images are too big relative to their text size
Menu is too Large and overlaps with text underneath
Zero hover state on the page
Personas
I gathered the data found from our competitive analysis and our pain points to create two user personas that represent our target audience
How Might We evolve Zara's online experience to balance its high-fashion aesthetic with a streamlined, intuitive, and accessible user experience that converts shoppers into confident, repeat customers
User Flow
Design System
Zara uses a minimalist design theme and to stay true to this case study we also implemented a minimalist design consisting of black and white.
Prompt #1
I started out spending some time coming up with my prompt for Lovable.dev. This is what I initially came up with.
"Create a modern, minimalist e-commerce website inspired by Zara’s design style. The site should include:
Homepage – clean hero section with a full-width image slider, featured collections, and new arrivals.
Product Listings Page – grid-based layout for categories (men, women, kids, accessories), with high-quality images, filters (size, color, price), and hover effects.
Product Detail Page – large product images, zoom feature, product description, price, size/color options, and 'Add to Cart' button.
Shopping Cart & Checkout – shopping bag with item list, quantity update, remove option, and a secure multi-step checkout process (shipping info, payment, confirmation).
Ordering System – support for order tracking and confirmation emails.
Contact Page – contact form, customer service info, store locator, and links to social media.
Navigation & Footer – sticky header with navigation menu, search bar, account login, and shopping cart icon. Footer with newsletter signup, policies, and quick links.
Design style: minimalist, fashion-forward, black & white color palette, bold typography, large images, clean grid layouts, and smooth animations."
Blocker #1
You would recieve this issue either on the shipping page, or on the payment page and it was difficult to diagnose why you would recieve this issue
Troubleshooting Prompts 1
The screen is still showing me payment failed. You said you got rid of the mockBackend service loop?
I am still seeing payment failed. why? I want you to tell me the root cause of this.
Output
-
"Payment component navigates without setting URL parameters (?success=true&orderId=...)
-
Confirmation component's logic success === false (from missing URL params) overrides the actual success from currentOrderResult.success === true
-
This causes the "Payment Failed" screen to show even when payment succeeds
-
Fix the success detection logic in Confirmation.tsx to prioritize navigation state over URL parameters
-
Update Payment component to include proper URL parameters when navigating to confirmation
-
Simplify the success detection to avoid conflicts between URL params and navigation state
This will ensure that successful payments correctly show the success screen instead of the failure screen."
Solution
RootCause
Troubleshooting Prompts 2
when I chose a non free shipping tier, it did not change the price of the item. why?
Output
"The issue is that the standard shipping option is hardcoded as free in the mock backend, when it should be conditional based on order total. The shipping cost calculation itself is working, but the standard shipping price needs to be dynamic
Steps to Fix:
1. update mock backend to make standard shipping conditional (free over $50, otherwise $8.99)
2. Update shipping options loading to calculate dynamic pricing based on currrent subtotal
3. Update auto-selection logic to properly handle conditional free shipping
Test the fix to ensure non free shipping tiers properly update the total.
This will make standard shipping cost $8.99 for orders under $50, and free for orders $50+, while express and overnight shipping maintain the fixed costs"
Success!
I was able to complete the checkout process and get to the confirmation page.
Blocker #2
I tried to make the platform more comprehensive by adding more categories and products to the page. When I added more products, I ran into the issue of duplicate products.
I learned that Lovable.dev has a 12 item product limit and if I wanted to increase its product size, I would need to buy some ChatGPT tokens. It would have cost $100 to generate the 96 different products and their images to fill out the product menu above. I did not have the funds to do this so I scaled the product list back down to 12 items.
Blocker #3
On the mobile version, the hamburger menu would overlay on the current page making it ineligible to read.
Success!
I was able to complete the navigation using the following prompt!
Prompt: The hamburger still does not have an overlay and the text is still overlapping. Just delete the current menu and recreate a new hamburger menu. On the menu is should slide in from the right, it should have a white background with black text that takes up 80 percent of the page and overlays the current page. If there is a Z index issue, make the menu the highest position.
Key Designs & Iterations
Image to text ratio
Users cannot easily read essential information like product descriptions, prices, or calls to action (CTAs). This leads to confusion and frustration, as shoppers are forced to strain their eyes or struggle to interact with small icons.
Result: When product details and icons are easy to read and use, users can find what they need and complete purchases without friction. This will enhance a user's satisfaction and build customer loyalty
Before
1. Image size is too large relative to text
2. Icons like the save feature are too small relative to their image
1. Text size is larger and image is smaller.
2. Icons are larger and easier to see due to background overlay
After
Search
The search functionality was a big pain point because when you try to search within the page it takes you to a new page which impedes the user on their journey.
Result: When visitors can easily find what they are looking for, it leads to a more satisfying experience, reducing frustration and lowering the bounce rate. This will lead to higher conversion rates and sales.
Before
1. When you click on search it takes you to an entirely new page
After
1. The new search pulls up a menu overlay, thus keeping the user on the same page.
Hover State
On the Zara website, there is no hover state anywhere on the page. This makes navigating the website confusing and frustrating
Result: A hover state provides clear feedback to our users and improves their navigation experience. Users are more likely to buy a product from a website with intuitive navigation.
Before
1. There is no hover state on the button
2. There is no hover state on the web links underneath (ex. product measurements)
After
1. There is a hover state over the buttons
2. There is a hover state on all the products
Menu overlap
The problem with the current menu is that is overlaps with the text and if you want to click on the product you cant because you are blocked by the overhead menu.
Result: Improved Accessibility and Clarity - When content isn't blocked, all users, including those using assistive technologies, can easily navigate and interact with the website without confusion, ensuring a more inclusive browsing experience.
Before
1. Zara's logo is overlapping with the picture.
2. Zara's sub header is getting in the way of the product description's text.
After
1. Zara's logo is smaller which allows you to view the picture without the logo getting in the way.
2. Zara's sub header is fixed so it does not get in the way of reading text.
Key Performance & Indicators
A hover state provides immediate visual feedback. Our hover state enhances user usability, navigation, and improves user engagement.
All of our users tested said our search was an improvement the current search implemented by Zara.
The image to text ratio is easier to read, especially for people with visual impairments. Removing the sticky menu mitigated the pain point of content overlapping. Content readability is greatly improved.
Lessons Learned
I wanted to increase my skillset in UX and AI so I sought out a challenge of redesigning a popular website using some of these new vibe coding tools. I sought out to use the platform Lovable.dev. Here are my thoughts:
-
I went out of my comfort zone to try to use a brand new tool for this project: Lovable.dev. I was blown away by its reasoning and processing skills. It was able to build a live prototype within minutes, and I was debugging and adding features shortly after. Lovable is fast and powerful!
-
I got to learn the limitations of this new technology - and it is still new. After my Usability Study, I spent 3 days trying to debug why I couldn't add more pictures to fill out my product listing. I was not given a clear answer to what my problem was, and then was asked to pay to fix it. These vibe coding technologies do their niche very well, but when you want to build a holistic application you need to partner with multiple companies to achieve your dream.