ONTIME

A comfortable and easy bus app.

Overview

Summary:

Create an ease of use bus app that meets accessibility standards as well as make access to the Washington & State bus stop easy and understandable for 7 bus times.

Roles & Responsibilities:

Sole designer

Problem:

If you have ever used a public bus, you know that expected bus times are rarely accurate, as things like traffic, the need for longer stops to assist passengers using wheelchairs, or taking a bus out of service for maintenance can impact the schedule.

Audience:

Frequent bus users

Process

Discovery and Research

Summary:

Took user surveys and used competitor analysis. The finding drove me to find solutions to problems in comfortably, ease of use, reasoning for certain features and user driven results.

User Survey:

I left this question open ended but got an overwhelming 47.5% of survey users saying they would like a user friendly bus app. This really geared the project towards user-friendliness.

This question was interesting because of it I found out most people already had accurate bus time apps, so this project wasn’t about reinventing the wheel bus more about optimizing bus specific apps performance.

User Pain Points:

Competitive Analysis:

For ONTIMES competitors Google Maps & Citymapper were chosen.

Google Maps:

Google Maps had great coloring and over all feeling but to many options for a ease of use bus app where there is only one mapping feature, the bus. Google had options for bus, bike, car, walking, train. These features made the app feel a little crowded since they each have their own adds to make their sections even cooler, but for this app, it needed simplicity.

City Mapper:

Citymapper was great after you got passed the mile long onboarding screen. It only had three options of mapping which was better for us than google maps. But the features on city mapper were community based and also were in the high number. “Ontime” needed less features and less onboarding to really feel easy to use for all users.

User Personas:

Ashi Turim’s a frequent Bus User.

User Journey:

Zoomed for viewing:

Information Architecture

User Stories:

• As a bus rider, I want to know when my bus is arriving at the Washington & State bus stop, so I can calculate how much time I have to reach the bus stop.
• As a bus rider, I want to know the next bus arriving at the Washington & State bus stop, so that I don’t rush to the bus stop if it is not my bus.
• As a bus rider, I want the ability to view future arrival times for any of the seven bus lines (serving Washington & State), so that I know when my bus arrives.

User Flows:

As a bus rider, I want to know when my bus is arriving at the Washington & State bus stop, so I can calculate how much time I have to reach the bus stop.

As a bus rider, I want to know the next bus arriving at the Washington & State bus stop, so that I don’t rush to the bus stop if it is not my bus.

As a bus rider, I want the ability to view future arrival times for any of the seven bus lines (serving Washington & State), so that I know when my bus arrives.

Flowchart:

To optimize time we compressed the three user stories into one, which turned the three user flows into one comprehensive user flow as shown below.

Wireframes:

Based on early drawings, there was a sign up page but that was optimized out during a paper prototyping session where it was mentioned that if ONTIME wanted “ease of use” having users sign up or even a sign up page in general makes the experience harder.

Paper Prototyping Early Research:

Based on surveys and competitive analysis these paper prototypes were the solution to finding what our demographic of users pain points were and successfully used these drawings to find out problems.

Brand Development

Brand Personality:

Industrial feeling that gives you the Costco sensation of being on a bus app. Easy to walk through but still get the bulk information you might need to get your bus on time.

Moodboards:

Sketches:

Logo:

First created a bunch of logos in an amount of time, then shared them to users and had them vote for the final design.

This design was chosen by the group of users:

This is the final rendition of the design:

Color Palette:

Minimum AA standard to meet accessibility guidelines.

Typography:

Style Guide:

For a style guide ONTIME used a custom components library with every component, color and typography style. Using this was way easier than creating, coloring, and styling each individual piece.

Prototyping

Clickable Low-Fidelity Prototype:

Sketches turned to digital and clickable for users to test. This helped bring the new design forward. A great learning experience.

Iterations Of Design Prior To Usability Testing:

Snap shots of every major iteration change. Each one built better by the user tests that followed ONTIME.

“Make things bigger” is a user suggestion based on tests. So we did. This helped user readability making the app smoother.

Example of change:

“Contrast is off” “its flat” is another user test after submitting the iteration above to users.

Example of change:

Usability / Preference Testing With Results:

Most of the major steps taken are recorded here. The design changed and formed due to user testing.

How it started:

How it ended:

High-Fidelity Prototype:

It took a lot of user testing and research to get the the goal of a high-fidelity prototype. The end result is amazing and a tribute to the users who built it.

Final Thoughts

Successes:

Created an ease of use bus app for users to find bus times for their arriving bus with warnings of what may slow down or stop the bus.

Learning Opportunities:

Animation features to make the app feel real and improving the color accessibility to AAA standard instead of double.

What Was Learned:

How to use competitor analysis and user research combined to create of functioning app humans enjoy to use. Research for what users like is already out there on apps users use, the wheel does not have to recreated, just redesigned.

Mistakes Made:

Creating a component library later in the project rather than right away. Doing this made me backtrack multiple times recreating components of changing multiple groups or frames. If I created a component library in the beginning, the frame would change all the subsequent pages helping save time overall.