LOCAL BIKE COMMUNITY

Bebo's Bikes

UX Design & Research

With an aim to increase sales by building a community around a local bike shop in north Metro Atlanta, digital marketing efforts focused on increasing brand awareness and engaging users with a foundry of localized information.

mountain icon

Challenge

Buyers can be overwhelmed with options when shopping for a bike, and could benefit from guidance when choosing a bike and resources like where to ride.

bullseye icon

Goal

This mobile app and responsive website will foster a community online and in-store, increasing customer base with personal relationships and unique offerings.

USER RESEARCH

Discovery

objective icon

Objective

I conducted research with a broad-to-specific approach and built upon statistical information about bike paths, riders, and sales around the Atlanta Metro area. In-person cyclist and customer interviews supplied further insight and detail about user needs.

I sought to understand the interest and demand for a community-based mobile app for cycling, and investigated what may be missing from the intuitive flow of the activity. Where were riders unsatisfied in the process of buying and using bikes? How can I solve for that with a digital product?

Before beginning research, I had some incorrect general assumptions about demographics and was largely unaware of real riders’ pain points. My research unveiled a wider, more diverse user base (in age, ability, and purpose) and new, unique issues that affected them while riding.

user icon

Participants

I included a demographically diverse group who rode their bike at least once a week in the Metro Atlanta area. I sought to represent different types of riders in a variety of riding environments and situations.

Bebos Bikes rider on phone with logo t-shirt
methods icon

Methods

Primary research included surveys, interviews, and observational studies from a varied selection of user types. Secondary research produced key insights about comparable products:

RESEARCH SUMMARY

Understanding the User

results icon
PAIN POINT

Overwhelming Options

Online retailers offer too many options (hundreds of products) and not enough guidance. 

results icon
PAIN POINT

Choosing a Bike

Sizing and fitting for your bike are crucial, but not included with many bike purchases or are an extra fee. ($25, REI)

results icon
PAIN POINT

Where to Ride

Fragmented resources or worldwide databases about where to ride are cumbersome to compile.

Persona: Keeley

Bebos Bikes Persona Keeley Mitchem

Keeley is a mom of two who needs help finding places to ride bikes that satisfy the needs of both of her children because she doesn’t want them to lose interest in cycling outside or spending time together.

Persona: Nic

Bebos Bikes Persona Nic Jones

Nic is a daily street rider who would like to find other folks to ride with because it’s safer and more fun.

hypothesis icon

Hypothesis Statement

If bike riders in metro Atlanta had a quick resource for specialized local information and resources, then they wouldn’t waste time looking through worldwide information or feel overwhelmed or alone in their efforts to ride bikes.

bullseye icon

Goal Statement

Our local bike shop app will let users learn more about purchasing bikes, local events, groups, and places to ride, which will affect riders in Metro Atlanta by providing easy access to valuable resources specifically targeted to their area. Effectiveness will be measured by customer interactions and transactions.

EXPERIENCE

Designing for User Needs

Ideation

I used the Rapid Sketching creative brainstorming exercise to develop ideas for solutions.
Blue: Keeley’s goal of finding places to ride
Gray: Nic’s goal of finding people to ride with

JOURNEY

User Flows

INFORMATION ARCHITECTURE

Sitemap

paper wireframe
DESIGN

Paper Wireframes

Creating wireframes allowed me to better understand which layouts and elements were most effective in guiding the user along some of the most common flows.

Shown here: Home, Product Detail, and Tips & Safety

digital wireframe

Digital Wireframes

Aiming to offer users more immediate options in a limited space, feature cards and icons were used to isolate and highlight selected content.

Initially planned to be part of Groups, the Events section warranted its own area, providing users with quick access to key information.

DESIGN + INTERACTIVITY

Lo-Fi Prototype

RESEARCH

Usability Testing

USER NEEDS

Study

Feedback was gathered from three participants in an unmoderated study. Users were asked to complete up to six tasks within a 20-minute time period, then rate their overall experience.

I used these KPIs to measure progress toward my research goals:

USER FEEDBACK

Objectives

Answering these questions helped me to forge a clearer path forward with my design.

chart icon

Finding

The Choosing a Bike quiz is confusing and interruptive.

chart icon

Finding

Users get stuck on the Account screen.

chart icon

Finding

Some users expected to be driven to more content.

ITERATE

Refine Design for User Needs

DIGITAL WIREFRAMES

Choosing a Bike

Created to offer more personalized product suggestions, the Choosing a Bike questionnaire was eliminated after user testing because it confused users without any real reward.

Now, users can visit the Choosing a Bike page, offering helpful tips and an invitation to come into the store for free help.

DIGITAL WIREFRAMES

Navigation​

Usability testing provided a lot of insight about how users interacted with the app’s navigation. Originally designed with a side flyout menu, I revised it to an icon-based top nav bar.

This saves time and taps for users, and makes traveling from one page to the next an easier and more fluid task.

UNIVERSAL DESIGN

Accessibility Considerations

accessibility icon

Color Contrast

Luminance contrast ratios were verified accessible and compliant to WCAG level AA requirements.

accessibility icon

Sharp Imagery

Crisp imagery was used throughout to easily expand for detail, accompanied by ALT text, titles, and descriptions.

accessibility icon

Traversal Sections

Layouts are designed in sections with traversal order annotations.

ELEMENTS + GUIDELINES

Design System

POLISHED DESIGN

Hi-Fi Prototype

Next Steps

steps icon

Interactivity

Adding more opportunities for interaction could be a big benefit for registered users, like submitting reviews, events, and path info, and user-to-user communication.

steps icon

Personalization

Increasing customizations (like private tags and notes for paths, events, and groups) would create value for users and a regular draw to the app.

steps icon

Consolidate

Content could be further distilled and made more immediately digestible with icons, infographics, and quick-reference statistics.

PRESENTATION

Bebo's Bikes Case Study

Let's Chat!

Questions? Ideas?
There’s plenty to talk about.

call icon

(404) 822-5345

RWS hero mockup
Remote Work Specialists
EmpathyMe three phone hero circle BG
EmpathyMe
Bebos Bikes laptop and phone hero circle BG
Bebo's Bikes
Revance Aesthetics circle hero booth
Revance Aesthetics
Lagona Apothecary circle hero
Lagona Apothecary
Original Love Notes circle hero
Original Love Notes
More circle hero
More