Bikehood Hub DC
Redesigning the digital experience for Gearin' Up Bicycles, a dual refurbished bike shop and job training program in Washington, DC
Overview: UX Academy Student Project
Role: UX Researcher, UX and UI Designer
Software: Figma, Maze
Product: Responsive Design
Timeline: 5 WeeksClickable Prototype
Bikehood Hub DC is located in a city with a newly biking infrastructure and competes other bike shops. Bikehood Hub DC differs from other bike shops by providing free community bike maintenance workshops and refurbished bikes to promote sustainable transportation. Bikehood Hub DC targets eager professionals who want to give back to the community. However,
In this project, I do a redesign of their website to ensure the digital experience increases potential donations and interests for the workshop events.
*Throughout this project, I refer to Gearin' Up Bicycles as Bikehood Hub DC for client's wish.
To further understand what areas to redesign, I first conducted an audit of the current website, taking inventory of the overall layout, navigation, and information architecture.
- No mission statement
- No clear call-to-action-items
- Parts of the page are not responsive
- The Twitter feed competes with upcoming events section
- Similar events are separated under two tabs
- Information about bike maintenance workshops, bike, sale, and repair services are not mentioned on the homepage
I learned from this audit that Bikehood Hub DC doesn't show what services they offer on the home-page, creating a high learning curve for users who may not be familiar with this nonprofit. So for this redesign, I focus on my high-level goals on the navigation of clear call-to-action items as well as the branding.
1. Revamp the organization’s information architecture to streamline task flow
2. Centralized the booking process on the website while integrating donation asks to increase funding
3. Create a responsive design for the mobile application
4. Redesign the color palette and photography style
By clearly understanding the issues of the websites, I am better able to guide my research and design. For research, I conducted market research and user interviews to learn more about why people bike and what the digital and the nondigital experience of purchasing a bike.
For my market research, I focused on 4 top local bike shops in DC tha may compete with Bikehood Hub DC. I also looked at indirect competitors where users can buy a secondhand bike.
- All competitors have a website and reviews on Yelp. Many are family-owned.
- All have a responsive website that supports mobile devices but all have different navigation architecture. Ivy City Bicycle Space was the only website without a search bar.
- All direct competitors provide repair services but the indirect competitors do not.
- The product details page varied per website.
- The Daily Rider and Ivy City Bicycle Space were the only websites that did not provide online shipping
- Conte's Bike Shop, Takoma Bicycle, and Amazon are the only websites that displays a review section but people rarely leave reviews.
- Amazon, Facebook, and Craigslist are useful websites to find secondhand bikes but with the risks of no returns.
In summary, Bikehood Hub DC has the advantage of offering affordable secondhand bikes without the pain point of purchasing from a stranger or the riskiness of an informal transaction exchange.
To get a better understanding of bike owners, I conducted 7 Skype interviews. I wanted to learn more about the experience of purchasing a bike and the role of biking in peoples’ life. Here were the main takeaways:
- Participants use their bike daily, weekly, or rarely.
- The reason people had a bike includes: for commuting daily, saving money, and for the environment
- The pain points are: bike punctures, biking alongside cars, and buying secondhand or meeting a stranger
- When it comes to buying a bike, the closest location the better, in-person stores are better than over online stores, and physically testing out the bike was important
- When it comes to buying a bike, cheaper the bike the better, considers the charity aspect if it's available, minimal research for first purchase but more research for future purchases, and a family or friend helped with the process.
"I think in my instance I was I just felt like I had to make a decision then because all the bikes there are one of a kind.. So I just felt like kind of a lot of pressure." Mary, Colorado, Digital Marketer, 304
"In one week I got three punctures. That sucks. I just like, I don't want to get punctures anymore, It just ruins my whole day. Hafid, Washington, DC , Economic Analyst, 29
"When I was in DC, I want to reduce costs like repairs. That was a big motivation for me. I didn't, I didn't want to spend time learning how to fix the bike I wanted to just be able to ride it again and I knew the city would take care of it." Roger, Amsterdam, Communications Coordinator, 27
"Maybe because when they purchase their bikes, they have it for a really long time, that rather than for me because I'm such in such a transient period. I'm like constantly moving going selling my things, so I'm just like not as invested in like more expensive things. Diane, Health Analyst, Washington, DC, 26
- I focused on understanding the problem by assessing the current website. Then I conducted market research with local bikeshops and websites that facilitate secondhand purchases to borrow best practices and see all of the options that a user might encounter as a DC resident.
- From the 1:1 interviews, I was able to see the gains of using a bike (cheaper, environment, hobby) as well as the pains (bike punctures, biking alongside cars).
After understanding the problem and the potential users, I next focus on UX Strategy by creating my persona sitemap, point-of-view statements, and user flow.
Meet Daily Dennis
What's unique about DC are the high density amount of nonprofits and young professionals compared to other cities. After the 1:1 interviews, which included 4 DC residents, I was able to brainstorm Daily Dennis that embodies the primary user of Bikehood Hub DC.
- Daily Dennis is a young professional new to the city and looking to find communities
- Dennis depends on his bike for his daily commutes
- Dennis tries to avoid bike repair costs because he is saving money to own property one day
Figuring out how users sort and recall information
I created a sitemap to assess the terminology that will be used on the website and how the information will be organized. The information architecture went through many iterations as I iterated my wireframes. For the full changes of the information architecture, view here, which shows how the sitemap has expanded in the first two revisions and then became more concise in the last two revisions as I began consolidating pages.
- Event-related items were under About US
- Our Shop doesn't convey the bike maintenance workshops well
- A bike maintenance workshop is tucked under Youth Program even though it relates more under "Our Shop."
- Bookings are done externally on Facebook
- Two different pages to donate
- Separated Our Shop to Events (Annual events and bike sales) and Services (Basic Mechanic Workshops, Appointment Services, Solo Repair Shop Night)
- Created a section for corporate and individual giving under About US
- Created an internal booking system
- Made only one page to donate
Before, the information architecture was difficult to navigate with similar information separated between two different pages. In the final revision, users have an easier time finding what they need because the terminology are more clear and pages are grouped together based on relevance.
Prioritizing information for launch
Next, I mapped out key insights, user needs, and point of view statements to guide the user task and design iterations that will solve the user's problem and the client's goal of engaging more with the biking community.
Point of View Statement
How Might We Statement
Not knowledgable about bikes.
Users need a service to learn more about bikes.
Dennis has very little bike knowledge and appreciates that the website ensures to barrier to attending a workshop and that all workshops are led by an expert.
How do we help Dennis Book a basic maintenance class?
1. Add the call-to-action items on the home page
2. Use UI best practices for event booking
The current website does not have a clear-call to action.
Users need to be able to complete their tasks efficiently.
Dennis is busy and needs to be able to book a basic mechanic workshop effectively.
How do we help Dennis complete their tasks more efficiently?
1. Use clear terminology
2. Reorganize the page layout
Charity aspect to a bike purchase is a plus
Users need a good reason to donate with the option of having post or pre donation asks
Although Dennis is budget-conscious he is willing to donate a little even before he attends the basic maintnenace workshop.
How do we encourage Dennis to donate?
1. Integrate donation asks at different parts of the user experience
2. Highlight the community and job training aspect on the landing page
Using the POV statements, I created a user flow to propose a solution for how Dennis can book a basic maintenance class efficiently while being encouraged to donate.
- Includes online and offline experience
- Goal is for user to easily distinguish whether they want a paid bike repair or attend a basic maintenance workshop
- DC has a unique culture of many nonprofits and young professionals. This was considered when creating the persona, Daily Dennis, who is budget conscious, a city transplant, and uses his bike daily.
- I assessed the current information architecture to see how the terminology and pages can be improved to help the user by creating the sitemap.
- I focused on these following point-of-view statements go guide my user flow: 1) How do we help Dennis book a basic maintenance class? 2) How do we help Dennis complete their tasks more efficiently?, and 3) How do we encourage Dennis to donate?
- The user flow includes a solution of how Dennis can book a basic maintenance class efficiently that also encourages Dennis to donate. The persona, sitemap, and user flow are my ux strategy that I will use as a guide.
After having a better understanding of the user's perspective and how the information architecture will be organized, next I explore layout designs for my low fidelity and middle fidelity wireframes.
First I gathered visual design research (or UI patterns) from bike shops and nonprofit websites for the goal of creating a website layout that is a hybrid of both so user can easily connect the dots that Bikehood Hub DC is a bike shop with a nonprofit aspect.
- Highlight mission
- Emphasize "Donate" and use similar nonprofit terminology, e.g. "Give Back" or "Impact"
- UI donate patterns
- Booking process
- Layout of nonprofit and bike shops
My goal for the low-fidelity wireframes was to find a way to highlight all of Bikehood Hub DC's services since in the website audit, the current website did not highlight any offerings to the user on the homepage.
Exploring task flow
Next, I referenced my sitemap and user flow as I created the wireframes for how Dennis can efficiently book a bike maintenance workshop will also being encouraged to donate.
- Homepage state nonprofit mission
- Homepage features newsletter sign-up and bike sale
- Bike workshops and bike repairs are visually different for users to efficiently distinguish the two
- Assumes users prefer to scroll through different events while information auto-populates on the same page if another event is selected
- Contact form and donation all in one page
- I iterated low-fidelity wireframes to determine functionality of the booking process, the basic organization of the content, and to test out the user flow after borrowing UI design patterns from nonprofit, bike shops, and booking event websites.
- Next, I iterated for middle-fidelity wireframes to additionally focus on the content, the navigation, layout, as well as micro-interactions of the booking plus donation process.
- After addressing the organization, layout, and navigation, next I will focus on the UI to ensure that the visual and personality enhances the mission of the nonprofit.
Because DC has a high density of nonprofits, has a new bike path infrastructure, and has higher group of young professionals, it was important to brand Bikehood Hub DC well in order to connect the right supporters to Bikehood's mission.
Creating a logo that conveys Zeit's brand
I started by thinking of the brand words, which were community, youth, job training, sustainability, efficiency, and approachability. Then I created a logo design, curated the color palette, photography, and typography based on these values.
- Brand colors reflect sustainability, youth, and bikes
- Curated photos of what the nonprofit should aim to collect for their website
- Welcoming and easy-to-read font
- I created the UI style kit where I finalized the color palette, photography style, typography, and the buttons that will accentuate the personality and mission of Bikehood Hub DC.
- After finalizing the the brand and personality of Bikehood DC, next I will prepare the high-fidelity wireframes for prototyping.
High-Fi Wireframes for the Usability Test
After I finalized the UI kit I I prepared high-fidelity wireframes for the usability testing in order to test the functionality, basic organization, real data, language, and graphics.
Search Class Page
Travel Details Page
Review and Pay Page
Review and Pay Page 2
Review and Pay 3
- I prepared the high-fidelity wireframes for user testing later. From the beginning to the end, there's a total of seven wireframes that includes the homepage, basic mechanic workshop details page, contact form, donation form, and the confirmation page.
- Next, I will conduct my usability test on Maze and determine what priority revisions to make to improve the design.
Next, I test the high-fidelity wireframes through a usability testing and then I created an affinity map to determine what design decisions to prioritize.
Validating designs through a user test
I conducted a usability testing to validate my design by using the software Maze, which later I summarized by creating an affinity map.
- Test question: You want to learn how to fix your bike. You are available the first week of August. What option would you choose?
- 6 test takers
- Users couldn’t find the continue button after they clicked on their desired workshop. (6/6 testers).
- Users were frustrated that they couldn't modify or undo their donation form because of the way the Maze test was design to be linear. (3/6 testers)
- Realized it took the users many clicks to book a workshop
- Frustration during the donation process
Pain point 1: Too many clicks and finding the continue button
Here I realized that it took the user many clicks to book a workshop and users couldn't find the "Continue" button on the bottom of the page.
Pain points 1: Too many clicks and finding the continue button
- I will remove the carousel on top because it adds an unnecessary extra click to booking a workshop. The UI pattern that I chose works doesn't work well for Bikehood because here only the dates changes.
- I will make the continue button float on the bottom so it's easier to find.
Improving the donation form
Here I realized that the contact information and donation page should be separate so users are not overwhelmed
Pain points 1: Too many clicks and finding the continue button
- Test takers were frustrated because they couldn't undo their action. Although in the real website, users will be able to undo their action, this pain point motivated me to find other best practices of donation forms
Reducing the number of clicks to accomplish an action
I reduced the number of clicks to book a workshop from 7 to 5 by identifying where in the user flow the click was unnecessary. I discovered that the book event UI pattern that I borrowed did not work well for the Bikehood Hub DC website.
- The user testing also gave me insight that the UI pattern for booking an event and for donation may not be the best for Bikehood so I focused my priority revisions on these two aspects.
- The main pain point of the user testing was that users couldn't find the continue button on the bottom page on the booking event details page.
Below is the final prototype with the responsive design for mobile and tablett.Clickable Prototype
- I enjoyed this project because of my nonprofit background. I was able to use my knowledge of fundraising while researching UI donation best practices to incorporate the best donation ask during the process.
- From this project I learned that even after researching design patterns it may not work but user testing can validate if a certain design pattern fits well with the user goal and user task.
- My recommendation for assessing the success of these designs is to collect qualitative data on whether booking through the website is more clear and easy compared to using an external website like Facebook for booking.
- If I could spend more time on this project, I would iterate on the appointment service booking process and make it as similar to the basic maintenance workshop booking process.
- To improve this project further, I would do more usability tests to validate the additional rounds of iterations.