Zara's website redesign.Fall 2022

Information Architecture Case Study

Overview

Zara is a Spanish retailer known for its fast fashion business model, offering trendy and affordable apparel with a quick turnaround time. However, the company's e-commerce website has been criticized for its confusing information architecture, which can make it difficult for customers to find what they're looking for.

How can we get Zara’s customers to shop more and think less while keeping the high-end fashion feel of the website?

Role

Background research
Tree testing analysis
Card sorting session
Sitemap redesign and analysis

Tools

Figma
Figjam
OptimalSort

Target Group

Men and women of all ages that are fashion-forward and price-conscious.

Challenge

The project was led by 5 students, including me, with the aim to maintain Zara’s editorial approach to design and focus on usability issues to create an enjoyable shopping experience.

Redesign Process

Research

Forums, videos, and articles
User interviews
Observation

Card Sorting

Hybrid card sorting

(6 participants)

Sitemap Redesign

Before & after information architecture schematic

Tree Testing

5 Tasks
10 participants

Prototyping

Low fidelity prototype
High fidelity prototype

Research

Based on the conducted research, we understood that:

Zara opts for an editorial approach to give a high-end fashion feel to its website.
Zara invests its resources in placing brick-and-mortar stores in the best neighbourhoods instead of featuring celebrities and supermodels in its ads.
The use of “quirky” pictures creates buzz around the brand to draw people to the website.

I think this is impractical design, not crappy design. It looks quite nice, it's just form over functionality.

(Reddit, Yourhero88)

User research (observation & interview)

We observed 3 participants as they accomplished 3 tasks. After that, we asked them a few questions.

Task #1

Find a gift from Zara for a housewarming event

Task #2

Find one top, one bottom and one pair of shoes along with some accessories that are on sale

Task #3

Change the size of one of the items that you picked in the last task and add a beauty item

Pain points:

Struggle to find items on sale, filter and sort
Issues modifying items in the cart
Difficult navigation
Confusing & inconsistent pictures format
Use of jargon
Misleading pictures: “It's hard to determine sometimes what Zara is trying to sell”

Result

Navigation abandonment
Visit competitors website
Frustration

An overall unpleasant experience!

Card Sorting

We conducted a hybrid card sorting using Optimal Workshop with 6 participants outside of UX.
We selected 20 labels that we considered most problematic (Home Kids, Perfumes, Fragrances, Co-ord Sets,...) that we asked participants to drag-and-drop under "Woman", "Man", "Kids", "Home", "Beauty" categories while giving them the option to create new ones if necessary.

Use of jargon-heavy labels for collections ("Athleticz", "Zara Origins", "Into the Classicz) is confusing and leads to the wrong path.
Use of "Home" for home items is confused with "Homepage".
Labels like “Store Locator,” “Gift card” should also go under a separate category.
Making sense of the labels is time-consuming and leads to navigation abandonment.

Main findings

"I would only make the effort to figure out what's under the confusing labels out of curiosity, otherwise, I will leave the website and check others"

(Participant)

Sitemap Redesign

Based on users' feedback and competitors' websites analysis (mainly Mango and H&M), we came up with the following design decisions:

01.

Global Navigation System

Maintain the hamburger menu
Move "Gift card" to the utility navigation bar
Move “Careers”, “Newsletter”, “Contact Us”, “Stores”, “Help”, “Press”, and “Company" to the fat footer

02.

Organization System

Maintain the hierarchy structure
Place "Zara Origins" category under "Woman" and "Man"

03.

Labelling System

Rename confusing/vague labels: ("Minimalism" instead of "Zara Origins", "Zara Home" instead of "Home", "Partywear" instead of "Party" for instance

Current sitemap vs. new sitemap

Zara's sitemaps_portfolio_v1_edited_edit

Zara's current sitemap

Zara's new sitemap

Main changes

01.

Subcategories Reduction

We reduced the number of subcategories by placing them under other subcategories or moving them to the utility navigation bar and footer instead of having them all on the same level

02.

Collections Subcategory

We placed new collections under “Collections” subcategory so that users don't have to relearn how the information is organized each time they visit the website, especially that Zara launches new collections biweekly

03.

Simplifying Labels

We made subcategories labels simpler and more comprehensible to decrease the cognitive load when browsing

Tree Testing

We created a tree testing session virtually using Optimal Workshop using 5 tasks executed by 10 participants. Below are the tasks success & directness rates:

Analysis

Tasks 1 & 4

These tasks' results helped us confirm the decision to place “Shade Finder” under “Foundation” and maintain “Sale”, previously “Special Prices” at the bottom of the menu

Task 3

Using this task's results, we decided to maintain “Partywear” under “Collections” subcategory. Dressing up means different things to people. We expected participants to look for a dress but they looked for other items.

Task 2

Users failed to find the right path as we think they have associated "pants" with casual clothing rather than sportswear

Task 5

Using this task's results, we have decided to add “Home Kids” to “Kids” subcategory while keeping it as a collection in “Home” to maximize the chance to reach the correct item

Taking into consideration the results above, we changed the information architecture schematic

Prototyping

Low fidelity prototype

Below is the overall flow of the storyboard depicting a birthday boy splurging on a shirt and successfully editing the item in the cart to match his true size:

Link to the storyboard on Figma