Zara Website Redesign
A UI/UX Case Study by Kate Fang and William Aung
October-Decmber, 2024
Zara's website is well-known for its overwhelming pages and poor user experience. To improve the online customer experience while maintaining the website's modern, minimalism aesthetic that aligns with Zara's visual identity, me and my team worked on solutions and came up with design decisions.
This case study focuses on two key user processes on the desktop user interface of Zara.com, the first process is searching for a product from the search page, and the second process is adding a product to the shopping bag.
Part 1: Heuristic Evaluation
1.2 Severity Scale
The following scale is based on Jeff Sauro’s ratings for the severity of usability problems. (Sauro, 2013) :
0. Not a Problem: no issues, allow insights for improvement.
1. Minor: Some hesitation or slight irritation.
2. Moderate: Causes occasional task failure for some users; causes delays and moderate irritation.
3. Critical: Leads to task failure. Causes user extreme irritation.
Conclusion
The problems detected in the key processes of the Zara website are minor and moderate, but nothing critical. The problems that seemed most severe were: Confusing icon choice for the cursor display, dynamic tags on the searching page that may take users unnecessary time, and inefficient filtering system. Apart from that, an overall lack of hierarchy in typography on the product information page is also detected. All the issues addressed above are affordable for a redesign based on the suggestions for improvements given.
Part 2: Critical Response (Norman's Principles)
2.1 Critical Response (appendix on the left)
2.2 Action Cycle Evaluation
While searching for an item, some of the users can achieve their goal without hindrance, but might be distracted by other product images listed on the page and suggested tag prompts which would slow them down and lower the efficiency of completing their task. However, for users unfamiliar with keyboard shortcuts, the lack of visible submit signifiers on the page can cause delays or even failures. After users make the decision of what they want, the search result page will show up. On this page, the filter and gird view are worthy of keeping as they shortens the time that needs to be complete a task and improves efficiency. For the process of adding an item to a shopping bag on the product information page, users could take a long time to perceive all the information all this page. The zoom-in viewing function of the product images could take some time since the process requires users to take some time to figure out how to scroll and exit in the zoom-in mode. Checking about the return policy and material information is also time-consuming since the section is easy to miss due to the lack of hierarchy. Another issue with this page is that before adding things to the shopping bag, users cannot search for a possible pick-up spot because a pick-up option is not given or mentioned at this stage.
2.3 Summary of Critical Response and Action Cycle
2.1 has reflected how the design of the Zara website has not fulfilled Norman’s design principle, and 2.2 has further explained how the major issues detected would reduce the efficiency for users to complete their tasks. There are three moderate issues that cause delays, and several minor issues should be looked into in order to improve user experience.
Part 3: Wireframe & Prototype
3.1 Redesign Process
Wireframes: Sketching Key Process A
Wireframes: Sketching Key Process B
Searching item process made by Kate Fang
Adding item process made by William Aung
Part 4: Usability Testing
Purpose, goals and objectives
We need to figure out whether our prototype fulfills the three key reasons through the test: to improve the clarity and efficiency for searching for items, to declutter the item information page, and to provide ease of removing items from the cart that were recently added by mistake.
Methodology
Tests are moderated and conducted in a remote environment. Users were asked to perform a series of short tasks and were recorded and evaluated on how efficiently and fast they can perform the tasks. To measure efficiency, one person from the moderator team was using a stopwatch to note down time. Within one of the tasks, users were able to explore the user interface. After the usability test, we collected feedback from the users.
Evaluation Methods
Users' actions and behaviors are the main data to be collected and observation is our key evaluation method.
User Task List & Timing
If users take longer than the stated max time, then we can conclude that the design needs to be revised and improved.
1. Searching for women’s pants (15 seconds max)
2. Test the filter system by selecting “cotton” in the filter options (30 seconds max)
3. Enter the product information page (10 seconds max)
4. Browse/Explore through the item page after selecting pants (1 minute max)
5. Adding pants to shopping cart (15-30 seconds max)
6. Removing pants from cart (15-30 seconds max)
7. Adding pants through pick-up option (30 seconds max)
Ethical Considerations
Informed consent and data privacy were addressed at the start of the usability test alongside the consent form users signed before the test. Moreover, any information that was revealed by the participants during the test will be used for research purposes only. This information would likely be the users’ action of navigating through the prototype and their opinions and feedback after the test ends.
Research Insights
After two rounds of testing, we collected feedback and focused on user issues that were frequently brought up during the test and decided to implement these changes:
1. To improve users’ experience, it is important to make the color and size options of the add-to-cart process clickable.
2. To save users’ time on task, making the delete button more clear and discernible is needed.
3. To increase the success rate of completing the search task, we should make the response area of the search bar larger.
4. Increase the spacing between filters and view options
5. Make the shopping cart respond to the adding action
6. Add a “All” option, in the gender-based filter bar
Part 5: Reflections
Learnings
- Online customers may have a habit that is formed by shopping through other platforms, therefore the other platforms’ interface design also needs to be considered during the research phase.
- The redesign is conducted through customers as the target audience rather than Zara’s stakeholders as the target audience, therefore the design is tailored towards promoting customers’ user experience.
Challenges
- Finding participants for usability testing who have experience using the Zara platform. We overcame this by asking participants who had a general online shopping experience.
- Having time constraints on prototyping every clickable button within the prototype. We overcame this by using a task-based methodology for participants to complete specific tasks.