Designing for User Experience

I gave a talk to Edenred covering the basics of UX and design, and presented case studies on Airbnb, Square, Slack, and Uber.

Video of my talk: https://vimeo.com/129250831

Transcript

1. D E S I G N I N G F O R 
 User Experience Presented by @chrismessina for @edenred • May 20, 2015 • Crete, Greece
2. The Plan - Hello! - Why User Experience? - Elements of User Experience - Case Studies
3. The Plan ➡ Hello! - Why User Experience? - Elements of User Experience - Case Studies
4. Hello! I’m @chrismessina
5. A decade in Silicon Valley 2004 2005 2007 2010 2014 2013 ⇢ 2006
6. A decade in Silicon Valley 2004 2005 2007 2010 Mozilla Flock Google 2014 Citizen Agency Consulting NeonMob 2013 ⇢ 2006
7. A decade in Silicon Valley 2004 2005 2007 2010 Mozilla Flock Google 2014 Citizen Agency Consulting NeonMob 2013 ⇢ 2006 Developers Google+
8. A decade in Silicon Valley 2004 2005 2007 2010 Mozilla Flock Coworking Google Social Web 2014 Citizen Agency Consulting NeonMob 2013 ⇢ BarCamp 2006 Developers Google+
9. A decade in Silicon Valley 2004 2005 2007 2010 Mozilla Flock Coworking # Google Social Web 2014 Citizen Agency Consulting NeonMob 2013 ⇢ BarCamp 2006 Developers Google+
11. The Plan - Hello! ➡ Why User Experience? - Elements of User Experience - Case Studies
12. Products are dead.
18. BRAND Icons by Joe Harrison, Shane Holley, & Nicolas Ramallo
19. BRAND Icons by Joe Harrison, Shane Holley, & Nicolas Ramallo
20. BRAND Icons by Joe Harrison, Shane Holley, & Nicolas Ramallo
21. vintagecomputing.com
23. Network by Claude Heiland-Allen BRAND
24. Products are conversations.
25. Icons by Edward Boatman, Martha Ormiston, Moriah Rich, & Erin Standley ⁶ BRAND
26. Successfully designing for user experience results in harmonizing a brand’s offerings with their customers’ needs and desires.
27. So who’s doing this well?
28. Most Valuable Brands of 2015
29. Brand Value: $145.3 B 1 Year Value Change: 17% Age of company: 39 #1
30. Apple designs Macs, the best personal computers in the world, along with OS X, iLife, iWork and professional software. Apple leads the digital music revolution with its iPods and iTunes online store. Apple has reinvented the mobile phone with its revolutionary iPhone and App Store, and is defining the future of mobile media and computing devices with iPad.
31. Brand Value: $65.6 B 1 Year Value Change: 16% Age of company: 18 #3
32. Google’s mission is to organize the world’s information and make it universally accessible and useful. We build products that we hope will make the web better—and therefore your experience on the web better. With products like Chrome and Android, we want to make it simpler and faster for people to do what they want to online.
33. Brand Value: $36.5 B 1 Year Value Change: 54% Age of company: 11 #10
34. Founded in 2004, Facebook’s mission is to give people the power to share and make the world more open and connected. People use Facebook to stay connected with friends and family, to discover what’s going on in the world, and to share and express what matters to them.
35. Brand Value: $28.1 B 1 Year Value Change: 32% Age of company: 21 #13
36. [Amazon seeks] to be Earth’s most customer-centric company for four primary customer sets: consumers, sellers, enterprises, and content creators.
37. Network economy: Relationships, 
 Service & Trust
38. connecting people and devices connecting people and information connecting people and friends connecting people and products
39. connecting people with places
40. connecting people with places connecting people through commerce
41. connecting people with places connecting people through commerce connecting people in the workplace
42. connecting people with places connecting people through commerce connecting people in the workplace connecting people through transportation
43. The Plan - Hello! - Why User Experience? ➡ Elements of User Experience - Case Studies
44. the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among these various elements. Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel") Information Architecture: structural design of the information space to facilitate intuitive access to content Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality Navigation Design: design of interface elements to facilitate the user's movement through the information architecture Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Functional Specifications: "feature set": detailed descriptions of functionality the site must include in order to meet user needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site Content Requirements: definition of content elements required in the site in order to meet user needs Interface Design: as in traditional HCI: design of interface elements to facilitate user interaction with functionality Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Web as software interface Web as hypertext system Visual Design: visual treatment of text, graphic page elements and navigational components Concrete Abstract time Conception Completion Functional Specifications Content Requirements Interaction Design Information Architecture Visual Design Information Design Interface Design Navigation Design Site Objectives User Needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development) that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today. task-oriented information-oriented Elements of User Experience diagram © Jesse James Garrett
45. UX has exploded since 2000 - Field research - Face to face interviewing - Creation and administering of tests - Gathering, organizing, & presenting statistics - Documentation of personas and findings - Product design - Feature writing - Requirement writing - Graphic arts - Interaction design - Information Architecture - Usability - Prototyping - Interface layout - Interface design - Visual design - Taxonomy creation - Terminology creation - Copy writing - Presentation and speaking - Working tightly with programmers - Brainstorm coordination - Company culture evangelism - Communication to stakeholders uxisnotui.com
46. But is still conceived of narrowly - Field research - Face to face interviewing - Creation and administering of tests - Gathering, organizing, & presenting statistics - Documentation of personas and findings - Product design - Feature writing - Requirement writing - Graphic arts - Interaction design - Information Architecture - Usability - Prototyping - Interface layout - Interface design - Visual design - Taxonomy creation - Terminology creation - Copy writing - Presentation and speaking - Working tightly with programmers - Brainstorm coordination - Company culture evangelism - Communication to stakeholders uxisnotui.com
47. Interface design + Visual design = User Interface
48. Tim Allison User Interface
49. Elements of 
 User Experience 2015 Design Thinking Sketching & Wireframing Research, Personas, & Narratives Prototyping & Testing Content Strategy
50. Enter the era of Big Design 2004 Flextronics buys Frog Design. 2010 Google Ventures creates design services team. 2011 GlobalLogic buys design consultancy Method. 500 Startups creates d.Fund, to seed design-led startups. Facebook acquires Sofa. 2012 Google acquires Cuban Council, Milk, Inc, and Mike & Maaike. 2013 Accenture acquires Fjord. Facebook acquires Hot Studio. Kleiner Perkins hires RISD president John Maeda as first design partner. 2014 Apple acquires Beats. BlueFocus acquires Yves Béhar's Fuseproject. Khosla Ventures hires Irene Au as first design partner. Capital One acquires UX consultancy Adaptive Path. Google acquires Gecko Design. 2015 McKinsey & Company acquires Lunar. Facebook acquires Teehan+Lax.
51. Design, by the numbers Source: @kpcb @johnmaeda @jshoee #DesignInTech
52. Design, by the numbers - 27 startups co-founded by designers and 10 creative agencies were acquired by tech companies in the last 4 years. Source: @kpcb @johnmaeda @jshoee #DesignInTech
53. Design, by the numbers - 27 startups co-founded by designers and 10 creative agencies were acquired by tech companies in the last 4 years. - 5 startups co-founded by designers have raised more than $2.75B, and more are out there. Source: @kpcb @johnmaeda @jshoee #DesignInTech
54. Design, by the numbers - 27 startups co-founded by designers and 10 creative agencies were acquired by tech companies in the last 4 years. - 5 startups co-founded by designers have raised more than $2.75B, and more are out there. - 6 venture capital firms invited designers onto their teams—for the first time—in the last year. Source: @kpcb @johnmaeda @jshoee #DesignInTech
55. Design is so central and at the forefront of the most interesting work in digital that simply hiring it in when you need it, if you need it, is not really a good long-term game anymore.” — Olof Schybergson, Fjord CEO “
56. [You’re] seeing companies increasingly putting designers at the leadership team-level of companies.” — Karl Heiselman, CEO of Wolff Olins “
57. Elements of 
 User Experience 2015 Design Thinking Sketching & Wireframing Research, Personas, & Narratives Prototyping & Testing Content Strategy
58. Design Thinking
59. Create 
 Choices Diverge Converge Make 
 Choices
60. Create 
 Choices Diverge Converge Make Choices
61. Create Choices Diverge Converge Make 
 Choices
62. Photo by Mark Di Sciullo
63. Stanford d.School Process Empathize Define Ideate Prototype Test
64. Applying design thinking
65. Applying design thinking - Can be performed individually or in small teams
66. Applying design thinking - Can be performed individually or in small teams - Should be performed non-linearly Empathize Define Ideate Prototype Test
67. Applying design thinking - Can be performed individually or in small teams - Should be performed non-linearly - Can be performed quickly, iteratively; no need for lengthy reports
68. Applying design thinking - Can be performed individually or in small teams - Should be performed non-linearly - Can be performed quickly, iteratively; no need for lengthy reports - Output should be user-tested prototypes
69. Applying design thinking - Can be performed individually or in small teams - Should be performed non-linearly - Can be performed quickly, iteratively; no need for lengthy reports - Output should be user-tested prototypes
70. Applying design thinking - Can be performed individually or in small teams - Should be performed non-linearly - Can be performed quickly, iteratively; no need for lengthy reports - Output should be user-tested prototypes - Interlude: a couple techniques for ideating from Gamestorming
71. Bodystorming
72. Brainwriting
73. 6-8-5
74. 6-8-5 Six to eight ideas in five minutes
76. Gamestorming resources - Book: bit.ly/Gamestorming - Kit: bit.ly/GamestormingKit - Guide: bit.ly/GamestormingGuide
77. Rules for design thinking According to Christoph Meinel and Larry Leifer
78. The Human Rule All design activity is ultimately social in nature
79. The ambiguity rule Design thinkers must preserve ambiguity
80. The re-design rule All design is re-design!
81. The tangibility rule Making ideas tangible always facilitates communication
82. Sketching
83. Create 
 Choices Diverge Converge Make Choices
84. Common materials Gel pens (.3 / .5 / .7) Gray marker or pencil Moleskine Credit: Kate Rutter
85. Good enough! Credit: Kate Rutter
93. How to draw an owl
94. How to draw an owl 1. Draw some circles
95. How to draw an owl 1. Draw some circles 2. Draw the rest of the stupid owl
96. Wireframing
98. uistencils.com
99. mobilestencil.com
101. Label Label Label Label ✓ 123 TextBox * Required Text Area July 2010 Sun Mon Tue Wed Thu Fri Sat 4 3 2 1 10 9 8 7 6 5 11 17 16 15 14 13 12 18 24 23 22 21 20 19 25 31 30 28 27 26 Date Item 1 Item 2 Item 3 Item 4 Item 5 List Option 1 Option 2 Option 3 Option 4 Option 5 ✓ Option 1 MenuLabel Option 3 Option 1 Option 2 Option 4 Option 5 ✓ Search
103. Research, Personas, 
 & Narratives
104. The important thing about research…
105. Credit: Chui Chui Tan
106. Interviews are structured conversations - Talking to users is simple and easier than you might think - Be conversational, but stay focused - Subjects will be more comfortable in their natural surroundings
107. Ping your friends… - Perform ad hoc research as often as you like - Talk to your friends about whether they understand that new interface copy you wrote - Share a paper prototype you made to see if a flow made sense - Send mockups via email and ask for feedback - Post a tweet to see what your followers think!
108. Go broad with internet surveys - You can perform research at scale using online tools: - Typeform - SurveyMonkey - Google Consumer Surveys - MixMax polls - survey.io
109. Developing personas…
110. Credit: Amritha Prasad
111. Test personas against narratives
112. Credit: Amritha Prasad
113. Prototyping & Testing
114. Why prototypes? - They’re way cheaper than building the real thing - They help you learn what you should build - They help you test hypotheses with real users - They allow you to try things out without committing to them - They can show you where the holes in your thinking are - There’s no one right way to make them
117. Click me
121. Test, test, test - Set your testing intentions
122. Test, test, test - Set your testing intentions - Get specific
123. Test, test, test - Set your testing intentions - Get specific - It’s your turn to listen
124. Test, test, test - Set your testing intentions - Get specific - It’s your turn to listen - Record the session and your observations right away
125. Test, test, test - Set your testing intentions - Get specific - It’s your turn to listen - Record the session and your observations right away - Present the results to your team collaboratively
126. Content Strategy*
127. The Plan - Hello! - Why User Experience? - Elements of User Experience ➡ Case Studies
128. Airbnb connecting people with places
129. Photo by Ian Allen for Fast Company Photo credit: Fast Company
131. We noticed a pattern. There's some similarity between all these 40 listings. The similarity is that the photos sucked.” — Joe Gebbia, 2009 “
132. Credit: Joe Zadeh, Airbnb
133. Credit: Joe Zadeh, Airbnb
134. Do things that don’t scale
136. Nights Booked 5 million 4 million 3 million 2 million 1 million 2008 2009 2010 2011 2012 Credit: Joe Zadeh, Airbnb
137. Nights Booked 5 million 4 million 3 million 2 million 1 million 2008 2009 2010 2011 2012 Credit: Joe Zadeh, Airbnb
138. Nights Booked 5 million 4 million 3 million 2 million 1 million 2008 2009 2010 2011 2012 Credit: Joe Zadeh, Airbnb
139. Become the patient
140. …we would have that epiphany moment where we would lay down in the bed in the hospital…” “
141. We'd have the device applied to us, and we would sit there and feel exactly what it felt like to be the patient, and it was in that moment where you start to go aha, that's really uncomfortable. There's probably a better way to do this.” — Joe Gebbia “
142. Everyone ships on day one
143. → ⭐ ❤
146. Embed user empathy throughout the company
147. Photo by Nando Alvarez-Perez for Airbnb Schleifer wants more people to appreciate what typically lies only within the realm of designers—the user viewpoint. Thus, every project team at Airbnb now has a project manager whose explicit role is to represent the user, not a particular functional group like engineering or design. Alex Schleifer Head of Design, Airbnb Why Airbnb’s New Head of Design Believes ‘Design-Led’ Companies Don’t Work in Wired Read more: http://j.mp/embed-empathy
148. Square connecting people through commerce
149. Photo
150. Meet your customers where they are
155. Reframe the opportunity
158. Sweat the details
159. Photo source: TechCrunch If something looks well designed, it appeals to people. They understand that a lot of care went into it, and that helps —it's the best way to ease concerns.” “ At Square, Jack Dorsey and Keith Rabois Are OCD About Design in Fast Co.Design Read more: http://j.mp/rapid-design Keith Rabois Former COO, Square
160. Slack connecting people in the workplace
161. Photo
164. “Making work less worky.”
165. Source: Hiten Shah
166. Grow a personality
167. “Making work less worky.”
168. The competition
178. $
179. Offer a warm welcome
180. Source: Rick Pastoor
184. Uber connecting people through transportation
186. Service is the product
188. Photo source: Facebook What is the most lightweight thing to build that will delight users?” “ “Building Magical Experiences Through Smart Iteration” talk at Warm Gun 2014 Read more: http://www.slideshare.net/500startups/warm-gun-2014-42809547 Amritha Prasad Designer, Uber
189. Credit: Amritha Prasad
190. Driver Customer Credit: Amritha Prasad
193. Prioritize Adapt Test Learn Credit: Amritha Prasad
194. The right information in the context
199. Solicit feedback, constantly
205. #thankyou Chris Messina @chrismessina chris.messina@gmail.com