Usability Testing // Zara Desktop Website

Zein Ali Ahmad Pratt Institute

E xe cu tive Summar y

Zara is one of the biggest international fashion companies in the world. Zara has expanded from selling just clothes and accessories to home products, which evolved Zara into an overall lifestyle brand. Zara United States’s desktop website is visited 16 million times per month on average, which has seen an a drastic increase during covid-19 in 2020.

Due to the spike in Zara United States’s desktop website version, we assembled a team of three usability experts to conduct a Heuristic Evaluation of the usability of the website using Nielsen’s ten usability principles to collect data and key findings and come up with design reccomendations.

We directed our usability experts to conduct four tasks on the website:

1. Go on the Zara United States desktop website.

2. Navigate to the Women’s Section.

3. Search to filter and find a basic white tshirt.

4. Add it to your shopping cart and buy it.

After the three usability experts completed the above tasks, a total of seven usability prob lems were identified and six heuristic principles violated. The overall severity had an aver age of 3 on a scale of 1-4. The three main issues revolved around:

Lack of Consistency Lack of Feedback

Lack of Contrast

Therefore, we came up with three design reccomendations to make the user’s shopping journey on Zara’s desktop website easier and smoother from start to finish.

Label and clearly separate sections on homepage with less overpowering images

Have a gridded and same size clothing display page for consistency

Improve buttons with feedback features such as a change in color or bolded color

Table of Contents

Introduction

Zara is a Spanish multi-national retail clothing chain. It specializes in fast fashion and currently branched to not just sell clothing, but also accessories, beauty products and home goods. Zara produces over 450 million items per year and have over 2,220 stores worldwide in 88 different countries.

Inditex- the parent company of Zara suffered major losses in 2020 due to the Covid-19 Pandemic which is why the brand revamped to shed light on their e-commerce brand. The website is visited on average by 200 million people per year. We used Nielsen’s Heuristic Evaulation method to study the usability of Zara’s desktop interface with three usability experts. This approach showed a pattern of usability issues with the website and with that, we were able to come up with three design reccomendations to improve the overall usability of the website.

Metho dology

Heuristic Evaluation is a usability inspection method to study and locate problems in the interface’s usability and come up with design reccomendations. The process includes usablilty experts completing certain step-by-step tasks and identify usability issues they encountered.

Then, all entries are evaluated by one expert, which allows for a shorter and easier identification process. According to Molich and Nielsen, grading was very liberal and credit was given even for the simplest item that related to one of the problems (Molich, Nielsen, 1990). The grading is categorized under “heuristics” with corresponding severity of the violation. Below are the steps we used to evaluate the Zara desktop website:

Step One: Prepare

.

We start by selecting three usability experts to complete the tasks and identify the usability problems:

Number of Evaluators: 3

Interface to be Studied: Zara desktop interface

Selected Tasks: ‘you would like to buy a basic women’s tshirt from Zara’s website from your laptop and have it delivered to your home’

1. Go on the Zara USA website.

2. Find the women's section.

3. Search for any basic shirt.

4. Add it to your cart and buy it. What was the process like?

Step Two: Collect Data

The usability experts must complete the tasks and note any problems they encountered based on Nielsen’s Ten Heursitic Principles with their corresponding severity rating on a scale of 1-4.

Step Three: Prepare

Then, all entries are evaluated by one expert, which allows for a shorter and easier identification process. According to Molich and Nielsen, grading was very liberal and credit was given even for the simplest item that related to one of the problems (Molich, Nielsen, 1990). The grading is categorized under “heuristics” with corresponding severity of the violation. Below are the steps we used to evaluate the Zara desktop website:

Source: https://www.researchgate.net/figure/Nielsen-heuristics-12_tbl1_289914134

Step Three: Analyze

Source: https://xyuliu.com/Heuristic-Evaluation

After all experts complete the evaulation, the lead evaulator collects and combines the data under five columns: problem description, place where problem occured, heuristic violated and overall severtiy rate (under the lead evaluator’s perspective).

Step Three: Communicate

After the data has been condensed and analyzed in one format, the lead evaulator will come up with around three design reccomendations based on the problems the usability experts indicated as severe issues. This all then is drafted into a report including design mock-up solutions for the problems identified in the previous step.

Results

Overall Findings:

The Zara website allows users to:

1. Browse sections like clothes and accessories categorized under women, men and kids as well as home goods and beauty products.

2. Filter the items by color, fit, type of product, sleeve type, length, size, sizes of footwear/accessories, contents or collection.

3. Add the items to your shopping cart, buy the items and deliver them to your home or location near you.

However, the process to browse clothes by section or gender was a common struggle with all usability experts and navigating the website from the homepage to the shopping cart.

A total of seven problems where identified with their prespective heuristics violated with all having severity rates reaching 4 at the highest and 2 at the lowest. We noticed that the major issues fall under visibility due to the lack of feedback (H1), match due to the lack of design compatibility between information and order (H2), and consistency (H4).

The three reccomendations mentioned below tackle these heuristic violations and problems:

Recommendation #1: Label and clearly separate sections in homepage with less overpowering images

The Problem: H2 and H4 Violated

Currently, as soon as you open Zara’s desktop website, you come across a full screen high-quality images that change every couple of seconds and a light menu on the bottom of Zara’s sections, but not under women/men/kids but under random sections which is overpowered by the images and the experts were not able to read the menu clearly. The menu was also in a sandwich icon on the top left of the homepage.

The image is overpowering the information

Menu icon is tiny

severity rate 3

Menu is not easily readable or discoverable

severity rate 3 severity rate 4

The Recomendation:

The design reccomendation is to clean up the homepage and allow the menu bar to be located in one location on the screen and easily discoverable and readable. We also renamed the sections for easier language and decluttering, allowing only the important sections to be displayed on the homepage such as sections categorized by gender and age as well as home and beauty products.

Remove sandwich menu icon (unecessary)

Keep these three tabs

Add a white background to menu bar

Decrease the amount of images that are shuffled per second

WOMEN MEN KIDS BEAUTY COLLECTION HOME CONTACT US

Recommendation #2: Have a gridded and same size clothing display page for consistency

The Problem: H4, H6, and H7 Violated

Once you get to the women’s section, you are overwhelmed with a very confusing display of the clothing items. Some clothes are on women and others are just the item itself (see below). In some cases, all the colors are shown, while in other cases just one color is shown.

Clothing items displayed as they are

clothing items are displayed haphazardlyinconsistency severity rate 3

Case One

While, clothing items displayed on women here

The Recomendation:

The design reccomendation is to clean up the clothing section and have all the clothes be displayed in the same gridded sized display format and limiting the colors displayed for the same clothing item. That category could be under the filter tab or once you press the item, have a color icon to display the number of colors available for that specific item.

same gridded

Recommendation #3: Improve buttons with feedback such as a change in color or bolded

The Problem: H1 and H2 Violated

After you pick a clothing item, it opens to a page like the one below. There is an image of a person wearing the item, and a thin scrolling panel to indicate more images of the clothing item. on the left, there is a tab with the name of the item, a short description, number of colors available, reference number, sizes available with a size guide, check-in store availability and a large button to “Add to Cart”.

The information is all important and necessary, but the usability problem identified here was the lack of feedback or not a strong enough feedback for any of these subcategories.

All of these are pressable buttons for more information, but because of the lack of any differentiation (such as size/font/color change), the user would never know severity rate 3

The Recomendation:

The design reccomendation is to make clickable items more visual. In this case, we underlined some options such as “Check In-Store Availability” and “Find Your Size”. While in the case of the scrollable tab, we thickened the line and added a darker grey so users can know they should navigate downwards to view the shirt in different sides and on different models. For the case of the size guide, we added a thicker black frame around the chosen size. These subtle changes that follow the minimal aesthetic of the Zara desktop website can improve the user’s shopping experience.

Having more assertive indicators such as underlining labels and thickening scrolling tabs and framing the size option that is chosen severity rate 4

Conclusion

While Zara’s desktop website is one of the largest global e-commerce platforms and visited by over 200 million people, users are still able to find what they want and buy the item. I under stand that Zara is going for a minimalistic black and white website, with minimum labels and subcategories, the website still needs a lot of work in terms of reshuffling and decluttering. The website had a confusing homepage with an undiscoverable main menu, disorganized display format and little to no feedback when needed. These issues can ultimately hinder the consumer from wanting to continue shopping which will eventually cause a decrease in profits.

The goal of this study was to prioritize the user and their needs. The design reccomendations mentioned will allow for a smoother shopping experience and a friendly user experience will encourage the customer to shop and explore the Zara website more.

App endi x

1. Usability Expert K: Kato

Usability Expert S: Sayali

3. Usability Expert Z: Zein

Problem Description

Clickable Featured Images? Did not know that the images were clickable to take user to e-commerce browsing page of products upon clicking on images.

Finding Women's Section. Only availablility for a woman's section located in a hamburger sub-menu. Woman's section is also not organized in accordance to Alphabetical order or by subcategories of types of clothing (i.e. tops, bottoms, accessories, shoes, etc.)

Featured Images. No clear call to action on homepage that there are sections within sections or where the user is currently browsing. There is also a carousel with no signifiers of scrolling or progress of page user is currently on.

On homepage, the images displayed swipe on their own and are distracting while the menu was very dimmed down and barely readable - difficult to discover

Browsing/Searching for Basic Shirt. Upon clicking on the Wom an>Basics section, brought to a long scrolling page of apparel items. No sub navigation or separated section menu to take user directly to the section of apparel they would like to browse (Basics). Must scroll through page to get to respected Basics Section.

The size guide showed the same person with diffrent measurements instead of people from all sizes

I didn't realise the menu at the start was only for woman , there was no mention of the products only for woman, only after I clicked on the little 'Man' arrow on the side and going to the 'Man' section of website I realised the first section was only for woman

Re

H4 H1, H2 H2, H8

H4, H6, H7

H2 H1