Specialty Running Store: Case Study
7 min read
Brief
Design the website of a running store
My Role
User Researcher
UX/UI Designer
Design the website of a running store
My Role
User Researcher
UX/UI Designer
Timeframe
3 Weeks
Software
Sketch, InVision, Miro
Principle, Photoshop
3 Weeks
Software
Sketch, InVision, Miro
Principle, Photoshop
The Problem
What would it look like if we could elevate the e-commerce experience of a small, niche, specialty running store to match the in-store experience? Better yet, what if the two storefronts worked together to create an unparalleled customer experience? These were the questions I explored over the past few weeks. To bring the physical shopping experience into the digital space, I needed to discover what made a specialty store valuable to the running community.
Competitor Analysis
In order to understand the running market I took a high level look at the offerings of specialty stores of all sizes and contrasted this with box stores.
The unique value proposition relies on the specialization of employees as well as their community engagement.
Specialty Inventory Considerations
I needed to analyze the inventory of the store to see if there would be any insights for a specialty store's digital organization, so I did a card sort with two types of users; runners and non-runners. This allows me to see if the sorting of inventory on the website is straight forward or if there are any outliers.
Participants consistently grouped well-known products with ease. However, niche products like vests and poles emerged as troublesome outliers that people found difficult to sort.
To address this unfamiliarity with some of the product categories, I knew I would need to incorporate user-friendly features on the site that offered the same guidance as a seasoned in-store employee. These features include pre-made kits for different running styles as well as simple ways to filter products based on a user's needs.
Interviews
With these elements in mind, I began my interviewing process. As with card sorting, I sought out people who were new to running and experienced runners of many different styles. I compared my 6 in-person interviews with online reviews for various running stores. I took this data and did an affinity map of my results. The trends that emerged were user expectations, concerns, and community involvement.
Insight
My synthesis resulted in the realization that people, in general, do not trust large box stores and want the expertise of a specialty store. However, while people find specialty stores more desirable, they are more concerned that the employees may try to up-sell them. To avoid overpaying, these customers do not want to shop without having a basic understanding of the sport and products. The allure of the specialty store is built on a fine balance of trust. Any runner knows that the process of finding the perfect shoe can be hard on the wallet.
Selecting the wrong pair can actually affect your health. A shoe that fits poorly or does not accommodate your unique arch may seem fine at first, but cause problems, such as repetitive stress injuries, after it is too late to return it.
This costly trial-and-error experience means that newcomers will inevitably be intimidated by the knowledge barrier. Plus, experienced users may default to buying the same shoe for years to avoid this pain point. Because users displayed hesitation to go to a specialty store but would ultimately benefit from doing so, I needed to create a solution that empowered the user to shop with confidence — without doing weeks of online research. With this I created a journey map of someone trying to break into running that I compiled based off of 6 interviews.
People need a simple and intuitive way to gather personalized running shoe recommendations before purchasing from a specialty running store to avoid the pitfalls that come with shopping uninformed.
Defining The User
I needed to focus my data synthesis into relatable people, so I created two personas, Dan and Amy. Dan is the synthesis of the running newcomer who has the motivation to get a nice pair of shoes, but who is also uncertain due to his knowledge gap. Meanwhile, Amy is an experienced runner who has been buying the same shoe for seasons. Now that she wants to try a different style of running, she is hesitant because of the pain points around finding a new shoe that fits her needs. Both of these users would benefit from a user-friendly, informative e-commerce experience that eliminates the guesswork.
Exploration
I started by building a sitemap for the website that included a fleshed-out product flow. Then with this architecture in mind, I began hand sketching ideas for the tailored search feature. Initially, I was drawn to the idea of users creating an account when they got to the site that would ask them questions about their shoe search. So I worked on enticing landing pages and pop-ups that prompted the user to do so. When I tested this, I quickly realized that most users would like to "window shop" without the pressure to create an account. After that, I focused on developing the home page and creating a call to action that would invite newcomers to use the approachable search functions to tailor their shopping.
Solution
By creating an online e-commerce presence—with an accessible question-based product-finding feature—that cohesively aligns with the specialty in-store experience. Users interested in buying running gear can streamline their journey and overcome common shopping challenges.
The search feature had to use accessible questions and language that would translate to product specifications in an easy to understand way. To accomplish this, I incorporated simple UI elements that refine the user's search as well as communicate each shoe's specs. I created a low-fidelity prototype of these concepts in Sketch and began testing in InVision.
Linking Physical and Digital
In my testing, I found that there was a lot of value in creating an option where you could send your cart or wishlist to the store. The online service would allow them to explore their options on their own time, before passing their information on to the store and heading in for a confident, personalized shopping experience. This allows the user to arrive to try on products with curated information already prepared, shortcutting the research and intimidation. This resulted in my two user flows for Amy and Dan, respectively.
The site had to serve both a power user who knew what they wanted as well as a newcomer who wanted to tailor their search. Then, it would send their information and favorites to the store, elevating and bridging the online and in-store experiences. This informed my mid-fi prototype which I used to test the discoverability of these features.
User Testing
For user testing, I focused on understanding how participants found and interacted with the search customization feature and the send-to-store function. Initially, users overlooked the customization feature because the banner copy wasn’t actionable and they followed the common patterns for product finding. As a result, I improved the readability and hierarchy of this feature on both the home page and the product listing page.
The feature of sending to the store was also overlooked and understood as “pick up in store”. I solved this by creating a tool tip for this feature that informed the user that this unique feature prepares the employees to offer a customized experience when you arrive at the store.
Visual Design
In order to capture the identity of a small running shop in Denver, I utilized forest green colors paired with a bright and energized burnt sienna. This color scheme speaks to the elements of nature that I attribute to trail running and Denver, while using a high contrast sienna for call to actions.
These colors, combined with Helvetica and organic shapes, create a fun yet professional visual design meant to instill trust while maintaining a unique brand. I tied everything together with a minimal logo of a running shoe.
I created a mockup based on my research and user testing of the low and mid fidelity prototypes. This design is responsive and retains key elements and features on both desktop and mobile. There are platform-specific design elements as necessary. I kept the styling organic to resemble momentum and the nature of the sport.
When approaching a website that has inventory from many different brands, I wanted to make the products visually cohesive. I did this by removing the background from each product photo and adding a drop shadow, making each item looks unified and clickable.
Overall, I believe this design successfully simplified and added excitement to the shoe buying experience.
Interaction
When composing the animations, I focused on creating an engaging experience while maintaining the context of the products in the user’s view. For example, as the user answers the running style questions in the custom search feature, the product cards move to align with those filters. This movement is a departure from the usual website product filter that resets the selections with every click, and allows the user to visualize how their answers curate the selection.
When a user selects a product on the mobile site from the product listing page (PLP), it smoothly transitions to the product detail page (PDP) with a captivating animation. The product card shrinks and becomes the backdrop while the shoe grows and rotates, finishing with a bounce. A user will likely click from the PLP to the PDP multiple times during their site visit, and the use of an enticing visual element like this animation will support continued engagement.
Take-aways
In retrospect, this design was heavily influenced by the input I received from current runners. These people frequent similar sites and have firsthand experience with the challenges of shopping for shoes. Runners firsthand insights lead to the discovery and implementation of time-saving features that bridge the gap between online and in-store shopping and simplify the digital experience.
A phase two would consist of user testing the hi-fidelity mockup and refining these features as well as elaborating on other pathways of the website, such as the community events and about pages. These steps would finalize the current design for real world implementation.
