Role
UX designer, UX researcher, and visual designer. I worked independently with feedback collected from peers and my mentor.
Client
Monkey Wrench Bicycles*
Tools
Adobe Xd, InVision Freehand, Zoom, Adobe Illustrator, Photoshop
Timeline
4 weeks
The Problem
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.

Then COVID-19 hit.

Like many other shops in the area, 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.
View tasks being completed within the Monkey Wrench Bicycles site prototype.
*This is a speculative project. I am not affiliated with Monkey Wrench Bicycles.
My Process
I decided on a Design Thinking approach for this project. Design thinking breaks the project down into five distinct phases.
Empathize – During the empathize phase I focused on understanding the user through observation, and engagement.
Define –As part of the define phase I was able to synthesize the findings from my research into needs and insights that supported the changes that needed to happen as part of the project.
Ideate – Exploration during the ideate phase allowed me to generate ideas for potential solutions to the problem.
Prototype – Creating during prototype phase was an opportunity to build working examples of ideas that could be put in front of users for further development.
Test – The testing phase allowed me to further refine and improve upon the solutions developed during the previous phases.
Market Research
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.
Site: 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:
• How do cyclists book bike repair services online?
• What are common pain points when booking service online?
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.
Provisional Personas
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.
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
  • One former bike shop employee
  • One avid cyclist
  • One new rider
  • One looking to ride soon after a long break
  • One former triathlete
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?
Empathy Map
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:
  • a clear understanding of the scheduling process
  • easy access to relevant and helpful information
  • to see positive reviews
  • to be aware of required maintenance
  • the ability to see options for scheduling
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.”
Goals
Take care of what maintenance he can to keep costs down.
Running quick errands without the need for public transportation or ride-shares.
Needs
To be aware of required maintenance.
Easy access to relevant information.
To see positive reviews.
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?
Business & User Goals
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.
Product Roadmap
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.
Sitemap
With these details, the features identified in the product roadmap, and the project goals, I was able to build out the first sitemap.
Task Flow & User Flow
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.
Michael is booking a tune-up.
Michael is searching for a phone number to call the shop.
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.
Scenario
Michael wants a safe alternative to riding public transportation and he'd like to use his bike, but it needs a tune up.
Task: Michael would like to book a tune-up for this weekend.
UI Requirements
From these flows I could determine the pages and elements that would be required to support completion of the task.
Pages to Design
  • Homepage
  • Services
  • Booking
  • Confirmation
Low Fidelity Wireframe Sketches
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.
Mid-Fidelity Prototype
This prototype would serve as a scaled-down version of the product for my user testing.
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.
 Testing would determine if participants could:
    • Navigate the site
    • Schedule a service
    • Find contact information
    • Send a communication via the site to the shop
I also wanted to identify any pain points and keep an eye on the time necessary for participants to complete the tasks.
  My method for usability testing would be moderated, think-aloud, remote usability testing.
    • Participants would access the prototype via a shared link
    • They would think-aloud as they completed tasks
    • I would encourage explanation of decisions and impressions
    • I would record the session for review
    • I would refrain from providing guidance on how 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.
Scenario: You’re trying to avoid public transportation in light of the COVID-19 pandemic. You have a bike in your garage that you can use for simple errands. You’d like to schedule a safety inspection and follow-up on the status.
    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.
Affinity Map
I collected the observations from the testing into an affinity map. As I tracked each comment and click I began to identify patterns.
Insights
While the participants were looking at a mid-fidelity prototype with no styling and limited functionality, their concerns were valid.
Information – Participants want more information about the different services.
Status Update – Participants want to find a status update on the site. 
Readability – Participants feel the site is difficult to read.
Recommendations
Each insight I collected here gave me a recommended action to take.
Make information about the services available on the site.
Provide a status update on the site.
Improve the readability of the content.
Priority Revisions
I now had my priority revisions and could begin updating the prototype.
I included additional details about the services being offered, and made them available right on the services page.
I created new functionality where users would be assigned a confirmation number that could be later entered into the site to get a status update.
I improved the services menu, as well as increased the font size of the body content across the site.
Branding
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.
Monkey Wrench Style
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.
High-fidelity Prototype
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.
The Solution
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.​​​​​​​
Conclusion
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.
Next Steps
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. 

You may also like

Back to Top