Published on

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

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Gaming the Design:Using game design techniques in the realm of investingDominic La CavaKellie CarterIA SummitMarch 23, 2009
  2. 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. 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. 4. TaskTask: redesign how clients open new accountsProject:Goals: understand issues and dependencies for moving money to Vanguard • engineer an innovative and intuitive user interface • establish a dynamic user experienceDesign 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. 5. Research Amount of time people spend playing games Link to games>5
  6. 6. ContradictionContradiction 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 fashionQuestion:How, given this contradiction in goals, do we borrow from the field of gamedesign for the design of other types of interactions with the intent ofimproving the overall user experience? >6
  7. 7. MethodologyOA 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 wayIdeas 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. 8. MoneyMover>8
  9. 9. ExecutionCurrent design: lacks intuitive field of action • does not respond to user inputs • does not provide meaningful context for decision-makingMoneyMover: 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 provideGoal (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. 10. Design goal 1: Simplify the user’s experienceThe 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 processUse 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. 11. Design goal 1: Simplify the user’s experienceChilderen‟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. 12. Design goal 1: Simplify the user’s experienceFrom 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. 13. Design goal 1: Simplify the user’s experienceNothing is hidden: • the path • the obstacles • end point are all on display for the user > 13
  14. 14. Design goal 1: Simplify the user’s experienceRules of Play (Salen and Zimmerman): meaningful play equals meaningfulchoice within a responsive, interactive system • system responds to player choice • relationship between players choice and systems response is one way to characterize the depth and quality of the interaction > 14 Resident Evil
  15. 15. Design goal 1: Simplify the user’s experienceCurrent Open Account process : choice not leveraged or meaningful • system doesn‟t use user inputs to „change the game‟ • doesn‟t provide quality of interaction27x: 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. 16. Design goal 1: Simplify the user’s experience Examples of Open an Account Entry Points27x: system recognizes and responds to dependencies • tracks previous selections • filters out irrelevant options based on both previous selections and overall transaction context > 16
  17. 17. Design goal 2: Animation and Movement to provide focusNovice investors don‟t comprehend complex investing • difficulty compounded by inelegant handoffs or transitionsTry 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 mapping27x: 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. 18. Design goal 2: Animation and Movement to provide focusImmersive aspects of games is movement: • through an interactive space • to help players focus on the important areas of the screenMovement 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. 19. Design goal 2: Animation and Movement to provide focusMovement 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. 20. Design goal 3: Use Visual Metaphors to Lower the Learning CurveImagery of children‟s games provides intuitive space > 20
  21. 21. Design goal 3: Use Visual Metaphors to Lower the Learning CurveGames use apprehension • provide intelligible, easy-to-grasp interactive objectsGames useful not just for children • “Visual learning is more intuitive and often faster than cognitive learning.” (Stephen Utkus) > 21
  22. 22. Design goal 3: Use Visual Metaphors to Lower the Learning CurveMetaphors 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 Vanguard27x: icons and metaphors to define relationships between key investmentconcepts (i.e. accounts and investments) • help adapt mental models of money movement transactions to industry business model > 22
  23. 23. Conclusion27x design approach: example of complex problem solving • tension between textual description and static visual representation • combine textual and visual representation to tell a full story27x design team: established set of UCD design principles to focus on • user experience, particularly the user‟s story or journey • key interactive aspectsMoneyMover 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. 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. 25. Money Mover – Drag and Drop> 25
  26. 26. Money Mover – D/D and Icons> 26
  27. 27. Money Mover – Icon Story> 27
  28. 28. Money Mover – Non-linear> 28
  29. 29. Money Mover – 3 Icons> 29
  30. 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. 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 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. 32. MoneyMover - Vision> 32
  33. 33. MoneyMover – Revised Vision> 33
  34. 34. Internal interface – Design: Multi-tasking> 34
  35. 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. 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 goalsCreated By: Lesley SnobyLocation: S:User Experience GroupPersonal Smoothed transitions between dependent sub-processesInvestors TeamProjects27xDiagrams Employed new technologies to achieve these results > 36