Download to read offline
![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](https://image.slidesharecdn.com/gamingthedesign-120410164302-phpapp01/85/GamingtheDesign-31-320.jpg)
GamingtheDesign
- 1. Gaming the Design: Usinggame 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 howclients 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 contendwith: • 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 byserial 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.
- 9. Execution Current design: lacksintuitive 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.
- 33. MoneyMover – RevisedVision > 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 Openan 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