Simplify the search for bus schedules and updates with this quick and easy-to-use app.
Busybus is an app that helps users find bus schedules and bus updates in the easiest and fastest way. A client, a transportation agency in a midwest city, wants to provide accurate bus information to its customers using buses. This app allows users to have bus operations, updated bus schedules, and real-time bus information. Moreover, the customers can check directions to a destination with a map in the app. These all features in Busybus help users find accurate details on buses with a simple-looking design.
Research: Competitive analysis, User Survey, Empathy map, etc.
UI Design: Logo, Color palette, Layout
Information Architecture
Digital Wireframing and prototyping
4 weeks
A transportation agency in the midwest wants to let audiences know about bus operations updates and information with an app in real-time. Currently, they offer bus operation schedules on their website and post them at each bus stop, but those schedules do not provide changes of the plans because of the reasons, such as traffic or maintenance of buses.
Bus users in the midwest city.
I compared four transit apps, Transit stop, citymapper, moovit, and DC Metro, currently used for bus users. I wanted to learn which services and features those apps offer for their users through competitive analysis.
From this analysis, I would like to have several elements from the strengths below.
Based on the survey and competitive analysis, I made two user personas, Ellan and Jake. They helped me to develop critical features in the app. I wanted to focus on their behavior, goals, and pain points when using buses and other transit apps.
Ella: a working mom
Motivation
Ella’s life is very tight and busy as a working mom. She wants to know accurate bus operations information to calculate the time she needs to wait. Primarily, she wants to know the precise time in the morning and after work to pick up her son from a daycare center. In addition, Ella wants to have a daily bus schedule to make a plan before she starts a day.
Needs/Goals
-Want to know about the time of the next arriving bus
-Get the updates of a real-time bus schedule.
-Want to make a plan before going out.
Frustrations
-Inaccurate information
-Too many advertisements when using bus apps.
Jake: a busy software engineer
Motivation
Jake needs accurate information for the bus operations to know how long he needs to wait for the buses. In addition, he wants to save his favorite routes for the transfer.
Needs/Goals
-Get the accurate and specific information of buses for transfer
-Have bus apps that look simple and easy to use
-Get the updates of a real-time bus schedule
-Save several bus transfer routes.
Frustrations
-Looking complicated and not easy to use
-Inaccurate information for the transfer
Based on the persona, I developed this user journey map to understand users' flow to achieve a goal in a specific scenario.
After I made personas, I wanted to understand users’ motivation and their goals when using this bus app. So I set their specific goals and wanted to see which benefit they would get after achieving them. These user stories helped me to focus on essential content to provide accurate but straightforward bus information.
I included a login page and allowance pages for location and notification first. After those pages, users can search buses, bus stops, and destinations by writing on the search bar. They can search with bus numbers and the name of bus stops. If they click for a bus after they search for it, they can have more information about the bus, and there is information of bus stops where the bus goes. Moreover, they also search for a destination when they want to use buses. Users can get bus information to get to a destination.
This sitemap shows the structure of the bus app and its contents. After a user sets general information for login, location, and notification, there will be information about bus, bus stop, destination, recent search, and favorite.
These are the sketches for wireframes. There is a “get started” button to start the app. After that, there are three cards which are helping users to use the app faster and easier. The cards are login, access for location, allowance of notification. After users click yes or no, they can see a search page with the search bar, favorite taps, and recent search tap. Users also use a map and see several routes to get to the destination. There is specific bus/bus-stop information to check which bus is coming and which buses are at a bus stop.
These are the wireframes based on the wireframe sketches. I try to make this digital wireframe as specific as possible before I create branding. These wireframes helped me when deciding on colors, typography, and images.
Simple design for users to understand how to use the app.
Kind and warm moods.
Sketches for the logo and the process of making logos.
I want to have bus images on the logo. So I put a tire-like image for each B in the BusyBus. I made several of the logo designs and chose one of them.
I created and designed the images, colors, typography, buttons, logo, and icons. I chose the gradation colors with dark blue and pink to show users that this app is professional and friendly. For the typography, Roboto, I also chose a sans-serif. I want to provide bus information pretty clearly and accurately, so I decided on the typography. I want to make the buttons, logo, and icons as straightforward as possible to deliver bus information with a simple-looking design for users to use the app more accessible.
Based on the branding I developed, I made high-fidelity mockups. With the high fidelity mockups, I conducted usability tests....
To have valuable insights and ideas from the users on how they think and how they use the bus app.
To evaluate the product with potential users.
To find unexpected problems that users might encounter when they use the bus app.
After finishing the usability test, I developed the prototypes I made.
More search options such as; most minor time routes, most minor walking routes; fewest transfers; Lowest cost; Fewer people
More information on the map. ex) time for walking to a bus stop or a destination
There is a link to see the high-fidelity mockups below. These are the results after the research process, survey, branding, wireframing, and usability test.
These are the key images from the high-fidelity mockups. In addition, users can find bus operations and accurate time schedules.
There should be more time and money for the visual map to work.
It would be better to have more colors for each bus line to easily understand which buses are coming and which buses arrive at a bus stop.
It was great to see the app got progressed as I worked hard as much.
It took more time to design the logo than I had thought, but it was delightful because it was an excellent chance to show my creativity.
Not only I tried to understand my potential users when I did surveys and interviews, but also I focus on making my own decisions.
I worked hard, but I think I need to work smarter than harder for the next time.
