Zara
redesign
Zara is one of the biggest international retail fashion companies. Due to a large number of customers visiting Zara's website, there is growing confusion among users regarding the site's user interface and navigation. This case study focuses on improving user experience of Zara's website by redesigning the websites interface and by adding more functionality based on user feedback and market research.
The problem
Zara’s website has been regularly criticized for its bad design and poor user experience and research reveals Zara as the worst fashion site for customer experience. The current website feels disjointed and messy. The navigation is confusing and the products seem to be laid out almost at random. The lack of a user friendly experience leads to task failure, delays and user irritation. After conducting an audit I was able to demonstrate how the live experience was lacking and needed to be overhauled. From there, I began to imagine what a better experience could look like.
Previous designs
User research
To gain a better understanding of how I could more effectively address the problems, I set up an online questionnaire and conducted a series of user interviews and surveys. Questions I asked included:
-
Which device do you primarily use to access our website?
-
What other clothing websites do you currently shop at?
-
What do you like about the current website?
-
What are the main challenges you face when using the current site?
-
Which features do you wish it had?
After surveying 20 participants and conducting 4 user interviews, I used affinity mapping to find common themes in the data I collected. As a result of this, I was able to find some trends that I needed to address in the next phase of the design process.
Major pain points:
-
Poor navigation
-
Users cannot easily find specific items
-
Product images are frequently quirky and odd
-
Products are laid out randomly
-
Difficulty reading text/information
-
Accessibility issues
User Persona
After analyzing the data, I was able to create a user persona. Which then allowed me to see a holistic picture of the target user and evaluate their goals, frustrations, behaviors, motivations, and personality. The insights gained by creating a user persona were crucial for me to be able to provide users with the simple and intuitive shopping experience they are seeking.
Wireframes
Solution
The most prominent pain point for users is navigating through the website and finding specific products. While I can’t know exactly what every visitor is looking for, I do know that the majority prefer click navigation. Clicking links is faster and requires less effort than performing a site search, which means users will look to the navigation bar for guidance in order to find what they need. Zara's current website utilizes a hamburger menu that hides the primary and secondary navigation. The navigation bar has a transparent background which causes the logo and text to overlay product images as you scroll down the page. Subcategories are excessive and random and it's difficult to figure out where you are within the site.
I decided to implement a sticky horizontal nav bar with a dropdown menu. A sticky navigation is a quicker, easier way to let users jump to a new page and continue their experience. The new primary navigation is now visible to users at all times and features a solid color background with clear and concise tabs and sub tabs, highlighting pages that users want most.
Once the user navigates to a category page, products are laid out in a fixed grid view and they are able to filter and sort products from there. On the current site, products are randomly laid out and there is too much white space between products.
Current site
In today's world, web accessibility isn't optional; it's a must-have, which is why making sure your website meets accessibility standards is so important. Increasing the font size and readability in general was crucial in creating a better user experience. While there is no official minimum font size for the web, WCAG states that 16px for body copy is a good starting point. On the current Zara website, the body copy throughout the entire site is 10px and headers are 11px. I increased all of the copy to the recommended sizes.
The current product pages provide no visual hierarchy. The text is all the same size and you're not sure where to look. The call to action gets completely lost on the page.
Current site
Prototype
Let's Connect!
Send me a message or connect on LinkedIn, and let’s discuss how I can help you.