User Experience Krista Van Laan

Agenda What is User Experience? How does a User Experience team support the rest of the organization? What processes are followed to ensure the best user experience? How does UXD fit into the Agile environment? Case studies

What is User Experience? User experience simply refers to the way a product behaves and is used in the real world. A positive user experience is one in which the goals of both the user and the organization that created the product are met. Usability is one attribute of a successful user experience, but usability alone does not make an experience positive for the user. Jesse James Garrett (Author of The Elements of User Experience)

The Elements of User Experience

What can User Experience do for me? A strong User Experience team can: Improve the product in measurable ways Lighten the load for product development Save time for development by providing clear guidelines, flows, and designs Create prototypes and mockups Reduce support calls

What can User Experience do for me? The UX team should liaison between product management and development, but also support and get input from all cross-functional teams: Product management Development Sales Marketing Branding Support

Mission Statement Understand the users needs and evaluate our designs and products against the users goal and expectations. Ensure that the products we design meet or exceed our users expectations in order to increase product adoption and reduce support intervention. Create high quality products that are implemented per the design specifications using best practices.

Dream UX Team Interaction designers Visual designers User researchers/user testing moderators Prototypers Front-end Web developers Writers …all working together, with the opportunity for extensive brainstorming and problem-solving and the willingness to stick to product schedules

UX Deliverables Analysis and Research: Personas Qualitative user research and reports User stories Competitive analysis Scorecards Design: Functional specs Flow diagrams UI specs and guidelines

UX Deliverables (continued) Prototypes: Clickable prototypes Mockups Visual Design: Polished visual design and layout Icons & Graphic components Technical Communications Web content Help User guides & reference manuals Videos, Flash demos, training material Localization

UXD Process Analyze Design Implement Verify

UXD Process 1. Work with product management at the beginning. Understand business objectives, the behavior and thinking of the users, and the competition. 2. Produce architecture, wireframes, design treatments until the product takes form. 3. Rapid iteration: constantly refine the prototype in response to targeted inquiry into what aspects of the experience need work. (through analysis and user testing.)

User Testing Informal Contextual inquiry Scorecards Usability lab Video recording Eye tracking

Working in an Agile Environment User research and testing can be utilized to prioritize features in the product backlog and to iteratively refine designs to achieve better usability. Integrating UXD and Agile processes can be accomplished with little or no impact on release schedules.

Working in an Agile Environment 1. Early stage UX planning High-level design UX requirements Detailed design and spec 2. Embed a designer and a writer on the team No surprises Writer produces chunks of content that keep up with development, takes some time at end to pull it all together

Working in an Agile Environment 3. UX designers and writers follow same development schedule: Designers are one iteration ahead of the SW developers Hand off detailed designs for developers to follow Ideally, interface developers are on the UX team Writers often document features one iteration after SW developers 4. Backlog contains UX design features

Designing VIP (VeriSign Identity Protection) User-centered design methodology in an Agile environment, producing designs for Web, mobile devices Early research phase with the cooperation of product management 1. User scenarios 2. Visio flow diagrams to document different tasks.

User Testing Early usability tests are done with very simple materials, often just pencil drawings that help to determine whether a user understands what an application is supposed to do.

User Scenario Examples VIP User Scenario #1a – New User: Learning through Relying site, Acquiring, Activating, Registering VIP User Scenario #1b – New User: Learning offline, Acquiring, Activating, Registering VIP User Scenario #1c – New User: Learning, Acquiring, Activating, and assumes account is protected without registering VIP User Scenario #2a – Existing User: Lost/Damaged Token VIP User Scenario #2b – Existing User: Forgot Token VIP User Scenario #2c – Existing User: Lost/Stolen Token doesnt find link on site VIP User Scenario #3a – Existing User: Registering an Active Token on Additional Relying Sites VIP User Scenario #3b – Existing User: Registering an Active Token on Additional Relying Sites but Token ID is worn VIP User Scenario #3c – Existing User: Does not remember they have token, buys now token, later finds token and wants to return

User Testing Target users defined Prototype created Early users had a difficult time understanding what the passcode was and how to generate it. Adding this illustration helped a lot. At first it was at the bottom of the screen where users did not see it. Iterative redesign VIP consumer site

Designing VIP

VeriSign Certificate Center VCC came about as a result of user testing The User Experience team created a prototype of what VCC might look like and presented it to product management. UXD team brainstormed to figure out the every possible path for all use cases. Three rounds of usability testing helped the team develop the product. Each night the team modified and improved the prototype in response to what was discovered during testing.

VeriSign Certificate Center Working prototype validated by the users became basis of UI spec that describes the look and behavior of the UI. Worked with development to oversee implementation Made substantial and surprising improvements to the status page

VCC Deliverables User stories Flow diagrams Functional spec UI spec Prototypes User research