How can a bus app help users check the status of their bus? For this project, I designed and prototyped a mobile application operated by a city transit system that serves thousands of commuters.
view prototypeUX Research
UI Design
Branding
Competitive analysis
User surveys
User personas
Experience mapping
User flows
Site map
Wireframes
Branding
Mockups
Usability tests
Prototype
Figma
Adobe Illustrator
Adobe Photoshop
Miro
3-weeks
Recent expansions at different bus stops have left midwestern bus riders confused.
Due to expansion, numerous bus routes have been recently added. Many of those routes stop at the same bus stop. Riders want to know two things:
Give riders more clarity.
I went on the app store to look at all the different public transit apps that were already on the market. These three apps were the ones I chose to analyse.
Google maps is a great app with the ability of giving users directions, a live GPS for driving or walking, it displays public transport routes and even shows you local restaurants. For the task at hand however, users needing to find crucial information fast, this proves to have too many features.
Moovit's interface is good enough for finding public transport routes and stations' information but there is no map on the home screen where you can see your location in relation to nearby stations or bus stops, adding steps for users.
For the scope of this project, Transit pretty much solves all of the challenges users were facing. The only thing that seemed confusing was how the interface works at first. The stops are not automatically displayed on the map. Instead there is a list on the screens of the transit lines nearby and once you select one of them, it displays the nearest stop.
In order to better understand users, I created a survey using Google Forms. I posted the survey on Reddit's different subreddits, like r/UrbanPlanning, and other social media platforms. I received 40 responses which gave me a good representation of the typical bus rider. Here are some of the responses from the survey.
The findings from the survey allowed me to gauge what a typical bus rider is like. I realize the data might be slightly skewed when it comes to the sources where I got participants (mainly the internet or my social circle) so the actual demographic is probably older than what is reflected here. A crucial piece of information was the fact that the majority of people have a prepaid pass. Data like this helped me avoid scope creep and keep the features streamlined.
User personas were developed from the findings uncovered from the surveys.
I hate having to be at the bus stop so much earlier than I need to.
I would hate to get in the wrong bus and miss class.
I chose the Jenny persona to be the model for the user journey. This process helped me empathize with the user and see the different steps she takes to get to her bus.
One of the key findings from the survey was that 66% of people are using public transportation for work or school. With this in mind, providing users with the important data right away, even if they're downloading the app on the way to work, was essential.
The less options to choose from, the faster the user gets to the information they need to access.
I started sketching options that would allow users to not have to register for an account right away, but instead, be able to find their bus and what time it would get to the bus stop. I focused on minimizing the elements on the screen and only providing the necessary information.
The survey showed that most users used Google Maps already, so in order to simplify the learning process, I appealed to their mental model of what a navigation app looks like.
When users first download the app, they would have to choose whether the app can use their location instead of having to manually input it every time. At first, I included a pop up modal whenever the bus station was clicked. The user could see more details, but I realized this was adding extra steps to the user experience.
Since the goal of the project was to provide bus riders quick and easy to find information about their bus, I changed the design a bit. I transformed the pop up modal into a drawer that already has information, and can be dragged up to reveal the rest of it. The design would keep changing after each iteration, but at this stage I was ready to develop the visual identity.
Mind maps are supposed to get you thinking outside the box, so I came up with really interesting options. Ultimately, I thought Omnibus was fitting since that's the root where the word "bus" comes from. It means "for all" in latin, which I thought represented the app very well.
I took a similar approach to the logomark sketches. Using the words I uncovered with the mind map as reference, I began sketching to find similarities between them. I also followed Aaron Draplin's advice of writing the word in cursive, all caps, lowercase, and mix case to see what kind of personality shines through with each option.
Ultimately, the circle, the letter O from Omnibus, the I/O power symbol, and a location marking made the cut. The app needed to be seen as fast, modern and clean. Also, after conducting the competitive analysis, I noticed a lot of apps were using green, so in order to stand out, the purple was a good option—it combines the energetic red and the calm blue. The gradient reinforces the speed element, especially for users who rely on public transport for time-constrained activities.
With the logo completed, I applied the corresponding brand identity elements like the violet, dark purple, and plenty of white space. I also found fonts that complemented the logo and the aesthetic of the mobile app. Between the wireframes and the mockup, I noticed that the thumb really had to stretch to reach the top search navigation, so I placed it at the bottom for easier use.
Since accessibility drove all of the design decisions, a lot of attention was put into using high contrast, legible fonts with enough negative space, and using redundancy when colors were used for key information such as "on time" or "delayed."
For the testing phase, I recruited participants who fit the personas defined earlier. Initially, I observed how the app flow felt, how many steps it took to achieve a desired result, and how simple the whole process was.
The test-participants were using the app as intended, pleased with the clean design and aesthetic. Where they were finding pain points was in the opening of the bottom drawer, seeing all stops and scrolling from the timeline view to the real time view of the bus's location.
In order to overcome the previous challenges, I added tips to the onboarding on how to use the app, with the ability to skip for convenience purposes. I also included an "all stops" icon.
We started with two main problems—bus riders wanting to know what time the next bus will arrive at each stop and how much time they have to get to the bus stop. This prototype solves these challenges by displaying the bus stops near the rider, the upcoming bus, and what time it will get there in as few steps as possible.
Interactive prototype
We started with two main problems—bus riders wanting to know what time the next bus will arrive at each stop and how much time they have to get to the bus stop. This prototype solves these challenges by displaying the bus stops near the rider, the upcoming bus, and what time it will get there in as few steps as possible.
