Redesign a ticketing experience

Skill

Wireframing

Prototyping

UI Design

User Testing

Tools

Sketch

Invision App

UserTesting.com

Time

November-December, 2017

Project goals

1. Improve the BART ticketing kiosk design for all users.

2. Rethink the user experience of buying tickets and refilling card.

3. Collect user feedback on the redesign and identify usability issues.

User research

We went to a typical BART station to observe and interview travelers about their experiences with the BART kiosk.

Observations

There is a max charge of $4.95.
Physical buttons are not aligned with virtual options on the screen.
People can only check the ticket price from a big pricing table which is not easy to read.
It’s not clear whether the system has an audio interface for blind people.
The plus $1 and minus $0.05 options are confusing.
There is no warning or confirmation when the user choose to cancel the transaction.

How might we...?

1. How might we make buying BART tickets easier for tourists and visitors (who may or may not speak English)?

2. How might we make it clear which train line the user should take?

3. How might we prevent users from making simple errors?

User flow

Initial prototype

Welcome screen

Add value

Default value

Payment method

Search destination

Adjust the number of tickets for both one way or round trip

Detail of payment accepted

Print receipt

Thanks screen

User test

We conducted both remote and in-person usability tests. We did the remote user tests through usertesting.com and the in-person tests happened in CCA campus. We tested 13 participants in total, 5 in-person, and 8 remotes.

User Tasks

Task 1 Buy a ticket from Civic Center to San Francisco Airport Refill your ticket/ Card

Task 2 Refill your ticket/ Card
Task 3 Buy a new ticket for a specific value (such as $5, $15, $20)

Key findings

We need to make the destination name official as well as show the full name, for example, “SFO” should be San Francisco International Airport (SFO).
Make the map more visually friendly.
Adding a keyword to the search bar could illuminate the line you are supposed to take.
Don’t use ambiguous words, if we have to use it, we need to add some tips or explanation to make user understanding more clear.
Add a drop-down or scrolling list in alphabetical order for senior citizens to be able to select from.
Add popular destination as default on the list will be faster for travelers.
Synthesize more information into one screen to reduce operation steps.
Show price information before payment when you choose the destination.
Highlight key information such as starting destination and final destination, and a current value in your ticket or card.