Usability & Accessibility Evaluation for an e-commerce: YSL
two user interface re-design recommendations based on psycology principles, heuristics and insights for an established luxury e-commerce website Yves Saint Laurent
6 weeks project - Group/Solo
2023
UX/UI
Usability & Accessibility Evaluation for an e-commerce: YSL
two user interface re-design recommendations based on psycology principles, heuristics and insights for an established luxury e-commerce website Yves Saint Laurent
6 weeks project - Group/Solo
2023
UX/UI
Usability & Accessibility Evaluation for an e-commerce: YSL
two user interface re-design recommendations based on psycology principles, heuristics and insights for an established luxury e-commerce website Yves Saint Laurent
6 weeks project - Group/Solo
2023
UX/UI
My Role:
My Role:
My Role:
Researcher (solo project)
Researcher (solo project)
Researcher, Designer (solo project)
My Deliverables:
My Deliverables:
My Deliverables:
Desk research, Semi-structures interviews, Ethnography, Observations, HMWs, Evaluation Matrix
Desk research, Semi-structures interviews, Ethnography, Observations, HMWs, Evaluation Matrix
Desk research, Semi-structures interviews, Ethnography, Observations, HMWs, Evaluation Matrix
Personal Challenges
Personal Challenges
Personal Challenges
This module helped me gain furter attention to details and synthesise a large amount of data.
This module helped me gain furter attention to details and synthesise a large amount of data.
Project Overview
Project Overview
Project Overview
Homepage Redesign
Homepage Redesign
Homepage Redesign
Before
Before
Before
After
After
After
FAQ Page Redesign
FAQ Page Redesign
FAQ Page Redesign
Before
Before
Before
After
After
After
Evaluation
Evaluation
Evaluation
Lack of Dual Coding
Lack of Dual Coding
Lack of Dual Coding
The menu on the top right-hand side was moved up to the header to offer greater consistency and standards aligning to external conventions.
In the qualitative test, users struggled to find back to the ‘bag’ after viewing the FAQ page. Using dual coding by adding icons and text i.e. ‘search product’ makes it easier for a user to identify the functions
The menu on the top right-hand side was moved up to the header to offer greater consistency and standards aligning to external conventions.
In the qualitative test, users struggled to find back to the ‘bag’ after viewing the FAQ page. Using dual coding by adding icons and text i.e. ‘search product’ makes it easier for a user to identify the functions
The menu on the top right-hand side was moved up to the header to offer greater consistency and standards aligning to external conventions.
In the qualitative test, users struggled to find back to the ‘bag’ after viewing the FAQ page. Using dual coding by adding icons and text i.e. ‘search product’ makes it easier for a user to identify the functions
Before
Before
Before
After
After
After
In the qualitative test, users struggled to find back to the ‘bag’ after viewing the FAQ page. Using dual coding by adding icons and text i.e. ‘search product’ makes it easier for a user to identify the functions
In the qualitative test, users struggled to find back to the ‘bag’ after viewing the FAQ page. Using dual coding by adding icons and text i.e. ‘search product’ makes it easier for a user to identify the functions
In the qualitative test, users struggled to find back to the ‘bag’ after viewing the FAQ page. Using dual coding by adding icons and text i.e. ‘search product’ makes it easier for a user to identify the functions
Small & compact text
Small & compact text
Small & compact text
Body
Body
Before
Before
After
After
In the qualitative test, users struggled to find back to the ‘bag’ after viewing the FAQ page. Using dual coding by adding icons and text i.e. ‘search product’ makes it easier for a user to identify the functions
Body
Heuristics
Heuristics
Heuristics
10
Heuristics Evaluation
By Jakob Nilsen
10
Heuristics Evaluation
By Jakob Nilsen
10
Heuristics Evaluation
By Jakob Nilsen
#1 Visibility of system status
#1 Visibility of system status
#1 Visibility of system status
Inform user about the outcome before interaction
Provide timely & suitable feedback
Inform user about the outcome before interaction
Provide timely & suitable feedback
#2 Match between System & Real world
#2 Match between System & Real world
#2 Match between System & Real world
Communicate with the user's language
Use familiar words to help users quickly understand
Communicate with the user's language
Use familiar words to help users quickly understand
#3 User Control & Freedom
#3 User Control & Freedom
#3 User Control & Freedom
Help users recover from mistakes
Provide quick exits
Help users recover from mistakes
Provide quick exits
#4 Consistency & standards
#4 Consistency & standards
#4 Consistency & standards
Prevent user to get confused
Be consistent
External standards: Align with platform conventions
Internal standards: Alignment of design within the platform
Prevent user to get confused
Be consistent
External standards: Align with platform conventions
Internal standards: Alignment of design within the platform
#5 Error Prevention
#5 Error Prevention
#5 Error Prevention
Inform users the use of design to prevent problems from happening from the start
Slips: Unconscious errors
Mistakes: Conscious errors based on mismatch in the outcome before interaction
Provide timely & suitable feedback
Inform users the use of design to prevent problems from happening from the start
Slips: Unconscious errors
Mistakes: Conscious errors based on mismatch in the outcome before interaction
Provide timely & suitable feedback
#6 Recognition Rather than Recall
#6 Recognition Rather than Recall
#6 Recognition Rather than Recall
Reduce user's cognitive load
Make elements visible
Avoid asking user to remember information
Reduce user's cognitive load
Make elements visible
Avoid asking user to remember information
#7 Flexibility of Use
#7 Flexibility of Use
#7 Flexibility of Use
Provide shortcuts for the expert user
Enable quicker navigation
Provide shortcuts for the expert user
Enable quicker navigation
#8 Aesthetics and minimalist design
#8 Aesthetics and minimalist design
#8 Aesthetics and minimalist design
Inform user about the outcome before interaction
Provide timely & suitable feedback
Inform user about the outcome before interaction
Provide timely & suitable feedback
#9 Recognise, diagnose and Recover from errors
#9 Recognise, diagnose and Recover from errors
#9 Recognise, diagnose and Recover from errors
Inform user about the outcome before interaction
Provide timely & suitable feedback
Inform user about the outcome before interaction
Provide timely & suitable feedback
#10 Help & documentation
#10 Help & documentation
#10 Help & documentation
Inform user about the outcome before interaction
Provide timely & suitable feedback
Inform user about the outcome before interaction
Provide timely & suitable feedback