Users have expressed frustration with using Zara’s online retail platform, which underperforms against the competition.
Zara Redesign uses standard usability testing practices to evaluate the current website, making improvements to key usability and accessibility issues which delivers better performance in A/B testing.
🗂 Project type
Individual project
Usability test
✏️ Responsibility
Usability evaluation
Research analysis
UI redesign
A/B testing
🎓 Role
UX designer
🗓 Duration
6-weeks studio
2022
Overview
⚠️ Problem
As an iconic fast-fashion brand and international retailer, ZARA defines its online platform with four keywords: beauty, clarity, functionality, and sustainability. (inditex.com, 2022)
However, the browsing experience criticized as “aesthetic but impractical” indicates that these principles do not seem to be followed thoroughly.
original ZARA homepage
👁 Challenge
To evaluate ZARA’s web presence and find a way to improve the site, a usability test is conducted compliant with the WCAG 2.1 Guidelines, IBM accessibility heuristics, System Usability Scale and other evaluation methodologies.
💡 Solution
Key usability issues are identified following a redesign of the Zara UK website, formulating recommendations to enhance the site’s ease of use. An interactive prototype is created to validate its improvement through A/B testing with the original website.
Usability Evaluation
➊ User task identification
📃 Top task analysis
As large websites have hundreds of possible tasks a user could carry out, it was important to focus time and resources on the tasks that were most important to the user. Around 100 participants took part in a class survey in order to classify and rank users’ tasks for online shopping.
8 top tasks generated from survey
🌈 Progress
the results were interpreted and summarised into 3 main tasks which led participants in the following user tests:
01. Search and filter
Starting from the homepage, use the filter to search for a jacket to wear to a party at the weekend
02. Sizing information
Starting from the product page, check product details and select the right size with the help of sizing information
03. liveliness & resonance
Starting from the product page, add the jacket to the shopping cart and find out how much time and money the fastest delivery will take
➋ Usability testing
💭 Methodology
the results were interpreted and summarised into 3 main tasks which led participants in the following user tests:
Heuristics
based on the methodology of Nielsen and Molich, and IBM's accessibility heuristics
Accessibility
using WCAG 2.1 guidelines, Levels A, AA and AAA
Performance
comparing metrics against another retail website:
-
time taken to complete each task
-
task success for each task
-
errors made on each task
-
lostness over the whole task scenario
Satisfaction
using 'Think Aloud' methods then thematically analysing the transcripts, measured and compared using the System Usability Scale (SUS)
Biometrics
Using eye-tracking software "Eyequant"
Psychology
using psychological principles of UI design, such as mental models and Gestalt principles
🔦 Key findings
Heuristics
-
Inconsistent visual layout was distracting and challenging for the user to navigate through.
-
Oversized images were annoying to users because of too much scrolling and not being able to see images in context.
-
Customer Reviews were not present.
-
Navigation was hidden in a transparent background and was difficult to understand.
-
The ZARA logo on the top left was way too big and caused information overlap.
-
Dead ends in the site that required users to return to the homepage.
-
The filter was hard to notice and not precise.
-
The sorting function was missing in the search results.
-
Colour choices and bookmarks of each product on search results and product list pages were missing.
-
Reassure was needed before users deleted a product from the cart.
Accessibility
-
Auto-play videos were present without pausing control.
-
Lack of alternative text for many contents.
-
Breadcrumb navigation was easy to miss on the bottom of the product page.
-
Low colour contrast in some of the text.
-
Keyboard control needs to be improved.
-
Language and location cannot be changed after being selected.
Redesign
➊ Prototype
🧱 Low-fi prototype
At the first stage of redesign, a sketch of the wireframe prototype was created based on the findings and iterated after testing and discussing with two of the participants from the previous analysis.
🕹 Interactive prototype
After testing and iteration, an interactive mid-fidelity prototype was created in Figma for further redesign testing and presentation.
The prototype contains screens related to the three top tasks, including the landing page, navigation menu, search page, category page, product page, shopping cart page, shipping information and sizing information page.
A/B Tesing
The redesigned website was compared to the original through A/B testing. A Performance Evaluation, Satisfaction Evaluation and a Think Aloud were carried out on the new design and measured against the original.
👣 Performance
💋 Satisfaction
🌈 Conclusion
Both the quantitative and qualitative results proved that the redesigned website was more satisfying than the original. The redesign could basically meet users’ expectations for online shopping websites, and significantly reduced the probability of errors occurring. The only negative feedback was about the all-capital titles, which could be more difficult to read for second language speakers. In the future design, I am considering replacing them with uppercase initials.
Reflections
🚀 Improvement
Higher efficiency
The results of redesign testing show that the changes helped improve the efficiency of the original ZARA website. Most quantitative data were improved in the A/B testing, and the overall qualitative data was superior to the previous test.
Use of data
Measuring the design of a website is a subjective thing. Sometimes when the functions are obviously insufficient, users will still comment on it as a good design for a variety of subjective reasons. In this project, the data and statistics provide more objective support in this respect, making up for the deficiency of researchers’ and participants’ personal descriptions.
Maintaining brand style
It can be seen from the brand introduction and web design that one of the core goals of ZARA is to stand out to the beauty aspect, which led to sacrificing user experience in favour of aesthetics to some extent. One of the biggest successes of the redesign is to largely improve usability and accessibility without abandoning the original minimal style, which could better reflect their design of products as well.
🧗♀️ Future development
Content focus
As an iconic fashion brand, ZARA has many product branches which are included on their website. This research only focused on the Women’s clothing category, while other categories such as ZARA home and perfume were neglected, which should be supplemented in future studies.
Sample size
Due to the limitation of resources and time, not enough participants were recruited at many points in the testing process, bringing inconvenience to later statistics and data analysis. In future studies, the minimal sample size for the Mann-Whitney U test should rise to n=57, n1=n2=27.
Biometric data
Eye-tracking is a widely practised technique in biometrics evaluation, which could capture the details of a user’s eye movement patterns and interpret them into data that greatly helps identify usability issues. The restriction of the COVID-19 situation hindered testing with eye trackers, which could be added in future studies to assist the evaluation.
