Redesigning the ZARA mobile app
THE CHALLENGE
To conduct a heuristic evaluation of the Zara Mobile app and suggest redesigns to eliminate
identified violations.
THE TEAM
MY ROLE
THE TIMELINE
2 weeks
THE CONTEXT
Academic
THE TOOLS USED
UX Designer
What is a heuristic evaluation?
It can be simply defined as a review of the app’s user interface, in order to identify app usability/user experience flaws. The evaluation is conducted against a set of design principles, also known as heuristics. They are called "heuristics" because they are broad rules of thumb and not specific usability guidelines. While there are several heuristics out there, for this project, we referred to Jakob Nielsen’s 10 general principles of interaction design. Why? Because that was part the assignment.
Chart 1: a summary of Jakob Nielsen's 10 general principles of interaction design.
THE PROCESS
What did we evaluate?
We were not required to evaluate the whole app, but we could pick any task or page we desired. We decided to focus on one task: purchasing a product, because we believed that if customers aren’t able to easily purchase a product, they might abandon the app, resulting in loss of revenue for Zara. Therefore, we evaluated a product modal and the checkout screen.
How did we evaluate?
Once we agreed on the task, we each conducted independent evaluations (in order to avoid “group thinking”) identifying usability violations and giving each violation a score based on the scale below.
Why this scale?
In the real world, severity ratings are necessary to determine how ready the app is for the market, and to determine how to allocate resources efficiently to fix identified violations. For example, if the severity ratings indicate that the app has several major or catastrophic usability problems, it will probably be best to pull it from the market. On the other hand, if the violations are mostly minor and/or cosmetic the fixes can be released with subsequent app updates.
Therefore, the severity of a usability violation can be a combination of three factors:
-
The impact of the violation: will it be easy or difficult for the users to overcome?
-
The persistence of the violation: is it a one-time violation that users can overcome once they know about it, or will they repeatedly be bothered by it?
-
The market impact: how does the violation impact the popularity of the brand?
VIOLATIONS AND REDESIGNS
After the independent evaluations, we combined our individual scores, deduced averages and focused on the violations with the highest scores.
Selecting a colour
Violation: flexibility and efficiency of use
Current design
Imagine you’ve found a shirt you like, and you’d like to see what other colours it comes in. To do that you need to scroll down to the bottom of the page. Each colour appears as if it is a separate product and opens as if it is a separate product too, when you click on it. This creates room for confusion and would make you have to click the back button, in order to see previous colour.
Proposed redesign
We added colour swatches just underneath the photo gallery. The swatches are linked to the gallery. When you click on a swatch it makes that swatch bigger to show that it is active; and the gallery shows a photo of the model wearing a shirt of that colour, without leaving the product page. Swatches of colours that aren’t available are lighter in contrast.
Selecting a size
Violation: flexibility and efficiency of use
Current design
Now that you’ve picked a colour you like, imagine you want to see if the shirt, in that colour, is available in your size. Currently, to do that you have to click on “Add to Cart”. But what if you don’t want to add the shirt to the cart yet?
Proposed redesign
We added size pickers on the main product page. Available sizes are full contrast while unavailable sizes are lighter contrast. The selected size has a square around it. Furthermore, we added a size information sub-section in the product information section, where you would get information about product dimensions.
Product information
Violation: consistency and standards
Current design
Product information is disorganized and inconsistent from product to product.
Proposed redesign
In order to encourage information consistency and organization, we created 3 sub-sections, which the shopper can expand and close as needed: "size information", "composition and care" and "shipping, exchanges and returns". More sub-sections may be added, if necessary.
Checking out
Violation: aesthetic and minimalist design
Current design
Now, imagine you've picked a colour you like, picked your size, added the shirt to the cart, and you're ready to check out... But when you land on the checkout screen the first thing you see is a huge "Chat" button. Chat? With who? Why?
Proposed redesign
To make the process of checking out less distracting, we moved the chat button to the bottom of the screen. Now, you will only notice it when something goes wrong and you actually need to talk to someone about a problem.
CONCLUSION
Why does any of this matter?
The Baymard Institute estimates that 69.57% of online shoppers abandoned their carts in 2019. 21% of US shoppers abandoned their carts due to a long/complicated process. This translated to $260 billion worth of lost orders. $260 billion! Need I say more?
Somebody get ZARA's management on the phone!