Examples of sugestions from the UX audit deck
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 research findings. Who are the users?
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.
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
What is the problem? How should we formulate a solution?
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.
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.
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
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)
weather conditions (rain or cold weather) etc
We reviewed the priority of the way information was presented on the page in general.
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.
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.
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.
After weeks of design, these are the updates made to the initial release of the SportShoes.com 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.
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.
Using Figma, an interactive prototype was built with high-fidelity page designs.
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 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.
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.
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.