Case study: A conceptual UX design project for a local sports shop
Energy Sports, Online
The Brief
To create an e-commerce website for a fictional local sports store, ‘Energy Sports’. They focus on great customer service, a curated range of trusted products and competitive pricing.
The project was to deliver a clickable mid-fidelity prototype.
Tools Used: Pen & Paper, Sketch, InVision, Trello, Miro, Noun Project, QuickTime, CloudConvert
My role
As a UX design student, the aim was to deliver on the brief in a two-week sprint, following the first three phases of the 4-stage double-diamond structured design process, namely, the Discover, Define and Develop phases.
Elements of the discovery phase were carried as part of a team of four UX colleagues, but for the subsequent phases, I worked alone.
PHASE 1: DISCOVERY
Competitive Analysis
With Energy Sports wanting to provide an e-commerce site that supported their values, we carried out a direct competitor analysis to understand what value-add services others, including a local competitor, provided.
While the sites all followed similar online store design-patterns, the services offered, both instore and online, varied significantly:
With this insight, I plotted where I believed Energy Sports would picture themselves on this service versus price quadrant. They want to provide the highest service, but with better prices than their premium competitors:
User Research
Key Customer Insights
To understand what real customers think about buying sports equipment, we conducted 6 interviews (4 females, aged 28-36, and 2 male, 30-47), sharing the results but carrying out our own analysis.
While football, hockey, boxercise and visits to the gym were popular, running was the most common activity (4 interviewees). Most preferred to shop online for their equipment, it was the challenge of getting perfectly fitting training shoes that provided them with a compelling reason to visit a shop.
Training shoes are challenging because:
- the wide variety of shoe styles (gym, running, road etc.)
- inconsistent fit and sizing between brands
- identifying the right shoe for their running style/gait
Fundamentally for Energy Sports, they would be willing to pay a fair price if they knew they would be a perfect size and fit for them.
How do customers expect products to be organised?
To ensure products would be easy to find on the site, we conducted 15 open card sorts (which Nielson Norman group suggest is the optimal number), asking the interviewees to sort 41 products stocked by Energy Sports into categories and then name them, using the online tool, Trello.
Then, using affinity mapping on Miro, I grouped the category names to identify patterns that users would find easy to understand. I labelled these: Shoes, Sports and Accessories.
PHASE 2: DEFINE
Persona
To summarise the key findings and pain-points that would need to be kept in mind from the interviews, I next created a persona, Jo:
PHASE 3: DEVELOP
Scenario & User Flow
To support Jo’s requirement, I captured this problem scenario:
Jo is running her first marathon next year and wants a new pair of trainers, to replace her old pair. As she is over-pronated, getting the right fit is really important to her. She’d like to purchase her new trainers and collect them today.
I then created a happy path user flow for the optimal selection and purchase process, including a new step I called ‘True Size’. This could eliminate two pain-points — finding the correct size and removing the need for returning wrongly sized shoes.
Site Map
The site’s primary navigation was created based on the product category insight from the affinity map, along with ‘About Us’ and ‘Advice & Contact Us’ to support the local shop feel. The secondary level was based on the card sort product groupings. Finally, other essential functions, such as the ‘Checkout Process’ and ‘Basket Page’ were added.
Ideation
Sketched Designs
I then created paper low-fidelity sketches for the key pages required to satisfy the user journey, only adding the minimum of detail in order to carry out usability testing with two interviewees. I asked them to follow the steps to purchase a pair of shoes and to help me understand their mental models by explaining what they thought at each stage.
This suggested the screens followed their expected model, except for the True Size overlay, where they both struggled, so I need to iterate the concept.
Usability & Iterations
The Low Fidelity Wireframes
Next, I created digital low-fidelity wireframes in Sketch. I decided to use a 12-column grid to bring consistency to my layout and improve the aesthetic appeal. To start building the clickable prototype, I used InVision which allowed me to introduce the clicks to progress through the user flow’s happy path.
Building on a recent article by Jeff Jimerson about the way people perceive breadcrumb trails at the top of screens, I opted to use the back arrow ‘<’ as this more logically indicates where you can go back to.
Testing the low fidelity prototype with 3 users identified:
- It followed the expected design pattern of an e-commerce site
“Ah, it looks like a shopping site” (3 users) - The multiple paths to find their product felt intuitive
“I can get to running shoes via multiple routes… that’s helpful” (2 users) - The purpose of True Size was still not clear
“Does this screen allow me to choose the colour?” (1 user)
“Oh, this looks like it’ll help me select the right size” (1 user) - On checkout, the ‘proceed’ button may be on the wrong side (1 user)
Building on these insights, I iterated the next level of visual fidelity.
The Mid-Fidelity Wireframes
At this stage, while keeping the palette black, white, and a single shade of grey, I added in text and simple icons to develop the concept to mid-fidelity.
When understood, users liked the idea of True Size, so I came up with a new concept in this iteration. I gained a lot of insight from the 3 mid-fidelity user tests:
The Home Page
While some commented that it’s primary navigation looked like it was from an earlier era of design, the overall look was liked by all three users.
- “It’s friendly & clear” (1 user)
- “I like the graphics” (2 users).
The Category Page
All the users liked the simplicity of the filtering options, allowing them to tick items they wanted to add to a filter, and then either pressing the cross next to the filter summary or unticking the filter box.
- “Easy filter. I like the options to cancel or tick” (2 users)
- “The filter options are obvious” (1 user)
True Size Overlay
Finally, this version of the concept worked well. With clear instructions, and still allowing the user to override the suggestion, the users liked this function and believed it could improve customer service.
- “This a pleasant surprise and it’s cool to be able to compare” (1 user)
- “That’s really easy to use” (2 users)
The Checkout Process
I also took this opportunity to expand the single page into three simpler steps to match the brief’s requirement. While it tested successfully some questioned why the ‘proceed’ button was on the left, even though this was immediately below the fields they would have completed. This would be an area for further work.
‘Small Shop’ Appeal
To increase the ‘small shop’ appeal, I incorporated the concept of the shop owner with context-appropriate shout outs throughout the store. Users commented that they appreciated the ‘local’ touch.
The Mid-Fidelity Prototype
The Animated Prototype
- Jo wants to buy a pair of running shoes, from the unisex range for her over-pronated feet.
- She wants to buy the Brooks Eazy 3 and to use ‘True Size’ to help her select the right size.
- She currently wears a pair of Nike Dreamer 3, size 10.5.
- She wants to buy them to collect from the shop later today.
Want to try a clickable version?
The prototype is available in InVision: https://bit.ly/3q0JfpI
Next Steps
While testers liked the True Size concept, I would look to iterate the mid-fidelity wireframes to a high-fidelity prototype, focusing on:
- How the True Size feature could work in reality.
- Improving the checkout process, including how the checkout proceed-to-next-step and back buttons should be presented and positioned.
- Review the spacing on the product page to further clarify the importance of customer reviews while improving the clarity of the happy path.
- Conduct more ‘real world’ interviews to validate the wireframes, but also to identify potential features that would increase return visits to the site.
What have I learnt?
This was my first project using Sketch and InVision, and I now feel I have a great foundation to develop these skills further.
I’m beginning to really understand the importance and power of giving the user interface plenty of room to ‘breathe’, making it easier to use and aesthetically more pleasing.
Fundamentally, from my experience with the ‘True Size’ concept, I’m not scared to try out new ideas to solve a user’s problem, but I need to be very open to user feedback to iterate the concept, particularly where it’s a novel idea that the user hasn’t encountered before.
Thank you for reading!
I’d love to know what you think and welcome your comments; all feedback will help me develop and hone my UX skills.
If you want to know how I can help you, please drop me a line!
