Mockup of the app

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.

Discovery and Research

Surveys, Competitive Analysis, and Personas

Screenshot of survey results in pie graphs

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.

Screenshot of Google Maps
Google Maps has an intuitive interface with a navigation bar that allows users to plan a commute, save locations, and community features such as reviews and alarms. Their main weaknesses are the small grey font and the suggestions underneath the search bar that may be overwhelming to some users.
Screenshot of Moovit
Moovit has a main screen that is clear with space to save a regular commute, and syncs with Uber and Lyft.
Screenshot of Transit app.

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.

Information Architecture

User Stories, User Flow, Low Fidelity Wireframes, and Usability Testing

User stories for NextBus

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

User Flow example for NextBus

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.

Wireframe sketchesLow fidelity wireframe
I explored different areas in sketching before jumping into digital design. I explored different ways to organize bus lines structurally, and viewing tickets.
Final low fidelity wireframe
We then took those sketches and began digitizing our design with a low fidelity wireframe, placing the different elements of our design where we thought they would look best and be clear to users.
For the final version of our low fidelity wireframe, I eliminated the block of text below the buttons on the home screen, and made some navigational areas like the menu and back button easier to identify. We found the top navigation bar was a little redundant so it was removed. We added a back button so users could easily click to go back to a prior screen if they wanted to. We also moved the title of the screen below the map instead of having it awkwardly placed above which could be confusing to our future users.

For our internal usability testing, we asked individuals to search for Bus 212. We were given lots of information during this internal testing, such as needing to remain consistent with the size and colors of buttons and information being provided. We originally planned a user flow which would allow users to plan a trip, but were advised to remove it as this app is focused solely on searching and finding a bus arriving at a bus stop, not trip planning.

Visual Design

Branding, Hi Fidelity Mockups, Hi Fidelity Wireframes

Mood Board (Slide 1)

Mood board for NextBus
Color Palette
Examples of typography used while creating NextBus.
Logo for NextBus

Color Palette and Typography (Slides 2 and 3)

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.

Logo Design

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.

Original hi fidelity solution screens for NextBus
This is some text inside of a div block.
Final solution screens for NextBus

Original Mockups (Slide 1)

The original hi-fidelity mockup design that we conducted our original user testing with had a color scheme that the users loved, however we did have to iterate on the screens so that information was presented more clearly to users.

Revised Mockups (Slide 2)

We changed the placement of the name of the app so that it would be clearer to users. Another change that was made was to the back button on the top left of the screen as it was unclear to users how it differed from the main action buttons for users to complete their necessary tasks. We also did multiple iterations on the search results and directions screens as the information being provided to the users was confusing and misleading. We redesigned the screens to fit with design patterns that users are familiar with in apps like Google Maps and Moovit. We added areas on the search results screen where users could see what the original search was, and then scroll up the directions or view the route on a larger map.

Outcomes and Lessons

User Testing Results and Final Prototype

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.

Screenshot of user testing resultsScreenshot of user testing quotes

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.

© Copyright 2021 Laura Welch