BRIGHTRIDE CASE STUDY

iPhone showing a logo that reads "BrightRide" with prompts to sign up or log in. There are additional screens to the left and right for log in, bus arrival times, bus arrival times with extended menu and real time map of bus location
BrightRide is near to my heart as my very first UX project that I ever got to work on. Although that definitely shows, having created this app just one month after learning what UX/UI design was rewarding and exciting.

BrightRide is an app designed to help users navigate a recently expanded bus system in a busy city.
View Figma Protoype

ROLES

Research
Design
Prototyping
User Testing
Branding

TOOLS

Notion
Google Forms
Figma
Google Docs
Google Slides

THE PROBLEM

Riders used to be able to simply rush to the bus stop when they saw a bus arrive, but with the expansion, the riders are unable to tell if the bus arriving is theirs.

Riders have expressed the most frustration with the Washington & State bus stop, so transit officials have chosen to focus on this stop. The city already has the technology to know how far each bus is from each stop, the design challenge is to efficiently share this information with riders.
The transit company created three requirements based on this information.
  1. Ensure that any rider can tell when each of the buses arrives at the Washington & State stop.
  2. Ensure that all riders can tell how much time they have to get to the Washington & State stop before the bus they need arrives at that stop.
  3. Allow users to select one of seven bus lines to see a list of its future arrival times at the Washington & State stop.
Image of a black iphone floating. It is displaying an app with a list of bus arrival times.

THE SOLUTION

I created a very simple app to fulfill these requirements. For my first project I wanted to stick to the plan and not reinvent the wheel. The design is basic but hits all the requirements.

USER SURVEY

I created a survey and asked people who have used public transit before to fill it out, gaining responses from 26 participants in total.

94.1%

ALREADY USE A TRANSIT APP

61.1%

WANT REAL
TIME MAP

44.4%

WANT BUS
ARRIVAL ALERTS

Most surprising to me was that most participants already used a transit app when they took public transportation. This showed that users wanted an app like this and it was likely to be adopted easily into the lives of people who take this specific bus system since they already navigate via apps.

The most requested feature was a real time map of the user's selected bus. This made sense, it would be easy to visualize how far away your bus is. The second most wanted feature was alerts for bus arrival, a standard for any transport app.

USER INTERVIEW

During my interview, I asked the participant to choose from the list of features. They chose the real time map. They wanted to know if the bus was taking longer at another stop or behind in traffic, which riders previously had no way of knowing.

Knowing if the bus was arriving early would be necessary too, since the rider might have to get to their stop earlier than expected.

COMPETITIVE ANALYSIS

TRANSIT

Transit is a very organized and thought out design. The hierarchy takes your eyes to the important information first, with the fine details being secondary. Opening the app shows you bus lines and a map immediately, limiting the number of clicks a user has to take through the app.

One of the downsides of Transit is that there was no onboarding process when I launched the app for the first time. This was frustrating because a lot of the icons were unclear to me and had no labels to remedy this.

CITYMAPPER

CityMapper was another good design for a transportation app. I was immediately greeted with a tour of the app that explained many of the features. It also has bright with vibrant blues and greens. Most exciting was the feature that allowed me to view a real time map of buses in my area - the exact feature I was looking to implement in my own design.

The drawbacks of this app has to be the layout. There is too much information on each screen with no clear hierarchy or call to action, leaving me a little overwhelmed about where to go.

PERSONAS

REBECCA

Girl sitting at table with open book
  • Needs to get to school on time
  • Likes to make last minute plans with her friends
  • Wants to stay safe when travelling alone

ADAM

Man wearing a black turtleneck and plaid jacket
  • Uses public transport to meet clients
  • Important to be on time to maintain professionalism
  • Has to pay attention to his camera
I created two personas for this project to explore the needs of different users. Rebecca, the college student represented the users who need to take the bus for school and recreational activities while Adam, the photographer, represented people who needed to ride for their jobs.

USER STORIES

As a business owner I want to be informed of delays so that I can arrive on time.

As a friend I want to view schedules so that I can make last-minute plans.

As a student I want to save frequent locations so that I can navigate quicker.

USER FLOW

Userflow illustrating the user's navigation from the home screen to the boarding the bus
With all this crucial research done, I made a user flow to map out the flow of the app as users navigate to their bus stop. I kept it simple and to the point.

CONTENT STRATEGY

Sitemap showing the screens for the app
Based on my user flow, I mapped out the required screens. I wanted as few clicks as possible for the user to get to their destination as efficiently as possible.

WIREFRAMES

Wireframe of home screen with the options get ride, profile and settings
Wireframe of screen asking to see user's location
Wireframe of a screen prompting user to select from nearby, search or favorites
Wireframe showing map of nearby stops
Wireframe showing nearby stops with Washington & State highlighted
Wireframe of screen showing bus arrival times for Washington & State
My initial wireframes were the first ever wireframes I created. They were a little too stylized and not as focused. I was ready to create an app and just wanted to get there, without considering the layout. I decided to redo them to have a better base to work off of.
Wireframe of home screen asking user to sign up or log in
Wireframe of screen asking permission to view user's location
Wireframe of map showing nearby stops
Wireframe showing map of nearby stops with Washington & State highlighted
Wireframe of bus arrival schedule for Washington & State stop
Wireframe of real time map showing bus arrival
With these new wireframes, I made a lo-fi clickable prototype, linking the screens together to test the flow. I used a wireframe kit for this version, speeding up the process exponentially.
Once I was happy with the screens, I did some user testing with Figma's mirror app to project the app onto my phone. This made the app feel more real and provided participants with an interface to use touch gestures.

This would prove to be invaluable, as it showed that the tab to view future times was too close to the top of the phone, triggering the iPhone's swipe down notification screen. It also did not give allowance for a status bar, meaning users could not see the current time.
View Figma Wireframes

BRANDING

images of a sunset, clouds outside a plane window, dandelions and a pastel cloudy sky
moodboard featuring three very yellow images of sunrises and logo reading "BrightRide" tested in different colors
I created a moodboard with a few different options. I wanted to give the app a happy and even dream-like feeling. I wanted to take something as mundane as riding the bus and make it feel special.

I liked the sunset color palette but thought it was a bit too pastel. Instead, I found photos of the sun rising, creating a feeling of warmth and possibility. I experimented with fonts and icons, trying to find the right combination.
Logo reading "BrightRide" with a sun behind the e
Logo reading "BrightRide" with a half sun connecting the words
I decided on the font Modak, adding a sun to the side. Once this logo was in the app, it looked awkward and off center, no matter which way I aligned it. I altered the sun and used it to unify the words of the logo, adding to it instead of distracting from it.
Light mode of log in screen
Log in screen
I ended up changing the color from purple to dark blue. It fit the sky aesthetic more and became a friendlier look. I tried out a light mode and a dark mode, and the dark mode won out unanimously in a preference test.

PROTOTYPING

Combining the two wireframes I created, I added the final details into the hi-fi prototype and add styling.
Splash screen asking user to sign up or log in
Log in screen
Screen asking for permission for location services
Screen showing the Washington & State stop being highlighted
screen showing the search bar
screen showing live map of selected bus
I utilized iOS assets to make the app feel more real and adhere to Apple's Human Interface Guidelines. I wanted to make sure the buttons and text were large enough to be legible and clickable for anyone.
View Figma Prototype

USER TESTING

I then recruited some testers and asked them to perform a few tasks through the app.
  1. Find the next arriving bus to the Washington & State stop
  2. Locate additional arrival times for the green line
  3. Determine how much time you have to get to the Washington & State stop before the purple line bus arrives
All three tasks were completed by each of the participants without outside help. Positive comments about the color choice were welcomed in.

There were also fair criticisms. One participant pointed out that the bus lines were easily lost in the background. I agreed that it needed more contrast to really stand out. I added a stroke around these indicators.
Wireframe of bus arrival schedule for Washington & State stop
Screen showing bus arrival times before stroke was added around bus line names
Screen showing bus arrival times
Screen showing bus arrival times with the Green line expanded
I also added arrows as visual queues to tell the user they would be able to expand a specific bus line, which was not present in the wireframes. Another difference from the wireframes was moving the bus line name from each individual arrival time to above the entire group. This saved room on the bar for more information.

FINAL THOUGHTS

This was my very first project so of course, I learned way more than I could ever articulate in a few paragraphs. From research all the way through to writing this case study. I look at it with fondness and through a critical lens.
In a future iteration of this design, I'd love to find ways to simplify it further, getting rid of the redundant "Go" next to every single departure time, playing with the colors more, asking more questions when I have willing and eager participants in front of me.

Given more time I'd experiment more with the branding itself, knowing what I know now about how colors play a bigger role in design. My background in illustration helps make things look pretty, but it has to be functional too.
I plan on reworking BrightRide at some point in the future, maybe multiple times, as a sort of milestone achievement to test how I've grown as a designer.
Thank you for taking the time to look at my case study! If you like my work, you can connect with me on LinkedIn or follow me on Behance. If you think we’d work well together, feel free to send me a message through my contact form and I’ll get back to you as soon as I can.
View Figma PrototypeBack to Case Studies