It’s Hard to Turn on a Bike
This was P4, or project 4, for the General Assembly UXDI bootcamp. The P could have also stood for pivots. Over the two-week course of this project from ideation to completion, our idea pivoted 4 times. The first occurred after submitting our initial opportunity statement. This idea was for a way to create your own routes on your bike ride.
This project is actively very different from my other ones for the simple fact that no one in my group was particularly interested in this topic initially. Especially me. After changing our original idea of a social media site for bike routes due to an over-saturation in the app market, we were left with the vague-ish opportunity statement of attempting to bridge the gap between novice/casual bikers and professional/experienced ones.
We also had a bunch of other ideas. They were okay too.
Opportunity statement: We will improve the onboarding experience of biking for beginners. Users are overwhelmed by the process of getting started because novice riders need information on how they can ride with confidence at every step on their journey to becoming an experienced cyclist.
After conducting interviews, this opportunity statement proved to be just an assumption. Casual bike riders like biking for the commute, for the exercise, for the sake of it.
Our biggest mistake for this project was not conducting a screener survey to ensure we were testing the right audience. Our stipulations were looking for people who were people with moderate biking knowledge. Simply put, we were interviewing people who bike somewhat frequently and have previous biking experience. This means the information we were receiving wasn’t going to help solve our opportunity statement as much as it could.
From the 10 people we interviewed, we found we were able to organize their statements into a few good statements that would shape the direction of our app. Statements like “I like to remain safe while biking” were broken down into further categories like the terrain, avoid construction, and avoiding traffic. “I want to ride in comfortable condition.” was another statement that we divided into many different categories like weather, wanting to avoid others, biking during the day, etc.
From there we each had our own ideas on what our Persona should be like. There was a bit of friction in the group due to some of us wanting to write the scenario first, and others want to write the pain points, goals, and needs first. Eventually, we created our Persona.
This is actually our revised Persona. Unfortunately, our original Persona has been lost to time. Alex here is the cause of our second pivot. Originally, our Persona was missing core takeaways from our Affinity Map. His scenario was not providing any opportunities that could make for an interesting and unique app. We changed it to include the following key takeaways:
- Alex is UNCOMFORTABLE. He moved into the city a while back but is unfamiliar with biking in such close proximity to cars and other people.
- Alex wants to stay MOTIVATED. Biking is stressful and he needs some motivation to actually go out and ride.
- Alex knows how to ride a bike. This is not a teaching app. He is a casual biker.
With out revised Persona, we went forward and constructed our problem statement:
Alex started biking as a way to de-stress, but his lack of knowledge regarding safety and comfort is hurting his motivation to ride. How might we help Alex get started on his bike riding experience and stay motivated while keeping his sense of safety and comfort?
Design Research
We conducted a Competitive Matrix on order to determine what we could differently from other popular biking and fitness apps on the market. From what we found, most biking apps catered to a hardcore audience that was interested in improving speed, distance, calories burned, etc. It makes sense, a beginner crowd can eventually grow out of using an app that’s catered to them specifically. However, this did give us an opening for an app that catered more to casual, beginner riders. To get more insight into what our contemporaries were doing, we conducted a competitive and comparative analysis.
To draw attention to the features that ended up shaping our final product the most…
Our rival apps catered to advanced users and left out things like informational tips for casuals and features that talked about weather. Taking advantage of the lack of these features in other biking and fitness apps would form the backbone for the first half of our app.
Okay, Let’s Start Designing
We had a few goals we wanted our app to achieve right off the bat:
- Make biking a more intuitive process.
- Integrate a not-too-complex application that gets straight to goal.
- Add more eye catching visual elements.
These goals helped shape our design studio. From the start, the follow four features were considered a must:
- Design a feature that will notify rider of road conditions currently.
2. Offer the feature to share your ride and achievements to social media.
3. Simple steps like tab bars on bottom of page gives the user the ability to transition to others pages smoothly.
4. Design conforms to industry-standard layouts so those unfamiliar can understand the features
Pivot number 3 occurred during this step. When we checked in with our Instructional Assistants to ensure we were on the right track, they suggested we change course. We originally focused too much on traditional biking features. Once we started redoing our design studios, we moved our focus back to our Persona wanting to feel comfortable and safe.
Revised Design Studio # 1
Our first design studio overcomplicated things. We put so many features on the front page that we realized it could actually demotivate people from using the app out of sheer confusion.
These designs were the ones we decided to iterate on. They were simple, used large pictures, big text, and kept the information on screen to a minimum. In order to appeal to beginners, you need to get on their level.
Design Studio # 2
As our Design Studio process continued, we subtracted elements from the webpage that took away from the app’s core purpose. Our focus shifted to large, appealing pictures that would tell the user to go out and ride if the conditions are right. Our design process was mainly subtractive. We started with a lot of features present and pared it down to the absolute minimum.
Design Studio #3
The culmination of our subtractive design studio is a simple two-message layout. We felt overwhelming the user with info right when they open the app might do the opposite of motivating them. We ended up with this simple design for the homepage. Later, would find that this simple layout was far too simple.
Medium Fidelity Prototype
To continue the simple design of the home page, we also wanted to make the app’s overall structure was simple as well. The tab bar only has three choices. The account page only splits into three different screens.
The results of our usability test were okay. Overall, users were satisfied with the layout for the app, but not much more.
When it came to ease of navigation, our average user score was 3.4/5
When it came to satisfaction, our average user score was 3/5
Here is a series of tasks that we had users perform for the usability test. Included in the pictures are insights, recommendations going forward, and a graph of times it took each individual user to complete the task, as well as if they succeeded or failed.
Task 4 and 5 were the ones that created the most issues. Task 4 especially.
Everyone thought that the Route Safety feature would be inside the History tab. The History tab is largely underutilized and it only further confused the user when they went to the proper Route Safety tab afterward and found a screen whose top half was nearly identical. We definitely needed to do some improvements in this area.
Users also innately disliked our med-fi home page. While it was eye-catching and every unanimously wanted to click on it to reveal the background message, once they did they were disappointed. Most people wanted to click on it to REMOVE the message more than anything else.
Our fourth and final pivot was the most frustrating, especially since the deadline was only two days away. The lack of satisfaction in our app came from users not seeing a purpose in using it, especially if they were newcomers. “So the app will tell me when it’s a good time to ride based on weather and road safety? Can’t I just use the weather app or Google Maps?” Our app was missing a core hook.
Our app’s main feature of sending safety notifications caters to Alex’s desire for a comfortable experience, the encouraging messages provided him with very little motivation to actually go. It’s easy to tell someone, “just do it, it’ll make you feel better!” That’s what our app was doing. It’s another thing entirely to actually motivate them to do it.
Fixing The App
To understand motivation, it’s important to know the different kinds:
Intrinsic motivation is wanting to do something for its own sake. De-stressing, finding it enjoyable, and feeling comfortable are all intrinsic factors motivating someone to ride a bike.
Extrinsic motivation is when there is an outside force encouraging you to do something. Promising a child dessert after they eat their vegetables is providing them with extrinsic motivation to eat. Extrinsic motivation can also be negative, but that’s irrelevant. Giving a reward for biking is extrinsic motivation.
Alex, due to being uncomfortable with city biking, lacks consistent intrinsic motivation to ride a bike. As he bikes more, he may start to enjoy riding for the sake of it. It might make him feel better, he’ll like the exercise, etc. We can use extrinsic motivation at the start to encourage him to ride his bike. Providing external rewards at the start can eventually be supplanted by or combine with an intrinsic motivation to ride. Mobile games use a similar method to get players invested through frequent rewards initially and then relying on enjoying the activity to get them coming back.
To get some inspiration, we looked back at our contemporaries. Almost all of our competitors use achievements or challenges as a way to keep users coming back. However, most of these apps are catered towards experienced riders. Making these rewards casual or beginner friendly can separate us from the competition. Apps like Nike Run Club give you your first achievement upon running 36 miles!
We decided to use achievements and a progress bar to provide extrinsic motivation for Alex. The progress bar provides a clear visual showing how close Alex is to earning an achievement. After a ride, Alex will get to see how his decision to ride his bike directly contributed toward earning medals. The more satisfying this process looks, the more Alex will be encouraged to go on future bike rides to see his progress grow again.
The achievements are designed to be earned in quick succession early on and becoming progressively more difficult as he gains biking experience.
Getting rewards in and of itself is nice, but being able to share them on social media is even more fun!
Achievements and the mileage tracker provide a steady flow of rewards at first while the user is still gaining intrinsic motivation to ride. Higher level achievements are harder to get so Alex’s intrinsic motivation will keep him riding in between rewards. Even if Alex has no additional need for extrinsic motivation, the notification system will continue to keep Alex riding his bike at comfortable times.
So to reorganize our app, we moved the History tab in the original version into the Account button, moved the customizable elements into its own tab on the bottom of the screen, and added an Activity tab so the user can view their challenges and achievements.
Hi-Fidelity Mockup
Here is our hi-fidelity mockups of the notifications a user will receive as they use the app. Included it also a notification letting the user know how close they are to earning an achievement, combining the intrinsic motivation to ride in comfortable conditions, and extrinsic motivation to earn the reward.
We spent a while deciding on the color scheme but we constantly kept referring back to our original persona’s blue and orange colors. I think it portrays a nice combination of activity and being outside. Since the sun is also a common motif used in the app (for the icon and the share achievement screen), it only made sense to use yellow as our third color.
We added an onboarding process to encourage users to set their preferred settings before they ride. Going forward, these screens could definitely use more work.
Our new home page fits in with more contemporary fitness apps. It also draws attention to the challenges, giving newer users something to check out and build the desire to earn upon opening the app for the first time.
Hi-Fi Usability Test Results
- When it came to ease of navigation, our average user score was 4.9/5
- When it came to satisfaction, our average user score was 4.2/5
Going Forward
One thing I would like to add going forward is another onboarding pop-up explaining that saving a route is necessary in order to set route safety conditions. Either that, or have Location Services just let you know of any safety concerns nearby in a small radius.
One user found the color scheme gaudy, When speaking to a shareholder about this, they found the blues and oranges to almost vibrate when placed next to each other.
Tweaking the onboarding is another thing I would like to change, especially since it’s so important to make a first impression. Adding a message or two explaining the purpose of the achievements will prevent users from getting flummoxed upon seeing them for the first time after a ride if they ignore checking them out from the home page.
Thank you for reading!
