Introduction

1. Designing an Online Experience for Ease-of-UseSupplemental Materials to SigGraph 2005 PresentationHoward Tiersky, Presenter

2. This deck serves as supplemental material to the SigGraph 2005 presentation: Designing an Online Experience for Ease of Use It contains descriptions of a range of activities typically conducted during a “user-centered design” process of creating or redesigning an online interactive experience. The material her represents the methodology of Capgemini, a global eBusiness consulting firm and reflects many industry-wide best practices. Introduction

3. Our User-Centered Approach to Product Design/Enhancement • The underlying philosophy behind our approach to the design and evolution of web-based products can be summed up with four ideas: • The ultimate measure of the success of an interactive application is in how effectively it delivers against the objectives of its creators. • Typically, most if not all of the creator’s objectives are powerfully impacted by users’ ability to easily and efficiently learn and use the product, accomplish their most important tasks, and be satisfied by the experience. • There is a proven set of activities, employed by Capgemini, that can very reliably define and design the right set of functionality and the right user interface to achieve high levels of user satisfaction. • Engaging in these activities typically pay for themselves because comprehensive product design typically drives down costs in the development phase of a project by a factor of 2-3x the cost of the design activities.

4. Defining Success for an Interactive Project Consistently Express the Company Brand Define Clear Project Objectives Which in most cases can be achieved when you Drive Users to Engage in Desired Behavior If influencing user behavior is essential to project success, then gaining insight into user needs and engaging in a process to ensure that users needs will be met is critical to success Predictably Manage the Project Schedule and Budget 3

5. User-Centered Design is the process of evaluating and iterating a web-based product to: Significantly reduce the instances where users will be unable to complete their desired tasks because they cannot “figure out” how to use the product. Reduce instances where users select not to use the product due to its inefficiency, perhaps choosing a more expensive channel for the business (such as a call center) or worse, choose to use a competitive offering. Enable users to not only accomplish tasks but accomplish them with a minimum of confusion, frustration and inefficiency. Significantly reduce the likelihood of users making errors when using the site resulting in unintended consequences (such as transferring money to the wrong account) Ensure the “look and feel” of the product is consistent with the brand. Reduce costs for the site owner associated with customer support caused by confusion about how to use the product. Reduce frustration that users feel when they have difficulty using the product—impacting their perception of the brand. Reduce risk that clients will terminate or reduce their relationship with the business due to competitive weakness of the web product. Ultimately create an overall experience which delights users and motivates them to return to the site, to expand their usage of the site, and in the best cases, to be come advocates for the site. Reduce risk of development re-work by getting early, measurable feedback on system design before significant development investment is made in a specific area Guide user experience decisions based on objective, fact-based analysis and testing, avoiding stakeholder disputes and relying instead on empirical methods to determine what will work best for product users. User-Centered Design Benefits

6. Hard, measurable cost savings: Reduced development costs due to providing developers with thorough design and interactive documentation and templates. Reduce development re-work by getting early, measurable feedback on system design before significant development investment is made in a specific area. Reduced customer support costs Reduced costs with servicing customers through more expensive channels (such as call centers) Reduced costs for training users (if applicable) Hard, measurable revenue benefits: Improved competitive positioning of product resulting in additional clients. Reduction of client defection resulting from product dissatisfaction. Improved user loyalty Soft Benefits Improved user satisfaction Improved brand impact Improved internal image of product Cost savings for clients (as a result of increased user efficiency) How User-Centered Design Hits the Bottom Line

7. Project Definition Segmentation analysis Development of measurable usability objectives Development of usability guidelines Early Stage Evaluation Heuristic review of use cases Heuristic review of wireframes Heuristic review of global designs Heuristic review of information architecture/navigation Early Stage testing Paper prototyping Card sorting exercises to validate IA User task analysis with system prototype Late Stage Evaluation Heuristic review of near-production system or partial system builds Late Stage User Testing User testing with build of system Remote user testing for internet-enabled applications Production Evaluation Surveys of users Review of log files Review of error processing Usability Testing Activities There are a range of activities which are typically combined together to form a portfolio of usability testing initiatives executed for a given project. These include:

8. Usability Funnel Increasing Test Fidelity & Increasing Cost To Make Changes Define Segments Develop Usability Goals Create Initial Global Design/Prototype Heuristic Review of Prototype User Test of Prototype Validate IA With Card Sorting Heuristic Review/Paper Prototype Detailed Screens User Test of Functional Builds User Test of Production System Highly Usable Result

9. Reduce risk Reduce risk of adoption barriers by gaining insight into user “hot buttons” and priorities Reduce risk of re-work by getting early, measurable feedback on system design before significant development investment is made in a specific area Benchmark Gain competitive intelligence regarding other systems from independent agents to help set benchmark for industry excellence and gather data on best practices Understand and document benchmarks regarding the level of satisfaction and areas of frustration with the current system(s) Gain User Insight Gain insight into the “points of pain” of users Understand the discreet needs of different types of system users Optimize Design Gain insight into the preferences of users regarding navigation, workflow, and design Observe agent “real life” workflow processes to maximize the positive impact of the system in “real world” situations Prioritize functionality Gain insight into functionality prioritization to optimize investment and contribute to the decision process around phasing of features Gain insight into the content needed to support the users of the system Iteratively validate designs Once information architecture is available, gauge intuitiveness of labeling and site structure Once design concepts are available, gauge users reactions to branding and design Once wireframes are available, gauge usability of screen design and workflow for different user segments Communications and ownership Foster a sense among key stakeholders that they are participating in the process Identify specific agents who can assist in the feedback process throughout the build Be able to demonstrate (through communications) to the broader agent community that there were agents significantly involved in the design of the system. Gain insight into users to assist in optimizing the effectiveness of communications programs Simplify and “de-politicize” decision process Speed decision-making process by inputting objective research data and analysis as way of driving design decisions (rather than executive “preferences”) Typical Goals of a User-Centric Design Process

10. User needs exist in a hierarchy and, similar to Maslow’s famous hierarchy of human needs, users needs must be satisfied at a lower level of the hierarchy before the next level up becomes relevant. Users have emotional reactions to web-based products, particularly those which they use frequently to do their jobs. Users can develop significant delight and loyalty as a result of web products that they truly feel are designed to make their lives easier and meet their needs. User Goals

11. User Centered Design LifecycleUser-Centered Design is applicable not just at initial product development but on an ongoing basis throughout the product lifecycle

12. Key Approach Attributes of User-Centered Design • Our experience and industry research has shown that the best results in web-based product design are obtained by implementing a combination of different usability techniques staged at different points in the development lifecycle, with a focus on evaluation of designs before they have been implemented in code. • In our approach, an iterative process is employed whereby designs are tested in an inexpensive manner with users at each step of the design process, from early page schematics (wireframes) through final pre- and post-launch production systems.

13. Break the product into sections, for each section: Develop and test page wireframes with users via paper prototyping analysis and iterate Develop an HTML prototype and test with users via task analysis exercises and iterate Develop detailed use cases for development team Develop and test functionality In parallel, develop a launch communications and adoption strategy. Conduct usability tests in pre- and post-launch production systems. At a high level, the approach breaks down into the following activities: Assess the current product to understand and prioritize gaps in functionality, content and usability from a user and competitive perspective. Make decisions about redesign scope and phasing, user segments and desired future-state user experience. Develop “Global Design” for the product—which defines overall product look and feel as well as navigation. Test the global design and navigation with users through card sorting and other usability tests. Develop thorough documentation of global design including style guide, interactive guide and production toolkit. High Level Approach

14. Characteristics of our Approach • We utilize a range of industry-proven techniques, combining heuristic analysis and various user testing activities to achieve the best benefits of both. • We operate in a highly collaborative fashion. Our usability engineers will work closely with the design, development, and client teams to identify usability issues, define solutions, and review iterations of solution implementation. • We focus significant time on the earlier stages of the design/development process, testing lower fidelity artifacts earlier in the project when design or development changes can be made less expensively. • However we also include testing of functional builds to “catch” usability barriers that may not have been revealed in lower-fidelity tests done earlier. • We place a strong emphasis on production of comprehensive design and technical documentation to enable the development team to implement the solution with minimal to no “interpretation” about how the product should look, feel, or interact with the user. Success criteria to accomplish this goal include: • Very detailed style guide and interaction guides • Reusable templates which developers can use to build pages • Close collaboration with the development team from the very early stages of the design process through launch.

15. Timing of User Testing Activities • Some projects wait until a working “beta” version of an online application is available and then conduct testing. The advantage of this approach is that the testing can be done with a “real” live application. The significant disadvantage is that if major usability flaws are found, it may be expensive to make development changes, thus impacting project budget and timeline (or running the risk that needed usability adjustments do not get made at all). • To protect against these risks, conduct usability activities starting from early stages of the design/development process and continuing through development. Techniques are engaged that enable significant usability information to be gained by testing wireframes, prototypes and other project artifacts that are available relatively early in the lifecycle. While this testing cannot evaluate 100% of the experience, since the user cannot user the site in a truly interactive way, it can identify most of the usability issues that may need attention, and do it before code is written, thus reducing the cost for changes. Testing is then continued as early builds of the application are available, validating that there are no further issues to be addressed or identifying final “refinements.” • See illustration “The Usability Funnel” on page 11.

16. Sample User Centered Design Lifecycle Approach April May June July August Current State Analysis Bus Requirements & Phasing Segmentation Analysis Requirements Workshop Develop Global Design Develop Style Guide & Interactive Guide Develop Global Navigation Taxonomy Develop Detailed Wire frames, Test With Users & Iterate Develop HTML Prototype, Test With Users & Iterate Use Case Elaboration Development & Testing continues Design QA Comm/Adoption Program Technology/Architecture Involvement

17. Our approach provides an optimized combination of the three major aspects of current-state assessment • Heuristic Evaluation involves various analytic activities conducted by a usability professional to measure a given design against a set of known usability best practices. Heuristic analysis can be thought of as “expert review and evaluation.” This can be done fairly rapidly and at relatively low-cost. Heuristic analysis can be used both for evaluation of an initial global design and to review wireframes and other design artifacts as the detailed screens of a site are developed. However, it does not catch all usability problems. • Competitive Assessment involves evaluating competitive sites against similar heuristic criteria and develop a gap matrix which illustrates how the target site benchmarks against key competitors in areas such as functionality, content, usability and user support. • User Testing involves primary research with subjects who represent individual target segments of the site. There are a range of different research techniques used to gather data from users. Typically, users are typically brought into a testing facility and asked to engage in various structured activities (which are described later in this proposal). The results of this research yield insight into the effectiveness or problem areas of a site and often provide clues as to remediation strategies. • Our approach involves a combination of both of these types of activities, so as to benefit from the efficiencies of heuristics and from the level of detailed primary information that can only be gained from user testing.

18. Heuristic Analysis • Expert review of existing solutions, both those belonging to the project sponsor and those of competitors can yield valuable insight into best practices and common site problems Sample Artifact

19. 12 Aspects of User Experience Capgemini’s heuristic evaluations are based on a mature model which encompasses twelve aspects of user experience and has been used to benchmark over 500 major web products.

20. 1. Information Architecture and Navigation: The way in which content and functionality is arranged in a logical structure and the tools used to locate a desired item. 2. Content: The material presented on the site, in any medium, that provides information to the user. 3. Functionality: Those tools that enable the customer to take action and achieve their goals. 4. Community: Features or content that create for users a sense of social participation or enable them to exchange intellectual capital. 5. Usability: The ability for a user to accomplish his goals quickly, simply, and with a minimum of frustration or errors. 6. Support: The options that users have to solicit assistance to accomplish their tasks. 7. Consumer Confidence: The level of trust and comfort customers feel about conducting business within the experience. 8. Fulfillment: The completion of promises made during the experience, after the experience has ended. 9. Marketing/ Magnetism: The methods by which a user can initially find the site, and those factors that will bring them back. 10. Personalization/Customer Insight: The degree to which the consumer feels that the site has tailored its presentation and functionality to their needs. 11. Design: The visual and interactive presentation of the experience. 12. Brand Impact: The feelings and thoughts the user has about the sponsor of the site during his visit, and the degree to which his aggregate opinions and attitude toward the sponsor are changed or enhanced by the experience. 12 Aspects of User Experience

21. Segmentation Analysis and User Experience Modeling Segmentation Analysis • The objective of this phase is to break the user groups into useful segments whose needs may differ. For each segment, a user profile will be generated to illustrate that segment’s unique characteristics. • Consider a range of “dimensions” of segmentation as shown in the illustration.

22. Sample User Profiles Segmentation Analysis Develop profiles for each user segment Sample Artifact

23. Sample User Experience Modeling Deliverable Define the desired experience for each segment Segmentation Analysis Sample Artifact

24. Development of Global Design Develop Global Design Creative Brief The purpose of the Creative Brief is to outline the design objectives of the new product site. The Brief typically covers the user-focused design objectives, target audience, specific design attributes and technical design parameters. The objectives cover all of the primary goals to be considered to make the product successful. The document should also contain information about the primary user groups so that their needs can be considered during all stages of design and development. Any specific design attributes pertaining to the site are captured in this document that might to subjects like brand identity, imagery, navigation or high-level design concepts. Finally, any technical requirements should also be captured in the document. These may include page download sizes or supported browsers and platforms. “3-2-1” Design Process The global design process typically involves several iterations of work and reviews with the client. Initially, 3 designs are created using different approaches and treatments such that the client has a choice of fundamentally different designs. From these, one is picked and modified from comments to create a final global design to be used throughout the entire site.

25. A creative brief defines the requirements for the site’s “look and feel” Develop Global Design Sample Artifact

26. When the Creative Brief is client approved, |a global look-and-feel is defined through the “3-2-1” process Develop Global Design Sample Artifacts

27. Sample 3-2-1 Process Final Results Develop Global Design Sample Artifacts

28. Develop Global Navigation Taxonomy Develop Global Navigation Taxonomy Site Map A visual representation of the site structure and is a diagram showing how elements of the site are grouped and how they link or relate to one another. This document has importance to all members of the UXP, Business and Development teams. Card Sorting Best used in the early stages of information architecture design, card sorting is a categorization method where users sort cards depicting various pieces of information into categories. The results can then be leveraged to build a more intuitive navigational hierarchy

29. During the requirement’s definition phase, a site map is developed with detailed taxonomy and is tested via card sorting with users Sample Artifacts

30. Card sorting exercises are used to develop/validate navigation schemes

31. Develop Detailed Wireframes, Test With Users & Iterate Develop Detailed Wireframes, Test with Users and Iterate Wireframes A wireframe is a visual description of the layout of content and navigation of each web page in a site. It is not “graphically” designed but merely an indication of the placement of information and is created in black and white outlines. The wireframe does not include information about functionality or give indication on the graphical feel of the site. It is created for the sole purpose of describing each pages information. A wireframe is typically created for every page of the web site and is numbered to coincide with the site map. Paper Prototype Testing Users will be brought into a laboratory environment and provided with product wireframes. For each wireframe, users will be asked to demonstrate how they would conduct a specific task using the interface presented.

32. Develop Detailed Wireframes, Test With Users & Iterate Once the global design and initial requirements are complete, the detailed wireframes can be developed Sample Artifacts Sample Artifact

33. Develop Detailed Wireframes, Test With Users & Iterate Wireframes for individual applications are created and iterated with users using “paper prototyping” techniques Sample Artifacts Sample Artifact

34. Develop HTML Prototype, Test With Users & Iterate Develop HTML Prototype/Test with Users and Iterate HTML Production The HTML is the code used to display and lay out a page design in a web browser. Usually HTML pages are created with no functionality. This is usually added later when transferred to ASP. The HTML creation process also includes all necessary production of graphics to be used on the site. This is known as art production. All HTML pages should be coded with CSS and all font styles and some formatting can then be controlled one from source in a separate CSS page. If necessary, any DHMTL can be coded during this process to reflect the design of the page. Prototype Usability Testing Users will interact with Direct through a series of structured activities including navigation and other key tasks. Their level of success, measured efficiency and feedback will provide data for usability evaluation.

35. The Click-able prototype will be tested and iterated through several cycles with users to ensure usability Users unable to move forward after VIN LookUp because placement of new required fields in Vehicle Information page causes fields to be overlooked Observation Detail Observation Detail • • New fields appear above the <VIN New fields appear above the <VIN LookUp> button when the vehicle LookUp> button when the vehicle information is retrieved information is retrieved • • The <Truck GVW> field is indicated The <Truck GVW> field is indicated as required and erroneously indicates as required and erroneously indicates all new fields are truck related all new fields are truck related • • The change in field name color is not The change in field name color is not noticeable to the users noticeable to the users Impact to User Impact to User • • User is unable to locate source of User is unable to locate source of missing information and unable to missing information and unable to Desired Outcome proceed with application proceed with application • Greater simplicity in navigating from page to page Sample Artifact • Ability to move through the tasks more quickly

36. Usability Test Protocol (60-90 minutes) Interview: Users will be interviewed for 10-15 minutes to create a baseline understanding of their profile (frequency of internet use, investment style, etc) as well as their online priorities (features most commonly used on a commercial banking site, etc). Task analysis: Up to four task workflows will be tested using a “task analysis” model leveraging the current Direct online product. Under this approach, a user is provided a computer with the site open in a browser and is asked to conduct a specific task (such as?). The subject then uses the product to attempt to accomplish the task. The subject’s activities and reactions are observed to understand where possible points of difficulty, confusion or inefficiency may exist for the user. Tasks are also timed to determine if the task duration meets usability goals defined for that task. Following each task, users are briefly interviewed to document their reactions to the experience of attempting to accomplish the task. (40 minutes) Recall Test. After using the site for 30-60 minutes, subjects will be given a list of site “capabilities” which may or may not have been explicitly related to the test. Subjects will be asked to indicate which features, or other content they “noticed” as being on the site during their interaction with the product. Several distracter (incorrect) choices will also be included to define a baseline for answer comparison. (10 minutes) Brand Impact: subject will be interviewed regarding the overall “impression” they get from the site both upon first interaction and after “working” with the site for an 30-60 minutes. (5-10 minutes) Sample Usability Test Protocol

37. Use Case Elaboration Use Case Elaboration Use Cases The Use Case (UC) is used by a project to describe how a user and system interact to allow the user to achieve a clearly specified goal. It is a key RUP artifact that, coupled w/ other documentation, is fundamental to describing the functional requirements of the system being developed. There is a key distinction between what the separate artifacts describe. The UC describes a specific scenario and how a user completes it. A User Interface spec (UIS) describes a page and every element on it. It is important for the development team review BOTH to fully understand the functionality being specified. The UC focuses on ensuring users can achieve their goals and that all possible alternate scenarios have been accounted for. An alternate scenario (or flow) is any possible deviation that can occur from the main flow. This includes errors, alternate paths to achieve the desired outcome and any other possible occurrence that might affect a user that is not accounted for in the main flow. The UC is comprised of several key sections: the header, body and issues section. In total they describe the entire navigational and functional thread for a user to achieve the goal specified in the use case.

38. Communication & Adoption Program Comm/Adoption Program • Achieving high levels of user awareness and adoption of new capabilities is critical to the success of a redesign initiative. • Capgemini participates actively with our clients in defining the necessary communication and adoption programs for a successful rollout. • Some adoption approaches and strategies are described on the next page

39. What Drives Adoption? User Experience Marketing Policy Training Marketing Identify value proposition by user group Identify barriers Conduct communication/marketing campaigns targeting value and barriers. Look for existing channels to leverage. Look for redirect opportunities Track usage and adapt strategies Creating and executing on a thorough communications plan that effectively targets strategic messages to different user segments at the right time with the right frequency can have profound impact on rollout success and efficiency. Set Expectations Create Empathy Communicate a Segment-focused value proposition Define target behaviors and measure Create a rapid feedback loop Rapidly communicate regarding problems Target opinion leaders with personal communications Adoption Continuum Thorough and Habitual Use Aware Occasional Use Regular Use Willing to“Opt Out” ofLegacy Tools Never Heard of Capability

40. Design QA Design QA • In addition to usability testing and general quality assurance testing, it is important to review the user interface design to ensure high quality standards are continuing during development. The task of reviewing the user interface should continue throughout the development cycle by a qualified art director/designer preferably involved in the early stages of the global design process. • The art director will help the development team understand how to utilize the style guide, interaction guide and production tool kit. As development begins, the art director will continue to be available as a resource for developers to ask clarification as well as make small design adjustments as needed. Once the system is in production the art director goes through the application methodically to review coded pages for compliance with standards, and logs any UI defects.

41. Our Practice Capgemini has successfully partnered with a wide range of clients to evolve develop interactive solutions Our clients include: • Farmers Insurance • Zurich Insurance • CNA Insurance • Merrill Lynch • E*Trade • Swiss RE • Air France • Coke • Chevron • Chrysler • Aventis • Hewlett-Packard • AG Edwards • GMAC • Principal Financial Group • Chevron Credit Card • Standard & Poors • McGraw-Hill • Nokia • Office Depot • PR Newswire • Shell • Sprint • Blue Cross/Blue Shield • Toshiba • Our capabilities span the full lifecycle of product development, from analysis of existing capabilities through design, development, roll-out and communication • We have the experience and a proven methodology that achieves: • High levels of usability, user adoption, and user satisfaction • Strong and positive brand impact • Results in an accelerated timeframe • Buy-in from key stakeholders • Reduction in costs in the development process 40

42. Contact Information Howard Tiersky, Vice President, User Experience Practice Capgemini Howard.Tiersky@capgemini.com Howard@Tiersky.com 917 320 3250 (w) 646 245 4467 (c) 41