Seven Hills Running Shop
Project Brief
Providing Seven Hills Running Shop with a sleek re-design and an updated e-commerce feature
Research Categories
Based on the initial project objective, I interviewed 6 local runners in the Atlanta, Georgia area. The notes I took during the interviews led me to categorize my research into 7 distinct categories, with 12 “I-statements”. Additionally, I had 13 unique user interview takeaways from the 6 runners. In those user interviews, I conducted usability testing on the original Seven Hills Running Shop website to gather data on how to best re-design the website. The 7 categories gathered from my affinity mapping and the 13 interview takeaways are listed below the initial usability testing results!
Initial Usability Testing Data
In conjunction with the initial user interviews, I conducted initial usability testing with the same interviewees. My research was crucial to understand the issues that the website has so I could understand certain pain points and goals of my users. From this initial usability testing, I gathered the information to both better understand the goal of re-desigining the e-commerce feature and categorize my research to create an affinity map and a persona. The following data is what I gathered from my 6 users:
Average time took to complete “happy path”: 8 minutes, 16 seconds
Total number of errors (misclicks) / number of possible errors:
4 / 15
Additional observations:
⅚ of the users completed the primary path within the success time
Many were frustrated with the lack of working links
The Product page didn’t give a ton of insight
The checkout page was the most intuitive part of the process
Wanted to see a loyalty program
User Interview Takeaways
Users seem to desire consistent and professional service at a running store.
Users seem to have high levels of brand loyalty.
Users seem to mostly run by themselves.
Users seem to desire a chance to run with others if possible.
Users seem to want a running store that offers a variety of products.
Users seem to wear a number of different running shoes.
Users seem to desire their runs to be highly accessible.
Users run because it is a better alternative to other sports and fitness.
Users seem to be relatively familiar with e-commerce websites such as Amazon.
Users seem to want an efficient online checkout method if shopping virtually.
Running seems to cater to people with a background of a variety of fitness levels
Users seem to be very wary of their time when shopping.
Users seem to get frustrated by poor store experiences.
Problem Statement
Users need a running store that provides an efficient online shopping process so that they have easy access to a wide variety of high-quality products.
Following the user interview takeaways, I realized that there were a lot of hurdles users faced when the need for efficiency. However, I decided to broaden my scope because I wanted to focus on the purpose of the e-commerce feature, which in essence is intuitive and efficient. Additionally, since the main source of gear for runners varies based on the person, I realized that my problem statement needed to be somewhat broad. Based on this information from both my interviews and the varying backgrounds of fitness, I came up with the statement below.
This next section is to hone in on the scope that I found, based on my problem statement and interview takeaways. The following are my “How Might We” statements, Persona, Retrospective Journey Map, and Information Architecture for the redesigned website. The purpose for the “How Might We” statements and persona is to highlight the scope of the project, while not limiting the scope to find one specific solution. Additionally, they are developed for this UX project for the possibility of “What if I want to revisit this project later on?” The scope is important because it allows me to examine all pain points and interactions users will have with the Seven Hills Running Shop website. The journey map is to help the persona pinpoint where on the website users will find those pain points. Lastly, the information architecture is to help me have an organized, coherent idea of how I will design the prototypes that are to come at the end of the project.
How might we….
……provide a running store website with efficient online shopping features?
……improve our lines of product for our customers?
……help our users find shoes to fit their needs?
……cater to the training level of our users?
Thinking:
Limit the damage done to my feet
I hope to start training within the next couple weeks
There are so many issues with shipping
I live in Atlanta, and the store is in Seattle
Touch Points:
Home page
Product page
The shoe page
Other running shop websites
Martin’s Previous Journey
Scenario: Martin needs to buy 2 new pairs of shoes to train for a marathon he’s running in 9 months.
“I love Seven Hills Running Shop for their great customer service, but since moving to Atlanta, it has been difficult to find a store I really enjoy. I will be ordering my shoes from Seven Hills and have them shipped to me.”
Step 1) Want new shoes
Pain Points:
The home page seems a little dated
Which tab do I pick to shop for shoes?
Step 2) Start shopping for new shoes
Thinking:
Where are the shoes?
Why are the links broken?
There are only 2 products with working links
Touch Points:
Shop page
Product page
Pain Points:
The links are broken
Why are there only 2 featured products?
Finding the shopping page isn’t intuitive
Hoka One is the only brand listed
Meet Martin, the persona for this project
Needs timeliness, wants social connection, efficiency, professionalism
Frustrated with lack of store consistency, busy schedule
Runs 4-5x / week
Online shops for most everything
Busy schedule
Wants to stay physically fit, have brand loyalty; meet new people; improve mental health
Step 3) Find new shoes
Thinking:
Some products are at least listed
I can’t navigate to find a help page
I am frustrated and annoyed with the lack of working links
There was a lack of an intuitive process to find the search results
Touch Points:
Shopping page
Featured products
Shoes page
Pain Points:
I can’t get back to the home page
Why is the e-gift card featured on the shop page?
Hoka One is the only brand listed
Step 4). Choose a pair of shoes
Thinking:
I am glad these shoes at least have sizes listed for men and women
I am frustrated and annoyed with the lack of online selection
I can’t find a link that takes me back to the search page
Touch Points:
Men’s featured shoes
Home page
Customer service page
Pain Points:
I wanted a pair of Brooks, but I couldn’t find them on the shopping page
I ended up going with a pair of Hoka Ones
The customer service page was nowhere to be found
Step 5) Checkout
Thinking:
There is free shipping if I spend over $100
The checkout page is straightforward
I can choose to pick my shoes up in the store
There is no status bar for the check out process
Touch Points:
Shopping cart
Payment info page
Checkout and confirmation
Pain Points:
The customer service page was nowhere to be found
I’m satisfied with my new pair of shoes
Martin’s prep for his marathon in 9 months. It starts with a new pair of shoes
In order to create an effective experience for all users of Seven Hills Running Shop, I created a user flow that Martin could follow to buy a pair of shoes using the website’s new online shopping feature. He needs to enter in his gender, shoe size, and the colors he desires for his shoe. This takes Martin on a path to buy only a pair of training shoes. A typical user flow can be as simple or robust as the project or research team desires! That is the fun of these particular parts of the project.
Sketches
Once the user flow was completed, I took some time to sketch out what UX designers call “the happy path”, or the most efficient path through an app or a website to achieve the desired result. I created 12 sketches, with one that is a duplicate, to plan out the prototype of the website.
First Race: Low-Fidelity Prototype
Once I completed the user flow and sketches, I was ready to start work on the prototype including the new, functional e-commerce feature. Above are some of the screenshots from the low-fidelity prototype that I developed. I did not collect data from the usability testing completed on this iteration of the prototype.
Second Race: Mid-Fidelity Prototype
I realized I needed to include some additional detail from my low-fidelity prototype in my mid-fidelity prototype. I decided on a style guide, which included the same branded green that 7 Hills Running Shop used for their website. Then, based on a custom color pallete, I added 4 different colors to the prototype and website. I added pictures, a new font, icons, and components. Once I had done these things, I added in the interactions that would be available for users. Finally, I tested the prototype against the original website, and found some helped data.
I ran this prototype through 3 usability tests with 3 separate users, who were also runners from the Atlanta area. I found the following data from my mid-fidelity usability testing:
Average Completion Time for the Happy Path: 6 minutes, 37 seconds
Total number of errors (misclicks) / number of possible errors: 0 / 10
Additional observations:
All the users completed the primary path within the success time
The font size was striking to some of the users
The home buttons felt basic
Be inclusive of the sizes of the shoe for the user
Final Race: The High-Fidelity Prototype
Following the mid-fidelity prototype, I used the data from the usability testing on the mid-fidelity prototype to inform the design of my high-fidelity prototype. Although the average time users spent purchasing shoes decreased, the flow could also have been more intuitive. On this final iteration of the project, I realized that the fonts, header, footer, and primary buttons needed to be changed to stand out. I redesigned both the header and the footer to include more links, made the shopping buttons more interactive, and changed the shopping page to include a clickable filter. Only one path, the “happy path”, works. The pathway to practice purchasing a pair of Brooks Ghost shoes is available. Please see the high-fidelity prototype in the block below:
Next Steps
Once I completed the high-fidelity prototype, the project was completed. For this specific design, I did not include high-fidelity usability testing. However, for future iterations of this website redesign, I would take the following steps into account. I also do understand future versions of a website such as this, to be more accessible to those with learning differences, can be intuitive and fun at the same time. Because running is a very social and often fun sport, I need to keep that in mind. As always, these projects must have an open door for potential future iterations. Please see the following next steps below!
Complete additional usability tests on high-fidelity prototype to see how users respond to the updated features
Update the high-fidelity prototype for A/B and beta testing
Add more working product links to the website
Make the fonts more accessible to those with vision differences.
Provide animations to the site
Include low-fidelity usability testing data and use that to inform future prototypes