A Transit Mobile App for commuters in the St Louis area for tracking their Bus.
View Prototype
MetroBus Transit Mobile App for commuters, which allows you to receive, in real time, information about the time of arrival of the next bus, to chosen stop created and track selected routes and feel comfortable while traveling the city. However, 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.
My Target Audience for this project includes: School Students, Workers and the General Public.
- Riders can’t tell when each of the buses arrives at Washington and states bus stop.
- Riders need to know how much time they have to get to Washington and states bus stop before the bus they need arrives at the stop.
- Riders want to select one out of seven bus lines to see a list of its future arriving time.
- Riders would like to plan for a trip.
- Check bus Schedules and Next Arriving bus to keep track of their bus.
- Users will be able to get real-time update, and keep track of their journey and along the route on a map, with indications provided for remaining time and number of stops left on their journey.
- Most of the users are more inclined in technology, this gives me the motives to modern interface design trends to better convey the message or values.
- The app will Include information for upcoming departures on favorite Bus Stops.
- The app will Provide a live, interactive map displaying the user’s location and nearby transports.
- Navigation steps and informations for each journey
The heart of understanding any problem, there should be in depth research done to know the root cause of the problem. I did multiple rounds of user surveys and interviews. The key observations are noted below.
Key DiscoveryI did some research about what other transit app offers. I needed to dig deeper into the companies of the transit app world. In my user survey, I asked which transit apps they mostly use daily. Most of thier responses includes Google maps, Moovit and Transit Stop. Here is my analysis
- Suggested routes
- Set reminders
- Choose preferred mode of transportation
- Share journey
- Doesn’t show names and types of nearby buildings
- Doesn’t show different terrains
- No Suggested events
- Easy Navigation
- Calendar feature
- Intuitive navigation structure
- Taxi and Ride feature
- Text and content visibility
- Ineffective page loading
- Poor Google map integration
- Too many details on trip information
- This application does not provide fares or have a way to buy tickets.
- Real time Analysis
- Good color contrast
- Content loading speed
- Obvious call to action
- Confusing navigation
- Search button not visible
- Irrelevant ad
- Poor map visibility
- Does not show individual bus stops or have a way to display bus stop icons
- Navigation button on the settings button
- A more improved map integration
- Modern design trends to better convey the message or values
- Allow user to turn on notification to get updates about their trip
Based on the information gathered during the interview, I crafted 2 user personas to better understand the target audience’s motivations and frustrations. Let me introduce you to Sarah and Cole!
From the insights gathered from the market research, survey results, and my target audience, I created user stories. I concentrated on the main features a user would accomplish when using Map It and organized each story as “high”, “medium” and “low” to serve as a basis for the MVP.
I created the user flows in Whimsical to illustrate how a user will go through the app to accomplish those goals.
These are steps on every goal the user is trying to achieve.
Afterwards, I sketched out low-fidelity wireframes using the user flow to understand what the user will see on each screen. Once the sketches were finalized, I translated them into digitized wireframes using Figma.
With my user stories and flows in place, I can begin sketching with paper.
User tests were conducted at every milestone of the project in order to identify problems with the design and uncover opportunities to improve on. I performed three usability tests to get some feedback. Here are some feedback i had:
- I had 4 participants in the test. 71% preferred the icons with labels vs 29% who wanted to leave it out.
- Users was confused about the Bus color. They did not know the bus stop was clickable. I improved this pain point by adding 3 color codes using the color palette to make the button more obvious and clickable.
- In order to receive real time update, a notification Icon was requested. So i added the notification bell on the top left corner on the home page.
- The navigation icon on the bottom looks flat, so i added text to fulfill user accessibility.
I choose the brand name “STL MetroBus” for the transit app. I was slightly inspired by the name of the city, St Louis, for helpful guide to who is easily accessible.
After choosing the product name, I designed STL MetroBus It’s logo. I incorporated the location pin symbol to represent the mapping software and added the bus to represent the user's commute. Below are different logo variations and final logos are shown on the right.
Although this was a small project with one very specific use case, it was important to approach it with a holistic view. I needed to make sure that based on my user survey results, I was including all the pertinent information, not just the information to fulfill the brief. I learned to put myself in the shoes of a commuter using this app, and determined all the information I would need or want to complete a trip, like how far away a stop is from me and a subsequent walking estimate. Those small touches, while not necessary, sets a product apart from the competition.
I also enjoyed working with IOS Material Design principles and creating the app within their guidelines. It can be tempting to break out of the box and create something brand new, but for a utilitarian app like this, often to be used in time-sensitive cases, it makes more sense to work with a visual language that would likely be familiar to a lot of people. Working on this taught me that the best designs are not necessarily the flashiest, and that consistency is key to creating a good user experience.
