Zara Website Redesign
Jan – Mar 2022
Known infamously for their poor user interface/experience design, Zara’s website is reimagined in a way that pulls users in and keeps them engaged.
Zara is an affordable fashion company that caters to those who love the trends of high fashion but aren’t looking to break their banks for a seasonal fad.
This project aims to create a more enjoyable online shopping experience for Zara’s target market by simplifying the existing user journey and altering design elements that cause eye-fatigue to the website’s visitors.
TLDR;
Challenge
The current Zara website has inspired a horde of critics on the internet who openly express their disdain for the user experience of the company. Its lack of adherence to e-commerce website standards, poorly formatted pages, and confusing navigation turns countless users away daily. During this project, I faced two main challenges:
~ There was an extremely limited timeline to complete a research project, redesign, and prototype alone.
~ Whereas most user research studies typically offer some type of reward for participating in a study, I lack the funds to provide any motivation to volunteer, which may result in a smaller pool of users to test.
I took the input of real consumers within Zara’s target market and reimagined the company’s site into a place where users can easily find what they're looking for or scroll to their heart's content.
This project will produce an interactive prototype of the redesigned Zara website. The ideal outcome of this project aims to prolong users’ browsing on Zara’s website and enthusiasm for visiting the e-commerce platform.
Results
Out of the original users who responded to the initial survey and were willing to test the prototype and offer their feedback:
87.5% of users stated it took them less than a minute to find the specific item using the filter.
87.5% of users stated that they would be more encouraged to browse and shop on the redesigned website rather than the current Zara website.
Process
Defining the Problem:
(1) the Home pg:
The first impression a user gets when they visit a site is the home page. Zara’s current website has never hit the mark in this category–the majority of users struggle to navigate to the sections they want to browse because the site lacks nudges to indicate what the clickable elements will lead to.
(2) the Browse pg:
Zara’s website is widely known for contorting their models in outrageous poses in which:
1. Actual consumers would never assume.
2. The product being sold isn’t shown in the photo
(3) the Product pg:
The product page is where users make their mind up on whether they want to purchase the product. Zara aims to portray a minimal and elegant aesthetic, but their individual product pages tend to be cluttered with information and photos that most users don’t look at.
(1)
(2)
(3)
User Persona
After collecting the results of my survey, I was able to build a user persona that represents the population of those who visit the current Zara website. I noted their frustrations and goals in order to move forward in designing the user journey and site maps before creating the low-fidelity wireframes of my redesign.
User Flow & Site Mapping
Most users stated that they lacked motivation to browse the Zara site after a while because of how difficult it is to find items they want or look through the selection of items at all.
With this in mind, I chose to focus on the user’s ability to choose categories, browse, and filter items, as well as the individual product page.
Both the user flow and site map demonstrate the journey that users are able to take within the prototype in order to search for:
A specific item they want
A product that caught their eye and they would like to explore further.
Research & Analysis:
Background
In order to gain a larger depth of understanding to the company’s history, design strategies, and branding guidelines, I conducted extensive background research leading up to the creation of my survey and usability testing.
Through ten of the most impactful articles and journals, which can be found in detail here, I was able to evaluate Zara’s roots, goals, and culture to move forward in my redesign.
Usability Survey
When creating this usability survey, I aimed to ask unbiased questions that would encourage users to express their moods and emotions while navigating the current Zara website.
First, I led users into the survey by asking them to answer simple information about themselves (name, age, shopping habits, etc.). As they got more comfortable answering questions, I asked how they felt while browsing the site, how long it usually takes them to find something they like, and the pros and cons of the website.
After collecting 25 quality responses from a variety of users, there were several notable results:
All volunteer users were aged 18-25 years old. Those who were in a higher age range generally opted to do their shopping at Zara storefronts.
65.2% of users spent less than 1 hour on the site when they visited.
75% of users are unable to find the item they’re looking for in under a minute.
Wireframing and Prototyping:
Low-fidelity Wireframing
After researching the best practices for e-commerce websites while keeping in mind the minimalist, elegant aesthetic that Zara aims to uphold, I designed four main low-fidelity wireframes which focused on emphasizing the main categories that users would typically select on the home page (sale, collections, men, women), categorization, and filtering.
I also took care to note the highest user pain points as well as possible features to keep in mind while moving forward with high-fidelity wireframing and prototyping in the next steps.
High-fidelity Wireframing & Prototyping
The redesigned Zara website aims to uphold Zara’s current brand identity while optimizing the user journey, whether the intention is to browse mindlessly or purchase a specific product. By highlighting the most frequented categories on the home page, the layout nudges users to continue exploring the Zara website without overwhelming them with too many options or confusing them with too little initial direction.
Every page offers a decision to make where users are able to efficiently reach their desired endpoint with little to no frustration. Browsing and filtering within a category becomes more intuitive by placing the available options in a simple, readable format.
Outcomes
Empathizing with Users can Significantly Increase Customer Satisfaction
Out of the original users who responded to the initial survey and were willing to test the prototype and offer their feedback:
87.5% of users stated it took them less than a minute to find the specific item using the filter.
87.5% of users stated that they would be more encouraged to browse and shop on the redesigned website rather than the current Zara website.
Some notable critiques of the site were to be able to view further information about a product by hovering, and less dynamic movement on the product page. The latter suggestion was based off of a prototyping choice I made because of the limitations of Figma interactions, and would not represent the scrolling option on an actual redesign.
If I were allowed a greater span of time to improve on this project, I would aim to work on gathering a wider range of users for A/B testing as well as experimenting with 2-3 options for redesigned prototypes to see which features the majority of users best respond to.
“I love it. One thing I hate about Zara's website is that it's too minimal and simple-looking design that I have to click many buttons to see what I'm looking for."
Matthew Chen | Social Media Manager
“I remember the placement of the items on the listings page were strange, so I like that it's more regular. It's easier to know what I'm looking at.”
Kayla Caper | Customer Success Manager