ridespy

VIEW PROTOTYPE
What it is: A mobile app to take the stress out of commuting
My Role(s): Development, Research, UX Design, UI Design
Deliverables: Site map, user flows, personas, design sketches, wireframes, high-fidelity prototype and screen mockups
Project Duration: April 2022-June 2022 (Course project)

the challenge

... So, what's the problem?
Imagine: you're leaving work after a long day of ignoring passive-aggressive emails and looking for a new job. As you're still down the street, you can see a bus pulling up to your stop. Like most days, the destination sign on the front of the bus isn't displaying anything, but this is in the general window of time when your bus arrives. You have to go by experience, because the posted schedule is always wrong and this stop serves six other bus lines. Ready to get home for a relaxing evening, you decide to chance it. You put dignity aside and become that person who runs for the bus.
After sprinting down the street, you make it to the bus, huffing and puffing (you really need to up your cardio), just as the last passenger is loading on. It's then that you can see the working destination sign on the side. This is not your bus. You've just become that person who runs for the bus and didn't even catch the right one. How embarrassing. Total yikes for you.
tl;dr
Bus riders who frequent the high-volume Washington and State bus stop are frustrated with how difficult it is to determine which bus is coming and going, resulting in missed rides and confusion.
White man in medical mask waiting at an empty bus stop on a country road

process

A city bus stopped at a bus stop in an urban city on an overcast evening
... So, what did I do?
  • Quantitative and qualitative user research (user survey and user interviews)
  • Competitive analysis
  • Defined the problem and audience with user stories and personas
  • Developed user flows, sketches, wireframes and prototypes
  • Style and branding
  • Cognitive walk-through/task analysis usability testing
  • Delivered high-fidelity prototype and mockups

research & findings

... So, what do the people want?
  • As a bus rider, I want to know when my bus is arriving at the Washington and State bus stop, so I can calculate how much time I have to reach the bus stop
  • As a bus rider, I want to know the next bus arriving at the Washington and State bus stop, so that I don't rush to the bus stop if it's not my bus
  • As a bus rider, I want the ability to view future arrival times for any of the seven bus lines (serving Washington and State), so that I know when my bus arrives
key survey findings
  • 55.6% of users only ride the bus 1x/week
  • 66.7% of users never miss their bus
  • 72.2% of users take the bus to work
  • Users' biggest frustrations are long wait times (33.3%) and inaccurate schedules (33.3%)
White man in green sweater and khaki shorts with a red backpack sitting on a bus stop bench as a city bus pulls up

Style & branding

RideSpy style guide including logos, typeface, color scheme and design elements
... So, what's the look?
  • Split-complementary color scheme
  • Primary blue with marigold yellow for emphasis and highlights
  • Friendly logo with your commute "at the top of his mind"
  • Secondary logo modeled after a minimalist eyeball (jaundice not intentional), utilizing the primary blue as the iris
  • Friendly, welcoming and accommodating to both experienced and new riders
  • ADA and WCAG compliant

the solution

user flow example

Home screen
Returning users select "Stops" under Favorites, conveniently located right beneath the hero section
favorites screen
User selects the Washington & State stop from their list of alphabetically listed favorite stops
W&S stop screen
User taps their bus from the prioritized "Upcoming Arrivals" section to view more details

route screen

User views the route information for the remainder of the day, with options to view full schedules by route or station

hi-fi prototype

High-fidelity mockup screen on an iPhone 14
... So, why this design?
  • All of my KPIs were met during usability testing
  • Users completed the user flow without any confusion or prompting
  • User flow tasks: navigate to the Washington and State stop, check the next bus arriving at the Washington & State stop, and view all future arrival times for any of the seven bus lines
  • Prioritizes ease and efficiency
  • Clutter-free UI that makes information simple to scan quickly
VIEW HI-FI PROTOTYPE

conclusion

The end of another day at the office, the beginning of another commute home to unwind. You're just turning the corner when you see a bus with a defunct destination sign pull up down the street at your stop. Having wised up since your humiliating debacle last week, you've downloaded RideSpy and set up a profile to take the guesswork out of navigating Washington and State. You open the app and with two taps of your thumb you see that your bus is still four minutes away. No need to run! You stroll leisurely to the bus stop and make it there with a minute and a half to spare. You're able to easily tell when your bus arrives because RideSpy provides you with real time updates on every bus line's ETA and exact arrival time at Washington and State in the app. You board your bus, stress-free and ready for the weekend thanks to RideSpy!
BACK TO CASE STUDIES
A young woman in an orange and white-spotted jacket standing on the bus