Client: YSL
Sector: Usability, Design, Accessibility
My Role: Researcher
Methodology: Psychology principles, Heuristics Evaluation, Semi-structures interviews, Empathy Map, Observations, HMWs, Evaluation Matrix, WCAG
Research Time: 2 months
The aims of the evaluation
The evaluation aims to identify and prioritise usability issues on the Yves Saint Laurent official website and provide redesign recommendations. The insights from this study will help improve the website's usability to better meet user needs.
Heuristics Evaluation
A group of five conducted data collection for the heuristic evaluation, focusing on key tasks essential for retail clothing websites. These tasks included Delivery, Image, Product Description, Filtering, and Search.
Findings
A total of 30 usability problems were identified: 9 were usability catastrophes, 14 were major issues, 6 were minor, and 1 was cosmetic. Key issues include:
There is a lack of consistency and standards, such as clickable links like "WHAT ARE SHIPPING METHODS AND COST" and "CLIENT SERVICE," while "EXPRESS SHIPPING" is not, violating the Gestalt principle of similarity.
Inconsistent icons also lead to confusion and a lack of dual coding.
The site suffers from crowded text in all caps, which impacts aesthetics and minimalist design.
The colour filter lacks a clear system status, confusing users about the selected colour.
Quantitative Research
Data collection
This evaluation was conducted by a team of five. Participants completed assigned tasks before filling out the System Usability Scale (SUS). During this process, Task Time, Task Completion, and Errors Made were recorded. I then calculated the Lostness metric and System Usability Scale (SUS) scores.
Task 1: Search & Filter
Start at the home page
Search for a shirt
Filter for organic cotton
Find the most expensive one
Check your size using the size guide
Add the shirt to your bag
Task 2: Shipping Information
On the product page, explore shipping details.
Enter your zip code for the estimated delivery date.
Find the average delivery time.
Review the return policy.
In the end, most participants successfully completed both tasks, with one failing on Task 1 and another on Task 2. Four out of five participants entered incorrect information or used the wrong input box when checking the estimated delivery time, indicating inconsistencies in page guidance and causing confusion. Overall, more errors occurred during Task 2 than Task 1.
Additional evidence showed that Task 2 was more complex and time-consuming compared to Task 1. The Lostness score for Task 2, which involved shipping information, was significantly higher, indicating that participants found it more challenging.
Most participants stated they were unlikely to visit the website regularly and disagreed that its functions were well integrated.
Qualitative Evaluation
In this phase, the Think-Aloud method was used, allowing participants to verbalise their thoughts as they navigated the user interface.
Data collection
This evaluation was conducted by a team of five. This process involved carefully documenting usability issues and capturing participants' emotions. Participants were given scenarios and tasks to complete.
Scenario
You want to buy a gift for your mother as a surprise birthday present. You decide to purchase her a handbag that she would appreciate. You have saved up some money to put aside, so spend wisely. Send a personalised message that will be included in the parcel before going to checkout.
Task
Choose a bag for your mother
Filter for the colour and category of bag
Put it in your basket
Find out the delivery times and return policies on the handbag
After this, proceed to checkout, fill in your email and shipment details and add a personalised message
Empathy map
Only one colour option available
"I feel disappointed when I see multiple colour options for a product, but once I go to the product page, only one colour is available."
After filling in the email then can be able to view the shipping details
"It's frustrating that I have to fill in and submit my email on the checkout page before I can access the shipping details."
Add a gift card option
"The "ADD A GIFT CARD" option is unclear; it seems to refer to adding a physical or digital gift card, rather than entering gift card details."
Accessibility Evaluation
The next move is to create a service that is as inclusive as possible, allowing users with diverse physical and cognitive abilities to complete tasks without encountering barriers.
To evaluate accessibility manually, I employed the Web Content Accessibility Guidelines (WCAG) 2.2, a widely recognized international standard published by the World Wide Web Consortium (W3C).
Accessibility Findings
Each page was manually assessed according to the three WCAG 2.2 principles—Perceivable, Operable, and Understandable. Accessibility issues at Level A and Level AA were identified and documented as follows:
14 issues categorized as Perceivable violations
8 issues categorized as Operable violations
6 issues categorized as Understandable violations
Perceivable
Product image on the cart page
The product image is embedded in a link without alternative text, which hinders users who rely on screen readers from grasping the link's purpose.
WCAG Guideline 1.1 Text Alternatives Level A
Image of the homepage
The text on the image has a contrast ratio of less than 4.5:1 (1:1), failing the colour contrast test. This renders the text unreadable when the image is disabled or unavailable, particularly affecting users with visual impairments who need access to the information.
WCAG Guideline 1.4 Distinguishable Level AA
Operable
Right sidebar menu of homepage
A keyboard trap occurs when users try to close the dropdown menu, triggering a bug that prevents further navigation.
WCAG Guideline 2.1 Keyboard Accessible
Level A
Product image page
If users navigate to the product image page from the product page, they cannot close it using the keyboard.
WCAG Guideline 2.1 Keyboard Accessible Level A
Understandable
Add to Cart / Bag
Clicking "ADD TO CART" adds the product to the "BAG," but the two components are inconsistently labeled.
WCAG Guideline 3.2 Predictable Level AA
Colour Options on Product Page & Quantity Input on Cart Page
These form controls have multiple labels, which may cause assistive tools to read the wrong label.
WCAG Guideline 2.4 Navigable Level AA
WCAG Guideline 3.3 Input Assistance Level A
Generating Insights
The insights were gathered from quantitative, heuristic, and qualitative findings.
Findings
What it Means
Why it Matters
The product page has a small font size, a cluttered layout, makes it difficult to find information.
Users struggle to find the product details on the product page.
When users encounter confusion on the website, they struggle to find more information about the product, hindering their ability to complete tasks.
Psychology principles: Dual coding,Gestalt principle of similarity
The website offers numerous options, but many of them are either unavailable or cannot be selected.
Users feel frustrated by options that don't offer real choices.
The choices waste their time and negatively impacting their experience on the website.
Psychology principles: Mental model
Users often spend a lot of time searching for shipping information across different pages.
Users often rely on their experience to find shipping information on the website, frequently going to the checkout page in search of it.
Users frequently encounter obstacles on the checkout page due to cumbersome steps, which can cause them to miss important information and, at times, prevent them from completing their tasks.
Psychology principles: Mental model, Information scent
The website uses ambiguous terms and lacks consistency in word choice, leading to user confusion.
Users might misinterpret some website functions, leading to incorrect actions.
Users are likely to miss essential information due to misunderstandings, which hinders task completion.
Psychology principles: Mental model, Information scent
Recommendations
The checkout page
Before
Users were frustrated by needing to enter their information before accessing shipping details.
Users must input their postal code to view shipping options, with no option to change their country afterwards.
Apple Pay and PayPal options at the top of the website are non-clickable.
Users cannot select the shipping country before entering the postal code, leading to a redirection to the postal code entry step.
The underlined buttons were unclear and inconsistent, violating the Gestalt principle of similarity.
The website failed to provide payment details.
After
Relocate the email input to the shipping stage for a smoother user experience.
Prioritise country selection at the start, followed by postal code and address input, allowing users to change their country and postal code separately.
Make the Apple Pay and PayPal options clickable for immediate access to payment options.
Rename the COUNTRY/REGION dropdown to "Postal Code" for clarity.
Revise the button styles for better visibility and consistency.
Restore icons to their original colours to enhance visual clarity and user recognition.
Update the wording for "ADD A GIFT CARD AND A SHOPPING BAG" to improve understanding.
Reflection
Through this evaluation, I gained a deeper understanding of usability and accessibility, learning various evaluation methods systematically.
For future studies, I aim to enhance my logical reasoning and analytical skills to better identify website issues and create more effective tasks. The experience of conducting detailed usability research was invaluable. It provided reliable data through qualitative and quantitative methods, revealing users' needs via think-aloud protocols.
Usability testing aims to improve effectiveness, efficiency, and satisfaction. This involves enhancing task completion, reducing errors, decreasing task time and lostness scores, and achieving a high System Usability Scale score. Redesigning websites based on psychological principles and usability heuristics and testing accessibility has been a significant learning experience, showing how usability tests apply to real-life scenarios.