1 Rich User Experience Documentation John Yesko

2 About Roundarch Roundarch is a specialized consultancy focused on designing and building websites and applications for the world’s largest organizations. Key Facts We serve mainly Fortune 500 and large government organizations. We specialize in balancing user centered design with enterprise class technology to ensure our solutions are easy to use. We are a recognized leader in developing rich internet applications (RIAs). 150 employees in 3 offices

3 Selected Clients Financial Services Government Consumer Manufacturing Healthcare/ Transportation Media & Communications

4 Select Engagements Strategy, design and implementation for prime brokerage portal; Global Wealth Management web strategy and design; Design & development of Stock Plan Services site and next generation Financial Advisor desktop. Design and development of the 2008 Holiday campaign, as well as ongoing gift-giving related initiatives. Design and implementation of the next generation AVIS site. Includes research, persona development, design, user testing, technical architecture, SEO and implementation. Redesign of Motorola’s B2B and B2C sites; global content management strategy. Currently developing a rich internet application for phone maintenance. Implementation of the historychannel.com and development of a rich timeline with a focus on driving more broadband content usage and broadband advertising. Development of an interactive marketing platform and redesigned website (Hersheys.com and several brand sites) including the development of a promotion platform.

5 About Me Now User Experience Lead at Roundarch Responsible for user experience design on large-scale Web projects 1993 Web Designer Information Architect / UX Designer Medical Illustrator My Background Web!

6 The Premise

7 Page-based Paradigm Static Websites (content) Dynamic Websites (content + applications) Rich Internet Applications and “2.0” Paradigm Shift Roughly one event or content topic per page More complex interactions Motion and transitions Dynamic content (e.g., user-generated) Single state per page RIA Paradigm User Experience Shift Multiple states per page

8 Information architecture Final product User Experience Design Shift Visual design and production User experience design Final product All kinds of surprises Then Now Visibility: Good Visibility: ?

9 User Experience Design Shift More collaborative / simultaneous design processes (less sequential) Information architecture >> interaction design >> visual design >> production is no longer ideal Longer conceptual / ideation process – More time establishing the foundation before we start making magic Expanded team – And / or more experienced team

10 Typical Team Chris Account management Karl Project management John User experience / IA Gary Technical lead Zach Visual design Rob Visual design Chris HTML / front-end Shailesh Development “Brazilians” Development Ted Copywriting Unit One Nine Game animation External Resources Scott Creative direction

11 Why Does Documentation Matter? Clients need to understand what they’re getting – Level of trust varies Designers and developers need to know what to create – Level of accessibility and control varies

12 Documentation Practices

13 This is… A discussion about a few key deliverables that we use – Why we use it – What makes a good one – Why it’s key for Rich Internet Applications (RIAs) / “2.0” sites – Limitations and challenges Lots of visual examples

14 This is not… A comprehensive discussion of every documentation technique in existence About tools About user research The only way to do things

15 User Experience Brief

16 User Experience Brief Early-stage strategic approach document Summarizes what we know so far – Output of Discovery process Used to gather consensus Varies in length depending on needs

17 User Experience Brief May include: – High-level requirements – User research results – Personas / scenarios – Concept map (more later) – User flows – Organizing principles

18 User Experience Brief Organizing Principles: Examples Seamless User Experience “…Whether users drill down from the home page, or enter the site at a ‘deep’ URL, they should perceive that the entire experience flows easily from one interaction to the next. It should all ‘feel’ like [brand]…” Optimize Geographic Area and Language Experience “…The current site uses a distributed approach, where each country/region has its own independent site(s), content, and products. Moving forward, the site design should allow smoother transitions among locales. For example, the site will employ ‘IP sniffing’ to predict the appropriate content and language for users according to their current geographic location…” Filter Products by Differentiating Attributes / Facets “…Because of the vast number of available products on the site, users should be able to filter a set of products by product attributes (‘facets’) that are meaningful to them. For example, mobile phones might be filtered by feature, carrier, color, etc.—in addition to the standard category/subcategory drill-down…”

19 User Experience Brief – In Practice Sparks important discussions – At the right time to prevent surprises Easy to digest for executives Varies in length depending on needs – And audience’s attention span May quickly become out-of-date Sets the stage for detailed design – Justification for future decisions (“CYA”)

20 Concept Map

21 Concept Map / Model Big picture approach Relationships between ideas or concepts Intended to generate more discussion, and gain early consensus Not usually a “final” design document

22 Concept Map

23 Concept Map

24 Concept Map

25 Concept Map

26 Concept Map

27 Concept Map – In Practice Good opportunity to illustrate the “core” of the experience – Get away from “top-down” approach Requires information design / illustration skills Need to keep it (somewhat) simple Some audiences have a hard time understanding how it turns into a site – “What am I agreeing to?”

28 UX Brief and Concept Map – Why? Leap from start to finish is much bigger. so… We establish our approach early on, so there aren’t as many surprises. User experience design Final product Better visibility Fewer surprises

29 Wireframes

30 Wireframes Still the core method of documentation – We spend the bulk of our time on them Relative Time Spent on UX Deliverables UX Brief Concept Map Site Map Wireframes

31 Wireframes "Wireframing AJAX is a bitch.” Jeffrey Zeldman Happy Cog & A List Apart

32 The Wireframe Speech Wireframes do… – show relative prioritization of elements – suggest grouping / relationships between elements – document labeling (but probably not final content) – show functionality Wireframes do not… – Suggest creative / visual design – Show precise layout  Tell you what’s above the fold Just the right amount of “design” – Not confused with visual design – But it looks good and sets some expectations on general layout

33

34

35

36

37

38

39 “Coloring in wireframes”

40 Wireframes – In Practice How have our wireframes changed? Illustration techniques to document interactions: Color Multiple states Exploded views Interaction sequences

41

42

43 Wireframes "Wireframing AJAX is a bitch. The best our agency has come up with is the Chuck Jones approach: draw the key frames. [But] Chuck Jones had an advantage: he knew what Bugs Bunny was going to do. We have to determine all the things a user might do, and wireframe the blessed moments of each possibility." Jeffrey Zeldman Happy Cog & A List Apart

44

45

46

47 Wireframes

48

49

50 Wireframes – In Practice Multiple options of complexity user interface specification (“functional spec”) annotated wireframes wireframes COMPLEXITY Role of wireframes changes depending on context – Other deliverables, e.g., prototype (more in a minute) – Access to of other disciplines (visual design, development)

51

52 Wireframes – In Practice Real vs. fake data – Use both – Important for comping / prototyping – Heads off questions from the client Establish visual language / patterns to use consistently Don’t try to document things that can’t be documented well – Transitions / motion – Precise mouse interactions – Visual / creative design

53 Wireframes – Tools Wireframing tools Specification generator Interactive HTML prototypes

54 Wireframes – Tools Document templates – Reservoir of type, object, and table styles Page layouts for approximately 100 common page layouts – Wireframes – Color palette for a style guide – Component specs – Competitive two-by-two plots, etc. Symbol libraries for flows, maps, markers, callouts, frames, etc. Scriptable document starting points for when you create standard documents, or need to automate the starting point for a larger document

55 Visual Design

56 Visual Design More important to the user experience design process than ever Brought in earlier Work more closely with both UX and development – Inseparable from both – Designers need to understand other disciplines

57 Design Comps Establish creative look and feel Communicate brand

58

59

60

61

62 Design Comps – In Practice Communicate emotional element Extend interaction design documentation (beyond wireframes) Anticipate user-generated content Prominence depends on type of project

63

64

65

66

67

68 Design Comps – In Practice Same challenges as other types of UX documentation Motion / transitions Multiple states Dynamic content But one step closer in fidelity…

69 Prototypes

70 Prototypes Visual Fidelity Functional Fidelity Paper wireframe prototype Page sketches Image mapped sketch scans Clickable wireframes Paper JPEG prototype (comps) Image mapped JPEGs (“slap & map”) Graphically “skinned” interactive prototype Interactive wireframe prototype Production-ready prototype “The Dimensions of Fidelity” Fred Beecher, Evantage Consulting Proof of concept

71 Prototypes - In Practice Fill in where previous deliverables fall short Can act as internal proof of concept – Technical feasibility – Usability Can be leveraged for user research May or may not be throw-away

72 Prototypes - In Practice Expanded team may be necessary – More work for everyone In user research, need to determine how much role fidelity plays Need to decide if the wireframe or prototype is the document “of record” Prototypes are better at communicating than documenting “Design Tool” vs. “Deliverable”

73

74 Avis Car Reservation iPhone App

75 More About Documentation Book: Communicating Design by Dan Brown, EightShapes IxDA Discussion Board UIE Podcast: “Roughing it with Interactive Prototypes”

76 Thank You John Yesko Twitter: jyesko Roundarch