With pandemic changing the way society operates, many industries are relying on online sales to stay afloat. In today’s world, more and more purchases are made online. The availability and ease of buying clothes online have become a standard. Zara, one of the largest clothing retailers, is also seeing a significant shift in consumers contributing to their online sales.
Zara describes itself using 4 characteristics: beauty, clarity, functionality, and sustainability. Unfortunately, its current website sacrifices clarity and functionality for beauty, reducing usability for aesthetics. It breaks from typical design patterns seen on retailer websites, causing users unnecessary friction in their shopping process
Redesign the Zara website to be more user-friendly while preserving a unique appearance of Zara’s products in a way that adds value to both the user and the company.
UI/UX Designer (Research, Persona, Business model, Journey map, UI, Usability testing, Prototyping, Visual)
Figma, Quip, Miro, Zoom, Useberry
12 weeks
Customers struggled navigating through Zara’s website to locate and purchase products, creating an unenjoyable and frustrating shopping experience.
“Zara fans claim it's 'impossible' to shop online not only due to models' bizarre poses - one crouching on the floor with a jacket over her head but also the frustrating and complicated website navigation” (source: dailymail article)
This study will be focussed on gathering understanding about how customers interact with Zara’s website to find usability issues and discover opportunities for a more efficient, effective, and satisfactory experience.
How might we improve Zara’s customer experience in order to eliminate user’s frustration and increase their purchase confidence?
In order to gain an understanding of the brand and its business, I carried out an in-depth secondary research and documented all the building blocks of Zara's key resources, activities, value propositions, customer relationships & revenue strategies into a business model canvas.
Furthermore, I conducted interviews and a live usability test to learn about the users' behaviors and their problems. I gave them a senario and asked them to think out loud as they go through the website. I observed their navigation patterns and tried to hear what they had to say about the Zara website after using it.
Along with interviews, I conducted a usability testing of existing Zara’s website to observe the navigation patterns and user’s experience as they go through the website. These findings will provide with the usability aspects that needs to be improved on the website pages to reduce user confusion making the navigation smooth & user flow better.
Scenario: With the coldest days of the year approaching, you’re thinking about buying a new sweater/ knitwear. You came here to check out what’s available and maybe make a purchase.
I reviewed recordings and notes of the testing-sessions carefully and laid out the users's thoughts and problems onto stickies. My aim here was to organize all the findings and insights from the interviews and usability testing using affinity mapping to group these pain points and the gain points into categories.
Based on my research and user interviews, I created a persona that represents the type of customer that Zara caters to and visualized various aspects of their behaviour, core needs and frustrations. Zara's target market age ranges from 18 to 35 years old trend-conscious users.
Through this journey map, one can see that the user is most unhappy during the browsing section of the journey, Customers’ struggle to navigate the website with ease and have a hard time finding clothing that suits them.
Based off of the findings from the interviews, personas and journey map I have recommendations of how Zara’s website user experience could be improved.
With Zara's current web-app in mind, I began to structure out the necessary screens needed for Zara's customers in a User Flow using the following User Stories:
'With the coldest days of the year approaching, you’re thinking about buying a new sweater/ knitwear. You came here to check out what’s available and maybe make a purchase'
Now that I had established the information architecture of the app, I was ready to sketch the low-fidelity wireframes and turn them into black and white mid-fidelity wireframes using Figma.
Conducted usability testing on the re-designed website through useberry application and gathered user flows and heat maps to evaluate further.
I used the Heat maps generated from the usability testing to see where users clicked, how far they scrolled, and overall, how they interacted with the site. This helped me understand how users naturally interacted with the site to further enhance the navigation patterns.
The task flow below demonstrated the high-level steps that users performed to get to a specific goal during the usability testing.
Following several rounds of iterations and testings, I was able to gather valuable feedback and insights that I incorporated into the final designs. Below is a comparison of my proposed solutions to the current website.
Following multiple rounds of iterative design, I made changes based on usability test results to reach my current high-fidelity prototype:
Prior to the redesign, it took minimum 4.13 minutes for customers to locate the product and further add to cart.
After the redesign, customers completed the purchase in 44 seconds.
2 out of 5 users expressed satisfaction with Zara's current website.
After redesign, users gave a 5 out of 5 rating.
Users had an average of 5-6 errors in their task completion process with the original website.
There were no errors made by users with redesigned website.
Moving forward, my next steps are to:
Overall, this project was a fun way to experiment with balancing aesthetics with usability. While I wanted to keep the unique, interesting appearance of the Zara website, I explored ways to make the experience more comfortable and enjoyable for the user.