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 user’s 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 doesn’t 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