Iterative Redesign of ZARA Website with Usability Report
Evaluate the usability and accessibility of ZARA's website; produce a usability report. Then, make an iterative redesign of ZARA, doing usability testings and A/B testings.
Usability Evaluation has been done to identify the usability issues which ruins or worsen the experience of the user in terms of effectiveness, efficiency, and satisfaction while navigating Zara’s website. Report included:
With the identified issues, three iterative designs of the website has been made. User testings have been done in between these designs to identify further issues.
Participants have navigated in Zara’s website with the given tasks. Afterthese, they answered ten SUS questions about the websites, respectively. The questions are asked with Likert Scale which had five answers as “strongly agree,” “agree,” “neutral,” “disagree,” and “strongly disagree.” (Jamleson, 2017). These questions are about finding out the perceived ease-of-use( Sauro Jeff, 2011).
Participants have been asked to “Think Aloud” (Jaspers et al., 2004) while they have navigated in Zara’s website with the given tasks. Afterwards, recorded video has been transcribed for Thematic Analysis (Aronson, 1995).
Number of errors have been recorded. This is a performance metric as well as lostness and task completion.
Lostness value shows how much users get lost while navigating the site. It has a specific calculation and a value out of 1. If the lostness is less than 0.4; it is acceptable
Shows the percentage of task completion by the users.
After two rounds of usability testings and iterations; final design has been formed.
Original Zara page overwhelmed users. The long and confusing menu on the left was resulting in false clicks. It was creating a time-consuming and challenging navigation. Further, it was highly difficult to read because of all capital letters, the small font size and most importantly text being on a full background photo. When ''man'' was clicked, page was staying as the homepage and the list was even getting longer.
Final Design solves all these usability and accessibility problems and improves the user experience with a simple and minimal approach that represents Zara's identity.
In the original Zara website, huge photographs took up nearly the whole space on the website, lowering aesthetics and ease of use significantly. Wrongly located product photos disrupt the aesthetic balance. The other important issue is insufficient filtering. Users could not locate the filter button easily and when clicked, they encountered with another long list of filters.
Final Design initially fixes the filtering problem: user satisfaction will be improved, sales will increase since the users will find clothes easily. Aesthetics are highly improved. Users can now ''favorite'' clothes. Another improvement in the usability is that users can see a detailed photo when they hover over an item; potentially reducing the number of steps they will take.
Original Zara page shows huge photos which overwhelms the user. Further, most important information; shipping and returns cannot be seen in the first sight and they have to scroll down to reveal these.
Final Design brings a clean look to the product page as all the information are presented clearly. All the information is grouped in the middle for an easy focus and considering the responsiveness. Shipping and returns details are now emphasized. Furthermore, after adding the item, the page scroll downs to show “Match With” items both to improve the user experience and to increase sales.
Original Zara shopping bag site is aesthetically unbalanced, makes user uncomfortable, resulting an unpleasant experience.
Final Design has a more appealing, cleaner page. For the responsiveness and an easier focus, the item is located in the middle. To increase the sales, users will be presented a number of similar clothes. If the price is close to free shipping, socks or underwears will be shown so that users may get free shipping. Maybe the user was not even thinking to get another item; but with the suggestion that the website makes, a new sale would be made for the company out of nowhere.
Final Design creates a much smoother and seamless experience for shipping details. Furthermore, in the whole checkout process; breadcrumb is visible on the left whereas all the information will be summarized on the right.
Original Zara page does not show the items while writing the card details which is a critical mistake that will possible drive users away. It creates an anxiety and users are unsure of the process.
Final Design addresses this problem and this will increase the number of people paying with confidence, therefore happy and feeling safe customers. Checkout feels much more safe, trustable and convenient.
Final design does not only improve ease of use and efficiency, and will result in satisfied customers; but it will also play a vital role in the companies success, by increasing the sales and the reputation. Usability and satisfaction of the website have been improved significantly.
Following performance results are the average of the sample groups:
With the perfect scores of “Task Completion”, “Number of Errors” and “Lostness”, Zara’s website has been improved significantly compared to the original website. Efficiency, effectiveness, usability has reached an exceptional level. Users do not get lost anymore.
Since perfect scores have been achieved at performance, the business side of the website can be reconsidered as how to increase sales even more.
Key items have been highlighted from the think aloud transcript in three categories; doing, thinking and feeling. Then, the frequencies of specific themes were written down in the codebook to see the repetitions, to see the areas to take action in the future.
Negative feelings changed substantially into positive feelings.
The biggest reason for the users to express their negative feelings was not being able to navigate freely. In real-world, this will cause many users of the Zara website to leave the website; therefore, Zara would lose many customers.
Only 17% of the user feelings were positive in the original. Now, with a tremendous amount of increase, 88% percent of their feelings are positive.
In the original Zara, 48% of what the users felt was annoyance. Now, the table is turned with Final Design as %72 of the feelings is now satisfaction and %10 is amusement. No amusement was observed in the original website, so that is also a significant improvement.
SUS score should be over 70 to be considered as providing an acceptable satisfaction level. With Final Design, it can be seen that the SUS of the website has been increased from 60,7 to an exceptional score, 88,3.
Conducting usability testings in this level with lots of information is extremely helpful for iterative redesign and further, to communicate with the stakeholder with all of these information. It creates a solid proof of the improvements.
Majority of usability problems have been found with heuristic evaluation done by me. Having knowledge of heuristic guidelines when it comes to design an interface is crucial and it saves a lot of time which would require many usability testings on the knowledge that is already known.
The project focused purely on usability and satisfaction of the website while also giving importance to business side. However; removing full screen campaigns from home page may damage ZARA's identity. Therefore; more appropriate solution for the homepage should be found without damaging usability a lot.
Since this was a school project and ZARA was just an example of many, we have not got the chance to communicate with stakeholders. If this project would go live, an interview with ZARA is a must.
Being a fast-paced project, animations were not considered. Animations and micro-interactions should be added.
Icons from FlatIcon and Material Design
Illustration in the Brief: undraw.co
Website: ZARA
Feel free to reach out
