|

Envisioning Experience:

Using Simulations to Define and Create

Improved Customer/User Experience

Presented by:

Maggie Reilly, User Experience Practice Lead (OneSpring)

Stephanie Sansoucie, Senior User Experience Specialist (Ascendant)

|

Agenda

• What is visualization?

• What are the key ingredients to visualization?

• How can we select the right level of fidelity?

|

Visualization Defined

What is Visualization?

Simply put, visualization helps you see what you’re going to get before you

start implementing the solution.

Why Visualization?

•Relies on collaboration and iteration

•Enhances capture and communication of ideas and information

•Provides best return on investment when used early & repeated

•Is supported by many different tools

|

Visualization Brings People Together

Visualization…

•Facilitates agreement among stakeholders on both requirements and solutions

•Enables stakeholders to see requirements for specific goals

•Promotes exploration while reducing rework

•Enhances communication throughout the project

|

•Visualization reduces risk.

• Visualization reduces development time.

•Visualization supports effective cross-functional collaboration.

•Visualization helps tells a story.

Business Benefits for Visualization

|

Visualization Clarifies Information & Business Processes…

…for users, project team members and stakeholders.

|

Visualization Transforms Requirements…

…into an immediate and shareable experience.

|

An effective visualization incorporates four key ingredients.

Small Group

Collaboration

Rapid

Iterative

Design

Appropriate

Fidelity in

Simulation

+ + +

“Flow” State

|

Small Group

Collaboration

Key #1: Small Group Collaboration

• Collaboration in small groups supports problem

solving within a structured environment.

• Cross-functional teams break down knowledge silos

and provide real-world solutions to problems that

require shared understanding.

|

A well-managed visualization closely matches roles with skill sets.

Analyst―Left Brain‖

Designer―Right Brain‖

ProducerFacilitates Flow

BusinessSME on ―What?‖

ITSME on ―How?‖

Documentation Screen Visualization Screen

Collaboration Requires Role & Skill Set Alignment

|

Key #2: Rapid Iterative Design

Iterative approach to modeling a solution…

• Allows team members to rapidly see the ―big picture‖

• Gains stakeholder consensus

• Starts high-level drills down to define specific interactions and design

patterns

|

How detailed does the simulation need to be to achieve our goal in this stage?

Key #3: Appropriate Fidelity in Simulation

concept

|

Indicators of Effective Team Flow

• Goals are clear.

• Feedback is immediate and open.

• Opportunity and ability/capacity balance.

• Concentration deepens.

• Focus remains on the here and now.

• Control issues vanish.

• Awareness of passage of time recedes.

• Ego (self-consciousness and self-importance) disappears.

• Judgment is suspended.

Flow

During flow, team members share an understanding of the solution & its value.

Key #4: Flow

|

Effective Team Flow

• Models are socialized to encourage acceptance, build understanding, and measure fidelity to expectations and requirements.

• Use of models is measured and analyzed to validate functions and assess achievement of objectives.

• Insights drive models of experience; models, in turn, elicit deeper understanding of requirements and help create a new context that resolves issues and provides solutions.

• Observation and discussion lead to a grasp of context for the business need, the customer/user experience, and the required technologies.

InsightIterative

Solutions

SharingEvaluation

|

How can we select the appropriate level of fidelity?

|

Levels of Fidelity for Visualization

Fidelity

Level

Visual Elements Functional Elements Requirements Identified

Sketch(also called

Pre-

visualization)

• Text description of key page

areas; possible graphic

placeholders; comments and

questions. Can be used to

depict information

architecture.

• Basic flow/action captured

• Text or placeholders

describing behavior

• Interaction limited to

movement from screen to

screen

• Initial concepts and ideas

• Vision statements

• High level business goals

Low • Key elements depicted at level

of detail sufficient for basic

comprehension, but no more

• Not polished

• May include IA diagrams

• Static pages, no dynamic

behavior

• Text description or blocked in

areas

• Simple, linear navigation

• High-level requirements only

• Documentation of known or

desired elements not shown

in visualization

Medium • Page layouts (blocked-in text

and objects, lorem-ipsum text)

• Interactive wireframes and

advanced onion skinning

• Usability/UX elements

introduced and testable

• Selected branding elements

may be applied

• Blocked-in elements like

active form fields, key action

buttons, and primary and

secondary navigation

• Deeper linking between

page-level elements, allowing

user to interact with

visualization

• Special conditions included

• Business process scenarios

and basic traceability

• Initial business rules

• Initial functional

requirements, particularly

those not visualized

• Initial field level definitions

High • Full visual skinning

• Realistic/highly evolved design

• Behaves like ―the real thing‖

• System and some user inputs

operational and accurate

• Continued field level

definitions

• Full traceability

• Capture of functional

specification elements

|

Example: Low Fidelity

|

Example: Medium-High Fidelity

|

Fidelity Level Pros and Cons

Fidelity Level Pros Cons UX Design Activity

Sketch Quick and easy to generate

and adjust; useful for

capturing additional ideas

and concepts

Of limited use for

viewers in any role who

are ―literalists‖

Paper prototypes for early

exploration of concepts;

validate business and user

goals in group reviews.

Low Fast and simple to make

and refine; especially useful

for workflows

Can’t be used to

measure impact of

visual/graphic design or

content-heaving sites

Define information architecture

(navigation, site structure) and

identify interaction flows.

Medium Provides flavor of

experience for

conceptualists and

literalists; shows up gaps

More labor intensive to

create, less flexible;

adjustments have

waterfall impact.

Identify page types and

templates, explore styles and

color palettes, identify

interaction design patterns and

content types. Confirm

information architecture and

navigation.

High Simulates user experience

accurately and in depth;

supports comparison of

visual designs

More attributes make

comparisons less viable;

changes are labor

intensive or restricted to

A/B comparisons

Make final selections for flows,

skins; Adjust highly specific

design elements; use to

baseline and validate designs

and interactions

|

Visualization Fidelity Audiences and Uses

Fidelity Audience Use Goal

Sketch Project Team, Product

Manager and other Primary

Stakeholders

Brainstorm designs and

objectives. Blue-sky

experience and dream the

ideal user experience /

business results.

Confirm goals and objectives

for business and consumers;

define concepts.

Low User Advocates, User

Representatives, Cross-

functional Project Team

Inspire design sessions and

guide requirements gathering.

Produce storyboards and

document use cases.

Explore/expand or refine

goals; quantify objectives;

select and ―sell‖ concepts.

Medium SMEs, User (Consumer)

Advisory Boards, Product

Managers, Decision Makers,

Designers, Architects, and

Lead Developers

Embody designs and

establish refined system and

functional requirements;

capture and define business

rules. Blend with user

requirements.

Stabilize and refine

requirements; build library of

styles, templates, icons, and

design patterns.

High Developers, Representative

Users, C-Suite Decision

Makers, Marketing Team,

Product Managers

Early test of user acceptance

and measurement of

achievement of user

requirements. Present

chosen designs and map out

detailed strategy for delivery

and maintenance. Confirm

rules and requirements.

Confirm and validate

functional and system

requirements and business

rules. Measure achievement

of business and user goals.

Set standards for delivery

experience and for future

enhancements/releases.

|

Fidelity Creators and Consumers

Fidelity Level Project Phase Creator / Contributors Usability Activity

Sketch Planning, Inception Interaction Designer, Business Analyst,

Usability Analyst, Product Manager,

SME

User research – explore user

wish lists and preferences,

float initial concepts

Low Inception, Design Interaction Designer, Business Analyst,

Usability Analyst, Product Manager,

SME

Validate concepts in

walkthroughs with SMES,

stakeholders, and User

Advisory Board members

Medium Inception, Design Interaction Designer, Business Analyst,

Key Stakeholders, Visual Designers,

Marketing Specialists

Validate interaction and visual

designs in presentations,

walkthroughs, and review

sessions with stakeholders,

SMEs, product and project

managers, and team

members

High Design, Development Interaction Designer, Business Analyst,

Key Stakeholders, Visual Designers,

Marketing Specialists, System

Architects, Lead Developers

Measure acceptance,

usability, and validity of design

concepts and visual

treatments during formal user

testing.

|

Visualization Tools

Tool Fidelity Level Pros Cons

White Board / Flip

Chart

Sketch Anyone can use; excellent for on-

the-fly and exploration

Not easy to preserve, distribute, or

update

Visio / Omnigraffle Low to Medium Viewer available; commonly used;

low learning curve; stencils =

templates

Not as effective for high resolution

or more complex interaction

Axure Medium to High Supports interactive prototyping;

moderate learning curve; don’t

need programming skills

Still relies on Object-Oriented

thinking; difficult for non-

programmers

iRise Low to Medium to High Supports interactive prototyping;

moderate learning curve; don’t

need programming skills; can

easily be used to document

requirements

Still relies on Object-Oriented

thinking; difficult for non-

programmers; very expensive

Flash Medium to High Supports interactive prototyping;

moderate learning curve; most

browsers support Flash; may be

able to use as part of final product

Action scripting required for

complex interactions

Flex Medium to High For programmers, this is a

powerful design tool. Also

supported by most browsers (.swf)

For non-programmers, this may

have a steep learning curve.

Dreamweaver Medium to High Programming skills recommended

but not required; produces real

prototype for those who know how

to code; commonly use;

Can produce sloppy code if not

used with care

|

Visualization Decision

Ask yourself… Common Responses Considerations

What project phase will the

visualization serve?

Inception, Planning, Design, Development The earlier in the project the visualization is

introduced, the more uses it supports.

Visualization can grow and adapt as the

project progresses.

What is the purpose for the

visualization?

Refine concept, identify requirements, plan

strategy or use of resources, select workflow,

interaction, or visual design

Visualizations can both help and hinder—too

much detail too early can squelch creativity.

Visualization is most effective as a means for

quick, clear communication of ideas.

Who will consume (use) the

visualization?

Project team, end users, stakeholders,

middle or upper management, decision

makers, customers, Marketing, architects,

developers

Visual literacy and ability to think abstractly

enable most effective consumption of a

visualization.

Who will create the

visualization?

Designers, analysts, developers Creator skill set, including communication

skills, determines efficacy of visualization.

Who will contribute to / critique

the visualization?

Designers, analysts, product managers,

SMEs, stakeholders, user

representatives/advocates

Critiques are a form of creativity. Invite key

reviewers and be prepared to iterate the

visualization.

What deliverables will result

from the visualization?

Simulation, prototype, beta release,

requirements documents, use cases

Visualization can be the raw material for a

variety of evaluations and for communicating

not only concepts but design details and

functional, system, and application

requirements.

What tool will be used for the

visualization?

See previous slide. Tool selection should be determined not only

by skill set and availability, but also

restrictions for sharing deliverables.

|

From initial sketches to detailed information design, visualization uses

dynamic imagery to communicate both concepts and requirements.

Visualization provides a more universal understanding and helps both

stakeholders and project team members to identify gaps, work through

problems, and build a solution that satisfies both business and

customer/user needs.

|

Examples

|

Exercises in Visualization: Scenarios

|

1. Rental Car Company

• TASK: Move an existing mainframe application to a web-based portal. Tie the

application to existing website support and communications. B2B application.

Application enables customers (franchised car rental locations) to reserve and lease

appropriate vehicles for customers. Sites are not associated with airports or car

dealers or resellers but are stand-alone shops. Franchise owners are interested in

accurately sizing number and type of most-requested/best-earning vehicles.

• GOAL: Provide a web front end to an existing application, with improved user access

and speedier transactions. Improvements to interactions are expected but additional

service offerings not to be supplied during this phase.

• QUESTIONS: How can visualization help? How does user research/testing enter

in? What methods might be used? What level of fidelity would work best?

27

|

1. Rental Car Company - Solution

1. Mid-fidelity simulation is used to propose and explore alternate

designs, rapidly iterated.

2. Frequent review by SMEs and product manager enable interaction

designer to quickly refine designs and adjust navigation.

3. Regularly scheduled usability tests with three to five customers to

validate key design decisions.

4. High-fidelity simulation emerges from iteration of mid-fidelity solutions.

5. Project team derives requirements and specifications from high

fidelity simulation to which client’s visual design package and

branding has been applied.

28

|

2. Pharmaceutical Company’s Website

for Physicians

• SITUATION: Existing website provides basic product information plus the

ability to order samples and patient (consumer) information materials.

Detailed product information and samples are available from the brand

websites (which are not to be phased out) and from pharmaceutical reps.

• GOALS: Business goals include reducing physician dependence on

pharmaceutical refs, increasing online orders for products, and increased

physician traffic overall. Goals for intended audience are to make the site a

destination for physicians.

• QUESTIONS: How can visualization help? What would it be used to

accomplish? What level of fidelity would work best? What tool might be

best?

29

|

2. Pharmaceutical Company’s Website

for Physicians – Solution

1. Initial concepts shown in high fidelity, to evoke possibilities of customer

experience.

2. Design efforts carried out in first in low fidelity and then gradually increasing

in to mid-fidelity as additional features and functional requirements are

uncovered and simulated.

3. Some design concepts are abandoned and business goals are

reformulated.

4. Validated designs are developed in high-fidelity simulations and used as

basis for formal usability testing.

5. Revised high-fidelity designs based on results of user tests provide basis for

requirements and detailed specifications.

30

|

3. Retail Sales & Distribution – Tobacco Products

• CURRENT: Existing application enables retailers to order product plus promotional

materials and to qualify, by means of sales and revenues, for additional promotional

support and special rates for certain products.

• TASK: Company wants to move the application from client-server base to web base

and provide improved interaction and services for retailers.

• GOAL: Reduce interaction times and compress product turn-around (speed up

orders and distribution), more accurately track distribution and sales, identify growth

areas and declines more rapidly and accurately, and target just-in-time distribution

and selected promotions to stimulate sales and revenue growth.

• RESTRICTION: At this time, while interface can be enhanced as needed, backend

systems are not to be changed.

• QUESTIONS: How can visualization help? What would it be used to accomplish?

What level of fidelity would work? What tool might be best?

31

|

3. Retail Sales & Distribution – Tobacco Products -

Solution1. User experience designer captures basic flow for existing application in mid-fidelity

simulation. This simulation is validated and critiqued by project team to document

opportunities for process improvement.

2. Information Technology SMEs, Product Managers, and Marketing personnel join with

user experience personnel to recommend process improvements based on mid-fidelity

simulation.

3. Target audiences review this simulation at customer conference and provide formal and

informal feedback.

4. Revised mid-fidelity simulation is used to explore and adjust updated process flows and

overall navigation for a web-based front end and to validate interaction with existing

backend.

5. Mid-fidelity simulation is ―acquired‖ and adapted by Marketing to accommodate

branding.

32

|

4: Bank Website and Application Redesign

• CURRENT: While this large national bank already has a much-trafficked website, the

company wants to move as many transactions as possible online, including all payments, all

inquiries and transfers, distribution of statements, application for loans, and many signature

transactions—everything except physical deposits. Bank intends to go paperless, provide

services 24/7, and complete transactions in real time.

• CONSIDERATIONS: This functionality is already available, but customers resist automatic

payments and some customers do not want to be paperless. Also, customers are known to be

somewhat suspicious of or reluctant to embrace real-time transactions as they lose traditional

―float‖ to the bank.

• GOALS: Business goals include reducing cost and float and improving customer satisfaction

and trust without providing additional service offerings. Goals include a site that induces/invites

and supports more online transaction.

• QUESTIONS: How can visualization help? What would it be used to accomplish? What level

of fidelity would work? What tool might be best?

33

|

4: Bank Website and Application Redesign - Solution

1. Internal team iterates analyzes customer data, including survey responses,

to propose new process flows in low-fidelity simulation.

2. Teams iterate simulation with Information Technology team and Product

Managers to develop mid-fidelity simulation for process flows.

3. New business requirements are identified and additional functional

requirements are captured.

4. Mid-fidelity solutions are reviewed by a Customer Advisory Board and are

also compared to competitor solutions by an independent research firm.

5. Research results are used to revise mid-fidelity solutions, which are used as

model for revising applications at the site.

34

|

Q & A

|

Thank You!

We’re pleased to be part of UPA 2011 and we very much appreciate your

participation and your comments.

Questions? Feel free to connect with us!

Maggie Reilly

Email: sondancer1@rocketmail.com

Stephanie Sansoucie

Twitter: @jolisouci

Email: stephanie.sansoucie@atech.com

Linked In: www.linkedin.com/in/stephaniesansoucie

Company Website: www.atech.com

|

References

Buxton, Bill. Sketching User Experiences. Morgan Kauffmann, 2007.

Csíkszentmihályi, Mihály. Creativity: Flow and the Psychology of Discovery and Invention, Harper

Perennial, 1996; Finding Flow: The Psychology of Engagement with Everyday Life, Basic

Books, 1996; Good Business: Leadership Flow, and the Making of Meaning, Penguin Books,

2003.

Garrett, Jesse James. The Elements of User Experience: User-Centered Design for the Web and

Beyond. New Riders Press, 2010.

Jarrett, Caroline, Gaffney, Gerry, and Krug, Steve. Forms That Work. Morgan Kauffmann, 2008.

Johnson, Jeff. Simple Guide to Understanding User Interface Design Rules. Morgan Kauffmann,

2010.

Quesenbery, Whitney, and Brooks, Kevin. Storytelling for User Experience. Rosenfeld Media, 2010.

Synder, Carolyn. Paper Prototyping, Morgan Kauffmann, 2003.

Tidwell, Jenifer. Designing Interfaces. O’Reilly Media, 2011.

Tufte, Edward. The Visual Display of Quantitative Information; Envisioning Information; Visual

Explanations, Images, and Quantities, Evidence and Narrative; Beautiful Evidence. Graphics

Press.

Wroblewski, Luke, Web Form Design: Filling in the Blanks. Rosenfeld Media. 2008. 37