From Idea To Product.
Developing A Transportation App
Client:
Midsize Midwest MetroBus inc.
A transportation agency for a midsize metropolitan area in the midwest, hired me to develop a bus app that would help their users navigate the public transportation system with ease. Due to expansion, numerous bus routes have been recently added. Many of those routes stop at the same bus stop. Riders want to know when the next bus will arrive at each stop. They also want to know how much time they have to get to the bus stop.
I developed the MMMBinc app to satisfy those needs.
Lead Designer:
Monica Longmire
Senior Designer:
Shayna Blum & Paulette Besa
Junior Designer:
Emilio Campos Salazar
My Role:
UX Research
UX Design
UI Design
Copywriting
Branding
Wireframing
Deliverables
THE SOLUTION
THE PROCESS
DISCOVER
DEFINE
DEVELOP
DISCOVER
MVP
Minimum Viable Product
The client gave us a list of the main features that the app should have.
.png)
Ensure that any rider can tell when each of the buses arrives at the Washington & State bus stop.
.png)
Ensure that all riders can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop.
.png)
Allow riders to select one of seven bus lines to see a list of its future arrival times at the Washington & State bus stop.
Competitive Analysis
.png)
I conducted a competitive analysis of the Moovit app, which is an international transit app.
​
I looked at their UI and looked for how Moovit solves our MVP requirements.
​
Mapped out their userflows
​
Created a SWOT chart
Solves MVP 1 & 2 1. Ensure that any rider can tell when each of the buses arrives at the Washington & State bus stop. 2. Ensure that all riders can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop.
Solves MVP 3 Allow riders to select one of seven bus lines to see a list of its future arrival times at the Washington & State bus stop.
Surveys
Conducted surveys to gauge the general publics opinions on their experience of their public transportation system and the products they use to navigate them.
We received 35 responses.
About the users
About their service
About their experience
About apps they use
Proto-Personas
Using the data collected from the surveys I put together some proto-personas to represent a variety of our user demographic
Interviews & Personas
To get an in-depth understanding of the qualitative data I reached out to three of our survey takes to interview. And created better defined personas from the information gathered during the interviews.
Conducting interviews helped me narrow down the user demographic into three categories: Occasional Riders, Commuters, and Daily Riders.
Journey & Empathy Map
Synthesized the data collected into a user journey map & empathy map to model what a person may experience while they navigate their local public transportation system
User stories
Created a list of possible user stories, for this project we focused on ones that revolved around the MVP
DEFINE
User Flows & Site Map
I created user flows for the app starting with sketches, refined it on figma, and created a site map for the layout of the app.
Wireframes
Sketched out wireframes, refined them in Figma.
Low Fidelity Wireframe
Low Fidelity Prototype
The finishing touch for the prototype was a splash of purple to give it a feeling of cohesion
DEVELOP
Style guide
The company needed to develop a style guide for their products from scratch.
We began by examining the way the company wanted to present itself
MIDSIZE MIDWEST METROBUS inc.
Defined itself as:
​Modern
Luxurious
Fun
Efficient
Bold
Appeals to the urban demographic
Mood Board
Color Palette
We picked a mainly purple color palette with highlights of magenta and gold to embody a feeling of modern luxury with an a appeal to the urban culture of Houston.
Grays and black for high visibility.
White is also highly visible on the purple background,
Typography
Saira Stencil Felt modern and urban like graffitti
Epilogue was easy to read and modern.
LOGO
I wanted the logo to implement the color palette and the typography that we are using for the main headlines of the app. And to have a clear reference to the company name. I tried out some versions of this.
Final Logo
Occasional riders rarely use the public transportation service. Mainly when it is an absolute need.
Commuters mainly use the bus service to get to work. Occasionally using it for recreation.
Daily riders use the transportation system on a daily basis for all of their needs.
Occasional riders rarely use the public transportation service. Mainly when it is an absolute need.
MVP
COMPETITIVE ANALYSIS
SURVEYS
PERSONAS
INTERVIEWS
JOURNEY MAPS
COLOR PALETTE
TYPOGRAPHY
LOGO
STYLE GUIDE
HIGH FIDELITY WIREFRAMES
USER TESTING
FINAL PROTOTYPE
FUTURE IMPROVEMENTS
USER STORIES
USER FLOWS
SITEMAP
WIREFRAMES
CLICKABLE PROTOTYPE
DELIVER
Early Feedback
Initial feed back pointed out the usability of some elements in the app were redundant, specifically the search bar and the search icon. I removed some elements and the alert manager page.
.png)
Map
Icons
The placeholders Icons were far from perfect, we chose cleaner modern designs, that would stand out on their own.
Specifically the bus line and bus route icons were too similar
Bus
Station
Navigation bar
The navigation bar had to be simplified after elements were taken out. I changed the highlight color, and gave it a sleek modern feel.
Style guide
High Fidelity Wireframes
User Testing
Our user testing focused around our original MVP requirements and visibility.
User Test Script
Onboarding Page:
Do you understand what the buttons are for? Please explain
​
Map/Dashboard Page:
Identify your location
Identify a bus stop
Identify the search bar
Find the Washington & State bus stop
Start a Journey to 114 MLK Road from your location
Start a Journey to 114 MLK Road from 111 11th st
​
Bus Stop Page:
Find out when the next bus is arriving at the Washington & State bus stop
Find the future arrival times for Bus Route #6
Find the mapped out Bus Route #3
Find the directions from your location to the Washington & State Bus Stop
Assuming the time is 12:00pm how much time do you have to get to the Washington & State bus stop before the bus route #1 arrives?
Ensure that any rider can tell when each of the buses arrives at the Washington & State bus stop.
Ensure that all riders can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop.
Allow riders to select one of seven bus lines to see a list of its future arrival times at the Washington & State bus stop.
Can the user recognize the icons used and can he see the elements with ease
Test Subjects & Results
DELIVER
You can check out our final prototype here!
Future Improvements
To get MMMBinc App launch ready we will need to:
Integrate live data
Create a live bus tracking system
I recommend that the alert manager be reintegrated, to replace the favorites page.
Create a page dedicated to all the individual bus lines for the city.
Closing Thoughts
The MMMB Inc. transit app was my first taste of UX/UI. Creating and iterating an app proved to be challenging and a lot of fun to take on. I conducted user research and became familiar with the double diamond design thinking model. I also created a style guide and designed an accessible user interface. In the future I aim to improve the way in which I collect and synthesize my data, to create more accessible designs.
​
Thank you for reading.
