Project Overview
My client is a transportation agency for a midsize metropolitan city in the midwest. The city had a network of public buses, and they recently added new lines to their bus system especially at one bus stop in particular at the Washington & State stop which added 7 new bus lines. This new change made it confusing for bus riders to get to their bus on time and to see when the next bus will arrive.
My Roles
-
UX Designer
-
UX Researcher
-
Visual Design
-
Branding & Identity
-
Prototyping
-
Testing
The Problem
The transportation agency doesn't currently have an accurate way to show riders an updated bus schedule so this makes it difficult for users to see when their bus is arriving, and how much time riders have to get to a stop. Bus riders reported having incredible difficulty at the Washington & State stop not having clarity on which buses are arriving out of the seven bus lines.
The Solution & Business Requirements
To create a real-time application that would show the users' selected buses in real-time. This was a great way to hit each of the scope requirements, satisfying the business needs as well as solving the user issues.
The application needed to:
-
Ensure that any rider can tell when each of the buses arrives at the Washington & State bus stop.
-
Ensure that all riders can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop.
-
Ensure that all riders can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop.
Research
Survey & Interview insights:
Specific features the users preferred over others.
Main concerns regarding rider's daily struggles.
-
Being late
-
Knowing where to go to catch the correct bus
-
Crowded stops and buses
Audience demographics. After the survey and interviews, we were able to conclude that the target audience looked like this:
-
The average age range of 26-35 years of age
-
Students
-
Suburban and Urban area bus riders
-
Working-class
Competitive Analysis
Of the different applications users said they used, out of the 21 users surveyed the top three most common transportation applications used were Google Map, Transit, and Apple Maps.
"I like how Uber lets you know exactly where your ride is, I feel that's helpful in a bus app too."
"Real-time data, as well as delay alerts.”
Personas
Keeping in mind the target audience demographics, our personas reflected the working class, busy students, and busy mothers.
Affinity & Idea Mapping
I found it easier to do mapping at this point in the process to better organize, compile, and clearly group all that we've collected so far. But no seriously, staying completely transparent with you... I had a brain freeze and needed to remember the reasons why I was designing.
Empathy &
Journey Mapping
User Stories & Flows
The most basic user story and inspiration for our main user flow:
Adrian (The user), wants to see a bus on the app in real time, so that he can be on time for the correct bus.
... will choose the stop of choice
... will see the bus in real-time
... will see the upcoming times and bus schedule
I decided to take out the verfy email address step in order to simplify the flow and keep it easy for users.
Site Map & Iterations
For the original sketch of the site map I had several screens sketched out of what I felt was necessary but what I later decided was unnecery to show in it's own screen. Like the map screen and saved routes. These would work as features on pages instead and I think thought that the "saved routes" feature would work better under account settings instead. In the final draft, I also added other necessary features.
Wireframes
The Sketches
.jpg)
.jpeg)
The Digital
The homescreen
Typing search
Search
Results screen
I wanted to keep the design simple and cut out any extra features that may be appealing but were scope creep. I wireframed for the most simple navigation for users.
Branding & Identity
Because the project timeline and scope called for only 4 weeks of research, designing, iterations, and delivery I kept the design simple. I wanted to also keep the users in mind. The users would be individuals who would be dealing with weather conditions, children, stressful jobs and businesses. So I wanted to take as much stress off of users as much as possible by keeping the application neat and tidy, simple, easy, and minimalistic.
I I started out a little complex with the logo and decided to, again, keep it simple. The final iteration was inspired by one of Uber's earlier logo designs.
Low Fidelity Prototype
After wireframing and adjusting the contrast a bit more, the low-fidelity prototype was now ready to test.
Usability Testing Insights
Contrast
The testing insights let me know that I needed to obviously adjust the contrast again along with testing colors for accessibility issues.
Exit button
What I had not realized on my own was that there wasn't an exit button on the map screen to exit the navigation.
Simple
I did get some good feedback that let me know I was on the right track. Participants complimented me on the fact that it was simple and easy to follow.
Iterations
After all the iterations, the high-fidelity prototype was born.
Staying within Scope
Showing buses in real-time hit each of the requirements and easy to follow.
I tested all of the UI colors in the high fidelity prototype for color blindness accessibility. I tested for Deuteranomaly (Green-Weak), Tritanomaly (Blue-Weak), and Monochromacy/Achromatopsia.
I also went back through the application to make sure that the font aligned with Apple's font guidelines:
High Fidelity Prototype
Accessibility
Connect with me on social media!