Overview
Through user research, participatory design methods, and usability testing, I identified barriers affecting navigation and cognitive load, and translated these insights into a more intuitive, inclusive interface. The final prototype demonstrates how targeted accessibility improvements can significantly enhance the overall user experience.
Challenge & process
The challenge
Using a participatory design approach, I involved a user throughout the design process, from research and prototyping to usability testing, to develop a solution grounded in user needs and universal design principles.
The process
-
01
Understanding the design approach
Explored participatory design principles and how to apply them throughout the project.
-
02
Defining the accessibility focus
Reviewed WCAG guidelines and selected a specific universal design challenge to address within the project.
-
03
Conducting initial user research
Interviewed a participant to identify usability issues and accessibility barriers.
-
04
Exploring design solutions
Prioritised design opportunities based on user research findings.
-
05
Designing and testing lo-fi prototypes
Created and iterated low-fidelity prototypes through participatory usability testing.
-
06
Developing the final prototype
Refined the design into a high-fidelity prototype based on user feedback and WCAG principles.
Defining the accessibility focus
The redesign was therefore guided by three WCAG success criteria:
- 2.4.3 Focus Order (Level A) – Ensure content follows a logical and meaningful flow.
- 2.4.6 Headings and Labels (Level AA) – Establish a clear visual hierarchy through descriptive headings and labels.
- 3.2.4 Consistent Identification (Level AA) – Maintain consistent interface patterns to improve recognition and usability.
Understanding the user
Initial findings
-
01
The website feels difficult to navigate
The participant found the website chaotic and difficult to navigate, describing it as if everything was “just thrown together.” Products were difficult to find due to excessive scrolling and a lack of clear structure.
Key feedback included:“Many different products, but little information about them.”
“It’s quantity over quality.”
“The website is chaotic and badly organised.”
-
02
Product pages don’t match user expectations
The participant found that product links often led to unrelated or unexpected pages, creating frustration and disappointment. Poor content relevance made it harder to complete tasks and weakened trust in the website.
Key example provided was:“When I click on a product, I see everything else but what I want.”
-
03
The design makes the website feel untrustworthy
The participant felt the visual design was outdated and overwhelming, with cluttered images, strong colour contrasts, and poor typography. The overall appearance reduced credibility and made the participant hesitant to shop.
For instance:“It feels like the website is screaming desperation to sell.”
“It looks unprofessional and makes me feel like I might get scammed.”
Exploring design solutions
Potential solutions
-
01
Simplifying product information
Problem: The user struggled to find the most important product information because the page was cluttered and lacked hierarchy.
Design decision: Display only essential information first: a concise description, key specs, one main image, and additional images below. Remove unrelated content.
-
02
Reducing distractions
Problem: Unrelated products appeared alongside the main content, making it difficult for the user to stay focused on the product they were viewing.
Design decision: Rather than removing these products altogether, I decided to try moving them further down the page into dedicated sections such as "Recommended Products" and "New Arrivals". This allows users to continue browsing without interrupting their primary task.
-
03
Improving visual hierarchy
Problem: Cluttered layout, inconsistent spacing, and dense content made the interface feel overwhelming and difficult to scan.
Design decision: Introducing more whitespace and groupping related content more consistently to create a clearer visual hierarchy, making the page easier to navigate while also improving its overall credibility.
Focusing on high-impact improvements
Usability testing
Creating the prototype
After an initial review, I developed a second, more interactive version using movable post-it notes. This allowed the participant to rearrange elements during usability testing, encouraging discussion and making it easier to understand how they would expect the page to be organised.
Testing the prototype
Rather than asking the participant to design the page from scratch, I presented an initial concept based on the findings from the first interview. This provided a starting point for discussion while still encouraging them to rearrange elements, challenge decisions, and suggest improvements throughout the session.
The goal was to understand the following aspects:
- Does the new layout feel easier to navigate?
- Can the user find the most important information more quickly?
- What improvements would make the experience feel more trustworthy?
Key findings
-
01
The new layout felt more organised
The participant's first impression of the redesigned product page was positive, describing it as having "much more structure" than the original website. They found the two-column layout easier to scan and appreciated being able to browse product images without leaving the page.
-
02
Clear functionality mattered more than visual details
The participant placed greater importance on understanding how the interface worked than on visual styling. Clear affordances, such as button contrast, helped them recognise which elements were interactive.
"For me, contrast indicates something I can click on."
-
03
Need for more context before making a purchase
When exploring the prototype, the participant preferred having both "Recommended Products" and "Others Also Bought", explaining that each served a different purpose. They also suggested limiting each section to three products to avoid it being overwhelming.
Unexpectedly, they highlighted product reviews as an important part of the shopping experience, suggesting they should appear before product recommendations to help users make informed decisions.
Final design
Key design decisions
Clearer product information
- 1. The page title now clearly shows which product the user is viewing.
- 2. An image gallery allows users to browse multiple images without overwhelming the page with full-size content.
- 5. Information is organised into a clear two-column layout, displaying only content relevant to the selected product.
Better visual hierarchy
- 3. Buttons use borders and background colors to clearly indicate interactive elements.
- 4. Background colors separate different types of content, making the page easier to scan and navigate.
Increased trust
- 6. Product reviews provide social proof and help users make more informed purchasing decisions, increasing trust in both the product and the website.
Reducing distractions
- 7. Related products are grouped into dedicated sections such as "Recommended Products" and "Customers Also Bought", allowing users to discover additional items without distracting from their primary task.
Validation & user feedback
- The redesign felt more organised and easier to navigate. The participant found the product page significantly less chaotic compared to the original, which was the main goal of the redesign.
- The new structure supported product discovery. They appreciated the grouping of related products under “Recommended Products” and “Customers Also Bought”, as it made it easier to compare and understand different offerings.
- The design increased trust in the website. Product reviews, a simplified color scheme, and consistent typography made the website feel more professional and increased confidence in both the website and the products.
- Some opportunities remained for future improvements. The participant suggested adding a "back" button to improve navigation and further refining the site's overall navigation.
Reflections
Compared to the initial interview, I approached the usability testing session with more confidence and asked more targeted follow-up questions. This helped me uncover more specific insights, validate my design decisions, and identify areas for further improvement.
