Midwestern Transit
A Modern bus app designed for the needs of the people of Midwestern City.
Overview
Created a bus app for Midwestern City as part of a class project at Thinkful.
Tools
Figma, Google Suite, Pen & Paper
Roles & Responsibilities
User Research and Design of app; wireframe and prototyping.
Problem
Midwestern City has 7 bus lines that all stop at the Washington/State bus stop and need an app that shows users live bus arrivals and schedules for their specific bus line.
Solution
I created an app that shows live bus times and has a schedule showing each individual bus line and times of arrival to each stop.
Process
Discover
User Survey
User Testing
Define
S.W.O.T. Analysis
User Story
User Persona
User Flow
Ideate
Site Map
Wireframe Sketches
Create
Wireframes
Digital Prototype
Discover
I started this project with a User Survey and came out with a couple of key findings.
Key Findings:
Most people like to be 5 to 10 minutes early to a bus stop
Most people are fairly comfortable with technology
Most people would like to see bus times live from their phone app
Define
I created the S.W.O.T. analysis to compare a competitor in the same market, which was the “Moovit” app
Strengths: Big Interface, easy to use map, shows times and alerts for lines that are having trouble.
Weaknesses: Doesn’t show live times of busses arriving, too many other distractions on interface, map color contrast isn’t the best
Opportunities: My app could have live bus times as well as better color contrast with a simpler easier to understand interface.
Threats: Could be similar to other bus apps. Too many bus apps on the market.
After the User Survey I gained some insight into some of the target demographic for this type of app. Meet Lisa, my User Persona
My User Story goes as follows:
Lisa wants to schedule a bus trip:
Lisa clicks the “To” destination input
Lisa inputs her college campus
Lisa clicks the “From” destination input
Lisa inputs her current location
Lisa chooses which route she wants to take
Lisa checks the time the bus will be at the stop
Site Map
User Flow
Ideate
Info Architecture
Wireframe Sketch
After the Info Architecture I started with a basic sketch of the wireframe
These are the early versions of the wireframes I created in Figma.
Create
Wireframes
With some iteration on the wireframe design, I added a login screen, profile, home and settings screen. As well as a bus schedule to see live bus times.
Here’s the landscape view of the wireframe.
Prototype
This is the first version of the prototype but I made some Iterations to the design due to my user test findings.
My user test findings showed that users found it hard to get back to the screen they were previously on from the user profile screen…
So I added the user profile screen to every page as a dropdown menu that’s easily exitable.
