This case study was completed as part of the UX/UI Immersion program at Thinkful. The project itself was to create a solution for the following problem:
"A public transit system in the midwest has added more bus routes and stops to their services. This is causing a problem for users when they need to catch a particular bus as many buses may pass through a single bus stop during the day. Users need an easy way to identify when and which bus is approaching the bus stop before they get on the wrong bus."
Over a four week period, each student in the immersion course worked individually on a mobile app that designed a solution for: (1) multiple buses running through the same stop at various points throughout the day, (2) informing a user when a bus may have been delayed for any reason, and (3) a way to identify which bus is arriving at what time before users get on the wrong bus.
We compared three other transportation apps to find their strengths and weaknesses to discover opportunities we might be able to improve upon within our app.
(Move through the tabs on the right to see SWOT notes made on each individual app.)
Within all of our competitive analysis, we found opportunities exist for creating a simple, easy to use layout that is readable by all users. The main threat to the industry is the pandemic as people shelter in place and travel less due to quarantine restrictions.
From our interviews, we created two personas, Javier and Sara. Javier is a professional piano teacher who vacations with his family on a regular basis. He likes to use public transportation while on vacation with his family to save money. Sara is a college student who works multiple jobs to afford tuition and has an unreliable car making her needs for public transportation high.
Based on survey and interview data, we were able to identify that the majority of our users are between 18 and 44 years old. We also determined that while they use public transportation, it would not be for daily use such as going to school or work. We also concluded that users who would use this app might primarily use it when they’re on vacation or they’re primary mode of transportation is unavailable which was confirmed with interviews we conducted.
Transit has the buses closest to the user's location appear at the top of the list of bus lines. It is also a single screen with no navigation bar.
These were some of the most important user stories to design for, based on our user personas of searching for and finding bus routes with schedules that may change from day to day. Most of our user stories that we found most important for our app centered around riders needing to know when the bus arrives so that they could continue with their daily travel plans uninterrupted
This is one of the two most important user flows as these are the main objectives of users when they open up this app. They will search for a bus, and view the routes of a particular bus based on their needs. We originally had planned to allow users to save trips but I was advised to remove it as it was a bit out of scope of the MVP for the immediate problem we were solving with our design.
For our visual design we started with a simple mood board. We wanted our app to have a simple and classic feeling, with some bold color choices that would stand out to the users.
This app is based on public transit, so we wanted to represent that with an icon of a bus. We surrounded the bus icon with a lug nut design around the bus to show how this app should function as a well-oiled machine for users to easily locate the information they need.
The color palette was influenced by what is known as color psychology. The color palette consists of black (#000000) which was chosen to represent powerful and classic sophistication; dark Grey (#3F3F3F) which was chosen for being a conservative and professional color; a deep orange(#C06A19)for the multi-cultural psychology behind the color, since we are attempting to represent a wide range of individuals who ride the bus for different reasons; and white (#FFFFFF) which was chosen to complement the other colors with a clean and bright appearance.
Much like the colors being chosen for the psychology behind them, our typography was intentionally chosen. We went with Magneto for the logo as it represents the classic typeface found on automobiles in the forties and fifties. We chose Cantata One for headings and important information to evoke luxury, and chose Estrangelo Edessa for everything else. Estrangelo Edessa was chosen for the fact that it has been optimized for display on screens with small sizes and within interface elements such as button descriptions and dialog boxes.
Most users expressed that they were struggling with low internet connection speeds while completing the user testing. We also found that our chosen user testing site, Maze.design was experiencing a significant number of website issues during the same timeframe that we were conducting user testing. In the future, we plan to sit down with our users while they are testing the product rather than sending out a link for them to complete the testing on a site that may be unreliable. This means we will also need to have backup sites available for the user testing if our originally selected site is unavailable during the user testing.
For our user testing, we asked users to complete searching for Bus 212. We also asked them to purchase a single daily pass, but quickly realized that this information is actually unnecessary for the main purpose of this MVP.
Future plans for the app would include eliminating repetitive information from the search results screen, and conducting further user testing on alternate sites to test the speed of the app and find out if it truly is an internet connection issue or if the amount of time spent on each screen is due to users not being able to easily locate the information they are looking for. As this was created as part of an assignment for a class project, there are no current plans to further iterate on it.