Mobi~Bus
Public Transit App
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.
Persona
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?
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?
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
Sketches
.jpg)
.jpg)
.jpg)
Site Map
Wire Frames
To Ensure Seamless Design, I Next Created Lo-Fidelity WireFrames.
Wire Frames - Landscape
To Ensure Responsive Design, I Next Developed Landscape Wireframes.
Lo-Fi Testing
Users found it difficult to get to the home page, so I added a navigational footer.
Before
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.
Before
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.