know exactly when
your bus is coming

Omnibus app mockupOmnibus app mockupOmnibus app mockupOmnibus app mockup

Omnibus | mobile Bus App

How can a bus app help users check the status of their bus? For this project, I designed and prototyped a mobile application operated by a city transit system that serves thousands of commuters.

view prototype

UX Research
UI Design


Competitive analysis
User surveys
User personas
Experience mapping
User flows
Site map
Usability tests


Adobe Illustrator
Adobe Photoshop



New bus expansions

Recent expansions at different bus stops have left midwestern bus riders confused.

Woman waiting for bus


Due to expansion, numerous bus routes have been recently added. Many of those routes stop at the same bus stop. Riders want to know two things:

  1. When the next bus will arrive at each stop.
  2. How much time they have to get to the bus stop.


Give riders more clarity.

  1. Clearly show riders which bus is approaching their stop.
  2. Display time table for each bus.


Competitive analysis

I went on the app store to look at all the different public transit apps that were already on the market. These three apps were the ones I chose to analyse.

Google maps

Google maps is a great app with the ability of giving users directions, a live GPS for driving or walking, it displays public transport routes and even shows you local restaurants. For the task at hand however, users needing to find crucial information fast, this proves to have too many features.


Moovit's interface is good enough for finding public transport routes and stations' information but there is no map on the home screen where you can see your location in relation to nearby stations or bus stops, adding steps for users.


For the scope of this project, Transit pretty much solves all of the challenges users were facing. The only thing that seemed confusing was how the interface works at first. The stops are not automatically displayed on the map. Instead there is a list on the screens of the transit lines nearby and once you select one of them, it displays the nearest stop.

Omnibus competitive analysis

User Surveys

In order to better understand users, I created a survey using Google Forms. I posted the survey on Reddit's different subreddits, like r/UrbanPlanning, and other social media platforms. I received 40 responses which gave me a good representation of the typical bus rider. Here are some of the responses from the survey.

How often do people ride the bus?

At least once a week
Once a year

Why use public transport?

It's convenient
I don't have a car
I can't drive
To be environmentally conscious
All of the above

What are riders' main destinations?


How long is their commute?

15 minutes or less
30 minutes
45 minutes
1 hour
More than 1 hour

How do users pay for their bus tickets?

Prepaid pass
On the bus, train or tram
At the station

How old are riders?

18 and under

survey Findings

The findings from the survey allowed me to gauge what a typical bus rider is like. I realize the data might be slightly skewed when it comes to the sources where I got participants (mainly the internet or my social circle) so the actual demographic is probably older than what is reflected here. A crucial piece of information was the fact that the majority of people have a prepaid pass. Data like this helped me avoid scope creep and keep the features streamlined.

the user

User personas were developed from the findings uncovered from the surveys.

User persona

Jenny Walling

As an accountant, Jennifer wants an app that will tell her what time her bus will get to the stop so that she can get to work on time.
Jennifer hates missing the bus, feeling unsafe, not knowing which bus is hers or getting in a really crowded bus.
I hate having to be at the bus stop so much earlier than I need to.
User persona of a black man holding phone

Andrew Allen

Law student
As a law student, Andrew wants an app that will tell him if his bus is on time or delayed so he can get to classes on time.
Andrew's biggest fear is getting on the wrong bus when he doesn't know which bus is his.
I would hate to get in the wrong bus and miss class.

user journey

I chose the Jenny persona to be the model for the user journey. This process helped me empathize with the user and see the different steps she takes to get to her bus.

UX user journey

user Flow

One of the key findings from the survey was that 66% of people are using public transportation for work or school. With this in mind, providing users with the important data right away, even if they're downloading the app on the way to work, was essential.

UX user flow

Site map

The less options to choose from, the faster the user gets to the information they need to access.

UX site map


I started sketching options that would allow users to not have to register for an account right away, but instead, be able to find their bus and what time it would get to the bus stop. I focused on minimizing the elements on the screen and only providing the necessary information.

screen sketches

Putting it all together—wireframes

The survey showed that most users used Google Maps already, so in order to simplify the learning process, I appealed to their mental model of what a navigation app looks like.

When users first download the app, they would have to choose whether the app can use their location instead of having to manually input it every time. At first, I included a pop up modal whenever the bus station was clicked. The user could see more details, but I realized this was adding extra steps to the user experience.

Omnibus wireframeOmnibus wireframeOmnibus wireframeOmnibus wireframe


Since the goal of the project was to provide bus riders quick and easy to find information about their bus, I changed the design a bit. I transformed the pop up modal into a drawer that already has information, and can be dragged up to reveal the rest of it. The design would keep changing after each iteration, but at this stage I was ready to develop the visual identity.

Omnibus wireframeOmnibus wireframeOmnibus wireframeOmnibus wireframe



Naming the app

Mind maps are supposed to get you thinking outside the box, so I came up with really interesting options. Ultimately, I thought Omnibus was fitting since that's the root where the word "bus" comes from. It means "for all" in latin, which I thought represented the app very well.

Omnibus mind map

Logomark – Sketches

I took a similar approach to the logomark sketches. Using the words I uncovered with the mind map as reference, I began sketching to find similarities between them. I also followed Aaron Draplin's advice of writing the word in cursive, all caps, lowercase, and mix case to see what kind of personality shines through with each option.

Omnibus logo sketches

Logomark – Final

Ultimately, the circle, the letter O from Omnibus, the I/O power symbol, and a location marking made the cut. The app needed to be seen as fast, modern and clean. Also, after conducting the competitive analysis, I noticed a lot of apps were using green, so in order to stand out, the purple was a good option—it combines the energetic red and the calm blue. The gradient reinforces the speed element, especially for users who rely on public transport for time-constrained activities.

Omnibus logo identity


With the logo completed, I applied the corresponding brand identity elements like the violet, dark purple, and plenty of white space. I also found fonts that complemented the logo and the aesthetic of the mobile app. Between the wireframes and the mockup, I noticed that the thumb really had to stretch to reach the top search navigation, so I placed it at the bottom for easier use.

Since accessibility drove all of the design decisions, a lot of attention was put into using high contrast, legible fonts with enough negative space, and using redundancy when colors were used for key information such as "on time" or "delayed."

Omnibus app mockupOmnibus app mockupOmnibus app mockupOmnibus app mockup

Testing & iterations

Usability tests

For the testing phase, I recruited participants who fit the personas defined earlier. Initially, I observed how the app flow felt, how many steps it took to achieve a desired result, and how simple the whole process was.


  1. How easy is it to find specific bus stops?
  2. Was the information that the users were looking for available?
  3. Measure success while completing tasks in specific scenarios

What was done

  1. Tested five users
  2. Collected data and iterated designs based on feedback

user feedback

The test-participants were using the app as intended, pleased with the clean design and aesthetic. Where they were finding pain points was in the opening of the bottom drawer, seeing all stops and scrolling from the timeline view to the real time view of the bus's location.

Omnibus app feedback


In order to overcome the previous challenges, I added tips to the onboarding on how to use the app, with the ability to skip for convenience purposes. I also included an "all stops" icon.

Omnibus onboarding screens

End result

We started with two main problems—bus riders wanting to know what time the next bus will arrive at each stop and how much time they have to get to the bus stop. This prototype solves these challenges by displaying the bus stops near the rider, the upcoming bus, and what time it will get there in as few steps as possible.

Omnibus app screens

Interactive prototype

End result

We started with two main problems—bus riders wanting to know what time the next bus will arrive at each stop and how much time they have to get to the bus stop. This prototype solves these challenges by displaying the bus stops near the rider, the upcoming bus, and what time it will get there in as few steps as possible.

Omnibus app screens
Time for another one?

mobile tire shop branding