Zara

Redesigning the web experience

CLIENT

Zara

MY ROLE

UX/UI Design

TIMELINE

3 weeks

TYPE OF PROJECT

Passion project

SUMMARY

I redesigned Zara's website to increase conversion and revenue.

Group-10-min

Inspiration

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.
 

Project Objectives

1

Understand the current user experience & how it can be improved 

2

Create and validate potential design solutions

3

Increase conversion and revenue

Key Accomplishments

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. 

Group-6-2

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.
 

Before

Screen-Shot-2021-01-05-at-11.00.39-AM-min

After

Group-3-1

Research Methods

noun_Document_1169239

Secondary research

noun_Computer_979733-1

Usability studies

Group-2-3

Card sorting

Secondary Research

Zara started operations in Spain in 1975 and now operates in 88 countries worldwide.

Who is Zara's target audience? 

  • Largest demographic group is females between 18 and 30
  • Price-conscious
  • Influenced by European fashion
  • Impulse shoppers 

What are Zara's value propositions? 

  • Fast fashion business model - Zara has an exceptionally fast turnaround time from design to manufacture, order, and distribution (30 days vs typical 4+ months).
  • Large selection of styles - Zara produces around 12,000 styles per year vs the average fashion retailer producing only 3,000.
  • Creates desirability through scarcity - By reducing the manufactured quantity of each style, Zara creates artificial scarcity. The store also only discounts 18% of its stock in sales, which is half the industry average.
  • Prime retail locations - stores are placed in high traffic locations and often near luxury retailers to increase relatedness to the luxury league.   

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.  

Group-min-2-2

Starting with Questions...

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: 

  1. Can users find the information they need?
  2. Is the user interface smooth, and the process fast and easy?
  3. Do users encounter any errors or hesitations?

Usability Studies

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.  

Screen-Shot-2021-03-25-at-2.03.54-PM

Below are a few of the tasks I had the users go through:

  • Search for this top
  • Now search for this top using a different method 
  • Add item to cart 
  • Complete the steps in the check-out process up until payment

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.

"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." 

IMG_7074-min-1
Group-19-1
Group-20-1
Group-18-1

Affinity Mapping

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.


 

Group-Copy
IMG_7077-min

User Persona

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. 

Persona-2-Copy-2-min-2

Information Architecture

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.

Screen-Shot-2021-03-25-at-10.21.20-PM-1
Group-20

Shows the percentage of time a card is grouped with another card

Screen-Shot-2021-03-25-at-10.24.19-PM-1

Shows the percentage of time a card is placed in a group

Screen-Shot-2021-03-25-at-9.51.23-AM-min

Final results of card sorting activity and market anyalysis

Challenges and Compromises

One of my main challenges was the lack of time and limited understanding of Zara's goals. 

  1. I initially planned on improving the IA of the entire Hamburger Menu, (including Men, Kids and Sale) but later decided to focus only on Women as the undertaking was too large of a scope for the time constraints I was working under.
  2. Implementing a new IA usually includes a number of internal stakeholders and an understanding of structural capabilities. As I have no affiliation with Zara, I could not take into account their objectives. 

Design System

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.

Desktop-HD-Copy-1
Desktop-HD-Copy-3-1
Desktop-HD-Copy-6-1
Desktop-HD-Copy-2-1
Desktop-HD-Copy-5-3
Desktop-HD-Copy-8-2

Final Solutions

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. 

Group-28-1

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. 

Group-29-1

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. 

Group-25-2

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.

Group-19-3
PAGE-5-Final-2
Group-min-1
Group-min
Group-min
Group-min

Moving Forward

If there was more time available...

  • Gather more research and user testing to refine the final product design
  • Improve the Information Architecture of the Mens, Kids and Sale sections
  • Tackle the remaining problems identified during usability testing such as making improvements to the Filter

Learnings

Design systems are an asset

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.

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. 

NEXT PROJECT

Copyright 2021. Designed by Rachel Fuhrer