Saint Laurent Experience Redesign
Project
Personal Project
Role
Led the end-to-end UX process, from research to redesign.
Timeline
5 weeks, 2024
This project involved redesigning the Saint Laurent Official Online Store to address usability challenges identified through user research.
The readesign focused on optimizing key tasks such as product filtering, delivery information, and checkout processes, further enhancing the user experience to better align with the expectations of luxury fashion shoppers.
Overview
The Saint Laurent Official Online Store is a platform catering to individuals with a strong fashion sensibility, offering luxurious fashion items. Usability testing revealed challenges in key areas such as delivery information, sizing, and product filtering, which impacted user satisfaction and task completion rates.
To resolve these issues, the redesign was undertaken to streamline navigation, improve accessibility to critical information, and ensure a seamless shopping experience. This process aimed to better meet the needs of Saint Laurent's target audience, elevating the overall user experience while maintaining the brand's premium image.
Methodology
The usability evaluation for this project involved a comprehensive approach, combining both user-independent and user-centered methods to assess and optimize the website's performance. By utilizing a variety of evaluation techniques, the aim was to identify usability challenges, ensure accessibility, and enhance the overall user experience.
The following methods were employed:
Heuristic Analysis and Psychology Principles: Conducted evaluations based on the 10 usability heuristics and relevant psychological principles.
Quantitative Evaluation: Focused on metrics and user data to assess task efficiency and effectiveness.
Qualitative Evaluation: Gathered insights through user feedback, interviews, and observational studies.
Accessibility Testing: Ensured compliance with accessibility standards to enhance inclusivity.
Heuristic Violations and Psychological Principles
Jakob Nielsen's 10 heuristics for user interface design, alongside key psychology principles like Color Theory, Gestalt principles, and Mental Models, form a structured framework for evaluating usability. This combination helps identify areas for improvement in interface design. The framework provides clear criteria for UX designers to assess and enhance user experiences (see the image below).
Bora (2023). Usability heuristics for user interface design. [online] Medium. Available at: https://uxdesign.cc/usability-heuristics-for-user-interface-design-aeec304fafc9.
As an evaluator, a thorough review of the entire website's functionality was conducted, assessing all pages rather than just those tied to specific tasks. Usability issues, such as missing back arrows or icons, were documented for each heuristic, with severity ratings from 0 to 4 assigned to each problem (see the images below).
A total of 22 usability issues were identified on the Saint Laurent website, with the highest proportion (27%) related to consistency and standards. The second-largest category (23%) focused on the visibility of system status, followed by aesthetic and minimalist design (18%). Other identified issues included match between the system and the real world, user control and freedom, and recognition rather than recall, each contributing 14%, 9%, and 9%, respectively.
Quantitative evaluation
The evaluation involved a total of 5 participants. It was conducted in a controlled environment, and the entire evaluation process was video recorded. Following the evaluation, each participant was also asked to complete the System Usability Scale (SUS) questionnaire.
The quantitative evaluation metrics are divided into three key categories: effectiveness (comprising task completion and errors made), efficiency (including task time and lostness), and satisfaction (measured using the System Usability Scale - SUS).
Lostness was quantified by considering the number of different pages visited (N), the total pages visited (S), and the minimum number of pages (R), with clear criteria defined for consistency across all five evaluators during the assessment.
Smith, P.A., 1996. Towards a practical measure of hypertext usability. Interacting with computers, 8(4), pp.365-381.
Given that the Heuristic evaluation conducted primarily focused on aspects such as delivery, filtering, returns, checkout, sizing, search, and product descriptions, the decision was made to categorise the evaluation tasks into three main groups:
Task 1 Result
Task 2 Result
Task 3 Result
The evaluation revealed that Participant 2 (P2) faced notable challenges, especially in Task 3, which took 2 minutes and 11 seconds—nearly three times longer than Task 1. P2 navigated through 11 pages, exceeding the optimal seven, with a lostness score of 0.5.
Key issues included difficulty finding the zip code input field, leading to incorrect navigation to the checkout page, highlighting a loss of information scent. In Task 2, P2 spent additional time searching for and verifying the correct size in the size guide, doubling the time taken for Task 1. These findings will inform targeted redesigns to improve the user experience.
Quantitative Evaluation Lostness Score and SUS score
From the evaluation, it is evident that Task 3 posed significant challenges for participants, with a lostness score exceeding 0.4 for 4 out of 5 participants. This indicates notable confusion, particularly with sub-tasks such as checking delivery times using the postal code and locating the return policy, including the timeframe for returns.
The SUS scores revealed that P1, P3, and P4 scored 30, 27.5, and 40, all below the ‘not acceptable’ threshold of 50. P2 and P5 scored 55 and 65, respectively, indicating marginal satisfaction within the 50–70 range. Notably, no participant achieved an ‘acceptable’ level of satisfaction, as no scores exceeded 70.
Qualitative evaluation
Based on heuristic, psychological, and quantitative evaluations, finding the right size and locating delivery dates with postal codes were key challenges. To explore why 4 out of 5 participants felt disoriented or abandoned tasks, a targeted scenario was created for qualitative evaluation.
Scenario for qualitative evaluation and the ‘Think aloud’ method
The qualitative evaluation used the "Think Aloud" method, where participants shared their observations, actions, thoughts, and emotions during testing. The process was screen-recorded, capturing mouse movements, facial expressions, and spoken commentary.
Usability issues
.png)
New Heuristic issues
Evaluation insights
To prioritize usability issues, evaluation results were consolidated into an empathy map, capturing user actions, thoughts, and emotions during tasks. This approach provided actionable insights to refine the design and elevate the user experience.
Empathy map and Usability Issues Categorisation Base on Top Tasks
After completing the empathy map, data from heuristics, psychology principles, quantitative and qualitative evaluations, and accessibility testing were organized using a Top Tasks categorization method. Key tasks included Delivery (9%), Sizing (9%), Product Description (7%), Filtering (5%), Returns (5%), Search (4%), Checkout (4%), and broader Usability Issues. Post-it notes were color-coded: orange for heuristics, green for quantitative evaluation, and blue for qualitative evaluation.
The findings were organized by identifying key usability issues, analyzing their impact on user behavior, and understanding their relevance to usability outcomes.
Stage 1: Observations (What you saw/heard) : Identify 2–3 primary usability issues based on observations or measurements, marked in purple.
Stage 2: User Behaviour Insights (What it means) : Analyze each issue to understand its impact on user behaviour and its relevance to usability, highlighted in yellow.
Stage 3: Usability Outcomes (Why it matters) : Explore the broader implications of the findings, considering usability and user outcomes, marked in blue.
Process of pulling out the findings
Using the prioritization matrix, insights were ranked based on impact and usage.
Top-Right Quadrant: 5 critical issues fall under "High usage" and "Cannot complete the task," requiring immediate redesign focus due to their severity.
Left-Hand Side: 3 less severe issues with lower usage, though not preventing task completion, will also be addressed during the redesign.
Prioritisation matrix
Redesign
In the process of examining website usability, various issues came to the forefront, revealing opportunities for enhancements in task clarity, user communication, and quantitative observation standards.
Drawing from the insights, I concentrated on three primary enhancements:
Key 1: Streamlining navigation to minimize user confusion and improve wayfinding.
Key 2: Incorporating clear feedback mechanisms to give users a stronger sense of control.
Key 3: Refining the visual design to uphold Saint Laurent’s luxury image while boosting readability and accessibility.
Homepage
Product list page
Product detail page
The redesigned version was subjected to another usability test, which resulted in a significantly higher SUS score of 85, confirming the success of the improvements. Additionally, users experienced a 25% reduction in navigation time and described the overall experience as more intuitive and aligned with a luxurious brand identity.
