BRIGHTRIDE CASE STUDY
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.View Figma Protoype
BrightRide is an app designed to help users navigate a recently expanded bus system in a busy city.
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.
- Ensure that any rider can tell when each of the buses arrives at the Washington & State stop.
- 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.
- Allow users to select one of seven bus lines to see a list of its future arrival times at the Washington & State stop.
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.
I created a survey and asked people who have used public transit before to fill it out, gaining responses from 26 participants in total.
ALREADY USE A TRANSIT APP
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.
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.
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 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.
- Needs to get to school on time
- Likes to make last minute plans with her friends
- Wants to stay safe when travelling alone
- 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.
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.
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.
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.
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.
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.View Figma Wireframes
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.
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.
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.
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.
Combining the two wireframes I created, I added the final details into the hi-fi prototype and add styling.
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
I then recruited some testers and asked them to perform a few tasks through the app.
- Find the next arriving bus to the Washington & State stop
- Locate additional arrival times for the green line
- 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.
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.
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.
View Figma PrototypeBack to Case Studies
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.