What UX is, how it works and why it matters. Train your teams to recognize and strengthen the links between customer experience indicators and your overall business performance. Learn how to work with your customers to design successful products, services and experiences.

1. user experiencewhat it is, how it works and why it matters 11.18.09

2. our topics What is user experience (UX)? What can UX do for MoM? What processes ensure good UX? What does a UX team do? How does UX fit into the agile environment? 4

3. what is user experience? it’s more than usability. 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

4. what is user experience? it’s the sum of a simple equation. Business goals + Customer goals + User interface + Interaction w/ back end system = User Experience

5. what is user experience? it’s the combined result of all our efforts + processes. PM+ business analysis visual design application architecture user experience system design interaction design Information architecture

6. what is user experience? there are five elements of user experience. concrete Surface plane: on the surface you see a series of screens made up of images + text. Some are things you can click on to perform a function (e.g. save). Skeleton plane: placement of buttons, tabs, images and text. The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiency – so you can find that save button when you need it. Structure plane: if skeleton defines the placement of UI items, the structure defines how users got to that screen and where they could go when finished. If skeleton shows navigation category arrangement, structure defines what those categories actually are. Scope plane: the number and variety of features + functions expressed in the structure plane – what’s included – is defined by the scope plane. Strategy plane: scope is determined by strategy. It incorporates what both the product owners (clients) and the end-users want out of the product. abstract diagram courtesy of Jesse James Garrett, Elements of User Experience

7. what is user experience? the five planes encompass the interface (task oriented)… concrete Visual design : graphic treatment of interface elements (the "look" in "look-and-feel") Interface design: facilitate user interaction with functionalityinformation design: presentation of information to facilitate understanding Interaction design: application flows to facilitate user tasks, defining how the user interacts with site functionality Functional specifications: "feature set”: detailed functionality the site or app must include in order to meet user needs User needs: external; identified through user research, ethnographics, etc.site objectives: business, creative, or other internal site or app goals abstract diagram courtesy of Jesse James Garrett, Elements of User Experience

8. what is user experience? …and the system (information oriented). concrete completion Visual design : graphic treatment of interface elements (the "look" in "look-and-feel") Visual design : visual treatment of text, graphic page elements and navigational components Interface design: facilitate user interaction with functionalityinformation design: presentation of information to facilitate understanding Navigation design: facilitate user’s movement through the information architecture information design: presentation of information to facilitate understanding Interaction design: application flows to facilitate user tasks, defining how the user interacts with site functionality Information architecture: structural design of the information space to facilitate intuitive access to content Functional specifications: "feature set”: detailed functionality the site or app must include in order to meet user needs Content requirements: definition of content elements required in the site in order to meet user needs User needs: external; identified through user research, ethnographics, etc.site objectives: business, creative, or other internal site or app goals User needs: external; identified through user research, ethnographics, etc.site objectives: business, creative, or other internal site or app goals abstract conception diagram courtesy of Jesse James Garrett, Elements of User Experience

9. why is UX important for MoM? because the MoM mission is essentially: 4 Understand the users’ needs – and our clients’ business goals – and evaluate our designs and products against both 4 Ensure that the products we design meet or exceed our user’s expectations in order to increase product adoption and reduce support intervention 4 Create high quality products that are implemented per business requirements and design specifications using best practices

10. why is UX important for MoM? A UX team brings multiple disciplines to bear: 4 User researchers 4 Interaction designers 4 Visual designers 4 Information architects 4 Front-end developers 4 Writers 4 User testing moderators All work together, and with back-end teams, with extensive brainstorming, problem-solving and the same commitment as other project teams to stick to schedules and meet budgets.

11. what processes ensure good UX? UX strategy = design strategy = business strategy What’s worth doing? What are we creating? What value does it provide? How do we deliver it? focus definition value scope

12. what processes ensure good UX? focus: do we have an achievable mandate? UX efforts must address these UX efforts should accommodatethese importance Unwise use of time to address these viability | feasibility

13. what processes ensure good UX? definition: do we have clear vision, obvious requirements + team alignment? Client Project Manager Team Lead

14. what processes ensure good UX? value: how have we framed the value of the offering? Who is the target audience? What experiences are compelling to them? How is the offering different from competitors and substitutes?

15. what processes ensure good UX? scope: what do we build first and what comes next? Symptoms we haven’t clarified scope TOO BIG TOO SMALL Unrealistic delivery expectations Trouble creating a timely release (e.g. Vista vs. Mac OS X) Battling “can’t we also have _____ ?” Nervous designers + developers Unclear path to the full vision Unremarkable, unimpressive, watered-down releases

16. what does a UX team do? in every project we: Analyze4 Work with product management at the beginning. Understand business objectives, the behavior and thinking of the users, and the competition. Design4 Produce architecture, wireframes, design treatments until the product takes form. Implement4 Rapid iteration: constantly refine the prototype in response to targeted inquiry into what aspects of the experience need work (through client reviews + feedback, internal analysis and user testing).

17. what processes ensure good UX? UX team deliverables: Analysis + research 4 Personas 4 Qualitative user research and reports 4 Concept maps 4 Competitive analysis 4 Scorecards Info. architecture (IA) 4 Functional specs 4 Use cases + task flow diagrams 4 UI specs + guidelines 4 Storyboards 4 IA maps

18. sample concept map

19. sample information architecture mapping

20. sample wireframe

21. what processes ensure good UX? UX team deliverables: Prototyping 4 Flat wireframes 4 Grey-screen prototypes 4 Paper prototypes Visual design 4 Polished visual design + screen layout 4 Icons + graphic Components (assets) 4 CSS/XHTML

22. what processes ensure good UX? UX team deliverables: Technical communications 4 Content 4 Help 4 User guides + reference manuals 4 Videos, flash demos, training materials 4 Localization (languages/locations)

23. how does UX fit in an agile environment? UX leverages agile in several ways: 4 User research and testing can be utilized to prioritize features in the product backlog – and to iteratively refine designs to achieve better usability 4 When UX is integrated in the planning phases of a project (post-win) – and early into the agile process –release schedules and budgets are not impacted or affected 4 Create high quality products that are implemented per the design specifications using best practices

24. how does UX fit in an agile environment? here’s how we do it:

25. how does UX fit in an agile environment? how we make agile work for UX: Early-stage UX planning 4 High-level design 4 UX requirements 4 Detailed design + spec Embed a designer on the team 4 No surprises 4 Designer iterates as development progresses

26. how does UX fit in an agile environment? how we make agile work for UX: UX + development follow same schedule 4 Designers are one iteration ahead of developers 4 Hand off detailed designs or CSS/XHTML prototypes for developers to follow 4 Front-end development is part of UX team Backlog contains UX design features

27. key takeaway UX is the combined result of all our efforts + processes. PM+ business analysis visual design application architecture user experience system design interaction design Information architecture