iBUS transportation

Designing an App from Scratch

The app aims to improve the bus riders' experience by solving the problem of inaccurate expected bus times and helping riders easily locate and identify their buses among others arriving at the same time.

View Prototype

My roles: UX, UI

Design style: Mobile application

Project Overview

This project was born after discovering that the expected bus time is rarely accurate. The bus project seeks to address the issue bus ridders have when trying to locate and identify their bus from other busses with a specific time of arrival.

Responsibility

Tools

User Research

User Survey

User Interview

Usability test

Figma

Adobe Color

Photoshop

Google form

Duration

4 weeks

Problem

Due to recent expansion, a city in the midwest has added multiple bus lines, many of which severe the same stop. The city has a system in place to know when each bus will arrive. However, they are unsure of how to share that information with their riders.

Goals

The goal of this project is to create a mobile app that can be operated by the local city transit system that serves thousands of commuters to help locate and identify riders bus from other buses and when the next bus will arrive at each stop and how much time they have to get to the bus stop.

Help commuters identify their arriving bus
Show when their bus is arriving
Give a time frame for the whole trip

Discovery

Competitive Analysis

I constructed our competitors from user survey

After conducting this competitive analysis, I discovered that a common theme among all of these apps is that they do an excellent job of providing accurate arrival times and making the bus easily identifiable through the use of colors and numbers. As a result, my users may prefer this particular pattern, which I may incorporate into my design. In contrast, I noticed a pattern with my competitors: they were a little difficult to use. which I want to capitalize on and expand without deviating from the needs of the business.

User Survey

Why User Survey?

Screener, Demographic data, Conditional logic and Quantitative data

I used a user survey to screen participants and gather information. I think of "user-centered design" when I think of user surveys. This reminds me that I'm creating for people. It also allows me to use the human perspective to create solutions at all stages of the problem-solving process.

User Research Results

Which transportation apps do you use when taking the bus?

What information do you think you need, to identify which bus is yours?

User Interview

I interviewed potential users and participants from the user survey to compare their experience of using a transportation app and not using any app. In the responses I got, most participants said they would only guess if their bus was coming and finds it frustrating to think their bus is arriving when a different bus comes at the bus stop.

Whether it's traffic, longer stops to assist passengers in wheelchairs, or taking the bus out of service for maintenance, riders have made it clear that the issues are that they don't know which bus is coming and how much time they have to get to the bus stop

Top insights from the interview

Participant mentions that they are forced to guess when their bus arriving
Users find it frustrating to think their bus is at the stop sign when it in fact a different bus
Quantitative data

Persona

Lucas Howe is the chosen one to represent the commuters that participated in my survey. The survey indicates that most participants are a student and have part-time jobs. I used Luckas to communicate and summarize my user research.

Journey Map

I made a journey map to better understand how commuters locate their arriving bus, interact with the service, and identify opportunities for improvement. The map revealed frustrating commuting patterns and how I could add missing interaction points.

Define

User Stories

Site Map

This is an eagle view of the app designed to show a hierarchy and improve navigation.

Sketches

I started the design process with low-fidelity sketches to get my solution down on paper. This allows me to make faster decisions through visualization before moving on to the prototype and testing it with users. My sketches were inspired by the results of the initial user survey, the business goal, and the heuristic evaluation. With the exception of changes, each sketch addressed the problem that was mentioned and solved it. This was important because it allowed me to return to the sketches throughout the design process to ensure I didn't get off track.

Wireframes

I used Figma to convert my first sketches into high-fidelity wireframes. To conduct tangible usability testing, I made this wireframe clickable so that I could gather information about the type of interaction expected from users based on their mental models.

Develop

Logo and Branding

Time to diverge again. I looked at Kansas city’s transportation buses and the color blue seems to represent the city because of that I knew it was important to match the branding to the already existing bus’s brand so it’s governed by the Mental model.

Hi-Fidelity Prototype

Usability test

After building a high-fidelity prototype, it was time for usability testing. The primary purpose of this exercise was to identify problems and find solutions before the product is finalized.

Here, I gathered user feedback and made changes so that users could better understand the labels and overall content of using the bus icon, numbers, and letters.

Before

After

View Prototype

Final Thoughts

iBUS is where I became a full-fledged Uxer through research, heavy ideation, and designing from atoms to pages in Figma.

I learned the significance of human-centered design and how it can assist you in creating a better product or service that empathizes with users. I also manage to use heuristic analysis to entice customers so that they can be guided into taking action toward their goals.