Redesign Zara's e-commerce website to address usability issues, improve navigation, enhance product discoverability, and streamline the checkout process, all while maintaining the brand's minimalist aesthetic.
Timeline
From initial user research and heuristic audits to high-fidelity redesigns and final validations, the project was completed in 2 weeks, while balancing multiple deliverables and peer feedback loops for iterative improvements.
Overview
Common pain points highlighted through heuristic evaluations and user feedback included:
01
02
03
A multi-step, lengthy checkout process which users feels too long to reach the payment.
Our redesign aimed to align Zara’s visual elegance with intuitive functionality, focusing on:
01
02
03
Streamlining the checkout flow with fewer steps and real-time feedback
This section outlines the step-by-step approach taken during the Zara.com redesign project, including research, planning, design, and optimization phases.
Empathize
Conducted heuristic analysis and synthesized real user frustrations from reviews and forums.
Define
Identified key user needs and challenges in navigating the site and completing purchases.
Ideate
Brainstormed solutions to address identified issues, focusing on enhancing usability without compromising the brand's visual identity.
Design
Created high-fidelity prototypes in Figma, incorporating improved navigation, product listings, and checkout flow.
Home Page
Before
Lack of clear CTAs and overwhelming imagery.
Too big Logo on the top
The font size of the description is too small
After
Introduced prominent CTAs like "Shop Now" for exploring new collections
Provided "Featured Categories" and "Trending Now" sections with large visuals for better product discovery.
Dropdown selection
Before
No visible filter option. Filters are buried in the sidebar.
After
Kept the traditional dropdown at the top so that it is easier for the users to locate the filters.
Product Listing Page
Before
Inconsistent product layouts
Filter and Sorting options not easily visible
After
Consistent product layout with easily accessible selected product details such as Size, Color and Saving the product.
Easily visible "Sort By" and "Filter" options to user.
Product Description Page
Before
No proper alignment of model photos. User needs to scroll down to read the text behind the demo photos as it gets covered up
There is no option for the users to see the similar products through the same page which can provide users more similar product options.
The selected product's size and unavailable product size is not shown on the page.
After
Clear product description with the selected size and color options.
The demo photos aligned properly so that users can see the description text without any issue.
"You might also like" section added so that user can have more similar product options to choose from.
Simplified Checkout Process
Before
Multi-step checkout process. Many users get frustrated because of long checkout process.
Frustration leads to users abandoning the cart checkout.
After
Reduced checkout process steps.
Less frustration as users do not have to go through long process for checkout.
Here, the outcomes and achievements of the project are highlighted, including user feedback, adoption rates, and industry recognition.
Enhanced navigation and product discovery.
Simplified checkout process leading to reduced cart abandonment.
Potential 15–20% reduction in cart abandonment.
Increased average session duration due to smoother browsing experience.
Higher conversion rates from improved usability.