Create a user-friendly interaction point for users looking for repair services, especially during COVID when in-person booking is not an option.
A fully responsive site with intuitive structure to allow visitors to find the information they need on services and repairs, and schedule drop-offs.
Clear communication with clients, empowering them to research and book services, and track progress, increasing confidence in the service provided and in Monkey Wrench Bicycles.
User experience design
User research
Brand identity
Graphic design
"Whenever I looked for places, typically I'll go in and see A, if it's close to me, and B, if they have good reviews."
Monkey Wrench Bicycles (MWB) is a full-service bicycle repair shop that serves the Austin community. They want to provide fast friendly service and pride themselves on their integrity and expertise.
Like many other shops in the area, during COVID-19 they limited their operating hours and required visitors to wear a mask, but the new normal required visitors to be able to have access, from desktop or mobile, to a site where they would be able to accomplish tasks that might have previously been completed in person.
This is a speculative project. I am not associated with Monkey Wrench Bicycles.
The goals were to get Monkey Wrench Bicycles updated, with branding that aligned with the desired clientele, and inspired confidence in users that might be hesitant to visit a physical shop. To accomplish this, I focused on identity design and the creation of a mobile-responsive website.
Cycling is a popular pastime for the Austin community. As the pandemic limited social interaction, demand for bicycles saw an increase.
Survey data from U.S. bike manufacturer Trek has tracked this pandemic-fueled “Bicycle Boom” showing a 121% increase in leisure bike sales and a 20% increase in bike service and repair sales.
Source: https://blog.trekbikes.com/en/2020/04/16/national-study-reveals-u-s-cycling-behaviors-during-coronavirus-pandemic/
To focus further, I wanted to answer two questions:
I used the findings from my research to create provisional personas. My primary focus was to take the key demographic details I collected during my research and align those to three distinct users.
These provisional personas helped me focus my search for participants in the user interviews.
The user interviews provided the opportunity to further empathize with users and gather qualitative data regarding their needs, wants, pain points and behaviors.
2 Females/3 Males
Ages 34-62
I used open-ended and general questions to allow the participants to fill in with details that were personal to them.
If you needed bike repairs, how would you go about finding a bicycle repair shop?
What could occur during that process to keep you from booking your repair service?
Can you walk me through your experience of taking a bike to a repair shop?
Beyond the general patterns I was seeing in the market, I wanted to take a closer look at the competition. I conducted a competitive analysis for additional insight into the approach of Monkey Wrench Bicycle’s direct competitor, The Peddler Bike Shop, and indirect competitor, REI Co-op.
From the interviews, I took note of observations and kept my research findings in mind to create an empathy map.
The Empathy Map allowed for recognizing patterns that were identified during the interviews. These categories were turned into insights that further developed into user needs.
Users need:
These needs helped me to develop a User Persona and identify the key audience.
User Persona
Michael - 24 years old, Male
“I’ve been riding since I was a kid, and just always had a bike. It’s come in handy when I don’t have reliable transportation. I’d like to ride more, but I’d probably need an upgrade before I take it on a longer ride.”
Using the persona and the identified needs I could further progress through the use of Point of View Statements and How Might We Questions
How might we clearly display the schedule, so Michael knows what to expect from the availability for booking?
How might we give Michael easy access to information provided by the bike shop staff?
How might we make it easier for Michael to see positive reviews to help him make decisions about booking?
In the next phase of the project I attempted to make sense of the data collected during research. I started to create new perspectives from the user’s point of view.
Looking at the business goals that were identified in the project brief and the user goals identified in the user persona I explored where they might overlap so that I could identify necessary features to include.
The identified features were added to a product roadmap so that they could be further prioritized based on the impact and effort associated with each.
With these details, the features identified in the product roadmap, and the project goals, I was able to build out the first sitemap.
To ensure the efficacy of the proposed site architecture as displayed in the sitemap, I created a task flow to identify the main tasks that I expected users to complete on the site and define how it would be achieved.
This exploration was furthered by the creation of a user flow which added in additional details and defined a scenario for the flow. This allowed me to ensure that I would have all of the screens necessary to complete the tasks.
Michael wants a safe alternative to riding public transportation and he'd like to use his bike, but it needs a tune up.
From these flows I could determine the pages and elements that would be required to support completion of the task.
With my list of pages in hand, I began to create. Sketching allowed me to quickly layout how the details could be displayed for users to support a focus on service, access to important information, and clarity of service and pricing.
With the quick ideation that this method afforded I could determine the best approach from the variety of sketches that were created, and move confidently into my Mid-Fidelity Wireframes. The Mid-Fidelity Wireframes became my blueprint for the interface. Without the distraction of fonts and color, I could focus on the hierarchy to show priority and flow before implementing design details.
At each stage of fidelity, I wanted to be sure that the layout I was developing would easily translate for mobile devices as well. So this became the deciding factor for the service details and menu, the header and footer structure, as well as the page elements.
I utilized a grid to keep the elements consistent and opted for layouts that would easily conform to a stacked structure when viewed on a mobile device. At this stage, I wanted to get the product in front of users and start gathering feedback so I took my mid-fidelity wireframes and wired them up for my first prototype.
This prototype would serve as a scaled-down version of the product for my user testing.
To determine the usability of the site I again set to making a plan. This time for testing. My usability testing had very specific objectives.
I also wanted to identify any pain points and keep an eye on the time necessary for participants to complete the tasks.
I met with 8 participants for my usability testing. They ranged in age from 28-62 and each had experience with booking services.
Users were informed of the limitations, and told what to expect of the appearance. They were asked to focus on the usability of the site and freely share their impressions as they completed the tasks.
Their feedback allowed me to better understand what the site was doing well, and how it could be improved.
I provided the participants with a scenario and two tasks to complete.
Task 1: Schedule a Safety Inspection.
Task 2: Find contact information for the shop.
Participants achieved a 100% completion rate and 98.75% error-free rate.
The think-aloud method I was using also provided the opportunity to collect observations and impressions shared by the users.
I collected the observations from the testing into an affinity map. As I tracked each comment and click I began to identify patterns.
While the participants were looking at a mid-fidelity prototype with no styling and limited functionality, their concerns were valid.
Each insight I collected here gave me a recommended action to take.
I now had my priority revisions and could begin updating the prototype.
To begin the processes of developing branding for Monkey Wrench Bicycles, I reviewed the findings from my research and testing to identify brand adjectives:
Fast | Friendly | Honest | Competitive | Experienced
Each of these were combined to create a mood board focusing on logo, typography, brand color, and imagery, that I would use as inspiration for my design.
From the mood board I moved into sketching. I wanted to come up with ideas that were inspired by the images I collected, but that also met specific design requirements including balance, contracts, scaling and attention grabbing, along with special consideration for accessibility.
I sketched, narrowed down, vectorized, and finally came away with a logo for Monkey Wrench Bikes.
That, coupled with the brand colors I identified as part of my mood board exploration, allowed me to create a style tile that I would later develop into a full UI Kit.
I now had the design decisions necessary to begin my high-fidelity wireframes, and ultimately my final prototype.
Additional adjustments were made as the site came together to balance and refine the site. These changes were then reflected in the final UI Kit.
In the end I achieved my goal of creating a site that is fully responsive, easy to navigate, and allows users to schedule services online, while also learning about the services they’re requesting.
I learned a few lessons myself. It’s very tempting to want to immediately implement changes for each and every request from each and every user that interacts with the site. With a strict deadline, I learned the importance of prioritizing revisions to get a project done on time, make a big impact, and still have room (and a plan) for growth.
My high-fidelity prototype will take Monkey Wrench Bicycles and their developers to the next stage of growth for their company. With these tools, users will be able to interact consistently and with clarity at each interaction.
I will prepare for the handoff to developers and maintain the site, but I also want to continue testing and iterating on the design. I have features identified in the product roadmap to develop.
Additional content will be added to the site to give users the confidence to request and schedule services. Future iterations will be looking to create user account access for tracking scheduled services and suggested maintenance, with individual bike profiles for each user.
The overall goal with each improvement is to continue to grow the Monkey Wrench Bicycle community and continue to improve the user experience.
Provide the details of your project, request some time to chat, or just say hello.
