BUSTLE App

UX/UI, Brand & Identity, Visual Design

Design roles | UX Design | Brand & Identity | Visual Design | Research

Duration | 2 weeks - November 2020

Tools and Software | Figma | Adobe Photoshop | Adobe Illustrator

Stories & Flows | Paper Prototype | Wireframes | User Testing | Visual Design

Project for Bloc UX/UI Designer Track Programme

Overview

What is Bustle?

When it comes to catching a bus, many riders find themselves frustrated by a variety of issues. From rushing to catch a bus that's not there, to dealing with late or inconsistent bus routes, the list can be long and arduous. That's where Bustle comes in - it provides a reliable companion for bus riders, delivering all the information they need in real-time. With Bustle, riders can easily find the nearest bus stops and see which lines are running through each stop, along with their respective times. This gives them the peace of mind they need to navigate the bus system with confidence.

Problem Statement

"Due to expansion of a Mid-Eastern Bus service in Chicago, more bus routes have been added and subsequently many of these stop at Washington and State bus stops." Bus riders often feel frustrated and uncertain about their commutes due to the lack of information available to them. They want to know when their bus will arrive, if it's the correct one, and which lines are available at their particular stop. That's why an easy-to-use bus tracking system is essential. With such a system, riders can easily keep track of their bus, see the available lines at popular locations like Washington and State, and even determine whether they have enough time to make it to their bus stop before their bus arrives.

The Solution

The challenge was to develop a mobile application for a city's transit system, which serves thousands of commuters. This app needed to help riders differentiate between 7 different bus lines and allow them to determine if they had enough time to catch their bus, as well as how much time they had to get to the required bus stop. Bustle meets all these requirements and more, delivering fast, real-time information right to users' fingertips.

Discovery Phase

To begin the discovery process, I conducted a competitor analysis to identify what makes current travel apps user-friendly and aesthetically pleasing. While there were a few apps that came close to achieving the goals of what the client needed, such as Moovit, Citymapper, and Transit Stop, none of them achieved the desired result. Most of these apps were bland, difficult to use, and confusing. With this knowledge, I set out to create something that was sleek, easy to use, and visually appealing.

I conducted User Surveys and created a questionnaire to establish some of the key demographics for the target market. From the research, I found that most users struggled with the same issues as stated in the beginning:

87% wanted an onboarding process
95% of users wanted to know the live information of the bus and if they had the time to get there
88% of users wanted an easy-to-use app that provides all the information with little or no effort
20% of users were willing to pay for an app

The features that mattered the most were bus line information, time it takes to get to the bus stop, and the estimated time of arrival of the bus. Using this information, I created user stories, personas, and empathy maps. These tools gave me a solid foundation for the app, and combined with usability testing, they ensured a well-rounded development process.

Branding and Identity

Conceptual Ideation

In choosing a name and logo for the app, my goal was to find something that was concise, easy to pronounce, and ideally a clever play on words. Initially, I considered the name Livebus, but it was already taken. So, I did some research and brainstorming with the word "bus" and eventually came up with Bustle. This name is a great play on words, as "bustle" means to move in a busy and energetic manner. It met all of my requirements, and it was a perfect fit for my app. I wanted the name to convey to users that the app was live and always displayed real-time information

I did extensive research on colours for my project. At first, I was considering using yellow, dark and light grey. However, I came across a popular school bus tracking app in the United States that uses yellow. Since I wanted the logo to showcase movement, I decided to change my colour scheme. I chose Razzmatazz (pinkish red) because it's youthful, modern, and bright. The complementary colour to Razzmatazz is bright turquoise, which pairs well together. I opted for an off-black background for accessibility reasons.

Information Architecture

I progressed with the user stories and user flows to identify the key features of the product. The user stories were subsequently transformed into user flows using Figma, which visually demonstrate how users can interact with the product and achieve their objectives.

Paper prototype - Sketching

I utilized the site map and user flows to develop wireframes and a preliminary clickable prototype. The high-fidelity mockup was then produced based on these, but it went through numerous iterations.

Wireframes to Hi-Fidelity Mockups

After sketching, I moved on to high-fidelity wireframes and prepared for prototyping and testing.

Refinements/Changes made after Usability Testing

Usability Testing and Hi-Fidelity Prototypes

Usability Testing

The usability testing was incredibly helpful in identifying issues early on, which led to changes in the final design.

OnBoarding

Home Screen

Browse Bus Stops and see its respective information.

Taking into account feedback from previous user testing, this feature was designed to provide users with a fast and efficient way to find the information they need. The user flow was streamlined to make it easier for them. Upon opening the app, users can immediately see on the home page the bus stops located around them and their essential information, such as the arrival time of the next bus, the number of bus lines serving the stop and their corresponding numbers, and the walking time required to reach the stop.

Bus Stop Screen

Browse the Bus Stop, and see its times, and route

After selecting a specific bus stop, such as the Washington and State stop, users are taken to a dedicated page where they can view all the lines that pass through the stop, along with their names, route colors, and timings. I developed a unique feature where the app displays the order in which buses will arrive at the stop. For each line, users can see the future arrival times, and a red, amber, or green indicator shows whether they have enough time to catch the bus. This feature eliminates guesswork and allows riders to plan their journey or hurry to catch the bus. Moreover, selecting the info button provides an explanation of what each indicator color means.

Bus Stop Screen - Extended

Browse the Bus Stop, and see its times, and route

After selecting a bus stop and viewing the available bus lines, the user can choose a specific line to track. In this case, we have used the Madison route number 20 as a mockup. The user can then view the bus's future arrival times and track its current location on the route. Additionally, the home screen allows the user to select a walking icon within the bus stop information, which takes them to a screen with a map and directions to their chosen bus stop.

Outcomes and Results - What I learnt

One of the biggest lessons I learned during this project was the importance of empathising as best I can while conducting user research. I discovered that many users were trying to find ways to get to a specific location, not just locate their nearest bus stop, which caused me to shift my approach when explaining the purpose of the app and how it could be useful.

As a relatively new UX/UI designer, I found the project incredibly informative and rewarding. The UX/UI plays a vital role in solving users' problems, and the outcomes and key lessons I learned were numerous:

Usability testing: I was amazed at how much I learned from these. The usability testing helped me identify issues early on, allowing me to make changes quickly.
Empathy: Preconceived ideas can significantly affect the usability testing process. Therefore, it is crucial to define what you are testing and communicate this upfront in interviews. Also having patience was a big insight I gained from testing
Iteration and refinement: I spent hours refining the high-fidelity prototypes, continually changing and improving the designs.
The importance of UX/UI designers: I realized how important the work of UX/UI designers is in building interfaces that make the experience enjoyable for the user.

Conclusion

If I decide to proceed with this app (the project is currently finished as it stands), future functions of the app could include:

Live notifications that inform users when the bus is within a couple of feet of the stop, as well as when to get on and off their specific bus.
Complete journey planning functionality, which includes walking to a bus stop, catching a bus, walking to the destination stop, and navigating to the next location.
Light/dark mode options for users to choose from.

< Previous

Next >