top of page

Mobi~Bus

Public Transit App

MobiBus_IMG_MobiTrac.png

A Whale of a Ride! 

Take a deep dive into the challenges of Public Transit and experience the free sailing solution.

Role:

UX Designer, UI Designer, UX Writer

Tools:

Figma, Google Forms, Google Sheets, Figma Mirror

Methods:

Competitive Analysis, User interviews, Surveys, Wireframes, Prototypes

Challenge

​Bus Riders are confused about new changes to the Transit System. Users of the System want to know when the next bus will arrive, when it gets to the next stop and if it is the correct bus. Suggested features to be included are electronic payments and environmental concerns

Solution

A mobile bus tracking app that allows users to amend pain points, such as bus tracking, bus schedules, electronic payments, environmentalism and more.

Target Audience

Mobi-Bus is targeted to all users of any age who may use a the Transportation System and who have internet connectivity.

Process

Discovery & Research

I used a few different methods to fully understand the challenge at hand. First I created survey questions and scheduled interviews. While this data came in, I looked over some similar sites that offer public transportation information.

Competitive Analysis

I used the Massachusetts Bay Transportation Authority and Google Maps to understand what they offered. The MBTA offers schedules and map overviews. Google maps offers schedule information, interactive maps, and trip planning capabilities. Neither site offers bus tracking or specific environmental data.

MBTA.png
google.png

Persona

personaphoto1.png

Jane Jones - 36 yrs - Teacher - Technical - Mainly Mobile

Aspirations:
“I want to provide quality education for my students.”

Drive:
Have a good relationship with my students; Provide effective material; Happy Parents; A good community.

Goals & Needs:
Arrive to School On-Time; Feel Safe on Bus; Know where bus is; Arrive home early.

Hesitations & Pain Points:
Is the Payment Method Electronic? Where is the Bus? Which Bus is mine? Is this Environmentally Sound?

Surveys

Will a cellular phone app for the bus assist you?

Will knowing where your bus is located help you?

How will you pay for the Bus?

bus phone app
Bus GPS
Bus Pay Card

Interviews

Do you want to pay for your bus fare in Mobi-Bus?

What device will you use to view Mobi-Bus?

Do you want to know how much you helped the Environment?

Bus Pay Mobile
Bus Device
Bus Environment

Participants of the interview answered the previous questions and supplied other data. Some participants made the following statements:

"I think it would be a great option to have a QR Code." 

"I really like the idea of knowing how much I helped the Environment."

"I use the computer before I leave the house, yet then I use my phone on the way and at the bus stop."

Information Architecture

User Stories

User Story: As a bus rider, I want the ability to pay for my bus inside of an app on my phone and have a QR Code for convenience. I also want to know how much I helped the Environment by using the Bus. ~~~

User Story: 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

user flows.png

Sketches

IMG-1359 (1).jpg
Sketches.png
IMG-1356 (1).jpg
IMG-1354 (1).jpg

Site Map

sitemap.png

Wire Frames

To Ensure Seamless Design, I Next Created Lo-Fidelity WireFrames.

wireframes-export.png

Wire Frames - Landscape

To Ensure Responsive Design, I Next Developed Landscape Wireframes.

landscape.png

Lo-Fi Testing

Users found it difficult to get to the home page, so I added a navigational footer.

Pre-Saver.png

Before

Arrive.png

After

Hi-Fi Prototype

Our Hi-Fi Prototype allowed test users to flow throughout the app seamlessly once the navigational footer was added. The first iteration of the Hi-Fi design was less appealing to some users, and after feedback, I went in for a new styling approach.

Ugly.png

Before

MobiBusUI.png

After

Learnings

This was the first project that I have ever worked on. I learned a great many things. More people ride the bus than I realized. People really want to know the exact location of a bus. I learned a great deal about working inside the Figma program and that prototyping is extremely simple once you have your wireframes designed.

Final Thoughts

Should I decide to iterate this more, I would likely add drop down menus and apply some of the new design knowledge that I have acquired recently. There will be an opportunity to add features in future versions of this app, such as bus occupancy levels, heavy traffic alerts, and real time update notifications.

© 2025 by Orion Moon Studios.

  • LinkedIn
bottom of page