Zara

Website Redesign

DESCRIPTION

This is a study of the possibility of a redesigned desktop website user interface of Zara.com. without proposing a completely tangent brand identity. This is just a concept and not done by ZARA.

previewed (3).png

DESCRIPTION

Jiagoon is a personal project I worked on for about a month. The main goal is to create an app that helps college students to stay committed to their personal goals with suitable partners from the same school.

ROLE

Product Designer

YEAR

2021 November - December

TOOLS

Zoom, Google Jamboard, Photoshop, Figma

zara website design.gif

Having a bad website is just embarrassing...

When people joke about it, they will instead not shop at Zara if the website is the only option to shop at. That being said, that prompted me to take the time to investigate Zara’s current website and revamp it into a more user-friendly website that will help drive more site traffic and change the customer online shopping experience at Zara.com.

🧠 My Mission

Research and redesign a responsive website for Zara that is tailored to both first-time customers and recurring customers while keeping the brand aesthetic.

Challenge

While ZARA claims itself to be a customer-centric brand, users online have expressed difficulties and issues in the usability of ZARA’s site. Having a poor user experience drives people either to shop in person or not to make purchasing from ZARA at all.

With this happening, there is a possibility they are losing a lot of potential customers.

This prompted me to do research and redesign a responsive website for ZARA that is tailored to both first-time customers and recurring customers while keeping ZARA’s current branding.

 

First Stage — Research

 

📝 Research Plan

Research Synthesis

I conducted a usability test compliant with 5 users; through user surveys and interviews, I detected patterns in the user’s digital experience.

I also studied ZARA’s competitors by going through their websites and identifying upsides and downsides to ensure this new user interface does not repeat past mistakes and can enhance the site’s ease of use when searching for and purchasing clothing items.

Testing System: 

Moderated (tasks) + unmoderated (SUS) 


Location:

New York and Remote (video calls)

Date:

12-14 January

Participant: 

5 Fashion conscience users aging between 18-35 years old, who enjoy shopping online or in person.

Usability Testing

The following steps make up the procedure for the usability testing:

1. Recruiting Participants

2. Obtaining Participant Information Screening Participants

3. Setting up Meeting Time

4. Sending Preparatory Test Materials

5.  Conducting the Usability Test

6.  Post-Test Interview

7.  Post-Test Questionnaire

💡 Here are a few tasks that I included in all the interactions with interviewees :

  1. Try to add any clothing to your bag

  2. After adding 2 items to your bag, try to remove one

  3. Navigate to the category list

  4. Log out of the app and log in again

Key Quotes directly from users:

" The navigation is confusing, why can't I just click back to where I last scroll to and continue viewing products? "

Analyzing the responses received,

1/5    participants believe Zara’s current website is easy to use.

3/5   participants end up deciding to shop somewhere else or ZARA’s brick-and-mortar store because the website is confusing.

4/5   participants were aware that Zara has a mobile app.

❓ Problem Statement

Obviously, there are 2 significant problems on ZARA’s website, and our goal is to fix and upgrade them.

cherry-no-messages.png

Visibility of System Status

The website caused users to feel overwhelmed, I studied the website from two perspectives: zoomed out to observe its overall grid layout and zoomed to 100%, how users see it.

User Control and Freedom

Some areas were hard to navigate or would cause frustration, these issues are present in the “Search” function and when the user empties his or her cart. Also, there is no back button available.

cherry-search-1.png
 

Second Stage — Define

📈 Competitive Analysis

Going through ZARA’s biggest competitors, Uniqlo, H&M, ASOS, and Mango, ZARA is trying to separate itself from other fast-fashion retailers by the concept they represent. ZARA took Yves Saint Laurent and Tom Ford as their aspirational brand, therefore, their styling and design are very similar to luxury brands. To align with their brand’s mission, ZARA’s user interface should look like a top luxury designer brand website.

uniqlo.png
The product page is clean and informative, steps of finding size and color are easy and quick.
H&M-Logo.svg.png
Categories and filters both offered a wide range of selections. 
mango-logo-white-case-study-overlay.png
Consistency of images and simple navigations make the shopping experience simple.

With that being said, my goal in redesigning the ZARA Website was to focus on two main tasks.

💡 Ideation

1. Minimizing the aesthetics of the navigation bar to improve navigation.
2. Improving the user interface of their product pages without compromising their integrity.

Efficiency of Use

Cohesive Minimalist Design

 

Third Stage — Ideate

Mid Fidelity Wireframes

After gathering all ideas and information, I sketched the Low-Fidelity Wireframes on paper. I then moved on to designing these Mid-Fidelity Wireframes using Figma.

Home-low wireframe.png
Home
mid-COATS.png
Category Page
mid-CATALOG.png
Menu
mid-COATS 1.png
Product Page

Fourth Stage — Testing

 

📬 Testing and Insights

After the first wireframe design was complete, I tested the prototype with 5 representative users to see how user-friendly the website is, also if it has solved the problems current users were facing. The test was conducted over video calls and in-person interviews, where they were given the following tasks while I observed how they navigated through the application.

Tasks

  1. Find specific products under the coat category.

  2. Add and change the quantity in the cart.

  3. Successfully checkout and navigate back to Home.

The users had great feedback about how it is so much easier to shop around with this design,  the design and simple, fresh yet kept the image modern and high quality, also easy on the eye. Especially the success rate for completing the task was 100% after the redesign.

Some feedback from the users:

" The interface looks much cleaner and it is easier for me to look for a specific product!"

" Oh wow, this is definitely so much better, the only thing I would probably add on would be I want to see some reviews. "

" Might be great if the item information can be shown without clicking?"

" I would actually like the sizing chart listing down below, but I understand the aesthetic of being minimal and clean, so I guess it should be fine. "

 

Fifth Stage — Prototype

ezgif-3-0cd7898ffa.gif
Home
ezgif-3-8174e5c3ce.gif
Menu > Product
ezgif-3-848882343b.gif
Menu
ezgif-3-a77b5c9061.gif
Checkout

Final Stage — Key Takeaways

 

👀 What I Learned

As a consumer of ZARA, I do enjoy its products. However, through my own experiences and the data collected from consumers, ZARA needs a new user interface. The results from this usability testing of ZARA’s website produced eye-opening results that answered the research goals.

Overall, this personal project was a fun way to experiment with balancing aesthetics with usability. While I wanted to keep the unique, exciting appearance of the ZARA website, I explored ways to make the experience more enjoyable and convenient for users. Had I had more time, next time, I would have used a larger user test group and experimented with micro-animations throughout the site.

🧗 Future Concepts

Customer Review

Sizing Chart and Product Care Page