Lektion 1: Experience Design - Verktyg & metoder

Lecture at Berghs School of Communication in Digital Management

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