Zara Banner Mockup copy.png

Copy of Zara Redesign (v1)

Zara screen Mockup iMac no background.png
 

Zara is one of the largest international clothing brands with locations in over 88 countries.

It has established itself as a fast fashion brand, staying on top of the latest trends with its rapidly rotating inventory sold at affordable prices. Because of this, it is important for customers to easily browse new products so I teamed up with two other UX designers for a group project to redesign and improve Zara's online shopping experience.

TIMELINE

1 Week

ROLE

Research, personas, wireframing, UI, usability testing, prototyping

TOOLS

Whimsical, Sketch, InVision

 
 
mockup.png
 
 
 

PROBLEM

Customers struggled navigating through Zara’s website to locate and purchase products, creating an unenjoyable and frustrating shopping experience.

SOLUTION

Optimize Zara’s navigation and checkout process to provide customers with a more efficient and pleasant shopping experience.

 
 
 
 

 
 

RESEARCH

Business Analysis

Zara has built up a very loyal customer base through its uniquely successful business model. It focuses on the customer experience, ensuring a highly curated product line is consistently being rotated through its inventory. They place an emphasis on providing a frictionless experience within their physical store locations, allowing customers to shop quickly and efficiently to find new products.

However, based on the insights from our user research, their website does not provide a consistent quick and easy shopping experience.  Zara’s website maintains an editorial style. While this looks great visually, it’s not good for customers, or Zara’s business for that matter, if customers cannot locate and purchase the products they want. 

ZARA’S CURRENT LANDING PAGE

 
 
Webpage.png
 
 

For our user research process, we wanted to first pin point the key areas customers had frustrations with when trying to make a purchase on Zara’s website. We focused solely on the Women’s category of the website due to the short 1 week time-frame.

 
 

Contextual Inquiry

We first asked 17 customers to locate a specific product using Zara’s site navigation and proceed through the checkout process to observe how users interacted with the site. To test the site navigation, we asked all users to locate the same product without the aid of the search bar. Follow up questions were asked based on any observations that were made during completion of the tasks.

Survey

Users were also surveyed upon completion of the contextual tasks to gauge their satisfaction and the overall intuitiveness of the site.

 
 
 

“Zara is one of the websites I usually tend to avoid, even though I am a pretty regular shopper.”

 
 
 

KEY INSIGHTS

  1. Navigation categories were unclear and overwhelming.

  2. Product layout was inconsistent.

  3. Images were overstimulating, which made it hard to read the copy.

  4. Mandatory fields for the checkout process were not clearly marked and error messages were not helpful in guiding shoppers how to resolve error, making the checkout process tedious and inefficient.

 
 
One of the largest pain points for majority of the users was the overwhelming number of categories they were presented with in the navigation. On top of that, category labels were unclear, making it difficult for them to locate the product they want…

One of the largest pain points for majority of the users was the overwhelming number of categories they were presented with in the navigation. On top of that, category labels were unclear, making it difficult for them to locate the product they wanted.

 
 

Site Mapping & Card Sorting

We created a site map to get a clearer picture of Zara’s current navigation so we could determine how to start re-designing the process. We also asked users to complete an open card sort to help us re-categorize the navigation.

 
 

Competitive Analysis

We wanted to see how Zara’s competitors were fairing in the race so we created a landing page feature analysis and also looked at how products were being categorized in each competitor’s navigation.

 
 
1200px-H&M-Logo.svg.png
 
726-7265920_uniqlo-logo.jpg
 
5a1acaa8f65d84088faf1394.jpg
 
 
 

PERSONAS

 
 
Personas.png
 
 

 
 

IDEATION, SKETCHING & WIREFRAMING

We quickly sketched out some initial redesigns and moved on to low fidelity wireframes to ensure all of us were on the same page. As part of the redesign process, we also created a revised site map.

 
 
Lo-fi wireframe mockups.png
 
 
 

TEST, ITERATE & REPEAT

We opted to perform usability testing using medium fidelity wireframes and an InVision prototype. Due to the nature of Zara’s industry, it would be difficult to get valuable feedback from users using low fidelity wireframes without any product images and other visuals. After a couple rounds of iterations, we moved to high fidelity for testing.

We used a variety of methods for usability testing including:

  1. A/B test

  2. First Click test

  3. Contextual Inquiries

 

 
 

KEY REDESIGN FEATURES

1. Less visually busy

Users had a hard time seeing the navigation on the website due to the flashing graphics and minimal contrast of the text against the background. We addressed this pain point by reducing the image on the landing page and shifting it over to the right, while still maintaining that editorial style.

 

2. Improved navigation: category reduction, visual representation & breadcrumbs

We reduced the number of secondary and tertiary categories within the navigation to mitigate customers from being overwhelmed. During our redesign process, we were cognizant not to take out categories for the sake of reducing the number, and focused on removing only the redundant or unclear ones.

 
 

Number of Navigation Categories

 
 

We observed during usability testing that users did not notice the tertiary categories within the navigation so we used images to visually represent these categories. This also helps our secondary persona who, for example, may not know the difference between shirts and blouses. Further, the inclusion of breadcrumbs allows users to trace where they are.

 
 
 

3.  Colour and quantity selection included on product page

We included the ability to select the colour and quantity on the product page prior to adding it to the shopping cart to make the process more efficient. On Zara’s current website, users need to navigate to a completely separate product page for a different colour of the same product and quantity can only be selected when users navigate into their shopping cart.

 
 
 
 
 

4.   More efficient checkout process

The current ‘Shipping Method’ selection process was broken up into different parts of the checkout process, confusing all of the users we conducted research with. To further amplify the inefficiency of this process, error message popups were ignored by users because they appeared in black font. Users were confused why they could not proceed and had to click around the page multiple times before figuring out what they were doing wrong.

We also separated the payment and final review pages to prevent customers from being overwhelmed by the amount of information on the page.

 
 
 

FINAL PROTOTYPE

 
 
 

KPI’s: THE IMPACT

 

85%

Reduction in time to locate and checkout product

100%

User satisfaction rating

0%

Error rating

 
 

Prior to the redesign, it took 4.7 minutes for customers to locate the product and complete the checkout process. After our redesign, customers completed the purchase in 41 seconds.

Users rated their satisfaction with the current Zara website 1.5 out of 5. After our redesign, users gave a 5 out of 5 rating.

Users had an average of 9 errors in their task completion process with the original website. There were no errors made by users with our redesigned website.

 
 
 

 

OTHER PROJECTS