I redesigned Zara's website to improve the overall user experience including navigation, information architecture, produce pages and the shopping cart.
Zara is one of my favourite clothing brands, but as soon as COVID-19 began, and I could no longer visit the retail stores, I stopped shopping there. The problem is, that I’ve tried shopping on their e-commerce site maybe a dozen or so times, but I’ve never successfully made it to the checkout. Why you might ask? Usability issues.
I run into navigation problems, shopping cart problems, problems finding what I'm looking for, making the experience unpleasant, that I jump ship every time. Although I’m not affiliated with Zara, I wanted to test some Zara shoppers to see if I could uncover ways to improve the online shopping experience.
Understand the current user experience & how it can be improved
Create and validate potential design solutions
Increase conversion and revenue
By improving the IA of the Hamburger Menu, users are able to shop with greater speed and find what they are looking for with greater accuracy.
I designed a uniform layout of product images following a conventional e-commerce UI pattern, allowing users to more easily scan the page and spend less time scrolling.
Who is Zara's target audience?
What are Zara's value propositions?
In light of the coronavirus, Zara has been forced to re-evaluate their business model amongst expectations of lower foot traffic in stores for a significant amount of time. In June 2020, the brand announced closing up to 1,200 stores and a push towards online, with plans for online sales accounting for more than 25% of the total by 2022, compared with 14% in its 2019 fiscal year. With an acceleration in online sales, the need for an exceptional user experience is more important than ever before.
Before moving into usability testing, I created a list of test objectives to help narrow my focus. My main goal was to find out if users are satisfied with the experience or if the design needs improvement. I was looking to understand the following:
Next, I moved into usability testing with current Zara online shoppers to examine their experiences with the interface. I asked a small group of people (6 participants) to open the desktop site and go through a series of tasks in the flow of purchasing a woman's t-shirt. Before I assigned the tasks, I set up the scenario below:
“You saw a top you like in stores but the line was too long to check-out, so you decided you would purchase it online instead."
I shared a photo of a woman's t-shirt to make the experience more realistic and so that users knew what they were supposed to be looking for.
Below are a few of the tasks I had the users go through:
After talking to users, I organized my findings with sticky notes, with each colour denoting a different user, and each sticky representing a different pain point. I then annotated my findings on the current website.
After annotating my findings, I used Affinity Mapping to group feedback into themes and prioritize opportunities. I leveraged a matrix to better evaluate the most urgent needs for Zara vs the most urgent user needs. Since this was a personal project, I took it upon myself to determine which would be the top design problems.
I assumed that revenue would be Zara's top KPI, so I kept that in mind as I narrowed down the problem areas and prioritized them based on the potential impact on revenue.
After identifying and prioritizing pain points, I created a proto persona to help me create solutions around a single user. This persona was roughly based on the users that I talked to during usability testing and if I had more time, I would strengthen this persona with additional user interviews and research.
To understand the current site architecture, I ran a content audit of all available categories in the hamburger menu. I then did an open card sorting activity with a few of my usability study participants. I used the software Proven By Users which showed me which items were most commonly grouped together, what categories users created and the likelihood of certain items being paired together.
I then benchmarked my findings against the market to further reinforce overlapping patterns in organization schemes. I compared the results to Zara's current IA to determine which categories should stay, which should be renamed and which should be eliminated.
One of my main challenges was the lack of time and limited understanding of Zara's goals.
After identifying what needs to be done and determining what elements needed to be changed, I recreated Zara's design system to stay consistent with the brand.
Previously the Hamburger Menu, Search, Log In, Help and Shopping Cart were difficult to locate due to poor contrast with the background image. All elements have been placed on a white header to be more easily recognizable.
Previously, there were 18 category choices in the Woman section creating information overload. Through a card sorting activity and market analysis, I optimized the number of categories down to 11, improving user accuracy of selection.
Previously, the local menu items were fixed to the top of the page and blended in with the product images when scrolling. In the improved version, local menu items are fixed to the Hamburger Menu and thus do not interfere with the product images.
Previously, the product images followed an unconventional e-commerce UI pattern making it difficult for users to scan. The improved version follows a typical grid allowing users to scan the page more efficiently.
Previously users could not modify the size or colour of items in their Shopping Cart. The improved design allows users to modify any item in their cart without deleting it.
If there was more time available...
The introduction of design systems within my workflow was a relatively new aspect of my process and I had underestimated the success of its adoption. Using Zara's design system to inform my UI decisions improved my project workflow and helped me save time.
As I took on this redesign as a passion project, I didn't get to consider the needs and goals of Zara. I would have liked my solution to have been specific to both Zara and its users' needs in order to create something that satisfies both parties.
As I tackled this project, I wanted to ensure that my solutions wouldn't be too far-fetched from what Zara and its customers know and have come to expect today. For mega clients, big change can come with big consequences.