Explore visualization for user experience, information architecture, and interaction design, including tools and when and how to use them. (UPA 2011 - Usability Fundamentals Track)

1. 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)
|

2. Agenda
• What is visualization?
• What are the key ingredients to visualization?
• How can we select the right level of fidelity?
|

3. 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
|

4. 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
|

5. Business Benefits for Visualization
•Visualization reduces risk.
• Visualization reduces development time.
•Visualization supports effective cross-functional collaboration.
•Visualization helps tells a story.
|

6. Visualization Clarifies Information & Business Processes…
…for users, project team members and stakeholders.
|

7. Visualization Transforms Requirements…
…into an immediate and shareable experience.
|

8. An effective visualization incorporates four key ingredients.
+ + +
Small Group Rapid Appropriate “Flow” State
Collaboration Iterative Fidelity in
Design Simulation
|

9. 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
Small Group
Collaboration require shared understanding.
|

10. Collaboration Requires Role & Skill Set Alignment
A well-managed visualization closely matches roles with skill sets.
Documentation Screen Visualization Screen
Analyst Producer Designer
―Left Brain‖ Facilitates Flow ―Right Brain‖
Business IT
SME on ―What?‖ SME on ―How?‖
|

11. 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
|

12. Key #3: Appropriate Fidelity in Simulation
How detailed does the simulation need to be to achieve our goal in this stage?
concept
|

13. Key #4: Flow
During flow, team members share an understanding of the solution & its value.
Indicators of Effective Team Flow
• Goals are clear.
• Feedback is immediate and open.
• Opportunity and ability/capacity balance.
• Concentration deepens.
Flow • 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.
|

14. Effective Team Flow
• Observation and discussion • Insights drive models of
lead to a grasp of context for experience; models, in turn,
the business need, the elicit deeper understanding
customer/user experience, of requirements and help
and the required create a new context that
technologies. resolves issues and provides
solutions.
Iterative
Insight
Solutions
Evaluation Sharing
• Use of models is • Models are socialized to
measured and analyzed to encourage acceptance,
validate functions and build understanding, and
assess achievement of measure fidelity to
objectives. expectations and
requirements.
|

15. How can we select the appropriate level of fidelity?
|

16. Levels of Fidelity for Visualization
Fidelity Visual Elements Functional Elements Requirements Identified
Level
Sketch • Text description of key page • Basic flow/action captured • Initial concepts and ideas
(also called areas; possible graphic • Text or placeholders • Vision statements
Pre- placeholders; comments and describing behavior • High level business goals
visualization) questions. Can be used to • Interaction limited to
depict information movement from screen to
architecture. screen
Low • Key elements depicted at level • Static pages, no dynamic • High-level requirements only
of detail sufficient for basic behavior • Documentation of known or
comprehension, but no more • Text description or blocked in desired elements not shown
• Not polished areas in visualization
• May include IA diagrams • Simple, linear navigation
Medium • Page layouts (blocked-in text • Blocked-in elements like • Special conditions included
and objects, lorem-ipsum text) active form fields, key action • Business process scenarios
• Interactive wireframes and buttons, and primary and and basic traceability
advanced onion skinning secondary navigation • Initial business rules
• Usability/UX elements • Deeper linking between • Initial functional
introduced and testable page-level elements, allowing requirements, particularly
• Selected branding elements user to interact with those not visualized
may be applied visualization • Initial field level definitions
High • Full visual skinning • Behaves like ―the real thing‖ • Continued field level
• Realistic/highly evolved design • System and some user inputs definitions
operational and accurate • Full traceability
• Capture of functional
specification elements
|

17. Example: Low Fidelity
|

18. Example: Medium-High Fidelity
|

19. Fidelity Level Pros and Cons
Fidelity Level Pros Cons UX Design Activity
Sketch Quick and easy to generate Of limited use for Paper prototypes for early
and adjust; useful for viewers in any role who exploration of concepts;
capturing additional ideas are ―literalists‖ validate business and user
and concepts goals in group reviews.
Low Fast and simple to make Can’t be used to Define information architecture
and refine; especially useful measure impact of (navigation, site structure) and
for workflows visual/graphic design or identify interaction flows.
content-heaving sites
Medium Provides flavor of More labor intensive to Identify page types and
experience for create, less flexible; templates, explore styles and
conceptualists and adjustments have color palettes, identify
literalists; shows up gaps waterfall impact. interaction design patterns and
content types. Confirm
information architecture and
navigation.
High Simulates user experience More attributes make Make final selections for flows,
accurately and in depth; comparisons less viable; skins; Adjust highly specific
supports comparison of changes are labor design elements; use to
visual designs intensive or restricted to baseline and validate designs
A/B comparisons and interactions
|

20. Visualization Fidelity Audiences and Uses
Fidelity Audience Use Goal
Sketch Project Team, Product Brainstorm designs and Confirm goals and objectives
Manager and other Primary objectives. Blue-sky for business and consumers;
Stakeholders experience and dream the define concepts.
ideal user experience /
business results.
Low User Advocates, User Inspire design sessions and Explore/expand or refine
Representatives, Cross- guide requirements gathering. goals; quantify objectives;
functional Project Team Produce storyboards and select and ―sell‖ concepts.
document use cases.
Medium SMEs, User (Consumer) Embody designs and Stabilize and refine
Advisory Boards, Product establish refined system and requirements; build library of
Managers, Decision Makers, functional requirements; styles, templates, icons, and
Designers, Architects, and capture and define business design patterns.
Lead Developers rules. Blend with user
requirements.
High Developers, Representative Early test of user acceptance Confirm and validate
Users, C-Suite Decision and measurement of functional and system
Makers, Marketing Team, achievement of user requirements and business
Product Managers requirements. Present rules. Measure achievement
chosen designs and map out of business and user goals.
detailed strategy for delivery Set standards for delivery
and maintenance. Confirm experience and for future
|
rules and requirements. enhancements/releases.

21. Fidelity Creators and Consumers
Fidelity Level Project Phase Creator / Contributors Usability Activity
Sketch Planning, Inception Interaction Designer, Business Analyst, User research – explore user
Usability Analyst, Product Manager, wish lists and preferences,
SME float initial concepts
Low Inception, Design Interaction Designer, Business Analyst, Validate concepts in
Usability Analyst, Product Manager, walkthroughs with SMES,
SME stakeholders, and User
Advisory Board members
Medium Inception, Design Interaction Designer, Business Analyst, Validate interaction and visual
Key Stakeholders, Visual Designers, designs in presentations,
Marketing Specialists walkthroughs, and review
sessions with stakeholders,
SMEs, product and project
managers, and team
members
High Design, Development Interaction Designer, Business Analyst, Measure acceptance,
Key Stakeholders, Visual Designers, usability, and validity of design
Marketing Specialists, System concepts and visual
Architects, Lead Developers treatments during formal user
|
testing.

22. Visualization Tools
Tool Fidelity Level Pros Cons
White Board / Flip Sketch Anyone can use; excellent for on- Not easy to preserve, distribute, or
the-fly and exploration update
Chart
Visio / Omnigraffle Low to Medium Viewer available; commonly used; Not as effective for high resolution
low learning curve; stencils = or more complex interaction
templates
Axure Medium to High Supports interactive prototyping; Still relies on Object-Oriented
moderate learning curve; don’t thinking; difficult for non-
need programming skills programmers
iRise Low to Medium to High Supports interactive prototyping; Still relies on Object-Oriented
moderate learning curve; don’t thinking; difficult for non-
need programming skills; can programmers; very expensive
easily be used to document
requirements
Flash Medium to High Supports interactive prototyping; Action scripting required for
moderate learning curve; most complex interactions
browsers support Flash; may be
able to use as part of final product
Flex Medium to High For programmers, this is a For non-programmers, this may
powerful design tool. Also have a steep learning curve.
supported by most browsers (.swf)
Dreamweaver Medium to High Programming skills recommended Can produce sloppy code if not
but not required; produces real used with care
prototype for those who know how
to code; commonly use;
|

23. Visualization Decision
Ask yourself… Common Responses Considerations
What project phase will the Inception, Planning, Design, Development The earlier in the project the visualization is
introduced, the more uses it supports.
visualization serve? Visualization can grow and adapt as the
project progresses.
What is the purpose for the Refine concept, identify requirements, plan Visualizations can both help and hinder—too
strategy or use of resources, select workflow, much detail too early can squelch creativity.
visualization? interaction, or visual design Visualization is most effective as a means for
quick, clear communication of ideas.
Who will consume (use) the Project team, end users, stakeholders, Visual literacy and ability to think abstractly
middle or upper management, decision enable most effective consumption of a
visualization? makers, customers, Marketing, architects, visualization.
developers
Who will create the Designers, analysts, developers Creator skill set, including communication
skills, determines efficacy of visualization.
visualization?
Who will contribute to / critique Designers, analysts, product managers, Critiques are a form of creativity. Invite key
SMEs, stakeholders, user reviewers and be prepared to iterate the
the visualization? representatives/advocates visualization.
What deliverables will result Simulation, prototype, beta release, Visualization can be the raw material for a
requirements documents, use cases variety of evaluations and for communicating
from the visualization? not only concepts but design details and
functional, system, and application
requirements.
What tool will be used for the See previous slide. Tool selection should be determined not only
|
by skill set and availability, but also
visualization? restrictions for sharing deliverables.

24. 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.
|

25. Examples
|

26. Exercises in Visualization: Scenarios
|

27. 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 |

28. 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 |

29. 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 |

30. 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 |

31. 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 |

32. 3. Retail Sales & Distribution – Tobacco Products -
Solution
1. 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 |

33. 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 |

34. 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 |

35. Q&A
|

36. 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
|

37. 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.
37
|
Wroblewski, Luke, Web Form Design: Filling in the Blanks. Rosenfeld Media. 2008.