A habit forming product to enrich joy of bike riding experience

Illustrated by Kelly Han

Check out the Prototype!

The Problem

The coronavirus disease 2019 (COVID-19) pandemic has prevented people from going to the gym. It is difficult for people to exercise while maintaining social distance. Therefore, people aren’t exercising as much and gaining weight.

The Task

This is an individual and UI role project. It is emphasis on methods of developing strategies rapidly around habit forming products and services. As well as how to quickly and cheaply test feasibility, and viability of design ideas.

Tools Used

Sketch, Flinto, Adobe Illustrator, Adobe Pro, Adobe AE, Paper & pen

Solution

GoBike is easy to accessible for all users and let them achieve goals anywhere, anytime. The GoBike app has the latest bike game technology and let users explore riding worldwide.

Storyboard

1. Because of COVID-19, Tom works from home every day.

2. One day, When Tom realizes he has gained weight and needs to exercises.

3. Tom likes biking and he downloads GoBike app. There are game mode routes in this app which he likes.

4. Tom gets a free phone holder after he finishes signing up.

5. While exercising, Tom can enjoy virtual landscapes, where he can log miles and participate in competition with friends.

6. The App provides Tom with his rank based on daily mileage and he can even compare them to his friend’s mileage. If he is the number one rider among his friends that day, as a reward, his profile picture will be displayed as everyone’s app cover.

7. For a long journey users can select a virtual destination from anywhere in the world. Users can check their progress and see how far they’ve gone.

8. GoBike provides competition between friends. Users can set the same goals and see who has the fastest speed. Only Tom’s profile is in color, the other users’ profiles appear in grey so you can easily distinguish yours from others.

9. Tom enjoys using GoBike to exercise and he successfully loses some weight.

MoSCoW

The acronym, MoSCoW, stands for 4 different categories of initiatives: must-haves, should-haves, could-haves, and won’t-haves at this time. The Must-haves and Should-haves features make up 2 core basic functions: automatically calculating user’s biking miles and connect users within the app. Could-haves is a nice to have feature, including VR vision and App watch integration. Won’t-haves includ the heart rate record feature which will not be added at this time.

Site Flow

Risky Assumption Matrix

Pretotype Ads in the Game

The purpose of pretotyping is to test a product idea quickly and inexpensively by creating extremely simplified versions of that product to help validate the premises. I made a YouTube pretotype, which combined ads in the bike racing game to attract more investments. Two types of ads were included into the mobile app: Ads when opening the app: users can remove ads through subscribing to premium service. Ads in the game: when users collect coins, ads pop up, then users can get score.

Wireframe

Validation

After the task testing and follow up Interviews, I realized that having two buttons on the “goal setting” screen confused users. As a result, I split the goal setting screen into two separate screens: individual and competition.

On the individual screen, when users select the destination, the distance will automatically be calculated. Or users can input their daily mileage goal.

On the competition screen, after users set their goal, they can select 1-2 friends with similar goals to compete with. For a long journey users can select a virtual destination from anywhere in the world.

Users can check their progress and see how far they’ve gone. Some testers wanted an option where they could just track their miles and they wouldn’t have to look at their screen.

So, the solution is that, if users click the start button without inputing a goal, their biking mileage will automatically be calculated and recorded.

Design Scheme

Moodboard

Logo

Style Guide and UI Kit

Prototype

Onboard & Login

Users can login or create a GoBike account or sign up through an existing third party account, such as Facebook, Google or Twitter account. Also, users can get a free phone holder if they fill in more detailed account information

Individual Ride & Compete with Friends

The main screen of the GoBike app allows users to choose individual or competition mode. Users can set today’s goal through inputting location and miles. This long journey gives them opportunity to accumulate miles and check their accomplishment. During competition, only your profile is shown in color; other users’ profiles will be in grey in order to be easily distinguished. When you finish the competition, we can check your rank according to average speed and mileage. You are able to share your rank and upload selfies from your trip in you moments.

Social Media Feature

Users can post their own moments, see friends’ moments, comments, or likes. This is a private feature so only user’s friends have access to this. Community section is not a private, where everyone can upload interesting videos.

Animation & Micro Interaction

Impact

81 Testers

67 Responses

50 Positive Reviews

75% of testers who tried GoBike app enjoyed its gaming experience.

GoBike AR Helmet

Video made by Kelly Han

Overview

GoBike augmented reality (AR) helmet is a non-GUI product based on my previous GoBike mobile app project.

Problem

Users are motivated by playing games when they are exercising. However, it is not always convenient for riders to carry their cell phones. How can people remain motived while riding a bike without their mobile phones?

Solution

GoBike AR helmet offers users the opportunity to collect golden coins as they ride to earn rewards. Also, users are able to set goals, track and map rides, rank and compete with friends. GoBike AR helmet has the latest AR technology allowing users enjoy AR bike game. It is a habit-forming product, which increases joy of riding.

Storyboard

1. Amy’s phone battery is dying but she still wants to go biking with her exercise game.

2. Amy can use this helmet, which has the latest AR bike game technology.

3. She can use voice comments to activate and control helmet.

4. Through AR technology, Amy can get golden coins and earn rewards. During her bike ride, she will see investors’ ads pops up.

5. The game system offers 2 game modes: Individual and competition.

6. Individual riders just set goal, collect coins and achieve their goals.

7. In the competition mode, everyone can collect coins but he person with the fastest speed will win the competition.

8. The GoBike helmet game offers rewards. For example, 50 golden coins earns the user $5 Wawa gift card.

9. At last, Amy can share her results via in app moments feature. She also can invite more friends to join future competition.

Risky Assumption Matrix

Top 3 Riskiest Assumption

Validation-Risky Assumption Sheeter

Validation-Pinocchio Pretotype

“The Pinocchio pretotype is named after the beloved fictional character Pinocchio, the wooden puppet who dreamed of becoming a real boy.” I used the Pinocchio to create a fake artifact as a proxy for a real product, in order to better understand a rider’s habits and visualized what they see and how they ride.

Attached to Bike 

Shakes Terribly
If fixed to the bike, using GUI product will be better

Attached to Helmet 

Good riding experience
Only small rotation angle needed to check traffic
If camera position is not right, must be adjusted

Validation-Results of Pilot

AR view through face shield will provide a better experience. I chose a helmet with face shield rather than attaching the cell phone to the bike.

Validation-YouTube Pretotype

I posted video on YouTube and TikTok with survey questions linked in the description box, so that I can collect survey results.

Validation-Results of Pilot

63 views

25 responses

9 email IDs

5 comments

“The title is very catchy. Cyclists are definitely attracted by the headline. I’m an avid cyclist. As a cyclist, I find it very dangerous.”

Safety Issue: GoBike AR helmet will add one in-game feature, which is to alert users of any traffic intersections. The alert information will be projected in the AR view and all golden coins will temporarily disappear.

Impact

At least 84% of the people who saw the video liked the concept and will use GoBike AR helmet and recommend it to their friends.