BART KIOSK - evolving the new BART kiosk

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