gamingthedesign

Gaming the Design:

Using game design techniques in the realm of investing

Dominic La Cava Kellie Carter IA Summit March 23, 2009

> 2

Discuss how game design practice informed

the redesign of a transactional web task

Opening a financial account online

at the Vanguard Group

Intro

> 3

Current

• Serial process

• takes from 12 – 80 steps

• depends on asset type, account type,

and funding method

• Account type is mandatory starting point

• Application is not intelligent

> 4

Task: redesign how clients open new accounts

Project:

Goals: understand issues and dependencies for moving money to Vanguard

• engineer an innovative and intuitive user interface

• establish a dynamic user experience

Design paradigm: create a dynamic user interaction

• back-end – by mapping dependencies in the process

• user interface – by utilizing design principles from game design

Task

> 5

Amount of time people

spend playing games

Research

Link to games

> 6

Contradiction to contend with:

• Games – meant to keep people playing

• success measured by users‟ time/investment in gameplay

• the longer users play, the better the game is

• use interactive and immersive techniques to create play space

• 27x – significantly reduce the number of steps to open an account

• reduce time navigating screens

• achieve goal in a timely fashion

Question:

How, given this contradiction in goals, do we borrow from the field of game

design for the design of other types of interactions with the intent of

improving the overall user experience?

Contradiction

> 7

OA complicated by serial process :

• step-by-step process obscures the vision of the whole

• information and steps presented in a vacuum

• does not react to user actions in a helpful or meaningful way

Ideas generated by game research

• provide an intuitive and flexible interface

• reduce text and screen clutter

• build in forgiveness / recoverability

• autofill/remember information

• provide education

• use visual metaphors to lower the learning curve

• allow for multiple entry points

• present transactions in an easy-to-understand format

• reduce time to completion

• smooth transitions between dependent subprocesses

Methodology

> 8

MoneyMover

> 9

Current design: lacks intuitive field of action

• does not respond to user inputs

• does not provide meaningful context for decision-making

MoneyMover: incorporates aspects of children‟s on-line game interfaces

• tends to be immediately intuitive and actionable

• uses space and movement to focus and engage the audience.

Also: used clear design strategies and goals

• to guide the process of incorporation of game techniques

• to keep us focused on the user experience we were trying to provide

Execution

Goal (reduce time/number of steps to open an account) accomplished by:

• single-interactive page to simplify user‟s experience and build context

• animation and movement to provide focus

• graphics to tell the interactive story

> 10

The Paradox of Choice (Barry Schwarz): “parsimony principle”

• simplify choice by reducing the number of options provided

• used to:

• reduce choices

• focus the users‟ attention

• guide users through any selection activity

• reduces frequency of opting/cancelling out of selection process

Use games to achieve MoneyMover goal to simplify the user experience

• simple interactive space to support complex decision-making process

• children‟s games are immediately intuitive despite an array of options

Design goal 1: Simplify the user’s experience

> 11

Childeren‟s games:

• options are all grouped and surfaced on the screen

• single-page interface connects interaction narrative with control space

• visual gestalt for users to grasp the overall structure/interaction


> 12

From these design techniques grouped information into the primary buckets:

• where the money is coming from (the method)

• tax structure and ownership information (the account)

• investment vehicle (the investment)

• single screen interactive space displays the whole of the task

• users see that there are only three main completion points

• e.g. Donkey Kong


> 13

Nothing is hidden:

• the path

• the obstacles

• end point are all on display for the user


> 14

Rules of Play (Salen and Zimmerman): meaningful play equals meaningful

choice within a responsive, interactive system

• system responds to player choice

• relationship between player's choice and system's response is one

way to characterize the depth and quality of the interaction


Resident Evil

> 15

Current Open Account process : choice not leveraged or meaningful

• system doesn‟t use user inputs to „change the game‟

• doesn‟t provide quality of interaction

27x: user choices could streamline the subsequent flow

• e.g. If the user selects Rollover IRA as the funding method, the system

can remove non-IRA account options, like Joint or General Investing

• recognizes dependencies between activity areas within the process

• present only currently applicable information, rather than generic or

irrelevant information


> 16

27x: system recognizes and responds to dependencies

• tracks previous selections

• filters out irrelevant options based on both previous selections and

overall transaction context


Examples of Open an Account Entry Points

> 17

Novice investors don‟t comprehend complex investing

• difficulty compounded by inelegant handoffs or transitions

Try to keep users from dropping out of a transaction

• signal and prepare users for any necessary transitions or handoff

• try not to clutter screen with all surfaced data points

• inelegant way to respond to user choice with dependency mapping

27x: provide clear focus during each activity state

• display only information immediately relevant to the current task

• need to keep users focused on a specific area

• then handoff by shifting their focus after completing task

• game design was most relevant

Design goal 2: Animation and Movement to provide focus

> 18

Immersive aspects of games is movement:

• through an interactive space

• to help players focus on the important areas of the screen

Movement and animation engage and direct the play

• smoothing handoffs

• providing focus by utilizing natural experiential responses

• allowing response to in the game play


Medal of Honor

> 19

Movement in design: animation effects to signal and smooth transitions

• between 3 main activity areas (Investments, Account and Method)

• between transaction definition activities and Review and Confirmation


27x AVI

> 20

Imagery of children‟s games provides intuitive space

Design goal 3: Use Visual Metaphors to Lower the Learning Curve

> 21

Games use apprehension

• provide intelligible, easy-to-grasp interactive objects

Games useful not just for children

• “Visual learning is more intuitive and often faster than cognitive

learning.” (Stephen Utkus)


> 22

Metaphors facilitate users‟ understanding moving money

• provides intuitive interface in accomplishing tasks

• use metaphors reflecting mental models for moving money

• improve overall user experience for moving money to Vanguard

• provide education about moving money to Vanguard

27x: icons and metaphors to define relationships between key investment

concepts (i.e. accounts and investments)

• help adapt mental models of money movement transactions to industry

business model


> 23

27x design approach: example of complex problem solving

• tension between textual description and static visual representation

• combine textual and visual representation to tell a full story

27x design team: established set of UCD design principles to focus on

• user experience, particularly the user‟s story or journey

• key interactive aspects

MoneyMover interface: comprised of a single page

• uses layers to present/gather only minimal amount of information

• facilitates accomplishing the activities, increasing OA completion rates

• provides supplemental information alongside appropriate tasks

• takes the form of mouseovers for basic information

• dedicated region at the bottom for complex/extensive information

• vehicle for narrating components/tasks relevant to OA story

• mechanism to interact/provide necessary information to complete

tasks and achieve the goal of investing money at Vanguard.

Conclusion

> 24

Money Mover – Concept

My Vanguard

Investments

Account Types

Method (“Where”)

Check

ETF

Wire

Rollover, etc.

Owner Information

SSN

Date of Birth

Address

Investments List

Investment 1

Investment 2

Investment 3

Account Types

Mutual Funds

IRAs

Money Market

W I

O AT

Method

(Where $ comes from)

Key

W = Where is $ coming from?

(Method)

I = Investments

O = Owners

AT = Account Types

> 25

Money Mover – Drag and Drop

> 26

Money Mover – D/D and Icons

> 27

Money Mover – Icon Story

> 28

Money Mover – Non-linear

> 29

Money Mover – 3 Icons

> 30

• Provides a contextual understanding through graphical information,

spatial relationships, task-oriented action areas

• Presents transactions in an easy-to-understand format

• Improves time to completion

• Provides flexibility/recoverability in completing tasks and

accomplishing goals

• Smoothes transitions between dependent sub-processes

• Proof of Concept is successful

• Is a non-serial, user-determined application

• Allows for multiple entry points

Money Mover Accomplishments

> 31

Current Points-of-Pain vs. Money Mover Solutions

Simplified Investing:

Guiding Principle(s)

Violations

Evidence* From 2007 VOC

** From Stacie Barndt‟s Readout 5/7/07

Does not allow for multiple entry

points into the Open Account

process or reflect user’s previous

choices

User cannot choose the order in

which to enter information but

must follow a predetermined path

Does not reassure the user of

their previous selections

Terminology is confusing and is

not in “Plaintalk”

Users are presented with to many

choices making it difficult and

confusing to determine which

choice is right for them

Does not utilize existing

client information to pre-fill

information where possible

Allow the user to decide where they want to go when in

the Money Mover tool

Selections remain open to modification using real time

edit until user chooses to submit information

Provide continual reassurance by displaying previous

selections and information throughout the experience

Offer multiple opportunities for feedback and selection

modification

Use “Plaintalk” and education throughout the

experience

Use mouseover/tool tips to educate user on options,

interface, and relationships between core components

throughout moving money

Reduce choice based on previous selections to alleviate

the confusion and difficulty with selecting what the user

wants

Not a long form

-- Surface what‟s necessary at a certain moment and

then move the user to the next moment

-- Focus user on specific tasks

-- Gentle Guidance

Pre-fill & automatic completion of information based on

selections to reduce complexity and time

Be Flexible

Continually Reassure

Be Flexible

Recoverability

Continually Reassure

Allow mistakes

Recoverability

Speak in plain language

Provide contextual help

Be consistent

Give reasons

Layer Options

Shorten

Give reasons

Allow personalization

Shorten

Continual Reassurance

Point of Pain Money Mover Solution Example

“Client thinks open an account link on site is confusing in that it

doesn’t let you know that you can use your existing account to roll

money into until several screens have passed. He had to make

several calls to Vanguard to give him the confidence to know he

was doing the right thing” *

“Client feels that the account transfer section of the website could be

a little less confusing. Client found it very difficult to try and transfer

assets from another institution from the language that was used on

the site.” *

From the reviewed sessions: **

-- 19% of sessions analyzed quit the process

-- 37% of users quit during the TOA process within the funding method

section and noted they found the process confusing.

-- 26% quit during the Investment Selection process.

- Fund Choice

- Did not meet minimums for fund selected

Why user quit the OA Process: **

- 40% Funding Method

- 38% Other (Not Ready, More Info Needed)

- 18% Investment Selection

- 4% Technical Issues

The current OA process has one flow through the pages. Users are

forced invariably to choose an account type, fill out personal

information, select their investments, and choose a funding method.

As one VOC comment observes:

"I really hate your website. It’s non-intuitive, filled with trap doors, &

you are forced to go down paths without knowing what the

requirements are for adding funds and setting up accounts.” *

Even though users complete the

open account process they are

not having a successful user

experience

“Open account process is awkward and confusing” *

89 Screens & 29.4 Minutes in Entire Process **

19 minutes in “Open An Account” 8 minutes NOT **

Users who quit (19% of population), did so in 23 minutes and 78

screens

(78% of the time (or 18 minutes) was in the “OA” process). **

“Client would like employment info to pe-fill on applications” *

If user is logged on, their address will be

pre-filled in the Review and Submit area.

The user will be able to change the

address if they do not want to use that

address through the use of the Edit button

Create an experience where users successfully

understand moving money

Achieve a fine balance between the user‟s mental

model and the business model

Allow user to enter Money Mover from different sections

of the Vanguard.com site, with the corresponding

activity area (e.g., Method or Account) taking the initial

focus

Ensure that any selections made at or before the user‟s

entry point (e.g., “Buy this fund”) get recognized by and

carried over into the application

The current Open Account process does not recognize or reflect the

user’s previous choices when entering the transaction from different

areas of the site, such as the “Buy this fund” link on a specific fund

details page. The user is then locked into a rigidly sequential page

flow that is incapable of accommodating his or her mental model.

The use of the “back button more than 3x” increases session time

by more than 3 minutes as compared to those who did not. **

50% of users must restart the “OA” process more than 2x per

session. **

- One attempt in session page count was 78.

- Two attempts in session page count increased to 104.

Opens to Money Mover with

Total Stock Market personalized

& pre-filled in Investments

“I felt more comfortable with that [the Money Mover screen]. I felt it was more simplified.”“It’s very, in a way, it’s reassuring, it simplifies. Visually, it’s how your mind works.” “It’s focused on the task at hand.”“I like the simplicity of it, it’s A to B.” “I’d much rather do this, forms are great, but I’d much rather do it like this.”

Comments from the User’s Mouth:

> 32

MoneyMover - Vision

> 33

MoneyMover – Revised Vision

> 34

Internal interface – Design: Multi-tasking

> 35

OA Vision Deliverables

AO user interface vision design (prototype)

Vision Design Strategy Document

Design Spec

Architecture flow diagrams

0

1

0

2

Enter Facet 1 data

(Account, Investments or

Method)

Review

mouse-over

info.

030

Enter Facet 2 data


Method)

Review

mouse-over

info.

040

Enter Facet 3 data


Method)

Review and verify

selections

Review

mouse-over

info.060

03 04 05 06

Confirm and submit

transaction07

Review

mouse-

over info.

020

Review

options &

ed. content

010

Review pageConfirmation

page

Review options &

educational

content

031

Review system

feedback (responding

as necessary)

032a

Review system


as necessary)

032b

Review

mouse-over

info.

050

Facet 1

Facet 2

Facet 3 Facet 1 Facet 3

Facet 2

Facet 3

Enter data

032

Review options &

educational

content

041

Enter data

042

Review system


as necessary)

042a/b

Utilize edit/

update

capability061

Review options &

educational

content

051

Enter data

(incl. owner

info)

052

Review

confirmation &

next steps (as

necessary)

071All

Facets

MONEY MOVER – HIGH LEVEL ARCHITECTURE

US

ER

OB

JE

CT

IVE

S Orientation activities Transaction definition activities Confirmation activities

Review supporting information

Become familiar with tool‟s

purpose and options

VA

NG

UA

RD

.CO

M

VANGUARD.COM MyPortfolio

New Transaction

Web Registration / Log Off

01

02

Project: 27x (“Money Mover”)

Document: High Level IA Diagram

Version: 1.0

Last Edited: 6.20.07

Created By: Michael Magoolaghan

Page: 1 of 1

= user has multiple entry points / navigation options

010 = screen state code

KEY

= reversible action

Activity area Feedback area User activity

= information look-up

Personal investors home page

Forms & Literature Overview

Roll over your employer-sponsored plan

Asset Allocation Fund Investor Shares

Move your IRAs to Vanguard

Account Types & Services

Portfolio Overview

Possible Entry Points:

External links (e.g., email link)

> 36

27x Calendar

1-Sep-07 1-Oct-071-Aug-07 1-Sep-071-Jul-07 1-Aug-071-Jun-07 1-Jul-071-May-07 1-Jun-071-Apr-07 1-May-071-Mar-07 1-Apr-071-Feb-07 1-Mar-07

27x Phase 1 – Proof of Concept

1-Jan-07 1-Feb-07

Pre-27x (User Research)

27-Jan-0729-Mar-073-Mar-07

Open an Account

Off-site

9-Mar-07

Inception of the 27x Team

27x Kick-off

Meeting

29-Jun-07

18-Apr-07

Checkpoint #115-May-07

Vision Test

# 1

14-May 18-May

Checkpoint #2

Vision Test

#2

29-May 01-Jun

27x Phase 2

4-Sep-0710-Jul-07

Open Account

BA Starts

Vision Test

#1

23-Jul 27-Jul

Vision Test

#2

20-Aug 24-Aug

Phase 2

Wrap-up

Process Models

& Information

Representations

Vision Test

#3

18-Jun 22-Jun

Checkpoint #3

Phase 1

Wrap-up

Phase 1: Proof of Concept

The purpose of Phase 1 is to provide a proof of concept for moving money to and within Vanguard. The concept, named the Money Mover, is to change the paradigm

of a serial process, which confines users to a single path through the Open an Account process. The new paradigm alleviates this confinement by organizing the

appropriate information on a single page so that users gain a contextual understanding of the information needed to open an account. The contextual interface design

assists users in editing information easily and in recovering from errors without having to start over from the beginning. The interface design also includes graphical

information to facilitate users' understanding of relationships among key informational components needed to open an account.

Key Accomplishments:

Created a non-serial, user-determined application by allowing multiple entry points

Improved time to completion

Provided flexibility/recoverability in completing tasks and accomplishing goals

Smoothed transitions between dependent sub-processes

Employed new technologies to achieve these results

Phase 2:

The purpose of Phase 2 is to prove that Open an Account MoneyMover can handle complex scenarios such as roll

overs and in-kind transfers, which are two complex activities that cause frequent user drop outs. A solution to

minimizing complexity is to expand the design architecture to identify dependencies that assist users in entering

information as the system guides them through the steps to opening an account. Other solutions to minimizing

complexity focus on refining users‟ expectations in how to open an account and on using layers and mouse overs to

educate users about various topics, such as account types, fund types, and funding methods. The intention is to

keep users focused on the tasks at hand and not to distract them with useless information or by having them leave

the process in search of information they may need. In keeping users focused on the process, it is important to

determine how MoneyMover integrates with the overall site, such as short/long list, leave/return to MoneyMover, and

Segmentation.

Pre-27x: User Research

A team was looking at using images to represent information to users on the Retail website. Also, upper

management had an off-site to explore new ideas surrounding the Open an Account process and formed the

“quadrant” idea. This idea was passed on the now 27x team. The 27x team took the “quadrant” idea as their starting

point for visioning a new Open an Account application.

Key Accomplishments:

Started exploring visual representation of information

Developed a new way of thinking about the Open an Account process

Formed the 27x visioning team

09-Aug-07

Marketing

Focus Group

(Bala Cynwyd)

12-Aug-07 to

13-Aug-07

Marketing

Focus Group

(NY)

Open an Account – Interface Design (27x) Timeline

Created By: Lesley Snoby

Location: S:\User Experience Group\Personal

Investors Team\Projects\27x\Diagrams

gamingthedesign

Design

money mover

contextual

oa process

moving money

immediately

design goal

design goal

design goal