Sun City
A responsive web design for a local bike shop
Problem and Solution
Finding services that are dependable and trustworthy can be tricky business. Jumping from store to store trying to find quality work, friendly customer service, and ease of experience can be very time-consuming. Sun City, a locally owned bike shop in Sun Prairie, WI needs a way to reach more people in the community while providing ways for users to easily book service appointments and trust that the employees are providing quality work and fair judgment.
I designed a responsive website for Sun City in Sun Prairie, WI that focuses on building trust within the local bike community by adding unique features that provide reliable and convenient communication, advice, and support. This will allow them to reach more people and provide more opportunities for those interested in biking and becoming more involved in the bike community within the Madison area.
Role
End-to-end UX / UI Designer
Duration
4 weeks - 120 hours
Tools
Figma, Whimsical, OptimalSort & Maze
Research Plan
To get started, I researched the cycling industry, local bike shops, looked at direct and indirect competitors within the space, and conducted user interviews. I used the following research methodologies:
Discovery
I first looked into Sun City and their business direction. I found that, yes they are a bike shop, but ultimately they are an outreach to the city. They provide competitive prices compared to other chain and local bike shops around the Madison area, but their user experience lacks personality and ease.
It wasn’t easy for new or existing customers to find important information regarding their bike repair services, the ability to book online with ease, or even truly see Sun City for what it is; a local bike shop with dependable, trustworthy, and caring staff.
How might we help local cyclists trust Sun City so that they are more likely to return to their store?
Competitive Analysis
With the cycling industry being such a large market, it is critical to understand both direct and indirect competitors. This will help Sun City set themselves apart from their competition. From my research, I found that more than half of competitors offer the ability to book services online. Some competitors offered users to chat with customer service, while others provided contact information in the form of email or phone number. I also found that all competitors offered their prices and service descriptions online.
In addition to direct competitors, I also researched how car dealerships such as Subaru and Toyota use an online booking tool to book service appointments. I actually found this research more helpful because it directly related to booking services, which was my focus.
Survey
Questions were designed to learn about biking enthusiasts' experience when using online platforms to book their next bike repair service. There were 11 Questions and 32 responses from novice to advanced cyclists
Key Takeaways
About 70% of users prefer to book a bike repair service online versus calling or going in-store to do so.
100% of users commented that the friendliness of staff, quality service, and fair prices are huge factors in determining if they will return.
User Interviews
How might we help local cyclists book bike repair services with ease?
After identifying potential users through my survey of moderate to avid bicycle riders, I conducted 5 user interviews to get a better understanding of the problem and of user pain points, desires, thoughts, feelings, and actions when it comes to how online booking tools help to provide and organize information.
Research Questions
What would make booking bike repair services easier?
What makes you go back to certain businesses? What do you enjoy about them?
What factors are important when determining which bike shop to use for bike repair services?
The Interviewees
I interviewed 5 people for about 30-45 mins. Here are some important highlights and quotes I got from the interview:
“A lot of people just want their answers now.”
“If the service was friendly and good, I would come back.”
“What they offer and are able to do should be very straightforward.”
Personas
I used the data compiled from my primary and secondary research to create a user persona. This persona reflects the target user for Sun City. With "Alex", we can better empathize with the target user throughout the design process.
So what's on this cyclist's mind?
Prefers to support local businesses.
Wants to find employees that they can trust with their bike repairs and services.
A shop where finding and booking services are easy and don’t take much time.
Values genuine and friendly service.
POV Statements + HMW Questions
After defining the target user, I created point-of-view (POV) statements to frame the insights and user needs. From these statements, I took it a step further and created how-might-we (HMW) questions to help encourage solutions for Alex's needs.
Setting Goals
Everyone needs goals, and so do our users and Sun City. Here, I explored both business and user goals, laying out the foundation of the organization for our new website. I then followed this up by visually seeing how a user might navigate through our new proposed website.
To start, I organized both business and user goals into one document by taking goals from the persona and business goals from the brief. I then identified shared goals and added some technical considerations as well.
Prioritizing Features
Next, I referenced the how-might-we questions, brainstormed as many solutions as I could, and chose several features to prioritize within the website. From here, I began organizing these features into the product roadmap. This allowed me to focus on the features that would be the most beneficial to both the user and business goals previously defined. Each of these goals was also given a priority level.
Card Sorting
To make sure that the site’s information architecture is aligned with user expectations, we had 6 remote card sorting sessions using Optimal Cardsort. Our goal was to find smaller, intuitive groupings for the existing 33 product categories. After organizing the data, we ended up with 6 clearly defined main categories.
Sitemap
Next, I created a sitemap in order to visualize how the information can be structured, allowing a user to navigate the site with ease.
Task Flow
To better understand how users will navigate through the site performing specific tasks, I produced a task flow diagram. This allowed me to think through the user's process and make sure all possible pages are developed to help the user gain the information they need.
User Flow
I created user flows to identify the functional needs of the product when in use. Using my feature map I developed 3 flows to show all the options the user would have when completing the following tasks from the dashboard:
booking a biker repair service
complete the bike assessment
chat with a team member
Throughout the entire process, these user stories helped me stay focused on the user experience. This was particularly important in the UI design stage and gave me a clear idea of the routes for my prototyping.
Sketches
To begin generating ideas for the layout of the website, I sketched out several low-fidelity wireframes of pages we identified based on the sitemap. I then proceeded to add more context to these sketches through mid-fidelity wireframes. My sketches were based on the initial user interviews, the business goal, and the heuristic evaluation. I came back to the sketches throughout the entire design process to make sure that I didn't lose sight of the primary goals and ideas.
Wireframes
I took my low-fidelity sketches and reproduced the chosen layout in Figma to create mid-fidelity wireframes. I also created both desktop and mobile views for each of the pages to understand the responsive layout. Going through this process helps me think about the overall hierarchy and visual layout of the website.
UI Design Kit
Words that kept coming to mind when thinking about Sun City were proud, dependable, affordable, and friendly. With those words in mind, I went to the drawing board and created Sun City’s UI Kit.
UI Design - Desktop
UI Design - Mobile
Prototyping
My next step was to create a prototype in Figma to test my 3 flows. I used this prototype to observe how successful users were at completing each task and to get overall feedback on the site’s visual information architecture.
Creating a Test Plan
I planned unmoderated usability testing of primary tasks and moderated usability tests for more insights.
My test plan clarified goals for usability testing and helped me measure outcomes.
Usability Testing
I conducted 2 in-person interviews and 5 via Maze. I wanted to assess their ability to complete the 3 tasks and get feedback about their overall experience, areas of strength, and suggestions for improvements.
My usability testing resulted in useful feedback gathered through the heat maps and misclicks that Maze provides and verbal feedback.
Test Objectives
Test if users can accomplish tasks successfully
Identify areas of difficulty with the website design that can be improved
Determine the overall usability of the website
Tasks
Book a bike repair service online
Complete the bike-type assessment
Chat with a member of Sun City's team
Affinity Map
The trouble users had was pretty unanimous, so I felt confident about which areas to revise.
I compiled feedback on my affinity map and then mapped the improvement opportunities on an effort and impact matrix, which helped me determine which revisions to prioritize.
Overall, the users were able to complete all 3 tasks successfully. However, there were still a few areas of improvement noted. The results from the usability tests showed that a majority of users expected to find the option to chat with staff on all pages rather than just the about us page. They also struggled to locate the option to chat with staff on the about us page because it was located at the bottom instead of the top.
It was clear that users just wanted a quick and easy solution to getting their questions answered.
Book a Service
Over 70% of users said they would prefer to book a bike repair service online rather than call or go in-store. This tool allows users to select the specific repair they need, choose a day and time that works best for them and then save the appointment to their personal calendar.
Chat with Staff
Throughout my research, it was clear that a common theme among users was the need for friendly and reliable staff.
Bike Type Assessment
It's clear that users need autonomy and trust. By using the bike type assessment, users can take the guessing out of which bike they need and find the one that's best for them based on their specific needs.
Takeaways & Next Steps
What comes next? If I were to continue with this project I would:
Conduct more usability testing to ensure the design changes I made resulted in a better user experience
Work with developers to implement the design and features of the new website
Design a product listing page for bikes, apparel, gear, etc.
Design a page with service descriptions and pricing
Overall, I felt I learned a good bit about both the cycling industry and how that industry plays a role in the local market. I believe I was able to get a better understanding of how to interact with users by conducting interviews and improving on an existing brand while maintaining the brand's core standards.