THE SPORTS CONNECTION
A ski and snowboard business specializing in lightly used winter sports gear.
Client: The Sports Connection
Role: Lead UX Design | Interaction Design | Branding & Visual Design | UI Design
Overview
PROJECT BACKGROUND
The Sports Connection is a small ski and snowboard shop located in Mukilteo, WA. What started out as an experimental business in a home garage grew into a local business in 2012. The Sports Connection specializes in gently used ski and snowboard gear, as well as a limited selection of new items. The Sports Connection is a seasonal operation that is primarily open a few months before and during ski season.
OBJECTIVES
-
Design from scratch the responsive website for The Sports Connection
-
Develop or extend branding that aligns with The Sports Connections desired clientele and customer experience
Research
RESEARCH GOALS
1. Define The Sports Connections target demographic
2. Analyze competitors and compare services and products
3. Learn about current trends in the winter sports industry
4. Identify motivations, goals, and needs of The Sports Connections customers
5. Determine what has been working or not working without a company website
PROCESS: Market Research | Competitive Analysis | Contextual Inquiry Interviews
MARKET RESEARCH
The Sports Connection did not have a website and uses a Facebook page and Yelp for its online presence. The Facebook page is used mainly for providing snow conditions at the local ski resorts at Snoqualmie and Stevens Pass, as well as events related to skiing and snowboarding. The ability to promote products, services and location for users to learn more about the company lends itself to creating an additional online presence with a responsive website.
COMPETITVE ANALYSIS
To evaluate and learn who the direct competitors are, I selected five companies that provided similar services and products, and identified their strengths and weaknesses through competitive analysis.
CONTEXTUAL INQUIRY INTERVIEWS
To gain understanding of how customers generally purchase their winter sports gear and what are most important factors for a positive customer experience, I interviewed six participants.
- 4 Male and 2 Female
- All live with 25 miles of The Sports Connection
- 4 had never been in to the store before and 2 had been in the store at least once
Define and Ideate
GOAL: To understand the needs, goals, frustrations and motivations of users
PROCESS: Empathy Map | Persona | POV + HMW Questions | Business and User Goals
EMPATHY MAP
I organized my interview findings by creating an empathy map that helps to define patterns and understand the mindset of our users and what they say, what they do, how they think, and feel and any pains and gains.
I synthisized my research findings into essential needs and insights.
Groupings uncovered user insights, then needs were identified
INSIGHTS
1. Participants are more likely to buy when products are discounted
2. Participants are often frustrated by the purchasing process because there are too many options
3. Participants will choose the easiest method when searching for a product
4. Participants care about other customer experiences
NEEDS
1. Need to feel like they received a bargain
2. Need expert advice
3. Need convenience when shopping
4. Need to obtain validation from previous customer perspectives
USER PERSONA
Based on my interview research, and the insights and needs discovered from my empathy map, I created a user persona named Blake Andrews that provides a hypothetical user who embodies a potential user of the Sports Connection.
POV STATEMENTS & HMW QUESTIONS
Combining our insights and needs we came up with narrow Point of View statements that led to HMW questions that are not to broad and will help us frame our challenges when brainstorming possible solutions.
BRAINSTORMING
Writing our HMW questions on a white board, I generated as many ideas as possible for each question by writing them on a post it note and sticking them under each category. I gave myself 15 minutes per category to find solutions, trying not to overthink or discount any ideas
BUSINESS AND USER GOALS
After reviewing my project brief and notes from my conversation with the owner of TSC and the goals from my persona Blake, I created a Venn diagram that brings together our user goals, business goals and technical considerations and identify the commonalities between them.
SITE MAP
To see how I might organize and outline the content to convey the information at a high level view, I created a site map. This helps to formulate a blueprint for the content of the site and how the site might be organized.
TASK FLOW
To show at a high -level what decisions and pages a user might take when completing a task. I created a task flow that shows how a user learns about The Sports Connection from a Yelp review and decides to reserve a snowboard on the website.
USER FLOW
Keeping our persona Blake in mind, I created a user flow to discover the behaviors and decisions he might make when navigating through the site. I created two paths that provided different decisions and outcomes. One where Blake looks to have his snowboard waxed and research the services provided and a second where Blake is looking to sell his old pair of skis and wants to see how he can sell them to The Sports Connection.
Interaction Design
GOAL: Design mid-fidelity wireframes for responsive devices
PROCESS: Sketches | Mid-Fidelity Wireframes
LOW-FIDELITY WIREFRAMES
To begin to visualize the site and start a blueprint for the site structure, I sketched out low-fidelity wireframes using pen and paper with three variations of the Homepage, About Page, Service Page, and Products Page.
MID-FIDELITY WIREFRAMES
From my initial sketches and reviewing of the design patterns, as well as referencing UI requirements, task and user flows, I created mid-fidelity wireframes that focused on the basic layout and visual hierarchy. I created versions for desktop, tablet, and mobile to see how information would flow across responsive devices. This will provide the framework for our prototype.
Prototyping
USABILITY TESTING
To gather usability feedback about the basic functionality and flow of the website, I created a prototype using adobe XD in preparation for usability testing.
OBJECTIVES:
- To observe how user navigate through the website, calling out the pain points, and places of confusion
- To determine the overall usability and ease
- To observe how users completed the tasks required
- Using this feedback to help improve the rental process and Identify areas of improvement for the overall experience
USER TASKS:
We asked our participants to complete a series of tasks that would help us to discover any pain points, challenges, and insights on how they navigated through the site. Key focus was on overall navigation of homepage options, how to find directions and hours, learn how to purchase and sell gear, and how to complete a rental process.
RESULTS:
My usability test included five participants of three male and two females ages 29-40.
All participants completed the tasks at at a 75% error free rate. From these observations I was able to gather valuable feedback and observations that I used to organize into an Affinity map.
AFFINITY MAP
Using an Affinity map, I outlined our usability findings, calling out reoccurring patterns and feedback. These patterns and feedback led to insights that led to recommendations for improvements to the user experience. View full affinity map here.
Branding and Visual Design
LOGO DESIGN AND STYLE TILE
After sketching several iterations for the logo design, I came up with a final concept that encompasses the brand attributes of The Sports Connection. I chose to use a logo that connected imagery of mountains and provided movement. It connected the name with the elements of the landscape that is the playground of a winter sports enthusiast. The Colors were selected based off of design patterns after researching a variety of current outdoor trends in the winter sports industry. I chose a clean modern SanSera Font using Roboto because it has a variety of options within its Type face.
High-Fidelity Prototype
I created a high-fidelity prototype incorporating the brand look and feel and added in the imagery and color that helped enhance the brand presence. I also made improvements to the layout based off the recommendations. Some of the key elements that were changed in the high-fidelity prototype were adding a clear direction on buying gear and selling gear to the main navigation, enhancing the rental experience process by providing the ability to add another rental and shortening the checkout process. I also re-organized the layout for the rental selections by making the vertical columns horizontal so that users can clearly see the reserve button.
I created an animated prototype that shows how a user would navigate on a mobile device to rent a snowboard.
High-fidelity responsive wireframes were designed to show how the elements from the updated design will flow on a variety of viewports.
Gathering elements from the brand style tile and high fidelity mockup I created a UI Kit that documents the patterns and assets for future reference.
Outcome
-
Showing the key features of the business on the homepage right up front, makes it easier for users to learn about the services and products.
-
Creating a rental checkout process based on design patterns, provided a streamlined way for users to complete the rental transaction.
-
Strong imagery and action shots help align the brands look and feel and allows users to relate to the experience of winter sports.
-
Although The Sports Connection has a variety of merchandise, the majority of their products are gently used and they don't focus on a specific brand or have items that are consistent. This created a challenge when trying to show a broad selection of the type of merchandise they carry. Being able to purchase gear right from the website would be a nice feature but would require additional resources to update the inventory online.
-
Look for opportunities on how to sell specific products through the website to generate additional revenue.
-
Identify areas of improvement through user feedback
-
Create a section for future events or classes provided by The Sports Connection