Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing for User Experience

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

Chris Messina

May 20, 2015
Tweet

More Decks by Chris Messina

Other Decks in Design

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. A decade in Silicon Valley 2004 2005 2007 2010 Mozilla

    Flock Google 2014 Citizen Agency Consulting NeonMob 2013 ⇢ 2006
  5. A decade in Silicon Valley 2004 2005 2007 2010 Mozilla

    Flock Google 2014 Citizen Agency Consulting NeonMob 2013 ⇢ 2006 Developers Google+
  6. 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+
  7. 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+
  8. The Plan - Hello! ➡ Why User Experience? - Elements

    of User Experience - Case Studies
  9. Successfully designing for user experience results in harmonizing a brand’s

    offerings with their customers’ needs and desires.
  10. 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.
  11. 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.
  12. 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.
  13. [Amazon seeks] to be Earth’s most customer-centric company for four

    primary customer sets: consumers, sellers, enterprises, and content creators.
  14. connecting people with places connecting people through commerce connecting people

    in the workplace connecting people through transportation
  15. The Plan - Hello! - Why User Experience? ➡ Elements

    of User Experience - Case Studies
  16. 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
  17. 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
  18. 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
  19. Elements of 
 User Experience 2015 Design Thinking Sketching &

    Wireframing Research, Personas, & Narratives Prototyping & Testing Content Strategy
  20. 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.
  21. 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
  22. 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
  23. 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
  24. 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 “
  25. [You’re] seeing companies increasingly putting designers at the leadership team-level

    of companies.” — Karl Heiselman, CEO of Wolff Olins “
  26. Elements of 
 User Experience 2015 Design Thinking Sketching &

    Wireframing Research, Personas, & Narratives Prototyping & Testing Content Strategy
  27. Applying design thinking - Can be performed individually or in

    small teams - Should be performed non-linearly Empathize Define Ideate Prototype Test
  28. 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
  29. 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
  30. 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
  31. 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
  32. Common materials Gel pens (.3 / .5 / .7) Gray

    marker or pencil Moleskine Credit: Kate Rutter
  33. How to draw an owl 1. Draw some circles 2.

    Draw the rest of the stupid owl
  34. 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
  35. 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
  36. 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!
  37. Go broad with internet surveys - You can perform research

    at scale using online tools: - Typeform - SurveyMonkey - Google Consumer Surveys - MixMax polls - survey.io
  38. 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
  39. Test, test, test - Set your testing intentions - Get

    specific - It’s your turn to listen
  40. Test, test, test - Set your testing intentions - Get

    specific - It’s your turn to listen - Record the session and your observations right away
  41. 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
  42. The Plan - Hello! - Why User Experience? - Elements

    of User Experience ➡ Case Studies
  43. We noticed a pattern. There's some similarity between all these

    40 listings. The similarity is that the photos sucked.” — Joe Gebbia, 2009 “
  44. Nights Booked 5 million 4 million 3 million 2 million

    1 million 2008 2009 2010 2011 2012 Credit: Joe Zadeh, Airbnb
  45. Nights Booked 5 million 4 million 3 million 2 million

    1 million 2008 2009 2010 2011 2012 Credit: Joe Zadeh, Airbnb
  46. Nights Booked 5 million 4 million 3 million 2 million

    1 million 2008 2009 2010 2011 2012 Credit: Joe Zadeh, Airbnb
  47. …we would have that epiphany moment where we would lay

    down in the bed in the hospital…” “
  48. 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 “
  49. 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
  50. 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
  51. $

  52. 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