Mobile App Design,
For Georgia Tech students who are studying at a campus located at the midtown of Atlanta, where commuting by car is time-consuming due to the heavy traffic and lack of parking spots, cycling is a green and economical alternative to save commuting time.
However, Atlanta is not a paradise for cyclists either. Most streets do not have bike lanes so cyclists would have to share the roads either with wild drivers, or with unpredictable pedestrians, which makes cycling a less pleasant experience than it should be.
Meet with Go Biker
Go Biker is a mobile app that provides suggestions on route selection and departure time to avoid encountering with heavy traffic or crowds. It integrates data of vehicle density, pedestrian density, special road conditions, and personal schedule, and gives cyclists navigation with collaboration of bluetooth-connected vibration devices attached on bike handles, through a less distractive vibration signal.
With the help of Go Biker, cycling becomes a safer and more relaxing experience.
The research and initial ideation sections were teamwork, for which I teamed up with 3 team members and leaded the sections. I developed the detailed features, wireframes, high-fidelity prototype individually.
Methods Used: Interview, Contexual Inquiry, Hierarchical Task Analysis, Persona, Storyboards, Usability Testing
Prototype Tools Used: Sketch, Principle
Let's have a close look
Go Biker gives cyclists safe route suggections based on the real-time density of fellow travelers and availability of infrastructures.
Go Biker frees cyclists' eyes and ears from traditional navigation approaches. It can be connected to vibration handle device that gives cyclists vibration signals for directions.
Easy to use
Users can plan the route to their destination easily by dragging the map and dropping a pinpoint.
Campus life assistant
Student cyclists can sync their class schedules into Go Biker using Georgia Tech student account. Go Biker will provide departure time suggestions to prevent them from being trapped in crowds.
Too busy to check the road conditions and when to depart? Go Biker pushs timely and helpful information through notification that can be easily interact with.
Designed for YOU
A filter is designed in Go biker to support a flexible range of preferances. Cyclists can edit the filter to plan route according to their personal habits.
A Summary of The Research & Design Process
Identify Problem Area
This class project started from a broad topic: solving problems in campus life. Because cycling is an important commute approach for students, my team decided to improve the biking experience for Georgia Tech students.
#1. Preliminary Interview
What’s biggest problem that has been impairing the experience?
The way we answered this question was to interact directly with our target users and ask for their concerns so we can ask deeper questions based on the conversation. We conducted preliminary interviews in a semi-structure form with 10 student cyclists across a broad scope of topics that we thought might be problems, such as bicycle parking, navigation, safety, security and so on.
Finally, we found that user’s concernings centralized to a big topic: safety.
Another valuable takeaway from the preliminary interviews is a brief understanding of target user's behaviors and habits.
So when and where do cyclists feel most unsafe?
Safety is still a broad scope because our interviewees mentioned various scenarios where they felt unsafe. We decided to narrow down the problem by finding out the most typical scenario where student cyclists feel unsafe to ride a bike.
We summarized the scenarios that were mentioned by our previous interviewees, based on which we developed a short survey with Likert scale questions to help us narrow down to the most stressful scenario. You can take the survey here →
We chose to collect data by survey because it can be spread easily to broad audiences. Eventually 31 cyclists gave their responses and helped us converge to two scenarios: 1) riding bike on campus at peak hours; 2) riding bike off campus.
Identify User Needs
So why are cyclists nervous at these scenarios? What could possibly help?
With the new questions in mind, we conducted contextual inquiries and interviews to get deeper insights specifically on these two scenarios.
#1. Contextual Inquiry & Follow-up Interview
Contextual inquiry helped us observe cyclists' behavior in the actual riding environment. In our 2 contextual inquiry interviews, we used our own bicycle with an attached mobile phone to record the whole process (picture above). Interviewers rode this bicycle to follow our interviewees, asking them questions when necessary, like ‘How did you avoid the pedestrians right now at the cross?’ or ‘why do you choose this route instead of other ones?’
To obtain more data within a limited time, regular interviews were also conducted regarding to the two unsafe scenarios. 5 student cyclists took the interviews, including the two who had participated the contextual inquiries.
#2. Data Analysis
To identify specific pain points and fomulate a target user persona, we used affinity mapping to categorize our findings from the interview notes.
Hierarchical Task Analysis
Based on the information we obtained from the contextual inquiries and interviews, we concluded task characteristics and influence from environment, and presented the conclusions with a Hierarchical Task Analysis diagram.
So these are the safety issues that bother cyclists most:
There are always roads that don’t have bike lanes, so they have to ride on sidewalks or share roads with drivers, which is a catalyst to the following two problems;
During peak hour on campus, such as class switching time, students flood out and head to their next destination. cyclists have to move so carefully to avoid hitting into pedestrians;
While riding bike off campus, they have to ride close to car drivers, most of whom don’t pay enough attention to cyclists. Cyclists have to be so careful to keep themselves safe.
Safer approach to share roads
Cyclists want to share the roads in a way that is less threatening to all the road users, especially pedestrians & drivers. Ideally cyclists would like to ride on bike lanes; if bike lanes are not available, a relatively clear-defined area, such as sidewalks would be a alternative.
A less intrusive and less distractive solution
Many existing products addressing biking safety problem require manual control during riding. But according to the task analysis, cyclists are dealing with so many subtasks while riding. They really need something that doesn’t disturb them or even reduce their efforts for keeping safe.
We generated 20 different ideas addressing the user needs. After a creativity- feasibility analysis and combination of similar ideas, we generated 4 design concepts.
#2. Design Concepts
IDEA 1: Mobile Alerts
Using phone as a alerting mechanism attached on a holder. The phone give alerts to people around depends on the distance, also displays light signals like arrow while turning or speed using inbuilt phone sensors.
IDEA 2: Projected Signs
A light system capable of projecting patterns on the road to indicate its future location, directions and travel lane. This idea is generated by combining 3 different ideas which all require projecting lights.
IDEA 3: Real-time Monitor
Auto-Alert Sensor to tell bikers and drivers the location of each other when they meet.
IDEA 4: Bicycle Route Planner
A mobile app that integrates route conditions helps cyclists choose a safest route by avoiding the crowded or dangerous road conditions.
#3. Feedback Section
We reached out to target users as well as professors and classmates for feedback towards our ideas. We asked them to vote for the ideas and give their comments.
After an assessment of the feedback, in addition to a new evaluation on the feasibility and time investment, we decided to go further with the idea of Bicycle Route Planner.
#4. A Close View of The Idea
The mobile Route Planner would allow cyclists to plan their route based on the density of cars and pedestrians.
Initially we proposed two main features for the app: route planning system that helps cyclists to plan for a safe route where there are less cars and pedestrians; audio navigation that tells users directions to go.
How would this solution help in this situation?
High density of cars and pedestrians is a key factor undermining biking safety. In our previous interviews, our interviewees said they barely ride bike off campus because it is unsafe to share roads with so many cars; comparing to off campus area, the campus is a much safer place to ride bike, because there are much fewer cars. The only safety issue remains in campus is that it has too many pedestrians moving during peak hours.
Therefore, providing cyclists with a route that has low density of cars and pedestrians will promisingly alleviate the safety problem.
Things Worth Rethinking
Our target users gave us valuable comments, with which in mind we revised some defects in our design.
1. Audio navigation wouldn't work
Our target users are dissatisfied with the audio navigation. The roads can be extremely noisy and they cannot hear the instruction without wearing headphone. However, headphone is another factor that cause safety issue during cycling.
Alternative: vibration signal navigation
A vibration device will be attached to each handle. The devices are connected to the app through Bluetooth, and generates vibrations in different rhythm to tell users what actions to take.
2. On campus, it is the time that really matters
For on-campus situation, the app will probably not be used frequently because the campus has a limited scope, so most of time there are only few options from Place A to Place B, which may all occupies with students at peak time; also students are usually quite familiar with the campus, they don't really need a navigation. Since the unsafe situation in campus is caused by crowds during peak hours, a departure time advisor to help cyclists avoid the peak hours would be more useful than a route planner and navigation here.
Add-on feature: personalized departure reminder
Since our users are Georgia Tech students, who usually have fixed schedule and destinations, the new design pushes notifications to provide suggestions on departure time and an optimized route (if applicable) referring to personal schedule and the regular peak hours. Users can easily dismiss the notification after reading it.
3. Cars and pedestrians are not the only issues
Besides density of fellow travelers, here is another information that this app should provide to help bikers plan route: road closings due to campus events, or construction on sidewalks. cyclists have to detour if they didn’t know that. This issue is very relevant to the route planning feature because the planning doesn’t make sense if the route we suggest is blocked. However, this problem is not directly related to safety issue. Therefore the following feature won't be the focus of this design.
Add-on features: additional road conditions & condition report
Information such as road closings due to campus events, or construction on sidewalks will necessarily affect route selection. However, such information is usually not included in regular traffic map API, so we would have to import information of events and constructions that may occupy the streets from university websites. In case we miss anything, we would allow users to report such conditions
Design of Route Planning Feature
Planning should be quick and easy for users, which means the app should require a simple flow of interactions to find out the best route, and should provide with clear information & data visualization.
#1. User Flow
The user flow was designed in an iterative process.
Initially I designed the following flow. After reviewing it, I found that it is problematic.
This flow is acceptable to users who are planning for a long distance trip and want to make a thorough plan. However, if I am a user at a familiar area, who is going to somewhere only 5 blocks away, and I just want to have a glance at the map to get a quick idea of which street has less traffic, having me input the destination and check the route one by one is undoubtedly redundant.
Therefore I redesigned the user flow to shorten the process and to meet needs of different users. I decided to show the route conditions immediately when users open the app, allow users to set destination easily by dropping pinpoint.
Another weakness of this flow is that it request the user to select a route from a list of suggestions, with the optimal option on the top. Most users will just choose to view the top option first. So it is a redundant step to have them select the first option.
Therefore I decided to show the optimal route directly after user set a destination, but also to design an easy UI for them to switch between options.
The new route panning flow would be:
#2. Info & Data Visualization
There are two types of information and data that are associated with the feature:
Infrastructure: bike lane, sidewalk, non-lane road, bike rack near destination.
Road conditions: density of cars, density of pedestrians, events, construction.
In order to find an approach to present these factors in a organized and legible form, I tried several designs.
My exploration started with (extremely) rough sketching. I tried to use different UI elements and colors to present different infrastructures and conditions, in order to let everything identifiable. I tried to differentiate pedestrian density and car density with path and heatmap; I tried to mark all the route conditions on the route.
However, after a while, I realized I was on a wrong way.
Do users really need all of these? Not really.
They don’t really want to know how these factors interact to generate the optimal route. They merely want to know the optimal route. Therefore, I decided to leave out the irrelevant information and leave the analyzing to computer algorithms.
So this is the final design decisions I made:
Integrated density of cars and pedestrians will be represented by different colors. On the home page, only high density will be shown; on route plan page, traveler density of the whole route will be presented.
The routes suggested always ends at the nearest bike rack to the destination.
Closures cause by special road conditions will be integrated into the map, and will not be marked specially.
The route suggestions are generated considering all the route conditions by default. If users would like to relax the filter conditions, they can easily do that with switch buttons.
Design of Personalized Departure Advisor
Class schedule can be easily synced through GT student account. After users log in with GT account, today’s class buildings will be marked on the map. Users can tap the location tag to view advice on departure time.
What if you are too busy to check the departure time? The app will push timely notification and make sure you won’t be trapped in crowds.
Below is the basic interaction flow.
Design of Vibration Navigation
#1. Mobile Interface
As I mentioned in the ideation section, this app should allow users to report special road conditions. In some cases they may be on their bike when find something to report. Therefore I allows users to do that on the navigation page, so that they don’t have to exit to report and reset the navigation later.
Then I need to deal with the safety issue. To prevent them from watching at mobile phone during cycling, the report button will hide when the user is moving fast.
#2. Vibration Handle Devices
Due to limitations on technology and time, the device remains to be a concept. The mechanism is desbribed using motion graphics as follows.
Once vibration device gets connected with the app, the app will send Bluetooth signals to the device to control the vibration.
When the cyclist is supposed to turn, the corresponding handlebar would vibrate to inform the cyclist in advance. The duration of prepare time requires further research.
To make sure that the road conditions is clear to users, I tried different color schemes. Because color is the key element showing traveler density and should be highlighted, I decided to use dark background for the map design, which has higher contrast to the route.
Color is also significant in differentiatng the components in the map. To avoid the map to be distractive, I minimized the number of color used. Now only one color is used to represent high density, the level of which is represented by the opacity.
In terms of the GUI, I iterated several times to improve visual hierarchy. Font size and color are refined several times to make sure it is accessible under sunlight at outside area.
I deliberated the detail screen by screen in sketch, and then built a high-fidelity interactive prototype in Principle for user testing.
If you want a clear view, click here to view video records→