EZ Bus...easy public transportation.

EZ Bus is a transportation app that helps users get where they are going. With bus schedules based on routes or stops, alerts for schedule disruptions and a live bus tracker, users won't miss the bus again!


3 iPhones displaying different screens from Carvoyant

Role

UX Design
UI Design

Deliverables

Survey Analytics
Competitive Analysis
Card Sort
Personas
User Flows
Site Map
Wireframes
A/B Testing
Usability Test
Mid Fidelity Prototype

Time &Tools

Client
Amanda Hathaway
Duration
3 weeks
Tools & Software
Figma

Maze

Optimal Workshop

Usability Hub
View Figma Prototype

Problem

Due to expansion, numerous bus routes have been recently added. Many of those routes stop at the same bus stop. Before the new routes were added, riders could simply rush to the stop when they saw a bus coming—but that doesn't work anymore because it might not be the bus that they're expecting. The city has developed a way to know how far away each bus is from a stop, but they aren't sure how to share that  with riders.

Solution

1. Ensure that any rider can tell when each of the buses arrives at the Washington & State bus stop.

2. 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.

3. Allow riders to select one of seven bus lines to see a list of its future arrival times at the Washington & State bus stop.

4 phone screens displaying different Carvoyant screens

Design Process

Diagram of the design  thinking process.

Empathize

Survey

To begin, 33 users participated in a discovery survey.

1. What do you use the bus for?
A diagram of an empathy map

This affirms the target audience is primarily commuters and they need an app that gets them places on time.

How often do you know when the bus is coming?
A diagram of an empathy map

This means the vast majority of public bus riders face uncertainty and possibly anxiety over their bus location. How does one design a positive bus experience?

How often do you get to the bus on time?
A diagram of an empathy map
91% of bus riders don't catch their intended bus! It is imperative to provide correct timings and bus tracking.

How do you know why a bus is late?
Do you use a transport app?

A diagram of an empathy mappie chart

For those who check the website, that information should be readily available and updated in the app to send push notifications or alerts. If some users already use a bus app, it shouldn't be hard to transition to a new one.

How do you like to identify bus lines?
A diagram of an empathy map

The app should use color in correspondence to the local bus lines to help users keep track of buses.

User Interviews

I conducted user interviews to get an even better understanding of users. The biggest take away was time, either waiting too long for the bus or missing the bus. How do we show users exactly when the bus will arrive? This is where a live bus tracker feature becomes imperative. Users also expressed the tedious time to type repeated destinations. Perhaps a home and work feature to reduce the amount of time typing would help.


A visual with different HMW statements.

SWOT Analysis

A SWOT competitive analysis with transportation app Citymapper gave  insight to key features and market standards. Citymapper has saved locations to reduce the typing as well as comprehensive bus information such as arrival times, how many stops between user and destination walking times.

SWOT analysis

Define

Target Audience

This app is designed primarily for commuters to work and school. However there are secondary users, such as those who use the bus to get to town to meet friends or run errands.

Male cartoon avatar

Pat
Broker
35 years old
Chicago, IL
Motivations
Get to work on time
Maximize and plan her time to get to bus
Know if there is a schedule disruption

Frustrations
Doesn't know when bus is late for traffic
Timing, when to start walking to stop
Male cartoon avatar

Fern
Retired
84 years old
Chicago, IL
Motivations
Meet up with friends for coffee
Run errands


Frustrations
Can't run to catch a bus
Too old to stand around for a bus

Empathy Map

An empathy map to helps see questions/ problems that users may have while riding the bus.  

empathy map

Journey Map

This journey map helps highlight specific pinpoints and interactions users have with the bus, highlighting places for impactful improvement.

user journey

Ideate

Site Map

After discovering the necessary features, a site map is created to know the app from start to finish.
Screen with Carvana 360 car feature

User Flows

User flows will give an idea of how to organize content, and how many screens it takes to complete tasks.

Sketches of features for Carvoyant

Wireframe Sketch

Using Citymapper as inspiration, my sketches help map out screens.

Solution sketch for Carvoyant

Prototype

Onboarding screen wireframeHome screen wireframeData collection wireframeData collection wireframeCar view wireframeCar view wireframeCar view wireframeListening to audio wireframeDiagnostic found wireframeschedule wireframe bus list wireframemap wireframe

Test

mobile at an angel with selected route screen

Usability Testing

Using my mid-fidelity wireframes with 10 participants, users were tested on the following criteria.

1. Finding the schedule for Washington & State.
2. Finding how much time they  have to get to the bus stop
3. What is the next bus at Washington & State.
4. Setting a home and work destination.


Overall tasks were completed efficiently and without confusion. However there were several comments on the design.

Users couldn't recognize the button to return to the main screen. The main page button is now an “X” to make it more intuitive and align with user mental models.

choose destination page

Some buttons were not organized alphabetically causing users to take longer than normal to find certain information. 
 
bus lines screen
Users had a difficult time discerning what the different times meant on the route suggestions page. “Next Bus” and “Arrives at” in front of the time helps specify their meaning.
suggested routes page

UI Design

Mood Board

When I think of the bus I think of the big yellow school bus.  It’s friendly with a welcoming bus driver.  They are reliable and safe.  
Style tile, fonts, images and color pallet

Style Tile

Varela Round plays nicely into the idea of a school bus. It is a friendly and welcoming font. The logo uses a continuous line the user’s eye follows to draw them in.  It relays the message "this bus will get you where you need to go" represented with the geo tag.
Style tile, fonts, images and color pallet

Final Thoughts

Conclusion

Creating an end-to-end mobile app for a bus web app was certainly a big project.
mobile with home screen

 EZ Bus includes easy to find bus schedules on the main app page available after one click. Users can search by stop or by route. The routes are also identified by color to help users differentiate bus lines.

Users can set notifications in the settings page. They can also track the bus to know exactly how much time until the bus arrives. This not only helps users plan the commute to the stop but also eases the frustration of not knowing where or why the bus my be late.

mobile with bus tracker screen
mobile with set work address screen

There is also a feature to set home and work locations. For everyday commuters this will reduce the time and redundancy of typing the same address everyday.

Plans For Development

If I had more time I would design micro interactions and animations. I would also add the settings pages, as they were out of scope for this project. I would also recommend more usability tests.

two mobile phones with EZ bus screens

My Other Work