bus-it

OVERVIEW

bus-it provides a transition from physical bus schedules and routes to a mobile application using public transit trackers to alert users of the location of their next bus.

As well as adding a mobile bus pass for instant use on every ride.

This is a project that continues to be developed to better the mobile application design.

ROLE

Product Designer

Research, User Flows, Sketching, Wireframing, UI, Prototyping

Timeline – 5 weeks

Tools – Figma, Photoshop

The Challenge

Transition from physical routes and schedules to a mobile application
  • The transportation agency currently posts the bus schedules at each bus stop and wants to transition into a mobile interface. 
 
  • Due to expansion, numerous bus routes have been recently added and many of those routes stop at the same bus stop.
 
  • Riders want to know when the next bus will arrive at each stop and how much time they have to get to the bus stop.

The High - Level Goal

Create clear flows and features to attract new users and encourage continued usage

  • Encourage immediate interaction and relevant actions that allows users make quick and efficient ride decisions prior to a mobile interface.
 
  • Introduce step by step directions to facilitate the transition from physical experience to a mobile application.
 
  • Provide control and customization for every trip by allowing users to save favorite routes or bus stops for quick access while maintaining a clear interface. 

Immediate + Relevant Actions

Encourage immediate interaction and relevant actions that allows users make quick and efficient ride decisions prior to a mobile interface.

Users are able to quickly search and map their physical schedules and routes or choose from their favorites to recents on the landing page for an efficient initial interaction. The navigation bar allows for immediate and relevant actions as well.

Step by Step Directions

Introduce step by step directions to facilitate the transition of riding a bus from a physical experience to a mobile application.

Creating an overview, as well as step by step directions to let users match the interface with their physical directions. Notifications remind them of their next major steps as necessary, such as transfers or last stop.

Sense of Control + Customization

Provide sense of control and customization for every trip by allowing users to save favorite routes or bus stops for quick access while maintaining a simple and clear interface.

Users can save their favorite routes and bus stops for quick access. Providing a mobile pass ensures a quicker transaction upon riding bus or needing to add funds to ensure you can ride on time.

Design Process

Discovery

Competitive Analysis

In order to engage with new users, I researched other public transportation platforms to understand what attracts and retains users. I conducted market research to understand current product offerings and use cases.

Looking at Transit, Citiymapper, Moovit, and Google Maps, I wanted to evaluate what works and what frustrates users. Users like simple visuals to encourage quick actions to achieve their goals. Reliable and accurate information encourages users to customize their platform for more usage.

Findings

  • Successful apps have a strong visuals with clear and encouraging flows
  • Engagement occurs when users have a simple interface without overwhelming the user
  • Successful apps make use of existing design patterns and have a clear content strategy

User Research

I wanted to learn about how a connection can be made for people to go from a physical bus schedule to a mobile application to easily access their most used tasks: search for routes and bus stops, track their trips, and customize their interface for a quicker experience.

I conducted phone interviews and created a survey that was completed by 30 participants. The survey was great for quickly gathering information from a sample of my target audience, while the interviews allowed me to gain a deeper understanding of the participant’s behaviors.

The main takeaways from the methods are:

Users seek a minimal amount of information when first approached by new and recurring interfaces

Users categorize their favorite bus stops and routes based on their proximity and frequent usage

Users utilize mobile passes to be efficient and maximize their time and experience when riding a bus

Define

Brainstorming Features

To brainstorm features for the product roadmap, I created How Might We and Point of View Statements using insight from my research and Alex’s empathy map.

How might we help Cristina access relevant tasks immediately without providing overwhelming content?

  • Showing initial map with clear search function on landing page.
  • Show favorited or recently used routes on landing page.
  • Provide clear navigation bar with relevant tasks

How might we help Cristina find her saved favorites on the mobile application on site?

  • Create favorites page and action for quick finding.
  • Encourage users to take photos of bus stops to share on platform for other users to see.

How might we help Daniel maximize his time on his mobile device to achieve tasks?

  • Provide a unique mobile buss pass to save time looking for a physical bus pass.
  • Create a way to add funds through mobile pass to avoid rushing to pay with cash

Information Architecture

After identifying a solid set of major features, I mapped out the information architecture to show the hierarchy of major and minor features. It gave me an idea of how to organize content and how many interactions or screens it’ll take to complete a task.

User Flows

I developed a flow that allows for seamless and cohesive user experience with out dead ends. Given that the user may be searching for a route, the users have the flexibility to add favorite stops and routes in the mobile app. They are also able to create and edit a bus route or stop, as well as their mobile bus pass. This flow caters to two types of users:

  • New users who can create a list after the onboarding flow and create a mobile pass after signing up.
  • Current users who are checking a route, stop or a mobile pass.

Landing to Scan Code

Landing to Favorites

Landing to Bus Stop

Ideation

Wireframes

By now I have already gathered enough information to get started with the wireframes. I created this set of low-fidelity wireframes of all of the key screens needed to complete the main user tasks that I will be testing for: searching for route, searching for a bus stop, saving favorites, and accessing a mobile pass .

The wireframes were designed to build the structure and architecture of the information and only then go to visual and interactions for each feature.

Landing to Trip Search and Directions

Landing to Mobile Pass

Landing to Bus Stop Overview

Validation

User Testing

I conducted user testing on a mid-fidelity prototype on a mobile phone to see how users would complete certain tasks once they were given some context. The goal was to identify pain points that could be improved in future iterations. Tasks I tested for:

  • Searching for a route that is not within their favorites
  • Searching for a bus stop that is not within their favorites
  • Creating a mobile pass and adding funds.
  • Accessing their favorites and adding new favorites

Affinity Mapping

I had great feedback that made me think about the shareability and accessibility of some features, especially to people who do not use app yet. I organized my findings in an affinity map to identify the pain points and potential solutions that would be incorporated into future iterations.

Pain Points

Trip Search

Onboarding

Mobile Pass

Potential Solutions

Onboarding

Remove initial login, set up to be able to login or sign up later on a needed basis.

Trip Search

Redesign symbols for better visual cue

Add time stamps for bus arrivals, trip total time, walking time from your current and location to bus stop

Mobile Pass

Create profile / login page when opening pass on an initial time.

Results

Log - In Before

  • Logging occurred during onboarding.

  • You needed to login, create, or skip before reaching landing search page.

Log - In After

  • Login occurs post onboarding. Giving users the flexibility to utilize the mobile pass.

  • This is only required if using mobile bus pass to allow credit card information to be entered.

Location Icons Before

  • Map location icons were similar and hard to differentiate.
 
  • No time stamps to bus arrivals, trip total time, walking distance.

Location Icons After

  • Current location and map icons changed in map.

  • Time stamps were added for bus arrivals, total time of each step taken, walking from bust stop.

The Challenge

Transition from physical routes and schedules to a mobile application

The High - Level Goal

Create clear flows and features to attract new users and encourage continued usage

Takeaways + Next Steps

Some key takeaways from this projects are:
  • User testing doesn’t end after development. Design is a constant iteration of improving the experience for the end user. Always find ways to collect and listen to your user’s feedback.
  • Focus on the problem. It is your users pains that you will be solving for so keeping that in mind at all times is essential, as it is easy to lose sight of this when you’re part of other tasks through the day.

Measuring success

I would gauge how successful the design is through the following weekly / monthly activities:

1. Accounts created / mobile pass usage
2. Routes completed
3. Routes and bus stops favorited
4. Search quantities

Keep testing to improve experience

The next goal is to keep testing and developing to create a market for this product and for user’s to fully understand the value proposition.

MORE PROJECTS