Lektion 1: Experience Design - Verktyg & metoder

Lektion 1: Experience Design - Verktyg & metoder

Lecture at Berghs School of Communication in Digital Management

Abe71e4908b9dccc1abcfd71bc4e1db0?s=128

Marcus Castenfors

April 13, 2015
Tweet

Transcript

  1. BERGHS SCHOOL OF COMMUNICATION 1

  2. BERGHS SCHOOL OF COMMUNICATION 2 Marcus Castenfors Head of Product

    Design
  3. BERGHS SCHOOL OF COMMUNICATION Så lite om vem jag är...

    3
  4. BERGHS SCHOOL OF COMMUNICATION 4

  5. BERGHS SCHOOL OF COMMUNICATION 5

  6. BERGHS SCHOOL OF COMMUNICATION EXPERIENCE DESIGN & HUR MAN DESIGNAR

    FÖR KUNDEN 6 APRIL 13 2015
  7. BERGHS SCHOOL OF COMMUNICATION 7 Mina föreläsningar Måndag 13/4: Verktyg

    & metoder Onsdag 15/4: En sammanlänkad upplevelse
  8. BERGHS SCHOOL OF COMMUNICATION Schema 8 18:00 - 18:40 -

    Strategi + övning 18:40 - 19:20 - Kartläggning + övning 19:20 - 19:40 - Rast 19:40 - 20:30 - Visualisering + övning
  9. BERGHS SCHOOL OF COMMUNICATION …people will forget what you said,

    people will forget what you did, but people will never forget how you made them feel.” 9 “ “ Maya Angelou
  10. BERGHS SCHOOL OF COMMUNICATION Dåliga upplevelser :( 10

  11. BERGHS SCHOOL OF COMMUNICATION 11

  12. BERGHS SCHOOL OF COMMUNICATION 12

  13. BERGHS SCHOOL OF COMMUNICATION Bra upplevelser :) 13

  14. BERGHS SCHOOL OF COMMUNICATION kärt barn har många namn User

    Experience Product Design Interaktionsdesign Användbarhet Design Thinking Informationsarkitektur Service Design Experience Design 14
  15. BERGHS SCHOOL OF COMMUNICATION Vad betyder dom?!?! 15

  16. BERGHS SCHOOL OF COMMUNICATION 16

  17. BERGHS SCHOOL OF COMMUNICATION ’User experience’ encompasses all aspects of

    the end-user's interaction with the company, its services, and its products. 17 “ “ Jakob Nielsen
  18. BERGHS SCHOOL OF COMMUNICATION Service design is the activity of

    planning and organizing people, infrastructure, communication and material components of a service in order to improve its quality and the interaction between service provider and customers. 18 “ “ Wikipedia
  19. BERGHS SCHOOL OF COMMUNICATION 19 Interaktion Organisation Göra det så

    enkelt och effektivt som möjligt att använda en produkt eller tjänst Skapa en så effektiv organisation som möjligt för att möta kundens behov.
  20. BERGHS SCHOOL OF COMMUNICATION Men… det viktigaste… 20

  21. BERGHS SCHOOL OF COMMUNICATION Empati medkänsla för andra; egenskapen att

    kunna känna med andra, sätta sig in i andras situationer 21
  22. BERGHS SCHOOL OF COMMUNICATION If there is any one secret

    of success, it lies in the ability to get the other person’s point of view and see things from that person’s angle as well as from your own. 22 “ “ Henry Ford
  23. BERGHS SCHOOL OF COMMUNICATION Hur designar man för kunden? 23

  24. BERGHS SCHOOL OF COMMUNICATION Genom att besvara dessa frågor 24

  25. BERGHS SCHOOL OF COMMUNICATION Varför? Varför designar vi lösningen? För

    vem? Vilka är våra kunder? Skiljer dom sig åt? Vad? Vad ska vi designa?  25
  26. BERGHS SCHOOL OF COMMUNICATION 26 Konkret Abstrakt Strategi Visualisering Kartläggning

    För vem? Vad? Varför?
  27. BERGHS SCHOOL OF COMMUNICATION 27 Konkret Abstrakt Strategi Visualisering Kartläggning

    • Prototyper • Wireframes • Experience model & maps • User journeys • Personas • Research • Kundinsikter
  28. BERGHS SCHOOL OF COMMUNICATION 28 Strategi Visualisering Kartläggning Utveckling Tid

  29. BERGHS SCHOOL OF COMMUNICATION 29 Google Ventures Design Sprint

  30. BERGHS SCHOOL OF COMMUNICATION Strategi Hur besvarar vi “varför”? 30

  31. BERGHS SCHOOL OF COMMUNICATION 31 Primär Användartest Kundintervjuer Kundservice &

    säljare Sekundär Google Planning Tools Rapporter Kvantitativ Enkäter Social Social media Forum Bloggar
  32. BERGHS SCHOOL OF COMMUNICATION 32 Användartest Primär research

  33. BERGHS SCHOOL OF COMMUNICATION 33 Är det någon av er

    som har erfarenhet från användartestning?
  34. BERGHS SCHOOL OF COMMUNICATION 34

  35. BERGHS SCHOOL OF COMMUNICATION 35 Testing one user early in

    the project is better than testing 50 near the end “ “ Steve Krug
  36. BERGHS SCHOOL OF COMMUNICATION 300 million dollar button 36

  37. BERGHS SCHOOL OF COMMUNICATION 37 Register

  38. BERGHS SCHOOL OF COMMUNICATION 38 Register Continue

  39. BERGHS SCHOOL OF COMMUNICATION Övning: Användartest su.se 39

  40. BERGHS SCHOOL OF COMMUNICATION Stockholms Universitet 40 Para ihop er

    i grupper om två: en är testledare, en är användare Du är intresserad av söka till programmet “Interaktionsdesign” på Stockholms Universitet. Navigera till su.se. Timing 10-15 minuter för testet 5-10 minuter återkoppling
  41. BERGHS SCHOOL OF COMMUNICATION Stockholms Universitet 41 Du är intresserad

    av söka till programmet “Interaktionsdesign” på Stockholms Universitet. Navigera till su.se med din dator. 1. Utan att klicka runt, berätta om vad du tycker och tänker kring startsidans utseende 2. Utan att använda sökfunktionen, hitta information om programmet “interaktionsdesign” 3. Ta reda på hur du kan ansöka till programmet 4. Ta reda på hur du kan ansöka om boende 5. Hur tyckte du att uppgiften gick? Vad tyckte du var tydligt/otydligt? 6. Om du var designer, vad skulle vara det första du skulle vilja ändra med Stockholms Universitets hemsida? Att tänka på: • Få användaren att “tänka högt” när de använder hemsidan • Ställ gärna följdfrågor
  42. BERGHS SCHOOL OF COMMUNICATION 42 Några tips: 1. Alla kan

    testa 2. Gör det så enkelt som möjligt 3. Använd enkla verktyg 4. Fastna inte i rapporter 5. Gör det till en tradition 6. Fixa de enklaste sakerna först
  43. BERGHS SCHOOL OF COMMUNICATION 43 UserTesting.com

  44. BERGHS SCHOOL OF COMMUNICATION 44 Tweaky.se

  45. BERGHS SCHOOL OF COMMUNICATION 45

  46. BERGHS SCHOOL OF COMMUNICATION Kundintervjuer 46 Primär research

  47. BERGHS SCHOOL OF COMMUNICATION 47

  48. BERGHS SCHOOL OF COMMUNICATION 48 Exempel från intervjuprotokollet: • Berätta

    om hur du gör research inför ett köp • Berätta om dina favoritappar och varför du gillar dem • Hur använder du din smartphone i shoppingsyfte? • Har du köpt något online med din smartphone någon gång? I så fall, vad köpte du?
  49. BERGHS SCHOOL OF COMMUNICATION 49 If I had asked people

    what they wanted, they would have said faster horses. “ “ Henry Ford
  50. BERGHS SCHOOL OF COMMUNICATION Tips: 50 1. Använd ett intervjuprotokoll

    med ett tydligt syfte 2. Intervjua i den riktiga omgivningen 3. Be dem visa hur dom gör 4. Ta med en kollega 5. Leta efter mönster 6. Ta fram hypoteser
  51. BERGHS SCHOOL OF COMMUNICATION Prata med kundservice & säljare 51

    Primär research
  52. BERGHS SCHOOL OF COMMUNICATION 52

  53. BERGHS SCHOOL OF COMMUNICATION 53 Insikter: 1. Fanns ett stort

    behov av en ny produkt 2. Tillgänglighet av tjänster en av de vanligaste frågorna 3. Kundresan var inte helt linjär 4. Många av chattarna var från befintliga kunder
  54. BERGHS SCHOOL OF COMMUNICATION Google Planning Tools 54 Sekundär research

  55. BERGHS SCHOOL OF COMMUNICATION 55 Google Planning Tools

  56. BERGHS SCHOOL OF COMMUNICATION Rapporter 56 Sekundär research

  57. BERGHS SCHOOL OF COMMUNICATION 57 eMarketer

  58. BERGHS SCHOOL OF COMMUNICATION 58 Forrester

  59. BERGHS SCHOOL OF COMMUNICATION Enkäter 59 Kvantitativ

  60. BERGHS SCHOOL OF COMMUNICATION 60 Tänk på: 1. Enkla att

    sätta upp (Surveymonkey, Wufoo) 2. Bra för att testa hypoteser från tidigare kundintervjuer 3. Visar data, men svarar inte på “varför?” 4. Öppna frågor kan ibland vara svåra att tolka
  61. BERGHS SCHOOL OF COMMUNICATION Social listening 61 Social

  62. BERGHS SCHOOL OF COMMUNICATION Tänk på 62 1. Bra för

    att förstå kunders attityder, mönster, pain points 2. Ger kunder ett “ansikte” 3. Kan användas för att ta fram benchmarks (sentiment analysis, ämnen)
  63. BERGHS SCHOOL OF COMMUNICATION Exempel 63

  64. BERGHS SCHOOL OF COMMUNICATION Läs mer... 64

  65. BERGHS SCHOOL OF COMMUNICATION 65 Digital Strategy Toolbox

  66. BERGHS SCHOOL OF COMMUNICATION Kartläggning Hur besvarar vi “för vem”?

    66
  67. BERGHS SCHOOL OF COMMUNICATION 67 Konkret Abstrakt Strategi Visualisering Kartläggning

    • Experience model & maps • User journeys • Personas
  68. BERGHS SCHOOL OF COMMUNICATION Personas 68

  69. BERGHS SCHOOL OF COMMUNICATION 69 First name, last name, age

    Goals and motivators Attitudes and needs Demographic information Ålder, boende- & familjesituation Mål, pain points Känslor & behov
  70. BERGHS SCHOOL OF COMMUNICATION Exempel 70

  71. BERGHS SCHOOL OF COMMUNICATION Bra för 71 1. Skapar empati

    2. Referenspunkt i en designfas
  72. BERGHS SCHOOL OF COMMUNICATION Tänk på 72 1. Fastna inte

    i detaljerna 2. Kan lätt bli politiskt
  73. BERGHS SCHOOL OF COMMUNICATION Experience Model & Maps 73

  74. BERGHS SCHOOL OF COMMUNICATION 74 Prospect New Existing Customer behavior

    Primary purpose Business objective Brand proposition Modus Insikter Affärsmål Varumärkesaspekter
  75. BERGHS SCHOOL OF COMMUNICATION 75 Research & Planning Booking Pre-travel

    Website Email Mobile Customer service Steg Travelling Kanaler
  76. BERGHS SCHOOL OF COMMUNICATION Exempel 76

  77. BERGHS SCHOOL OF COMMUNICATION Övning: Experience Map 77

  78. BERGHS SCHOOL OF COMMUNICATION Experience Map för Stockholms Universitet 78

    Para ihop er i grupper om två. Använd penna och papper Briefen: • Stockholms Universitet ska designa om sin hemsida och sina mobiltjänster • Skapa en Experience Map för de kontaktytor studenter har med SU:s digitala kanaler • Brainstorma kring vilka typer av tjänster vi kan ge studenter och hjälpa dem i olika situationer
  79. BERGHS SCHOOL OF COMMUNICATION 79 Research & planering Ansöka Inskrivning

    Hemsida Social media Mobil Första veckorna Kundbehov
  80. BERGHS SCHOOL OF COMMUNICATION Bra för 1. Tänka holistiskt på

    alla kanaler och kontaktytor 2. Lägga in olika mål dvs affärsmål, varumärkesmål 80
  81. BERGHS SCHOOL OF COMMUNICATION User journeys 81

  82. BERGHS SCHOOL OF COMMUNICATION Exempel 82

  83. BERGHS SCHOOL OF COMMUNICATION Bra för 83 1. För att

    bryta ner en Experience Model eller Map på en lägre nivå 2. Tänka holistiskt istället för att gå rätt in i en lösning
  84. BERGHS SCHOOL OF COMMUNICATION Visualisering 84

  85. BERGHS SCHOOL OF COMMUNICATION 85 Konkret Abstrakt Strategi Visualisering Kartläggning

    • Klickbara prototyper • Pappersprototyper • Wireframes • Experience model & maps • User journeys • Personas • Research • Kundinsikter
  86. BERGHS SCHOOL OF COMMUNICATION 86 Hög detaljnivå Låg detaljnivå Mycket

    interaktivitet Lite interaktivitet Wireframes Klickbara- Prototyper Pappers- Prototyper Skisser
  87. BERGHS SCHOOL OF COMMUNICATION 87 Mycket tid Lite tid Wireframes

    Klickbara- Prototyper Pappers- Prototyper Skisser
  88. BERGHS SCHOOL OF COMMUNICATION Skisser 88

  89. BERGHS SCHOOL OF COMMUNICATION 89 Källa: https://medium.com/@moonshinedesign/ux-sketching-4deda906c915

  90. BERGHS SCHOOL OF COMMUNICATION 90 Bra för: 1. Snabbt &

    enkelt 2. Alla kan göra det 3. Bra att använda i workshops 4. Allt som behövs är en penna och papper 5. Tänka utanför “boxen”
  91. BERGHS SCHOOL OF COMMUNICATION 91 Inte så bra för: 1.

    Användas för presentationer 2. Detaljer
  92. BERGHS SCHOOL OF COMMUNICATION Pappersprototyper 92

  93. BERGHS SCHOOL OF COMMUNICATION 93 Källa: http://arielwaldman.com/projects/interaction-design/

  94. BERGHS SCHOOL OF COMMUNICATION 94 Bra för: 1. Snabbt &

    enkelt visa interaktivitet 2. Att testa koncept tidigt i projektet
  95. BERGHS SCHOOL OF COMMUNICATION 95 Inte så bra för: 1.

    Att visa komplexa interaktioner 2. Kan inte delas på ett enkelt sätt med teamet
  96. BERGHS SCHOOL OF COMMUNICATION 96

  97. BERGHS SCHOOL OF COMMUNICATION Övning: Pappersprototyp 97

  98. BERGHS SCHOOL OF COMMUNICATION Pappersprototyp för Stockholms Universitet 98 Para

    upp er i grupper om två. Använd penna och papper Briefen: • Ta ett koncept/idé från er Experience Map • Skissa ut ett antal sidor/interaktioner • Ladda ner appen POP (Googla: POP app) • Finns för iOS, Android och Windows • Följ POPs instruktioner och länka de interaktioner ni har designat
  99. BERGHS SCHOOL OF COMMUNICATION Wireframes 99

  100. BERGHS SCHOOL OF COMMUNICATION 100 Bra för: 1. Specificera detaljer

    i interaktionerna 2. Gillas av utvecklarna 3. Gillas av designers
  101. BERGHS SCHOOL OF COMMUNICATION Inte så bra för 1. Att

    få folk att läsa allt det finstilta 2. Kan lätt bli ett väldigt tungt dokument 3. Att visa interaktivitet 101
  102. BERGHS SCHOOL OF COMMUNICATION 102

  103. BERGHS SCHOOL OF COMMUNICATION 103 Excel Keynote Omnigraffle Fireworks Illustrator

    Visio
  104. BERGHS SCHOOL OF COMMUNICATION Exempel 104

  105. BERGHS SCHOOL OF COMMUNICATION Klickbara prototyper 105

  106. BERGHS SCHOOL OF COMMUNICATION 106

  107. BERGHS SCHOOL OF COMMUNICATION Exempel 107

  108. BERGHS SCHOOL OF COMMUNICATION 108 Bra för: 1. Visa komplexa

    interaktioner 2. Skapa en känsla för den “skarpa” lösningen 3. Att visa responsivitet
  109. BERGHS SCHOOL OF COMMUNICATION 109 Inte så bra för: 1.

    Att ge till designers & utvecklare 2. Att dokumentera
  110. BERGHS SCHOOL OF COMMUNICATION 110 Tänk på: 1. Kan ta

    mycket tid 2. Man kan fastna i detaljerna 3. Kan lätt bli komplext
  111. BERGHS SCHOOL OF COMMUNICATION 111 Thank you! Marcus Castenfors @mcastenfors

    | mcastenfors.com | mcastenfors@gmail.com