Case study: UX usability in the Zara app
Have you ever thought about the people who design the apps you use on your mobile and how they work to make it look and function correctly? Well, the term usability has a lot to say and teach. In a nutshell, usability refers to the speed and ease with which people accomplish their tasks through a product of interest. It can also state that usability implies focusing on users.
We can say that usability rests on two main pillars:
- Direct contact with the user: to develop a product that is used by the target audience, behavior patterns must be analyzed and understood.
- Knowledge of the usability context: a product is successful in terms of usability according to the number of steps it has to go through for a person to achieve their objectives. One of the steps prior to the development of an app, it's very convenient to know in advance which user tasks the new product automates, modifies, or enhances.
Don't forget: it's the users who determine whether a product is easy to use or not. Designers and developers only do their job of interpretation and implementation.
ZARA app and its usability level
An expert in UX design and usability, Guillermo NG, had a wonderful idea: to carry out a necessary social experiment together with a group of Zara store assistants and the addition of samples of people classified as frequent customers of the Spanish brand. The main idea was to detect current failures within the visual and functional panel of the mobile application and then establish a series of graphic modifications that would reveal effective solutions to solve these issues.
Final number of testers for the experiment: seven.
The zero level of this work consisted of research and online data collection in order to create a buyer persona for the Zara app. Detailed data such as age, occupation and socioeconomic level made up the current identikit: professionals between 20 and 30 years old with a medium-high income level. Likewise, studying the environment in which these people move during their interaction with the app was another essential point. Whether the person wants to be constantly fashionable or simply wants to look for online items sold in physical stores, all kinds of arguments are valid to understand what their motivations and expected results are.
Testing and testing
Once the proto persona and their behavior was defined, the next step was to go back to those seven testers to do the field work. Here the attendees were to imagine certain contexts and act accordingly: "it's been cold lately and you are looking for a winter coat. what do you do?"; you see a coat you might like, can you explain to me how I would decide if this is a coat for you; "you have added the coat to your cart, but you realize that the size is wrong. How do you fix that?".
A review of the data obtained was conducted and then the affinity mapping technique was used to classify the weaknesses to be resolved into categories. Shopping cart, search and filter, "save for later," image carousel, unavailable items, and drop-down menu were the most "challenging" items for this researcher, setting up the most visible pain points.
Assuming that the app's most important goal is to increase mobile revenue, it was decided that editing cart items was an issue that called for urgent usability redesign urgency for both Zara and users.
Challenging to the eye
When trying to edit an item in the cart:
- Only 1 in 7 did so without a problem
- 6 out of 7 users touched the item, which only shows an image
- 4 out of 7 users tried to swipe left on the item, which doesn't show the edit option
- 2 out of 7 users accidentally deleted their items
When it was time to bring creativity and intelligence to the table, Guillermo started the creation of design prototypes, performing a preliminary validation from sketches with some online shoppers. Thanks to this, the researcher obtained more information, managing to incorporate solutions to the final design.
As a colorful fact for our readers in relation to this first step, from Lab9, we worked for Innos -a mobile application ready to provide solutions in the health area- conducting a previous study focused on the stakeholders of the brand to know what their needs, preferences and behavior patterns were. Here we can differentiate the data to make the first manual sketches, which would be digitized as a final proposal.
One of the modifications had to do with the new "Edit" button, which replaces the "buy later" button. In this new feature, users can not only choose the garment they are going to buy, but also change their mind about color, size and quantity of items. Before the usability redesign, when users wanted to save an item for later, they could only do so when the item was already in the shopping cart. For this reason, Guillermo feels that it would be more appropriate to add the "save for later" feature to the product search flow so that users do not have to move an item to the cart before checking it out.
Another design change involved an interaction guide for users, so they could move the images in the carousel in a pattern similar to the other finger movements that must be made in the rest of the app. In this case, vertically and not horizontally as before.
In closing, validation is the last step of any mobile usability redesign. In this opportunity, the seven testers were asked to explain in their own words how they would edit the quantity and size of the items in the cart. Result? Absolutely everyone was able to explain these points successfully. Thus, the solution rate went from 33% to 100%.