Zara: A Usability Case Study

Zara is one of my favorite clothing brands, but I run into problems every time I use the app. Although I am not affiliated with Zara, I wanted to figure out if other users were having similar problems. I decided to conduct usability tests, which led me to discover multiple pain points and redesign part of the experience.

Empathize

User Personas

The first step I took was perform online research around Zara’s customer-base. I then created a couple of provisional personas to cover the hypothesized, largest group of customers: professionals in their 20s and 30s and in the middle-upper income bracket.

Job Stories

In addition to personas, I also spent some time understanding the context surrounding the users when they use the app in order to further understand their motivation and desired outcome.

Usability Testing

With a better understanding of the user, I went to a mall with a Zara store and selected mall-goers to perform guerilla usability testing. I sampled people to test and verified that they were at least frequent online shoppers prior to beginning the testing. I ended up testing seven users.

Each user was asked to imagine he or she was in a scenario and to perform a series of tasks such as:

• It’s been cold lately and you’re looking for a winter coat. What do you do?
• You see a coat you might like. Can you walk me through how you would decide whether this is a coat for you?
• You added the coat to your cart, but you realize the size is wrong. How do you fix that?

Define & Analyze

Affinity Map

I reviewed recordings of the testing-sessions carefully and laid out the problems and complaints that each users had. I then used affinity mapping to organize and group these pain-points into categories.

2x2 Analysis

To help prioritize the issues, I used a 2x2 map to help rank the category of issues by how important they are to the business (x-axis) and to the users (y-axis). Assuming that the main business goal for the app is to drive up mobile revenue, I decided that the pain-points around editing cart-items were the most important to the business and users. Thus, those were the issues I scoped into my redesign.

Define Problem

I closely analyzed users’ behavior and patterns related to the shopping cart in order to come up with solutions.

When trying to edit an item in the cart:

• Only 1 out of 7 did so without problem
• 6 out of 7 users tapped the item, which only brings up a picture
• 4 out of 7 users tried swiping left on the item, which doesn’t bring up the edit option
• 2 out of 7 users accidentally deleted their items

Other issues:

• There is no way to edit the size or color of an item in the cart, which means users would have to browse for the item again
• Users cannot see more than one picture for items in the cart

Ideate & Create

Lo-Fi UI Sketch

After reviewing the issues surrounding the shopping cart edit flow, I mapped potential solutions to each of the pain-points and created rough UI sketches to encapsulate the solutions.

Hi-Fi Mockups

Before diving directly into prototyping my design, I performed preliminary validation by walking through the Lo-Fi UI sketches with a few more online-shoppers. I received some good insight and incorporated them into the final design.

Please see my proposed solutions below:

* — The new ‘edit’ button replaces the old ‘buy later’ button; however, this was an intentional choice. Previously, when users wanted to save an item for later, they could only do so when an item is in the shopping-cart. I would add the ‘save-for-later’ function to the product-browsing flow so that users wouldn’t have to move an item into the cart before bookmarking.

** — A vertical image carousel is consistent with the interaction pattern found in the rest of the app. During initial usability testing, users were often prone to swipe horizontally for more pictures of the item. As such, I added more prominent indicators to guide the appropriate interaction.

Prototype

Ready to check out an excerpt of my prototype?

First, imagine you finished shopping on the Zara app and are ready to check-out. However, you want to edit some of the items in the cart before doing so.

Now try to do that on my prototype!

Validate

I validated my design by testing 7 users with my working prototype. The 7 users were asked to walk through how they would edit quantity and size of items in their shopping-cart. All of the users were able to complete the tasks without any pain-points.

As a result of the re-design, task success rate when a user is looking to edit an item in the shopping cart increased from 33% to 100%.

When users wanted to edit an item in the shopping-cart:

TLDR;

Through guerilla usability tests, I found that users were having trouble with editing items after they’ve been added to the shopping cart. Further, there were functionalities typically expected of a shopping cart that were missing from the app (e.g. looking at more pictures or changing size of an item). My design improves the check-out process by making it easy for users to compare and edit items within their cart. Enhancing the user experience for this process means lowering customer friction, which in turn should drive more sales now AND in the future.

Thanks for the read! If you want to collaborate, have an opportunity in mind for me, or just want to chat, please shoot me an email at williamng3@gmail.com or connect via Linked-In.