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 Weeks

Clickable Prototype

Background

Project Brief · Business Goal

Gearin’ Up Bicycles is a nonprofit that uses a youth job training model to offer free bike maintenance classes and sells refurbished bikes to the community of Washington, DC

About
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,

Project Brief
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.

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.

High-Level Goals
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

Problem Statement

Website Audit · Market Research · User Interviews

Although Gearin’ Up Bicycles has a strong mission to serve the community and sits at the top 3 local bike shops according to Yelp, there is a high learning curve when new users enter the website because the primary call-to-actions are tucked under other pages.

1. Understand

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.

Market Research
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.

Findings:

  • 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.

Customer Interviews
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:

Findings:

  • 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

Learnings and Summary:

  • 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).

Defining the UX Strategy

Persona · Sitemap· Point-of-view Statements

Next, I focused on the backstory of the user, how the information will be organized, and how the user will book their bike workshop.

2. Define

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.

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.

Sitemap Before:

  • 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

Sitemap After:

  • 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.

Insight
Need
Point of View Statement
How Might We Statement
Action Items
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

User Flow
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.

User Flow:

Learnings and Summary:

  • 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.

Designing based on UX Strategy

Low Fidelity Wireframes · Mid-Fidelity Wireframes

Using my UX strategy as a guide, next I design the wireframes to show how Dennis can book a bike maintenance workshop as efficiently as possible while considering low price points.

3. Iterations

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.

Exploring layouts
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.

Low-fidelity Wireframes:

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.

Mid-fidelity Wireframes:

  • 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

Learnings and Summary:

  • 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.

Defining the personality and brand

Logo Design · UI Kit

After I created the skeleton of the user flow and layout design in grayscale, next I brainstorm and finalize the branding.

4. UI

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.

Logo Iterations

Learnings and Summary:

  • 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.

Showing the personality and brand of Bikehood Hub DC

Prototyping

After finalizing the the brand and personality of Bikehood DC, next I will prepare the high-fidelity wireframes for prototyping.

5. Prototype

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.

Learnings and Summary:

  • 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.

Test, test, test!

Usability Test · Affinity Map · Priority Revisions

In the next process, I test my high-fidelity wireframes to validate my design decisions.

6. Validate

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.

Affinity Map

Findings:

  • 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.

Improvements

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

Improvements

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.

Before:

After:

Learnings and Summary:

  • 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.

Reflection and Next Steps

Reflection · Next Steps

How to improve Bikehood Hub DC in the future?

7. Final

Below is the final prototype with the responsive design for mobile and tablett.

Clickable Prototype

Reflections:

  • 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.

Next Steps:

  • 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.