Case Study: Bus App

Overview

The Washington transport app was created in order for public transit officials to share new information with bus riders regarding recent expansions, and new bus routes being added to the Washington city’s transit system.

Roles & responsibilities

UX Researcher & UX/UI designer

I conducted user research alongside other design students to develop personas and user stories, I also performed some competitive analysis, designed the information architecture, and moderated usability testing sessions. It was also my responsibility to wireframe and design the high-fidelity prototype.

Problem to solve

To assist with the development of a bus transit mobile app that would inform users when a specific bus number will arrive, as well as determine how much time they would need to get at the bus station on time.

Intended user audience

The app's core users will be those who do not have access to immediate transportation, such as school-aged children and teenagers, as well as part-time workers or, simply put, members of the working class. Secondary and tertiary users include everyone from commuters who are having problems with their primary mode of transportation and have opted to ride the bus, to vacationers from all over the world.

Scope & constraints

Design Knowledge:
Some of us were absolutely new to the concept of UX/UI design, thus it required some time to get used to a designer's workflow while also learning new knowledge on a daily basis.

Time Zones:
My group of fellow design students was from various different states, so adjusting sleep habits and being completely awake and ready was a bit of a challenge.

Solution

A high-fidelity prototype of a bus app answering the business requirements set forth was created.

Process

The discovery and research stage

After a few weeks of learning the fundamentals of UX, we started the project off with a quick meeting, brainstorming, and making sure we all understood what was expected and what the business requirements were.

Business requirements:

Help create a mobile app operated by a city transit system ( a mobile app for bus transportation).
Allow riders to know when their specific bus will arrive, and how much time they have to make it to the bus station. (B.R)
Allow riders to pick which bus #/ routes to follow. ( B.R).
The client ( transit officials ) wants to be able to share that information with the riders.

We moved on to the first stage, conducting the research, after ensuring that everyone understood the expectations and establishing some clear objectives. The group collaborated to send out a survey to learn more about the difficulties that current bus riders face.

Some of the questions that were asked:

How important is real-time bus location information?

bus routes and numbers
leaving their residency on time
Actual bus location on the map

2. What could make your experience easier or more pleasurable?

The answers:

61.9%

Users said that they were constantly frustrated with the accuracy of real-time.

For question #2, we conducted some user interviews to get some more qualitative answers to that question.

Here are the answers collected from the user testing sessions.

— Users wanted more real-time information.

— Some actually wanted a cleaner design that wouldn't get in the way of them using the app.

— They wanted a Proximity Alert, letting them know how close the bus was to a stop.

— As well as Accurate destination times.

We got together as a group and integrated the findings from the surveys with those from the user interviews to create an empathy map, a user journey chart, and three well-detailed personas to utilize as a guide in creating our first wireframes.

Empathy map

Journey map

Personas

After we finished creating our personas, we split off to conduct our own research and finish the rest of our tasks on our own. In my case, I decided to conduct my competitive analysis next and that way create my user stories.

Competitive analysis

These are the results of checking out some of the applications indicated by the participants, as well as one more application on which I was already conducting research.

Google maps:

Strengths:

Detailed street names.
Visible call to action buttons.
shows time you will arrive.

Weakness:

Does not show at what time the bus will arrive.
Lots of information on the update page, it can feel overwhelming.

Moovit:

Strengths:

Simple UI menu.
Bus route menu easy to understand.
It Lets you choose what route to look at.

Weakness:

Street routes are not as detailed.
Uses numbers instead of names for some.

DC metro:

Strengths:

It Lets you pick bus routes.

Weakness:

Basic UI.
The map is confusing.
Have to pay to remove ads.

After doing my first competitive analysis, I used that research to come up with some realistic and useful user stories.

Now that I had my personas and user stories ready, it was time to start designing how the content would be displayed and how potential users could flow while interacting with the application.

Structuring the content and flow of the App

I was fairly new to the idea of site maps and user flows, so the instructors had us all start with sketching them on paper first, and then move on to digital platforms that would allow us to implement what we had sketched.

User flow (Initial paper sketch)

User flow (Initial digital sketches, using figma)

1st draft

2nd Draft

Mr. Zaye Flowers, a senior product designer at Thinkful who mentors students part-time, also pointed me to a site called Miro. It featured templates suited for user flows, and it improved my design aesthetics as well as my comprehension of what it is and why it is important.

Final user flow

After creating the user flow, I had to make a site map that displayed all the content and features that would be found within the bus App.

First sketch

Second sketch

I was able to grasp the idea of sitemaps pretty quickly, so that did not take long.

Final site map

Sketches and wireframes

I was exposed to a technique known as the Crazy 8's. The goal was to help us design students quickly come up with solution screens for each screen in under a minute. “Now the fun part begins,” I thought at the time, and it quickly became one of, if not my, favorite exercises of the entire design process. Here are some of my rough sketches.

First paper sketch

I was coming up with the initial layout of the wireframes here.

Second paper sketch

I started diving further In and coming up with the other screens that needed to be added.

Final paper sketch

I added more detail and brainstormed on how the frames would interact with each other and get an idea of how it can turn out to be.

During the sketching phase, I was also told to make sure to include a bottom navigation system, which would allow for faster access to the most critical screens and a better user experience.

After implementing the feedback received, I created the first digital wireframes and prototype.

The onboarding process

The Home page, bus map menu, bus selector, and other recommendation screens.

The Map view, a pop-up error message, and settings screens.

Brand development & high-fidelity prototype

Now, before I could start working on the high-fidelity prototype, I had to start thinking about the brand of this fictional bus app, from the name to the colors and mood I wanted to convey to consumers, to what the logo will be. I also had to create mood boards that would help influence my choices of color and typographic elements later on.

Mood board

Color palette

Typography

With the idea and mood of how I wanted the app to have and portray, all that was needed was to create a logo that held all of those concepts together.

Logo

Initial sketches on possible logos

I chose the fifth sketch after making five others because I thought I'd be able to merge the colors and my typographic idea effectively with that logo concept, and lo and behold, the logo was born.