Overview
For this project, we selected a highly problematic website to analyze in-depth and redesign.
Created as part of the Ergonomics for Web Pages and Apps course at Politecnico di Milano, in collaboration with Javiera from Chile, Mona from Iran, Gen from Japan, and Rafaela from Brazil.
Goals
Our objective was to improve Zara’s user interface (UI), refine its information architecture, and add essential functionalities that were missing. We aimed to enhance both the ergonomics and usability of the site, while aligning with Zara’s brand identity. This approach was guided by the insights and methodologies we explored in class.
Numerous issues were addressed, related to consistency, affordance, and navigation, resulting in a more intuitive and functional user experience.
Introduction
What is Zara?
and Why Zara?
Although It's quite visually attractive, the shopping itself, which is the main goal of the website, proved to be underwhelming, resulting in a poor and frustrating experience for users.
Here are the main reasons for the choice of Zara for our redesign:
Benchmarking
The next step was to understand who is competing with Zara and what is the general experience of their websites.
Overview
For this project, we selected a highly problematic website to analyze in-depth and redesign.
Created as part of the Ergonomics for Web Pages and Apps course at Politecnico di Milano, in collaboration with Javiera from Chile, Mona from Iran, Gen from Japan, and Rafaela from Brazil.
Goals
Our objective was to improve Zara’s user interface (UI), refine its information architecture, and add essential functionalities that were missing. We aimed to enhance both the ergonomics and usability of the site, while aligning with Zara’s brand identity. This approach was guided by the insights and methodologies we explored in class.
Numerous issues were addressed, related to consistency, affordance, and navigation, resulting in a more intuitive and functional user experience.
Introduction
What is Zara?
and Why Zara?
Although It's quite visually attractive, the shopping itself, which is the main goal of the website, proved to be underwhelming, resulting in a poor and frustrating experience for users.
Here are the main reasons for the choice of Zara for our redesign:
Benchmarking
The next step was to understand who is competing with Zara and what is the general experience of their websites.
User Personas
After doing research on types of users and their habits, Personas were created to better understand and empathize with our users. The goal was to be as diverse and inclusive as possible, to account for very different types of usage and motivation. This way we can also have a more didactic approach to our presentation.
Empathy Maps
After having the personas well defined, we went deep in expanding our visualization and understanding our user needs, pains and feelings. This step was an important source of insights for the later redesign.
User Tasks
From the previous steps we could clearly understand the types of tasks different users would want to perform in Zara's website, and using a Task Matrix we were able to define the most important ones to be focused by our team.
User Personas
After doing research on types of users and their habits, Personas were created to better understand and empathize with our users. The goal was to be as diverse and inclusive as possible, to account for very different types of usage and motivation. This way we can also have a more didactic approach to our presentation.
Empathy Maps
After having the personas well defined, we went deep in expanding our visualization and understanding our user needs, pains and feelings. This step was an important source of insights for the later redesign.
User Tasks
From the previous steps we could clearly understand the types of tasks different users would want to perform in Zara's website, and using a Task Matrix we were able to define the most important ones to be focused by our team.
Tasks Analysis
To analyze the performance of the website, our team conducted a Cognitive walkthrough, followed by a Heuristics evaluation, looking closely for problems in Consistency, Flexibility, Error Prevention etc..
We catalogued each step required to complete the 3 tasks, how many clicks and pages they took and how was the usability in each screen, leading us to a very complete overview of the problems to be solved.
Task 2
Task 3
Same Tasks on our Benchmarks
The same analysis process was done with the Benchmarks, as a mean to understand current solutions within the industry and how other players serve the users in those specific tasks.
Overview
Results Evaluation
After the walkthrough, organizing the extensive data gathered was much needed. Our analysis generated both Qualitative and Quantitative results, that helped guide us to more efficient solutions. We understood which qualitative parameters were relevant for the archetype, that we should keep in mind for the redesign, and compared Zara's Performance with the Benchmarks.
Tasks Analysis
To analyze the performance of the website, our team conducted a Cognitive walkthrough, followed by a Heuristics evaluation, looking closely for problems in Consistency, Flexibility, Error Prevention etc..
We catalogued each step required to complete the 3 tasks, how many clicks and pages they took and how was the usability in each screen, leading us to a very complete overview of the problems to be solved.
Task 2
Task 3
Same Tasks on our Benchmarks
The same analysis process was done with the Benchmarks, as a mean to understand current solutions within the industry and how other players serve the users in those specific tasks.
Overview
Results Evaluation
After the walkthrough, organizing the extensive data gathered was much needed. Our analysis generated both Qualitative and Quantitative results, that helped guide us to more efficient solutions. We understood which qualitative parameters were relevant for the archetype, that we should keep in mind for the redesign, and compared Zara's Performance with the Benchmarks.
The Redesign
Current Information Architecture
The first step for our Redesign was to map the whole architecture of the website, as in how the pages connect and why. With this bigger picture view we could clearly see the problematic areas in context.
Task 1 : Buy a specific type of garment
Focusing on the specific tasks we found problematic flows, unnecessary pages and missing features.
Before
In the first task the main problems were in the filters and in the excessive amount of pages on the cart flow.
After
We solved that by completely redesigning the filters UI and making the checkout experience concise. We also added the feature to checkout as guest, which showed to be very valuable in our research.
Task 2 : Browsing
Before
The second task displayed the same problems in terms of filtering and UI, but also big inconsistencies regarding the garment sizes on the cart.
After
The Wishlist feature was redesigned as well as the other problematic UI.
Task 3 : Find perfect fitting clothes
Before
The third task proved to be a very frustrating experience for users, from basic problems, such as a unclear menu, to need of complex measurement, and even a lot of missing information. It was clear that this task was being overlooked and no well thought solution was designed for it.
After
Based on insights from Uniqlo's benchmarking we developed the "Your Perfect Fit" feature, that lets users easily input their body data, to result in recommendations of sizes, fits and garments according to the user's desires.
Wireframes
What followed was a long process of wireframing, reviewing and refining, that culminated in our final design.
Design System
To maintain a very clear consistency throughout the website (something heavily missing in the original design) we set a design system with visual guidelines to be followed.
The Redesign
Current Information Architecture
The first step for our Redesign was to map the whole architecture of the website, as in how the pages connect and why. With this bigger picture view we could clearly see the problematic areas in context.
Task 1 : Buy a specific type of garment
Focusing on the specific tasks we found problematic flows, unnecessary pages and missing features.
Before
In the first task the main problems were in the filters and in the excessive amount of pages on the cart flow.
After
We solved that by completely redesigning the filters UI and making the checkout experience concise. We also added the feature to checkout as guest, which showed to be very valuable in our research.
Task 2 : Browsing
Before
The second task displayed the same problems in terms of filtering and UI, but also big inconsistencies regarding the garment sizes on the cart.
After
The Wishlist feature was redesigned as well as the other problematic UI.
Task 3 : Find perfect fitting clothes
Before
The third task proved to be a very frustrating experience for users, from basic problems, such as a unclear menu, to need of complex measurement, and even a lot of missing information. It was clear that this task was being overlooked and no well thought solution was designed for it.
After
Based on insights from Uniqlo's benchmarking we developed the "Your Perfect Fit" feature, that lets users easily input their body data, to result in recommendations of sizes, fits and garments according to the user's desires.
Wireframes
What followed was a long process of wireframing, reviewing and refining, that culminated in our final design.
Design System
To maintain a very clear consistency throughout the website (something heavily missing in the original design) we set a design system with visual guidelines to be followed.
Final Design
The final output was a medium-high fidelity prototype, that encompasses the defined tasks and main website screens such as home, search and product pages. The architecture was reimagined, User Interface improved and new features added for usefulness. Some screens below:
Home Page
Categories Page
Product Page
Solutions
Concluding, for a clear understanding of the improvements made, here we showcase comparisons between the old and new design, what problems were identified and their respective solutions.
Prototype
Click here to interact with the prototype: www.figma.com/ZaraRedesign
Project Takeaways
By the end we had heavily exercised a broad set of skills for User Experience Design projects and learned a lot from the methodologies and theory proposed. All steps proved to be valuable and piece by piece a mosaic of insights was built upon our analysis which facilitated immensely the redesign.
The end result was satisfactory, although in the future I personally see opportunity both in refining the visual quality of the User Interface and in conforming better to the established brand's identify.
Final Design
The final output was a medium-high fidelity prototype, that encompasses the defined tasks and main website screens such as home, search and product pages. The architecture was reimagined, User Interface improved and new features added for usefulness. Some screens below:
Home Page
Categories Page
Product Page
Solutions
Concluding, for a clear understanding of the improvements made, here we showcase comparisons between the old and new design, what problems were identified and their respective solutions.
Prototype
Click here to interact with the prototype: www.figma.com/ZaraRedesign
Project Takeaways
By the end we had heavily exercised a broad set of skills for User Experience Design projects and learned a lot from the methodologies and theory proposed. All steps proved to be valuable and piece by piece a mosaic of insights was built upon our analysis which facilitated immensely the redesign.
The end result was satisfactory, although in the future I personally see opportunity both in refining the visual quality of the User Interface and in conforming better to the established brand's identify.
