top of page

Case Study: Bus App

Slide 4_3 - 1.png


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.


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


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:

  1. 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:


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

Empathy map.png

Journey map

Customer Journey Map.png


UX Persona 1.png
UX Persona 2.png
UX Persona 3.png

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:



  •  Detailed street names.

  •  Visible call to action buttons.

  •  shows time you will arrive.




  • Does not show at what time the bus will arrive.

  • Lots of information on the update page, it can feel overwhelming.





  • Simple UI menu.

  • Bus route menu easy to understand.

  • It Lets you choose what route to look at.





  • Street routes are not as detailed.

  • Uses numbers instead of names for some.

DC Metro.png

DC metro:



  • It Lets you pick bus routes.




  • 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)

20210213_184243 1.png
20210213_184243 1.png

User flow (Initial digital sketches, using figma)

Frist draft of user flow.png
User flow diagram 2nd draft.png

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

20210213_184220 1.png
20210213_184155 1.png

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

Final site map

Site map Diagram.png

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

20210213_184444 1.png

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

Second paper sketch

20210213_184454 1.png

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

Final paper sketch

20210213_184504 1.png

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

Frame 1.png
Android - 8.png
Android - 10.png
Android - 14.png

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

Home Page 2.png
Android - 3.png
Android - 1.png
Android - 7.png

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

Android - 9.png
Android - 13.png
Android - 5.png
Android - 6.png

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

Mood Board.png

Color palette

Color palette.png



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.


 Initial sketches on possible logos

Logo skecthes.png

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.

Slide 4_3 - 1.png

Now on to the mockups!

First screen (walkthrough).png
Tutorial video screen 1.png
allow access to location screen.png
enter a starting point screen.png
Home Page 1.png
Bus map screen.png
wrong starting point screen.png
wrong destination screen.png
enlarged map screen.png
Bus selector menu screen.png
Other recomendation screen.png
settings screen.png
settings drop down menu screen.png

Now with all the designing and coloring done, it was time to start testing the prototype out and see if it is good to use, and also user-friendly.

Usability test

The goal for the usability test was to find out if the prototype can work, and if the desired mood effect was well received by the user. 


These were the results and overall observation.

usability results.PNG

Next steps

Next steps.PNG



Final thoughts



  • A lot of research goes into creating and designing interfaces and apps.

  • To test early and often helps save time and resources.





  • Not having good visuals

  • I was working out of scope more than once.

  • The user-friendly aspect was a bit lacking.



When users looked at the app's logo and color palette, they got the impression that I wanted them to get. The business requirements were also met.

bottom of page