Examples of sugestions from the UX audit deck
SportShoes.com
A more efficient shopping journey for seasoned runners
SportShoes.com is a leading UK online running retailer with a broad range of over 15.000 products.
Their typical customers include experienced runners, members of running clubs, Ironman competitors, adventurers, trail and outdoor enthusiasts and individuals interested in fitness.
The challenge
With the rise of the internet and personal devices, many consumers now opt for the convenience of purchasing their athletic footwear online rather than through brick-and-mortar shops. SportShoes.com is falling behind its competitors who have stronger online platforms.
My role
Led UX research and developed user journeys, wireframes and prototypes.
Collaborated with another designer on the UI features.
Worked alongside a Project Manager, Business Analyst, Frontend Developer and two Backend Developers.

Research
We wanted to understand the user behaviour and decision-making process regarding buying athletic footwear in general and uncover current pain points that customers experience when looking for and selecting athletic footwear on the SportShoes.com site.
We also wanted to analyse SportShoes.com's direct competitors to examine how athletic footwear is currently sold online and identify areas to improve upon.
User interviews
We ran five user tests where I recruited a set of users in our target demographic. Participants were given a scenario to get into the right mindset before starting the test. A full test script was created and users were prompted to perform a number of typical tasks throughout the test.
We started with general questions about their behaviour when looking for shoes: what is important and which factors go into deciding which shoes they want to buy.
Then we asked more specific questions regarding the SportShoes.com website, for example, what they expect to see on the product page or what they expect to see on the following page before clicking on a certain CTA button.
UX Audit
Part of my role was also to consult the client on e-commerce and usability best practices.
I looked at SportShoes.com's current website and made specific suggestions for improvements across the shopping funnel: homepage, listing page, product page and checkout. Improvement suggestions have been illustrated with industry statistics and inspiration from ‘best-in-class’ e-commerce websites.

Competitive Analysis
It was important to understand competitor strategies and see if there are any areas of improvement to existing methods. In particular, SportShoes.com needs to differentiate itself by being an expert and by guiding its customers to the right product for them.

We researched 5 of the major competitors to gain insight into their UX and determine which features made them stand out.
Common Features
Many competitors offer a shoe advisor tool.
Many competitors provide category-specific filters for all key product specs. For example shoe width, or heel-toe drop (which is the difference in the amount of material under the heel and the amount of material under the forefoot of a shoe).
On websites with large data, the categories and subcategories are divided into more manageable chunks.
Customer Survey
We used short, on-page surveys to ask site visitors about their impressions of the user journey. This would help to uncover simple improvements that could be executed quickly.

Example of on page customer survey question
For example, we learned that some respondents wanted a filter for running distance since marathon runners need different shoes than 5km runners.
‘You could have another filter based on the distance that the runner is planning to do.’
'Better search parameters. I wanted to find a pair of trainers for myself, but no easy way I could see to limit it down to what I wanted. Adidas / Men's / regular trainers / also the color is a great way to search by. I didn't want to spend ages looking, so didn't bother.’
Synthesise
Synthesise research findings. Who are the users?
User Personas
Research findings were synthesized to create our four target user personas. These personas were used throughout the product design and usability testing phases to ensure we were addressing the user’s needs, wants and limitations.

Our four target user personas
We broke down the users by their attributes, pain points, motivations, goals and brand preferences and segmented the main users into four groups:
First time marathon runner
Regular marathon runner
Regular 5km runner
Back to running after a break
Define
What is the problem? How should we formulate a solution?
Feature Requirements
To prepare ourselves for the next phases in the design thinking process, we outlined SportShoes.com’ business goals, our users’ goals, and technical considerations that must be accounted for in our development.
With insights from our research and the project goals clearly defined, we identified a list of key elements that would be needed to be included in the website design.
Each feature is backed by research data or project goals and then prioritized based on its importance and cost.

This mural bord allowed us to fully determine our solution’s features list and prioritize them.
Features
Without getting deep into all 30+ page designs, I have chosen only the Listing Page and Product page to showcase the feature choices we made.

The original website: Listing Page (left) and Product Page (right)
Based on the features defined during the strategizing workshops, I began to construct the user experience flow in sketches and wireframes. During design, I focused on fleshing out the following:
Shoes Finder feature
Bringing guided selling online is really important in order to be able to sell running shoes in the right way. In short, in a way that:
educates the shopper
helps them choose the right pair for them
makes the shopping journey frictionless and fun
Advanced filtering
With over 15K products and different customer types, the user still needs to feel like they can easily find what they’re after. This is why we introduced advanced filters like:
the drop (heel-to-toe distance)
stability (neutral or stable)
shoe width
weather conditions (rain or cold weather) etc
Product page
We reviewed the priority of the way information was presented on the page in general.
User Flow
For the Shoes Finder feature, a user flow was created to identify the different paths that a user would take to complete the task. This would allow us to make sure that we consider these in the final design.

User flow snapshop exploring the Shoes Finder feature
We included a tooltip for each step of the process— as we had in mind the user persona with less experience with this type of terminology.
Create & Iterate
Design and iterate on the solution.
Sketches
The first step of the design phase was to take pen to paper and sketch ideas for some of the main screens. These low-fidelity wireframes helped me to determine layouts and establish a visual hierarchy.

Example of early stage li-fi wireframe design for the Shoes Finder feature
Designs
After weeks of design, these are the updates made to the initial release of the SportShoes.com shoes finder feature.

Selection of pages (steps) of the Shoes Finder feature.
I started working on a few key screens in low-fidelity to find the best solution in terms of usability and personalisation. After testing and refining, the overall layout started to shape:
The Shoe Finder asks questions about the shopper’s goals.
The final product recommendations show one ‘Best Choice’ product and three ‘Alternatives'.
Clicking on the shoe’s profile brings the user to the shoe’s detail page.
Alternatively, the user can choose from other matching results.
From the sketches, a final product page was designed that would effectively allow users to view SportShoe's product offerings and complete their goals.

Orignal Product Page design (left). New Product Page design (right).
To address the biggest user pain point of hidden information and a non-intuitive layout, the final product page designs bring out main feature information higher on the page, reducing the amount of heavy text and replacing that with rich image content. As we learned from research, when users are looking for shoes they open 10-15 pages to compare products and don’t have the time or the intention to read all that long product description.
We exposed the shoe sizes which reduces the number of clicks and helps users find what they are looking for faster. We learned from GA that this is what they clicked on first on the old PDP.
We also reviewed and added a new ‘a size and fit’ section to increase customer confidence in buying online.
Prototype
Using Figma, an interactive prototype was built with high-fidelity page designs.

Shoes Finder interactive prototype (desktop)
Usability Test Plan
With the interactive prototype completed, we then executed usability tests to inform us of crucial UX issues that may need to be revised. The tests focused on the following objectives and user tasks:
Test Objectives
Test the level of ease in navigating and using the site.
Test whether users can complete a task flow on the site (get a pair of athletic footwear for a marathon).
Identify the path(s) that participants take to complete their task.
Observe any user frustrations, difficulty, or confusion during tasks.
Tasks
Navigate to the Shoes Finder page to learn more about it.
Start and complete the online shoes finder process for finding shoes for running a marathon.
From the list of results, filter for the cheapest offered.
Add product to basket.
Roadmap
I worked with the rest of the project team (product owner, developers, and business analysts) to analyse feedback from the usability tests.
Each observation was recorded and categorized on the Mural board to create a roadmap matrix. Records were grouped by the impact on the user experience and section of the prototype.

Roadmap matrix grouped by effort and impact