TYPE OF PROJECT
I redesigned Zara's website to increase conversion and revenue.
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
Improved Information Architecture
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.
Minimized Information Overload
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.
Zara started operations in Spain in 1975 and now operates in 88 countries worldwide.
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 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:
"I do a lot of online shopping but with Zara, it takes a lot of patience. I'd rather just shop in-store."
"I don't like to shop online because the navigation is like a guessing game and nothing is intuitive."
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.
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.
Main navigation elements are more easily identifiable
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.
Improved information architecture of the Hamburger Menu reducing cognitive load
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.
Product Page is clean and undisruptive
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.
Modifications allowed to items in Shopping Cart
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...
Business goals should be a priority
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.
Avoid shocking a room full of stakeholders
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.
Copyright 2021. Designed by Rachel Fuhrer