Optimize your process of adding and removing items from the cart, especially when you’ve added things by accident!
Optimize your process of adding and removing items from the cart, especially when you’ve added things by accident!
Optimize your process of adding and removing items from the cart, especially when you’ve added things by accident!
Zara Redesign
Ametros Learning:
Case Study
Ametros Learning:
Case Study
Sep 2024 - Dec 2024
Sep 2024 - Dec 2024
Type: Interface Redesign, Course Project at Toronto Metropolitan University, Pair Project
Type: Interface Redesign, Course Project at Toronto Metropolitan University, Pair Project
Roles: UX Designer and Researcher
Roles: UX Designer and Researcher
Tools: Figma
Tools: Figma
Target Audience: Online clothing shoppers
Target Audience: Online clothing shoppers
Time limit: 8 weeks
Time limit: 8 weeks
Team size: 2
Team size: 2
Project Summary:
We were tasked to perform a heuristic evaluation of a website of our choosing and come up with two key processes that we will be redesigning and user testing for the rest of the semester. My partner and I split the workload by tackling one key process and I spearheaded the redesign and user testing for the key process of adding/removing items from Zara's shopping page.
Project Summary:
We were tasked to perform a heuristic evaluation of a website of our choosing and come up with two key processes that we will be redesigning and user testing for the rest of the semester. My partner and I split the workload by tackling one key process and I spearheaded the redesign and user testing for the key process of adding/removing items from Zara's shopping page.
Problem
Problem
Zara's shopping page makes it difficult for users to efficiently add or remove items from their cart, leading to frustration and confusion. This matters because poor usability in such critical interactions can drive users away, reduce customer satisfaction, and negatively impact sales.
Zara's shopping page makes it difficult for users to efficiently add or remove items from their cart, leading to frustration and confusion. This matters because poor usability in such critical interactions can drive users away, reduce customer satisfaction, and negatively impact sales.
Value Proposition
Value Proposition
Our ultimate solution to the problem is user-centered and not business-centered in which the implemented changes were to boost the efficiency of the users of the platform with less consideration for the design decisions made from Zara's business standpoint.
In particular, the solution to my key process is to enable users to declutter information about the product and efficiently add and remove items from the shopping cart by employing drop-down menus for item information and offering easier access to the features with immediate feedback and pop-ups in the redesign.
Our ultimate solution to the problem is user-centered and not business-centered in which the implemented changes were to boost the efficiency of the users of the platform with less consideration for the design decisions made from Zara's business standpoint.
In particular, the solution to my key process is to enable users to declutter information about the product and efficiently add and remove items from the shopping cart by employing drop-down menus for item information and offering easier access to the features with immediate feedback and pop-ups in the redesign.
Before
Before
After
After
Phases
Phases
Research & Discovery
Research & Discovery
User Research:
A heuristic evaluation was conducted on the Zara website and user opinions were collected through surveys and in-person/online interviews
User Research:
A heuristic evaluation was conducted on the Zara website and user opinions were collected through surveys and in-person/online interviews
Key Findings & Pain Points:
Two key processes were examined during the Heuristic Evaluation:
Searching for a product from the search page
Adding an item to the shopping bag
Overall usability is satisfactory, but the improvements for these two key processes can boost efficiency by increasing readability and reducing task completion time.
Key Findings & Pain Points:
Two key processes were examined during the Heuristic Evaluation:
Searching for a product from the search page
Adding an item to the shopping bag
Overall usability is satisfactory, but the improvements for these two key processes can boost efficiency by increasing readability and reducing task completion time.
Wireframes
Wireframes
Design Rationale:
Design follows a similar layout to not confuse returning and frequent customers
Substituted the information box with drop-down menus to minimize clutter on item page and bring focus on the item’s image
Clearer typography and icons to discern clickable buttons and descriptive text
Design Rationale:
Design follows a similar layout to not confuse returning and frequent customers
Substituted the information box with drop-down menus to minimize clutter on item page and bring focus on the item’s image
Clearer typography and icons to discern clickable buttons and descriptive text
User Testing
User Testing
Usability Testing Process:
We employed qualitative and quantitative evaluation methods, and task-based methodology for the usability testing.
Before the test, we sent out participant screeners asking the test participants about their previous online shopping experience to learn more about their preferences.
Next, the tests are moderated and conducted in a remote environment.
A total of 8 tests were conducted collectively.
Usability Testing Process:
We employed qualitative and quantitative evaluation methods, and task-based methodology for the usability testing.
Before the test, we sent out participant screeners asking the test participants about their previous online shopping experience to learn more about their preferences.
Next, the tests are moderated and conducted in a remote environment.
A total of 8 tests were conducted collectively.
Usability Testing Process:
We employed qualitative and quantitative evaluation methods, and task-based methodology for the usability testing.
Before the test, we sent out participant screeners asking the test participants about their previous online shopping experience to learn more about their preferences.
Next, the tests are moderated and conducted in a remote environment.
A total of 8 tests were conducted collectively.
Key Findings:
Make size and color selection buttons clickable
Make the delete button more discernible
Increase the response area for the search bar
Increase the spacing between filters and view options
Make the shopping cart respond to the adding action
Key Findings:
Make size and color selection buttons clickable
Make the delete button more discernible
Increase the response area for the search bar
Increase the spacing between filters and view options
Make the shopping cart respond to the adding action
Key Findings:
Make size and color selection buttons clickable
Make the delete button more discernible
Increase the response area for the search bar
Increase the spacing between filters and view options
Make the shopping cart respond to the adding action
Before
Before
After
After
High-fidelity Frames
High-fidelity Frames
Desktop Prototype
Desktop Prototype
Video Walkthrough
Video Walkthrough
Reflection & Takeaways
Reflection & Takeaways
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.
Learning how to conduct heuristic evaluations and employ the theories from Nielson’s 10 usability heuristics and Norman’s principles of Interaction Design within the research phase of the project.
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 with the addition of the quick delete button.
The key takeaway I learned from this project would be that designing user experience can differ depending on whether the objective is to optimize customer’s UX (providing a quick delete button) or to optimize business sale’s UX (not providing a quick delete button).
Biggest Challenges & The Solution
Biggest Challenges & The Solution
Biggest Challenge: finding participants for usability testing who have experience using the Zara platform.
Solution: we overcame this by asking participants who had a general online shopping experience.
Biggest Challenge: finding participants for usability testing who have experience using the Zara platform.
Solution: we overcame this by asking participants who had a general online shopping experience.
Next Steps & Future Improvements
Next Steps & Future Improvements
Research more into business strategies and psychologies behind online shopping UX and UI designs.
Conduct competitive analysis with other e-commerce platforms.
Increase the number of test sessions and have a more diverse range of test takers.
Research more into business strategies and psychologies behind online shopping UX and UI designs.
Conduct competitive analysis with other e-commerce platforms.
Increase the number of test sessions and have a more diverse range of test takers.