The Objective

Breakfast Club (BC) was looking to expand the capabilities of their existing app, CLUB, by including a Community ride section. BC CLUB was initially a calendar app for only sharing information on group rides hosted by Breakfast Club—sometimes hosting up to 800+ cyclists for a casual, police-escorted Saturday spin. The app listed every group ride for the year hosted by the club, but the team felt it was too exclusive. Anyone who wants to host a group ride should be able to host a group ride.

The BC team had decided to fill the gap in group rides by building a tool for anyone to host a ride, anywhere. Any time. Any pace group. I was brought onboard to design the experience for Breakfast Club : Community Rides. The expectations where that I would:

Design an experience where users may discover Community Rides

Design an experience where users may create or “Host” their own group ride

Considerations

Safety

How might we provide safety settings to allows users privacy when creating and sharing rides?

Search Routes

How might we sync with popular fitness apps (Strava, Garmin, Whoop,…) so that users can link to their pre-existing routes?

Notifications

How might we ensure no rider misses the opportunity to join an upcoming ride?

Understanding the Brand

Breakfast Club has a clear personality and voice when it comes to branding—the CLUB app was no exception. Using their social media, website, and pre-existing app features, I was able to get a feel for the direction new Ride components should take while reusing the common components like buttons and typography.

Flows

I prefer mapping thoughts out diagrammatically before beginning visual work. With BC Rides, I wanted to create a simple flow to identify the primary bits of creating a ride.

The Ride Card

The Ride card component would be repeated throughout the app, so it was important to design a card that was consistent enough to be recognized, but versatile enough to cover different types of rides: BC Rides, Community Rides, Your Rides, Ride Invitations, etc.

The original card design required a few tweaks to enhance the readability.

Applying a more clear date format helps users understand when the ride is happening. In the card preview, users are given the most important information to decide whether or not they are available and/or interested.
OLD: “Riding on 10/15, okay what’s todays date? When is the 15th?”
NEW: “We’re riding Monday evening? Got it.”
The address format was switched from a long address to a location name—as many rides begin from familiar public locations like coffee shops and restaurants.
“Let’s leave from The Meteor!”
The “You’re Going” Indicator lets users know that they’ve already RSVP’d to a ride when they see it in the list of upcoming rides. This tag eliminates the confusion around whether they have joined the ride or not.
The information on the card is just enough to get users intrigued by the ride. They are given the primary information so that they can make an informed decisions just by viewing the card preview.
Users are given a clue to the interactivity of the card with the added drop shadow—a design aspect included in other components throughout the app like buttons and list items. By selecting the Ride card they navigate to the Ride’s Details page.
The map is a key visual to include. Many riders can recognize and recall a route given only the map visual, so it was crucial to include in the ride card. The follow up question to “Do you want to ride?” is often “Totally, but where are are we going?”

Original Card

New Card

Rides

Host A Ride

Host A Ride >> Invite

Ride Details

Native iOS

Once a ride is created, it’s important to get the word out! We enabled push notifications to allow users to always be aware of what’s going on in the BC App so they never miss a ride.

Selecting the notification promptly navigates to the Ride Details where users can RSVP.

Building community among cyclists by creating a space for anyone to host a group ride.