OnBoard

Bus route recommendations from doorstep to destination -
filtered by walk-ability.

project overview

As the public city bus network continues to grow, there is an increasing need to provide thousands of commuters with a mobile app. Issues of inaccurate arrival times, overwhelming timetables, and confusion at the bus stop were the client's main concerns.

The goal of this project was to solve the problem of bus transit confusion and to provide users with the information needed to be in control of their travel plans.

role + scope

UX Designer
User Research, Information Architecture, Visual Design, Prototyping + Testing

Spring 2020

solution

OnBoard is a city bus app dedicated to providing real-time details on the bus route that is right for your travels. Instead of tackling the entire bus system, users are provided with route options specific to their starting point and destination. With real-time mobile updates, users are able to pivot to a new route if they experience bus delays or overcrowding.

skip to solution

01: discover

02: define

03: develop

04: deliver

05: evolve

client brief

launch a mvp

This is the city's first attempt at creating an app for the bus. In favor of expediency, the city transportation department is looking to address only the main issues at this time.

improve accuracy

The city public bus network has a bus timetable posted online and at each stop. Timetables are typically inaccurate because they don't account for delays.

reduce confusion

Due to expansion, numerous bus routes stop at the same bus stop. Users are confused about which bus is arriving at their stop.

01: discover

user surveys & interviews  /  personas & user journeys

Understanding the User

USER SURVEYS

74 participants

Criteria:

  • Mix of ages and genders
    (18-65+)
  • Mix of locations
    (city center, city neighborhoods, suburbs).
  • Mix of bus use frequencies
    (almost everyday, 1-3x/week,1-5x/month).

16 questions

  • Bus and travel habits
  • Feelings and concerns about the bus
  • Demographic information

Survey Trends

01

Inaccuracy

Will my bus be delayed?
Is this timetable up to date?

02

Confusion

Which bus is arriving?
What route does this bus take?

03

Lack of Confidence

Is this my best option?
Will I be safe?

user interviews

After selecting and interviewing 4 people from the target demographic, context was added to the survey trends:

Tessa, 24

Lives in the city
Rides 3-5x/week

Matt, 31

Lives in the city
Rides 3-5x/week

Ishita, 58

Lives outside the city
Rides 1-5x/month

Ellen, 42

Lives near the city
Rides everyday

01

Inaccuracy

"I understand that delays happen. But if you tell me the ETA, I can make better decisions."

02

Confusion

" I don't need to know the whole route. I only care about where I'm going."

03

Lack of Confidence

"I hate feeling like I might have made the wrong choice - and it's going to cost me!"

Setting a Focus

personas + user journeys

the convenient commuter

Amy, 28, Social Media Manager

Amy works hard, loves living in the city and looks for any opportunity to maximize her time.

    Goals:

    • Avoid the hassle of driving and parking.
    • Easily get from A to B with minimal effort.
    • Catch up on some emails during her bus ride.

    Frustrations:

    • Not knowing when a bus is late or overcrowded.
    • Planning a bus route is time consuming.
    • City bus is behind the times.

    the occasional traveler

    Rob, 37, Contractor

    Rob enjoys going into the city for work but he finds public transportation to be frustrating.

      Goals:

      • To move around the city with minimal stress.
      • Become more confident in taking the bus.
      • To feel like he utilized his time in the city well.

      Frustrations:

      • Bus routes continually changing or being added.
      • Feeling uncertain that he's on the right bus.
      • Bus delays effecting his productivity.

      the reluctant dependent

      Ramona, 62, Paralegal

      Ramona recently had knee surgery and wants to get back to her life with minimal struggle.

        Goals:

        • Get back to her pre-surgery life.
        • Maintain a positive attitude while she recovers.
        • Feel confident in going about her day.

        Frustrations:

        • Stress she won't get to the bus stop on time.
        • Struggles to identify which bus is approaching.
        • Feels stuck if she misses her bus.

        02: define

        problem statement

        user:

        People who rely on the public city bus for some or all of their travel around the city.

        need:

        The expansion of the public city bus system has resulted in user confusion and a lack of confidence.

        Without a mobile presence, static bus timetables are not reflective of real time delays.

        goal:

        Empower the user to choose a bus route within the context of real time bus arrivals.

        03: develop

        ideation  /  lo-fi prototype  /  usability testing  /  revisions

        Ideation

        user flow

        wireframe concept sketches

        lo-fi prototype

        Created in Figma, this prototype was made to test the flow and functionality of the app. (Color and map images are placeholders at this stage).

        A-HA!

        usability testing

        5 participants were asked to complete a bus route using the lo-fi prototype.

        Henry, 21

        Lives in the city
        Rides everyday

        Lucy, 26

        Lives near the city
        Rides 1-5x/month

        Vanessa, 52

        Lives in suburbs
        Rides 1-5x/month

        Thomas, 38

        Lives in the city
        Rides 1-5x/month

        Judy, 43

        Lives near the city
        Rides 3-5x/week

        All participants were able to complete the bus route.
        But Henry initially struggled:

        "Oh, I see what you want me to do. I'm used to typing in my destination first, like on Google maps. But I see that you want me to choose the starting bus stop first. I was just being stupid."

        henry is not stupid.

        Henry completed the route but his feelings of inadequacy are the result of a flaw in the prototype's information architecture.

        Prototype

        The user makes route choices - each choice building on the choice. If a wrong choice is made, the user must go back and fix it.

        Accuracy is the responsibility of the user.

        Google Maps

        The user tells the app where it wants to go and where they would like to start. The app filters the users options.

        Accuracy is the responsibility of the app.

        Prototype

        Google Maps

        revised user flow

        revised wireframe sketches

        revised lo-fi prototype

        The new user flow takes the positive attributes of current navigation apps and applies them to the public bus system.

        04: deliver

        branding  /  solution      

        Branding

        onBoard is in direct reference to the app’s primary function - riding the bus.
        The logo is simple and bold, referencing the app name by placing the “o” literally on the “B”.

        The color palette is simple, analogous blues and grays because the city already has assigned city bus colors. City bus colors must be incorporated in the design for system continuity.

        buttons
        Icons
        navigation icons
        App Color Palette

        #0A60FF

        #0044C3

        #002975

        #BDC0C8

        #8C8F97

        #4C5059

        City Bus Colors

        Bus 155

        #B13DD8

        Bus J14

        #6B00AC

        Bus 124

        #FF6A6A

        Bus 151

        #CC3366

        Bus 20

        #3BA692

        Bus 56

        #6699FF

        Bus 157

        #36CDFF

        Bus 60

        #B13DD8

        Bus 59

        #82C51E

        Bus 135

        #D83D40

        Bus X9

        #FF7300

        Bus 155

        #3DD8BC

        Typography

        Poppins / Bold / 24pt

        #4C5059

        Header 1

        Subheader 1

        Poppins / Semibold / 18pt

        #4C5059

        Subheader 2

        Poppins / Semibold / 18pt

        City Bus Color

        Body text 1

        Poppins / Regular / 16pt

        #4C5059

        Body text 2

        Poppins / Regular / 16pt

        City Bus Color

        solution

        OnBoard is a city bus app dedicated to providing real-time details on the bus route that is right for your travels.

        Route recommendations are filtered by your full trip - doorstep to destination - and walk-ability.

        View Figma Prototype

        doorstep to destination

        Taking the bus is more than getting from bus stop A to bus stop B.

        Enter your end destination and starting point to view your filtered route options - including travel to and from the bus stop.

        walkability

        Set perimeters for the total distance you are willing and able to walk to and from the bus stop.

        route details

        Choose your real-time bus departure and arrival times with the expanded route card. Collapse the route card to view the map.

        enjoy the ride

        With the bus arrival countdown, there is confidence in knowing which bus is approaching your stop.

        After boarding the bus, a countdown will begin to your destination bus stop arrival.

        Alerts are given when your bus is "approaching" your final bus stop.

        05: evolve

        next steps for onboard

        real world
        simulation testing

        Testing the app in the real world is crucial to validating its ability to mitigate the stress and confusion of riding the bus.

        Building a MVP that can be taken on an actual route will illuminate our blind spots before we go too far down the wrong path.

        collaborate on navigation capabilities

        The navigation and real-time features of the app need to be discussed with the developers and other relevant team members.

        Open communication with these teams could also present additional function insights.

        explore "account"
        opportunities

        The "Account" page of the app was not necessary for initial launch but does pose opportunity to make the app more usable.

        User research and client collaboration could add value and boost user adoption.