This was a presentation at IAS09 about using gaming techniques to design an on-line registration application. An accompanying article, “Gaming the Design: Gaming Techniques in the Realm of Investing,” was published in ASIS&T Bulletin, August/September 2009 Vol. 35, No. 6 http://asis.org/Bulletin/Aug-09/AugSep09_Carter_La_Cava.html

1. Gaming the Design:
Using game design techniques in the realm of investing
Dominic La Cava
Kellie Carter
IA Summit
March 23, 2009

2. Intro
Discuss how game design practice informed
the redesign of a transactional web task
Opening a financial account online
at the Vanguard Group
>2

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
>3

4. Task
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
>4

5. Research
Amount of time people
spend playing games
Link to games
>5

6. Contradiction
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?
>6

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

8. MoneyMover
>8

9. Execution
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
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
>9

10. Design goal 1: Simplify the user’s experience
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
> 10

11. Design goal 1: Simplify the user’s experience
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
> 11

12. Design goal 1: Simplify the user’s experience
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
> 12
• e.g. Donkey Kong

13. Design goal 1: Simplify the user’s experience
Nothing is hidden:
• the path
• the obstacles
• end point are all on display for the user
> 13

14. Design goal 1: Simplify the user’s experience
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
> 14 Resident Evil

15. Design goal 1: Simplify the user’s experience
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
> 15

16. Design goal 1: Simplify the user’s experience
Examples of Open an Account Entry Points
27x: system recognizes and responds to dependencies
• tracks previous selections
• filters out irrelevant options based on both previous selections and
overall transaction context
> 16

17. Design goal 2: Animation and Movement to provide focus
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
> 17

18. Design goal 2: Animation and Movement to provide focus
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
> 18 Medal of Honor

19. Design goal 2: Animation and Movement to provide focus
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
> 19

20. Design goal 3: Use Visual Metaphors to Lower the Learning Curve
Imagery of children‟s games provides intuitive space
> 20

21. Design goal 3: Use Visual Metaphors to Lower the Learning Curve
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)
> 21

22. Design goal 3: Use Visual Metaphors to Lower the Learning Curve
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
> 22

23. Conclusion
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
> 23
tasks and achieve the goal of investing money at Vanguard.

24. Money Mover – Concept
My Vanguard
Method Investments
(Where $ comes from)
Method (“Where”)
Investments List
Check
Investment 1
ETF
Investment 2
Wire
W Investment 3 I
Rollover, etc.
Key
W = Where is $ coming from?
(Method)
Owner Information Account Types I = Investments
SSN Mutual Funds O = Owners
Date of Birth IRAs AT = Account Types
Address O Money Market AT
Account Types
> 24

25. Money Mover – Drag and Drop
> 25

26. Money Mover – D/D and Icons
> 26

27. Money Mover – Icon Story
> 27

28. Money Mover – Non-linear
> 28

29. Money Mover – 3 Icons
> 29

30. Money Mover Accomplishments
• Proof of Concept is successful
• Is a non-serial, user-determined application
• Allows for multiple entry points
• 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
> 30

31. Current Points-of-Pain vs. Money Mover Solutions
Evidence Simplified Investing:
* From 2007 VOC
** From Stacie Barndt‟s
Point of Pain Guiding Principle(s) Money Mover Solution Example
Readout 5/7/07 Violations
Allow user to enter Money Mover from different sections
The current Open Account process does not recognize or reflect the
Does not allow for multiple entry of the Vanguard.com site, with the corresponding
user’s previous choices when entering the transaction from different
points into the Open Account Be Flexible activity area (e.g., Method or Account) taking the initial
areas of the site, such as the “Buy this fund” link on a specific fund
process or reflect user’s previous Continually Reassure focus
details page. The user is then locked into a rigidly sequential page Ensure that any selections made at or before the user‟s
choices
flow that is incapable of accommodating his or her mental model. entry point (e.g., “Buy this fund”) get recognized by and Opens to Money Mover with
Total Stock Market personalized
carried over into the application & pre-filled in Investments
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. User cannot choose the order in
Allow the user to decide where they want to go when in
As one VOC comment observes: Be Flexible the Money Mover tool
which to enter information but
Recoverability Selections remain open to modification using real time
"I really hate your website. It’s non-intuitive, filled with trap doors, & must follow a predetermined path
edit until user chooses to submit information
you are forced to go down paths without knowing what the
requirements are for adding funds and setting up accounts.” *
The use of the “back button more than 3x” increases session time
by more than 3 minutes as compared to those who did not. ** Provide continual reassurance by displaying previous
Continually Reassure
50% of users must restart the “OA” process more than 2x per Does not reassure the user of selections and information throughout the experience
Allow mistakes
session. ** their previous selections Offer multiple opportunities for feedback and selection
Recoverability
- One attempt in session page count was 78. modification
- Two attempts in session page count increased to 104.
“Client feels that the account transfer section of the website could be Use “Plaintalk” and education throughout the
Speak in plain language
a little less confusing. Client found it very difficult to try and transfer Provide contextual help
experience
Terminology is confusing and is
assets from another institution from the language that was used on Be consistent
Use mouseover/tool tips to educate user on options,
not in “Plaintalk”
the site.” * Give reasons
interface, and relationships between core components
throughout moving money
Why user quit the OA Process: **
- 40% Funding Method
- 38% Other (Not Ready, More Info Needed) Reduce choice based on previous selections to alleviate
- 18% Investment Selection the confusion and difficulty with selecting what the user
- 4% Technical Issues Users are presented with to many wants
Layer Options
From the reviewed sessions: ** choices making it difficult and Not a long form
-- 19% of sessions analyzed quit the process Shorten
confusing to determine which -- Surface what‟s necessary at a certain moment and
-- 37% of users quit during the TOA process within the funding method Give reasons
choice is right for them then move the user to the next moment
section and noted they found the process confusing.
-- 26% quit during the Investment Selection process.
-- Focus user on specific tasks
- Fund Choice -- Gentle Guidance
- Did not meet minimums for fund selected
“Client would like employment info to pe-fill on applications” *
If user is logged on, their address will be
“Client thinks open an account link on site is confusing in that it Does not utilize existing Allow personalization pre-filled in the Review and Submit area.
Pre-fill & automatic completion of information based on
doesn’t let you know that you can use your existing account to roll client information to pre-fill Shorten The user will be able to change the
selections to reduce complexity and time
money into until several screens have passed. He had to make information where possible Continual Reassurance address if they do not want to use that
several calls to Vanguard to give him the confidence to know he address through the use of the Edit button
was doing the right thing” *
Comments from the User’s Mouth:
“Open account process is awkward and confusing” * “I felt more comfortable with that [the Money Mover screen]. I
89 Screens & 29.4 Minutes in Entire Process ** felt it was more simplified.”
Even though users complete the Create an experience where users successfully “It’s very, in a way, it’s reassuring, it simplifies. Visually, it’s how
19 minutes in “Open An Account” 8 minutes NOT **
open account process they are understand moving money your mind works.”
Users who quit (19% of population), did so in 23 minutes and 78 “It’s focused on the task at hand.”
not having a successful user Achieve a fine balance between the user‟s mental
screens “I like the simplicity of it, it’s A to B.”
experience model and the business model
(78% of the time (or 18 minutes) was in the “OA” process). ** “I’d much rather do this, forms are great, but I’d much rather do
it like this.”
> 31

32. MoneyMover - Vision
> 32

33. MoneyMover – Revised Vision
> 33

34. Internal interface – Design: Multi-tasking
> 34

35. OA Vision Deliverables
AO user interface vision design (prototype)
Vision Design Strategy Document
Design Spec
MONEY MOVER – HIGH LEVEL ARCHITECTURE
Orientation activities Transaction definition activities Confirmation activities
OBJECTIVES
Enter Facet 1 data Enter Facet 2 data Enter Facet 3 data
USER
Become familiar with tool‟s Review and verify Confirm and submit
0 (Account, Investments or (Account, Investments or (Account, Investments or
purpose and options 01 1
selections transaction
Method) 03 Method) 04 Method) 05 06 07
Review supporting information 0 Review
Review options &
02 2 mouse-over
educational
info.
content
030
VANGUARD.COM
031
Enter data
Facet 1
032
Architecture flow diagrams
Review Review Review
Review options &
options & mouse- mouse-over
educational
ed. content over info. Review system info.
content
010 020 feedback (responding 040
041
as necessary)
032a Enter data
Confirmation
Facet 2 042 Facet 2 Review page
page
Review Review Utilize edit/
Review options &
mouse-over mouse-over update
Review system Review system educational
info. info. capability Review
Possible Entry Points: feedback (responding feedback (responding content
confirmation &
050 060 061
as necessary) as necessary) 051 next steps (as
Personal investors home page necessary)
032b 042a/b Enter data
Forms & Literature Overview (incl. owner All 071
info)
Facet 3 Facet 1 Facet 3 052 Facet 3 Facets
Roll over your employer-sponsored plan
Asset Allocation Fund Investor Shares
Move your IRAs to Vanguard
Account Types & Services
VANGUARD.COM MyPortfolio
New Transaction
Web Registration / Log Off
Portfolio Overview
External links (e.g., email link)
Project: 27x (“Money Mover”)
KEY
Document: High Level IA Diagram = user has multiple entry points / navigation options Activity area Feedback area User activity
Version: 1.0
Last Edited: 6.20.07 010 = screen state code = reversible action
Created By: Michael Magoolaghan
= information look-up
Page: 1 of 1
> 35

36. 27x Calendar
Open an Account – Interface Design (27x) Timeline
1-Jan-07 1-Feb-07 1-Mar-07 1-Apr-07 1-May-07 1-Jun-07 1-Jul-07 1-Aug-07 1-Sep-07 1-Oct-07
Pre-27x (User Research) 27x Phase 1 – Proof of Concept 27x Phase 2
27-Jan-07 10-Jul-07 09-Aug-07
Process Models 3-Mar-07 29-Mar-07 4-Sep-07
Open Account Marketing
& Information Open an Account 27x Kick-off BA Starts Focus Group Phase 2
Representations Off-site Meeting (Bala Cynwyd) Wrap-up
14-May 18-May 29-May 01-Jun 18-Jun 22-Jun 23-Jul 27-Jul 20-Aug 24-Aug
Vision Test Vision Test Vision Test Vision Test Vision Test
9-Mar-07 # 1 #2 #3 #1 #2
18-Apr-07
Inception of the 27x Team 29-Jun-07 12-Aug-07 to
Checkpoint #1
15-May-07 Checkpoint #3 13-Aug-07
Checkpoint #2 Marketing
Phase 1
Focus Group
Wrap-up
(NY)
Pre-27x: User Research Phase 1: Proof of Concept Phase 2:
A team was looking at using images to represent information to users on the Retail website. Also, upper 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 The purpose of Phase 2 is to prove that Open an Account MoneyMover can handle complex scenarios such as roll
management had an off-site to explore new ideas surrounding the Open an Account process and formed the 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 overs and in-kind transfers, which are two complex activities that cause frequent user drop outs. A solution to
“quadrant” idea. This idea was passed on the now 27x team. The 27x team took the “quadrant” idea as their starting 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 minimizing complexity is to expand the design architecture to identify dependencies that assist users in entering
point for visioning a new Open an Account application. 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 as the system guides them through the steps to opening an account. Other solutions to minimizing
information to facilitate users' understanding of relationships among key informational components needed to open an account. complexity focus on refining users‟ expectations in how to open an account and on using layers and mouse overs to
Key Accomplishments: educate users about various topics, such as account types, fund types, and funding methods. The intention is to
Started exploring visual representation of information Key Accomplishments: 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
Developed a new way of thinking about the Open an Account process Created a non-serial, user-determined application by allowing multiple entry points
determine how MoneyMover integrates with the overall site, such as short/long list, leave/return to MoneyMover, and
Formed the 27x visioning team Improved time to completion Segmentation.
Provided flexibility/recoverability in completing tasks and accomplishing goals
Created By: Lesley Snoby
Location: S:User Experience GroupPersonal Smoothed transitions between dependent sub-processes
Investors TeamProjects27xDiagrams
Employed new technologies to achieve these results
> 36