BART KIOSK
EVOLVING THE NEW BART KIOSK Lisa Baird & Alagu Chockalingam
1
“Everything should be made as simple as possible, but no simpler.” —Albert Einstein
3
07
RESEARCH OBJECTIVE
09
RESEARCH GUIDE
13
PROTOTYPE
25
SYNTHESIS
43
INSIGHTS
51
FINAL CONCEPT
63
DESIGN EVOLUTION
5
RESEARCH OBJECTIVE Conduct in-person and remote user testing to evolve a new kiosk prototype for Bay Area Rapid Transit.
7
RESEARCH GUIDE Task-based evaluative research guide and testing materials.
9
BART KIOSK EVALUATIVE RESEARCH PLAN AND GUIDE Design, People, and Society - Ruiz Alagu Chockalingam & Lisa Baird November 4, 2015
KEY TASK FLOWS:
Buying a Ticket for the Very First Time To the Airport… Pronto! Topping Off an Existing Ticket
TASK FLOW #1:
Buying a Ticket for the Very First Time PROMPT: You are at the 19th Street Oakland BART station.You would like to go to Millbrae and back. There are five people in your party, and you are buying all five of the tickets using your debit card. QUESTIONS: Tell us what seems “touchable” to you on the first screen. What does the red X in the lower right corner mean? Is it important for the skeuomorphic representation of the tickets to be exact? I.e., if you are buying five tickets, does it really need to show exactly five? METRICS: How many times does the user touch “dead zones” on the opening screen? How many times does the user “X out” of the flow and go back to the beginning? What is the frequency (%) of a smooth flow from start to finish with no hiccups? What is the frequency (%) of incorrect insertion of payment card?
TASK FLOW #2: To the Airport… Pronto! SFO
PROMPT: You are at the 19th Street Oakland BART station.You are in a hurry to get to the Oakland airport.You are using cash to pay. QUESTIONS: What do you think the two little airport icons do? Do you know what SFO and OAK mean? Does the airport icon automatically default to a one-way or roundtrip? Is enough time given to complete the transaction before “timeout”? METRICS: How many times does the user touch the SFO destination on the map instead of the SFO quick ticket icon? How often does the user “X out” of the transaction mid-stream? How frequently does the transaction timeout?
TASK FLOW #3:
Topping Off an Existing Ticket PROMPT: You have an old BART ticket with a small, unknown amount of value still left on the card.You would like to refill the card to any amount of your choosing.You will pay with your credit card. QUESTIONS: What does the “+$$” icon do? Is it clear the difference between “touch Clipper card” and “insert existing ticket”? Do you even know what a Clipper card is? What do the various dollar-amount buttons do on the add-value screen? METRICS: How often is the “+$$” icon used vis-a-vis destination buttons? How many seconds pass between the appearance of the “touch Clipper card” screen and the actual touching of the Clipper card? Which dollar amount buttons are used most frequently? Least frequently? 11
PROTOTYPE Screens and flows from the original prototype used for testing with corresponding design evolution.
13
TASK FLOW #1
Buying tickets for the first time (original prototype).
The home screen initially had the map oriented east.
Touching a station brought up the choice of roundtrip or one-way
After selecting roundtrip or oneway, users selected quantity.
As quantity increased, so did the total price displayed on screen.
Skeuomorphic reference to real tickets just before payment.
Arrows on screen align with industrial hardware features.
15
PIN screen for users paying with debit card.
“Printing� feedback with arrows aligned to industrial hardware.
TASK FLOW #2
Buy a ticket to the airport (original prototype).
The home screen initially had the map oriented east.
Touching an airplane icon brought users to a payment screen.
Feedback regarding cash needed with arrows aligning to hardware. 17
“Printing� feedback with arrows aligned to industrial hardware.
Timeout screen appeared if user took too long during a task.
TASK FLOW #3
Adding value to an old ticket or Clipper Card (original prototype).
The home screen was initially oriented to the east.
Users could select Clipper Card or BART ticket.
Existing value was displayed with keys to add or subtract value.
19
Total ticket value displayed increased as value was added.
Skeuomorphic reference to a real ticket just before payment.
Arrows aligned with industrial hardware features.
“Printing� feedback along with arrows aligning to hardware.
Options in the event of a failed payment card transaction.
21
TASK FLOW #4
Buying a ‘quick ticket’ using the shortcut button (original prototype).
The home screen initially had the map oriented to the east.
Touching the BART ticket icon brought users to payment screen.
Arrows aligned with industrial hardware features.
“Printing� feedback along with arrows aligning to hardware.
23
SYNTHESIS A summary of data and synthesis from in-person and remote research.
25
IN PERSON TESTING
Design, People, and Society - Ruiz Alagu Chockalingam & Lisa Baird November 12, 2015
SYNOPSIS:
We conducted in-person user testing with nine people in a three-hour session. Each tester spent 20 minutes with the prototype. First we gave them three tasks to complete. We then let them explore the prototype and talk to us about what they saw, liked, disliked, and would change.
ALEX: “Maybe say collect bellow instead of collect tickets” When Alex tested our prototype, she pointed out that ‘collect tickets’ didn’t seem right because users are typically collecting only one ticket, and because they may also be collecting other things, such as change.
AMY: “If I’m on BART, it’s usually because I’m going to an airport.” For infrequent users who need to get to the airport quickly, the onetouch shortcut is ideal. Amy’s comment validated our decision to build the airport shortcuts into our design.
EVAN: “Make everything that is touchable look the same in some way.” Evan’s comment made us take another look at our design and think about how we could implement visual consistency across the prototype to guide the user and create a firm mental model.
JONATHAN: “The word ‘GO’ is so generic. What about ‘PAY’ instead?” Jonathan was referring to the screen where debit PINs are entered during payment. We implemented his feedback and received a positive response in later rounds of testing.
MIGUEL: “I would get rid of the asterisk button on the PIN keypad.” We agreed with what Miguel suggested and realized the asterisk was unnecessary on the PIN keypad. We removed it in our final design, thereby making space for a larger delete key.
RAFAE: “I need some sort of label for all of these different shortcuts.” When Rafae tested our flows that relied upon the shortcut buttons to buy a ticket, he felt adding a label to group the shortcuts would have been clearer, so we labeled them using his terminology “shortcuts.”
CORDELIA: “The visual orientation of the map is drawing my eye upward.” Cordelia pointed out that the visual orientation of the map naturally drew her eye to the upper right corner of the screen where some of the shortcuts were placed. This validated our layout of the home screen.
SARAH: “The ‘add value’ button feels out of place all by itself on the left.” When asked what she thought of the home screen, Sarah said she wasn’t instantly noticing the ‘add value’ button on the bottom left. She suggested grouping it with the shortcut buttons, so we did.
27
29
31
33
REMOTE USER TESTING
Design, People, and Society - Ruiz Alagu Chockalingam & Lisa Baird November 18, 2015 to December 2, 2015
All testers used the word “simplicity� (above in red) to describe what they liked about the prototype.
SYNOPSIS:
We conducted remote user testing with eight people in sessions that averaged 22 minutes long. Each person provided written and verbal feedback. First we gave them specific tasks to complete. We then let them explore the prototype and talk to us about what they saw, liked, disliked, and would change.
35
ANNOTATIONS
We coded the videos by hand inside the UserTesting.com application, then downloaded the annotations.
METRICS
We spotted problem areas with the test itself by looking at outlying metrics and adjusting the test accordingly.
37
39
10 4.75 OUT OF 5 STARS
TESTERS COLLECTIVELY GAVE
yes
OF TES
FOR EASE OF USE
and
HALF THE TESTERS WERE
BAFFLED BY GAS PUMP ICON
SIM
TO DES
PEOPLE
10
THE “T
OF
SYNTHESIS:
We summarized six key metrics that seemed to contradict each other. While users found the prototype satisfactory in some respects, they displayed behavior that lead us to believe otherwise. What people say and do sometimes don’t align.
00%
STERS USED THE WORD
MPLICITY
SCRIBE WHAT THEY LIKED
TESTERS SAID THEY WERE T
95% LIKELY TO TELL FRIENDS & FAMILY
IF THIS EXISTED IN THE
REAL WORLD THOUGH LEFT UNSAID
100% 00%
E WERE CONFUSED BY
TOP OFF” SCREEN
OF TESTERS STRUGGLED WITH
THE TIME
INCONSISTENT SIGNIFIERS FOR TOUCHABLE
41
INSIGHTS Key insights that we gained from our research and user testing.
43
PRICE DOESN’T MATTER
WHITE SPACE RULES
1
2
BART KIOSK KEY INSIGHTS
Our research resulted in five key insights which we used to inform our final design.
NEED FOR SPEED
3
5 FIFTY WAYS TO SAY IT
4 PEOPLE LEARN FAST
BART KIOSK KEY INSIGHT #1
1
PRICE DOESN’T MATTER
Riders aren’t concerned with price. They trust it’s fair. In the absence of price sensitivity, the main concern is having enough value to ride.
45
BART KIOSK KEY INSIGHT #2
2
PRICE DOESN’T MATTER
Riders aren’t concerned with price. They trust it’s fair. In the absence of price sensitivity, the main concern is having enough value to ride.
BART KIOSK KEY INSIGHT #3
3
PRICE DOESN’T MATTER
Riders aren’t concerned with price. They trust it’s fair. In the absence of price sensitivity, the main concern is having enough value to ride.
47
BART KIOSK KEY INSIGHT #4
4
PRICE DOESN’T MATTER
Riders aren’t concerned with price. They trust it’s fair. In the absence of price sensitivity, the main concern is having enough value to ride.
BART KIOSK KEY INSIGHT #5
5
PRICE DOESN’T MATTER
Riders aren’t concerned with price. They trust it’s fair. In the absence of price sensitivity, the main concern is having enough value to ride.
49
FINAL CONCEPT Our final revised design for the BART kiosk.
51
TASK FLOW #1
Buying tickets for the first time (final prototype).
The home screen is accurate and now oriented north
The cancel button is encircled to keep it more distinct.
Blue with white font now means “touchable� in all instances.
Displayed value increases and ticket quantity increases.
Payment buttons are blue with white font to indicate touchable.
Insert card screen unchanged from original prototype.
53
Enter PIN page now follows the “touchable” visual convention.
“Printing” feedback page now says “collect below”.
TASK FLOW #2
Using the shortcuts to buy a ticket to the airport (final design).
Shortcuts are boxed together and labeled prominently.
Payment keys now follow the “touchable� visual convention.
Insert cash screen unchanged from original prototype.
55
“Printing” feedback page now says “collect below”.
TASK FLOW #3
Adding money to an old ticket or Clipper Card (final design)
Add-value button is now on the left with other shortcuts.
This screen unchanged from original prototype.
Total redesign of this screen to mimic the “Quick Ticket� screen.
57
Displayed ticket value increases as value is added.
Payment buttons follow the “touchable� visual convention.
Insert card screen unchanged from original prototype.
“Printing” feedback page now says “collect below”.
Fewer options now when a payment transaction fails.
59
TASK FLOW #4
Buying a “Quick Ticket” using the shortcut button (final design)
The icon for this task is now labeled with “Quick Ticket” copy.
The default value for a Quick Ticket is $20.
Payment buttons now follow “touchable” visual convention
Insert card screen unchanged from original prototype.
“Printing” feedback page now says “collect below”.
61
DESIGN EVOLUTION Major changes in visual interactive design as a result of user testing.
63
OLD
$2.
25
ADD (+)
5¢ 1$
5$ 10$
MINUS (-)
5¢ 1$
5$ 10$
TICKET VALUE
$2. 25
$10 $5 $1 5¢
GO
OLD
GO
NEW
CLIPPER CLIPPER
TOP TOPOFF OFF
BART
TICKET VALUE
TOP OFF YOUR CARD
BART
ADD VALUE
NEW
TOP TOPOFF OFF
TOP OFF SCREEN Testers were confused by the top-off screen. We removed repetition, changed orientation from horizontal to vertical, and reversed value order from ascending to descending.
MYSTERY ICON The gas pump image communicated “add value� poorly. We iterated to simpler iconography.
65
OLD
19TH STREET OAKLAND
HOW MANY TICKETS?
MILBRAE
1
+ -
$ 5.20
GO NEW
19TH STREET OAKLAND
HOW MANY TICKETS?
MILBRAE
1
$ 5.20
GO
TOUCHABLE SIGNIFIERS Testers never mentioned it explicitly, but we could see that inconsistent visual style for touchable elements was a problem. We refined the design by making blue background with white font always mean touchable.
67