CASE STUDY
Redesigning Zara's Website
Project
Shopping Website
Timeline
September - December 2022
Target User
Online Shoppers (any age)
Team Size
6 designers
My Role
Conducted Research and Content Inventory, Organized Card Sorting with 2 participants and Tree Testing with multiple partcipants, Designed the Lo-fi prototype and Mid-fi prototype, Presented to the professor and class
This project focused on redesigning Zara's website to improve the website architecture and navigation structure as well as creating an efficient usability experience while maintaining Zara's magazine-like presentation.
Background Research
Card Sorting
Tree Testing
Information Architecture Schematic
Preliminary Sketches
Prototype
Lessons Learned
Takeaways & Reflections
1. Background Research
Problem Statement
The problem focuses on Zara's website's architecture and design issues and improvements of the user experience of the website based on the values and magazine-like presentation of the brand and online presence as a shopping experience.
User Research
Qualitative
-
6 Moderated Observations
-
4 Interviews
Quantitative
-
56.6M Visits to the website
-
8.7% decrease in traffic
Important Findings
01. Improper Navigation
The navigation included two types: horizontal and vertical; and had improper categories which confused the user and caused issues finding a particular product.
02. Use of Jargon
The website uses language that is particular to Zara and does not provide a description of the terms.
03. No Sorting Function
The website does not provide a sorting function separately for the products based on the price of the product.
04. Inconvenient Cart Checkout
The cart checkout page does not provide an option to edit a product's size and colour from the cart.
05. Overwhelming Display
The display of the website has a lot of images and it can be overwhelming to the user while browsing.
2. Card Sorting
Hypothesis
-
Hybrid Cart Sort
-
6 Participants who were unfamiliar with Zara
-
Demographics within the expected range of Zara
Problems
-
Ambiguous and misleading names
-
Uninformative names
-
Nesting problems
3. Tree Testing
Tasks
You are invited to a women-only party and need to dress up for the occasion. Where would you go to find it?
100% SUCCESS
Task phrasing issue
You need to find a foundation that matches your skin tone. Where would you find it?
90% SUCCESS
60% DIRECTNESS
It is black Friday and you're looking for discounted items. Where would you go to find them?
17 Participants; 10 completed tasks
100% FAILURE
80% DIRECTNESS
(Minimal Detours)
Happy path
You are a man looking for shorts to wear for your next tennis game. Where would you find it?
13 Participants; 10 completed tasks
20% SUCCESS
0% DIRECTNESS
Task phrasing issue
You recently had a baby and you need to decorate the room for your baby!
20 Participants; 10 completed tasks
100% FAILURE
Creation of a new 3rd level item under “Kids”
4. Information Architecture Schematic
Shoppers
Better shopping experience.
More time shopping, less time thinking.
Stakeholders
More profit thanks to the easy navigation.
New Design Decisions
01. Navigation System
-
Use of the hamburger menu
-
Better use of fat footer
-
Move subcategories to the utilitity navigation bar and fat footer
02. Oganization System
-
Hierarchy Structure
-
Reduce categories and sub-categories
-
Three-click rule
03. Labelling System
-
Rename ambiguous/vague labels
-
Use of card sorting feedback & direct competitors websites
5. Preliminary Sketches
01. Homepage
-
User friendly categories
-
A brand new navigation bar
02. Shopping Page
-
Bread crumbs
-
An updated view change option
-
New sort functionality
-
Hortizontal bar for filtering options
-
Easy and quick hover option to add your size
-
Improved image-to-text ratio
03. Shopping Bag
-
Allowing users to edit their cart items
6. Prototype
BEFORE
AFTER
BEFORE
AFTER
BEFORE
AFTER
BEFORE
AFTER
Men's Flow
Sale Flow
Woman's Flow
7. Lessons Learned
01. First, we will perform usability testing for the High-Fidelity Wireframes we have developed.
02. Second, we will also get in touch with a developer to see if the designs we created are developer-friendly and can be handed over for development.
03. Lastly, due to a limited time, we could only work on a certain number of pages. In future, we would like to widen our scope of research and address other problems that exist with the website.
8. Takeaways & Reflections
01. Storytelling & Narrative
-
Used storytelling in our sprint presentations to walk through our progress and hook the audience with our project.
-
Simple narratives and demos were used to include the important artifacts in the 10-12 minute presentation at the end of each sprint.
02. Learning Together
-
I worked in a team of 4 emerging UX designers.
-
I designed the card-sorting and tree-testing studies and ran small workshops for Optimal Workshop in our team meetings.
-
I learnt to work with my team and gained new skills in Figma while designing high-fidelity prototypes.
