UX Process

What is Design & User Experience? June 19th, 2007 William Tschumy User Experience Evangelist, Western Region Microsoft

How can Microsoft help me with User Experience?

Microsoft’s User Experience (UX) Offerings Best: WPF & Desktop Windows & Vista & XP Better: Silverlight Most Browsers - 1.1 MB Plugin Richness Good: HTML & AJAX All Modern Browsers Breadth

The Tools are only half the conversation

When was the last time you ever heard a user say…

“I wish I could use a SQL-based application!”

Then why do we start with technology?

Is there a better way?

Any business problem has 3 types of constraints: What’s Viable? What’s Optimal Solution: Possible? Balancing all 3 constraints What’s Desirable?

Any business problem has 3 types of constraints: Business: What can I bear? •How much can we sell it for? •How much can it cost? What’s •Is there acceptable ROI / NPV? Viable? What’s Possible? What’s Desirable?

Any business problem has 3 types of constraints: What’s Viable? What’s Possible? What’s Desirable? Technology: What can I do? •With my technology? •Within regulatory constraints? • Within my business environment?

Any business problem has 3 types of constraints: What’s Viable? What’s Possible? What’s Design: What should I do? Desirable? •Who are my users? •What are their needs? •What is their mental model?

How does Design answer its questions?

Design begins with a deep, empathetic understanding of people

We do this by observing: • What they say • What they do • Where they are • How they think

What is the process of Design?

An Overview of Design Depending on the type of problem, different techniques will be used Observe Analyze Solution The Bookkeepers The Strategists Who are personal finances from the point about long-term financial Approach Think they? of view of monitoring the activity of their management and overall net worth. money Think about their assets in terms of on account summaries and paper trails liquidity, investments and liabilities. Rely to support purchasing and making routing on the online bank as a source of Rely money management decisions. data for their strategic software tools. Not sophisticated money managers; tend to Are sophisticated users and need shy away from programs like Quicken or strategic tools for viewing their overall Microsoft Money financial picture. Observations to rely on paper trails to manage their on highly personalized financial Tend Rely finances. tools and information, and like the idea a lot of effort tracking down their of a central financial organizer. Spend transactions; feeling that they need control. enthusiastic about financial activities Are though they consider banking an and enjoy engaging in them. Even “annoyance,” they also tend to be Are very loyal and may become emotional about their financial situations advocates of the systems they use. (e.g. they are afraid of being overdrawn; Enjoy researching sources of investment they are concerned about mistakes; and inspiration as well as managing net the are excited about the possibility of worth. making a purchase). They are open to new products, especially those that can assist them with their financial “big picture”. Financial monetary activity their fortune Monitoring Optimize Goal > > Understand your Prototype to Prototype to flesh find possible out a solution users solutions

First: Understand what type of problem you’re solving… Optimization Innovation “Pattern Optimizing” “Pattern Breaking” • Tends to be more tactical • Tends to be more strategic • Bounded, understood problem space • Unbounded, fuzzy problem space • We know what we don’t know • We don’t know what we don’t know Are you trying to solve world hunger or build an improved checkout?

Observation • Immersive Research • Ethnography • Surveys & Focus Groups • Personas

Qualitative: Immersive research What People Say and Make Camera studies allow people to interpret their environment and activities Intercept interviews on the when we can’t be there street…to get quick reactions to questions Semi-structured interviews in customers’ workplaces to gather information on their daily activities and needs

Qualitative: Ethnography • Ethnography is the study of customers in the natural context of their everyday lives. • We may meet participants at their workplace, on the street, or in their home, combining interviews with observation of what they normally do. • This research captures what people actually do, not what they say they do, or what they think they do. • Understanding of their social environment reveals unmet user needs, motivations, beliefs, frustrations, and decision-making processes. • It segments customers in those terms, evaluates customer readiness for adoption, and offers strategies for compelling customers to use the eBusiness and helps to foster long-term loyalty.

Quantitative: Surveys & Focus Groups • In order to validate the hypotheses we form based on ethnographic research and/or benchmark and comparative usability tests, we may conduct online or phone surveys, or focus groups • Both surveys and focus groups provide self-reported qualitative and/or quantitative data that informs market/user segmentation as well as the business strategy online phone surveys surveys focusgroups

Personas Understanding your user population is critical. In this case, for a utility company, understanding how to better serve the poor. Based on research, Personas force you to keep the goals of the user in mind while developing your idea

(Prototyping to) Analyze • Scenario Prototyping • Collaborative Design • Prototyping

Scenario Prototyping Scenario Prototypes refine requirements through narratives Fictitious narratives or scenarios are developed to illustrate key themes of user needs uncovered in the research. They each have different key goals and motivators. The scenarios show how these characters may go about doing a task typical of their role and the challenges they face within the current environment

Scenario Prototyping (cont’d) Scenario outlines the major features of the business or application Profiles are based off of user research, and are consistent with both the value map and the business model

Collaborative Design Card sorting is useful in early stages of development to prioritize and cluster potential content offerings, find new content areas of value, and identify new areas of functionality. This technique helps identify a user-centric view of the information architecture and nomenclature. 3. Customer 4. Services 2. Industry watch Site Map 1. My Tools service offered global market information product information equity execution speaker events product demos fixed income execution annual report online product training credit services white papers help trusts & investments chairman‟s viewpoint FAQ custody publications STT associated websites securities lending Respondents can work as executive speeches brokerage services press releases currency management market data trade order management tools webcasts (llive & archived) corporate trust chat rooms/disc. Forums currency execution external news feed asset servicing teams, discussing individual industry news cash management President/CEOs viewpoint views of the information 2. Performance & 3. Communication 1. Accounting analytics account maintenance analysis electronic messaging manager selection account reporting poliicy monitoring hierarchy aloud. portfolio management tools portfolio accounting ER research data Private Edge investment management Securities Lending investment mgmt. Firms fundamental data account information downloads performance & analytics Added by Chris Chris McNiellie-- BellSouth/Atlanta-- Aug. 14 2000

Collaborative Design (Cont’d) Users can voice tacit perceptions that would otherwise not emerge in a focus group setting through non-verbal exercises. Collaging helps to elicit metaphorical associations or attitudes users have with specific topic areas. I don‟t want to be confusing, elusive, …it should have accurate tools, be intimidating, or complicated... precise, knowledgeable, and intelligent... ...warm, well-managed, and integrated... Users make word-to-image associations when describing their collage to the efficient responsive group/facilitator, and articulate what a focused confident orderly product/brand/interface SHOULD be as well as what it SHOULD NOT be. experimental,, financially sound, consistent strructure and challenging ...it should respect mentor complete order… to me, this is art! my time... summary collage: image use and image metaphor descriptions

Collaborative Design (Cont’d) Rough sketches - or paper-base prototypes - shared with customers early in the design process to get their feedback on various homepage concepts. The team was able to ―test‖ the concepts while exploring their needs and expectations in greater depth. Collaborative sessions with constituents co- design possible screens. Constituents provide immediate input and feedback - developing and revising paper-based prototypes on the fly.

Usability Testing HTML-based prototype (without final visual design) test the navigation and site functionality. Testing highlighted opportunities to streamline the site structure and overall user experience. Usability testing identifies quick fixes that could be made before launch and those that would be addressed in subsequent launches.

(Prototyping the) Solution • Prototyping • Interaction Design • Information Architecture • Content Strategy • Visual Design

Information Architecture Conceptual Model Site Map

ID, IA: One experience, Many channels

Interaction Design: Flows ―Managing your home‖ experience –constituent perspective manage identify home need find solution ―Edit Photo Title‖ experience estimate/ follow-up order —constituent perspective share/categorize provider visit 34

Content Strategy A Content Matrix is an exhaustive listing of all the content in a given product, service or business. It relates the content between the user requirement and the position within the product, service or business. Vectren eEnablement Content Matrix Audience UI Prototype File Static Content Service Territory Section Page ID Content Area: Page Title Content Type Description Reused Content Types Non-Authenticated User (Visitor), Name Word Doc name Evansville, Indianapolis, Dayton Residential, Bldr, C&I, Mktr Global Username and Password fields presented with instructional Login login.html Login.doc text and link to to login help. Login fields with link to Login Help LG 1.0 All E, I Login Error Incorrect entry, please try again message. All All Instructs user to enter email address and provides email address field. Submission generates confirmation message Forgot My Password login_help.htm Login_Help.doc and response email. LG 1.1 All E, I Informs user that he/she will receive an email containing his/her username and password, and provides instructions Login Help Response for alternatives. All E, I System genreates email with the user's username and Login Help Response email password. R, Bldr, C&I, Mktr Contains a title, displays term user entered, # of searc results found, page titles/abstracts/relevancy for the matches, provides a Search again text field and links to Search Results Search_Results.htm Search_Results Searh Tips. HM 0.3.1 All Register Contains a title and instructional content, register as Register with Vectren Register_01.htm Register_01 residential or business user radio buttons RG 1.0 All Security and Privacy Link All Contains a title, registration instructional content, and Residential Personal Info RegisterResidential_01. RegisterResidential_ registration form. Set up your online account htm 01 I do not want to register now link. RG 1.1 * Help with Form - Residential R Security and Privacy Link All Confirmation RegisterResidential_02. RegisterResidential_ Contains a title, welcoming message and link to Your registration is complete htm 02 Residential.Home RG 1.2 R Email contains welcoming message and instructions for RegisterResidential_ loggin in to online account, presents username and Residential Registration email 02_email password and provides customer care 800 number R * Customer Care signature R Contains a title and explains that online account management is not currently available in the VEDO service territory; Resdiplays email address from previous entry and missing in site Rsgistration message for VEDO users RegisterResidential_ informs user that they will be emailed when new services map Future online services 01_aVEDO become available. R, Bldr Business Personal Info Enter the account information for your RegisterBusiness_01.ht business m RegisterBusiness_01 Contains a title, instructions and business registration form. RG 1.1.1 Bldr, C&I, Mktr * Help with Form - Residential Security and Privacy Link Confirmation Contains a title and sets the expectations that a Vectren rep We received business registration RegisterBusiness_02.ht will contact them to isssue a business account user name *Case Number information m RegisterBusiness_02 and password. Assigns a case number and 800 number. * Customer Care 800 number RG 1.2.1 Email contains welcoming message and instructions for Register_02_builder loggin in to online account, presents username and Builders Registration email s_email password and provides customer care 800 number * Customer Care signature Email contains welcoming message and instructions for Register_02_comme loggin in to online account, presents username and Business Registration email rcial_email password and provides customer care 800 number * Customer Care signature Docs for Download MAFL 1.0 Note: forms and docs in the Form Library still contain old logos and company names. These should be edited to Individual Form Pages reflect new company naming. MAFL 1.1-1.4 Residential

Mood Boards: A basic vocabulary Please rank these mood boards. 1=most favorite, 12=least favorite

Experience Prototypes „living‟ identity advertising online packaging Product design

Usability Testing HTML-based prototype (without final visual design) test the navigation and site functionality. Testing highlighted opportunities to streamline the site structure and overall user experience. Usability testing identifies quick fixes that could be made before launch and those that would be addressed in subsequent launches.

What’s the result of good design?

Understanding and satisfying your users’ needs means they: Are Happier Are More Are More Loyal Productive Make Fewer Require Less Mistakes Training

Most of all, understanding and satisfying your users’ needs means they: Are more valuable

By the numbers • A mid-western utility was able to cut average customer support call cost from ~$10 to less that $1.00 per incident as a result of redesigning their web presence • A major eCommerce seller saw a 45% increase in average order size as a result of redesigning their shopping experience • The same retailer saw a 10% conversion increase as a result of better organizing product information • Implementation costs for back office systems were cut by 40%

Thank You! William Tschumy William.tschumy@microsoft.com 415.420.3746 User Experience Evangelist, Western Region Microsoft

UX Process

by David Chou

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 8

Statistics

UX Process Presentation Transcript

http://blogs.msdn.com	5
http://www.slideshare.net	3