Your SlideShare is downloading. ×
Envisioning Experience
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Envisioning Experience


Published on

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

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

Published in: Design, Education, Technology

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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 DefinedWhat is Visualization?Simply put, visualization helps you see what you’re going to get before youstart 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 TogetherVisualization…•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 AlignmentA 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 DesignIterative 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 SimulationHow detailed does the simulation need to be to achieve our goal in this stage? concept |
  • 13. Key #4: FlowDuring 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 VisualizationFidelity Visual Elements Functional Elements Requirements IdentifiedLevelSketch • Text description of key page • Basic flow/action captured • Initial concepts and ideas(also called areas; possible graphic • Text or placeholders • Vision statementsPre- placeholders; comments and describing behavior • High level business goalsvisualization) questions. Can be used to • Interaction limited to depict information movement from screen to architecture. screenLow • 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 navigationMedium • 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 definitionsHigh • 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 ConsFidelity Level Pros Cons UX Design ActivitySketch 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 sitesMedium 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 UsesFidelity Audience Use GoalSketch 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 ConsumersFidelity Level Project Phase Creator / Contributors Usability ActivitySketch Planning, Inception Interaction Designer, Business Analyst, User research – explore user Usability Analyst, Product Manager, wish lists and preferences, SME float initial conceptsLow Inception, Design Interaction Designer, Business Analyst, Validate concepts in Usability Analyst, Product Manager, walkthroughs with SMES, SME stakeholders, and User Advisory Board membersMedium 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 membersHigh 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 ToolsTool Fidelity Level Pros ConsWhite Board / Flip Sketch Anyone can use; excellent for on- Not easy to preserve, distribute, or the-fly and exploration updateChartVisio / Omnigraffle Low to Medium Viewer available; commonly used; Not as effective for high resolution low learning curve; stencils = or more complex interaction templatesAxure Medium to High Supports interactive prototyping; Still relies on Object-Oriented moderate learning curve; don’t thinking; difficult for non- need programming skills programmersiRise 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 requirementsFlash 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 productFlex 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 DecisionAsk yourself… Common Responses ConsiderationsWhat 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 avisualization? makers, customers, Marketing, architects, visualization. developersWho 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 thethe 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 communicatingfrom 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 alsovisualization? restrictions for sharing deliverables.
  • 24. From initial sketches to detailed information design, visualization usesdynamic imagery to communicate both concepts and requirements.Visualization provides a more universal understanding and helps bothstakeholders and project team members to identify gaps, work throughproblems, and build a solution that satisfies both business andcustomer/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 - Solution1. 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 – Solution1. 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 - 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 |
  • 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 - Solution1. 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 yourparticipation and your comments.Questions? Feel free to connect with us!Maggie ReillyEmail: sondancer1@rocketmail.comStephanie SansoucieTwitter: @jolisouciEmail: stephanie.sansoucie@atech.comLinked In: Website: |
  • 37. ReferencesBuxton, 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.