Lektion 1: Experience Design - Verktyg & metoder

Lektion på Berghs School of Communication för programmet Digital management.

Transcript

1. BERGHS SCHOOL OF COMMUNICATION 1
2. BERGHS SCHOOL OF COMMUNICATION 2 Marcus Castenfors Associate Creative Director, Experience 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 6
7. BERGHS SCHOOL OF COMMUNICATION EXPERIENCE DESIGN & HUR MAN DESIGNAR FÖR KUNDEN 7 NOVEMBER 3 2014
8. BERGHS SCHOOL OF COMMUNICATION 8 Mina föreläsningar
   Måndag 3/11: Verktyg & metoder Onsdag 5/11: En sammanlänkad upplevelse
9. BERGHS SCHOOL OF COMMUNICATION Schema 9 18:00 - 18:50 - Strategi 18:50 - 19:20 - Grupparbete 19:20 - 19:40 - Rast 19:40 - 20:30 - Kartläggning & Visualisering
10. 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.” 10 “ “ Maya Angelou
11. BERGHS SCHOOL OF COMMUNICATION Dåliga upplevelser :( 11
12. BERGHS SCHOOL OF COMMUNICATION 12
13. BERGHS SCHOOL OF COMMUNICATION 13
14. BERGHS SCHOOL OF COMMUNICATION Bra upplevelser :) 14
15. BERGHS SCHOOL OF COMMUNICATION kärt barn har många namn ! User Experience Interaktionsdesign Användbarhet Design Thinking Informationsarkitektur Service Design Experience Design 15
16. BERGHS SCHOOL OF COMMUNICATION Vad betyder dom?!?! 16
17. BERGHS SCHOOL OF COMMUNICATION 17
18. BERGHS SCHOOL OF COMMUNICATION ’User experience’ encompasses all aspects of the end-user's interaction with the company, its services, and its products. 18 “ “ Jakob Nielsen
19. 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. 19 “ “ Wikipedia
20. BERGHS SCHOOL OF COMMUNICATION 20 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.
21. BERGHS SCHOOL OF COMMUNICATION Men… det viktigaste… 21
22. BERGHS SCHOOL OF COMMUNICATION Empati medkänsla för andra; egenskapen att kunna känna med andra, sätta sig in i andras situationer 22
23. 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. 23 “ “ Henry Ford
24. BERGHS SCHOOL OF COMMUNICATION Hur designar man för kunden? 24
25. BERGHS SCHOOL OF COMMUNICATION Genom att besvara dessa frågor 25
26. 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?
    26
27. BERGHS SCHOOL OF COMMUNICATION 27 Konkret Abstrakt Strategi Visualisering Kartläggning För vem? Vad? Varför?
28. BERGHS SCHOOL OF COMMUNICATION 28 Konkret Abstrakt Strategi Visualisering Kartläggning • Prototyper • Wireframes • Experience model & maps • User journeys • Personas • Research • Kundinsikter
29. BERGHS SCHOOL OF COMMUNICATION 29 Strategi Visualisering Kartläggning Utveckling Tid
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 Think With Google - Mobile Planet
56. BERGHS SCHOOL OF COMMUNICATION 56 32 Think With Google - Databoard
57. BERGHS SCHOOL OF COMMUNICATION Rapporter 57 Sekundär research
58. BERGHS SCHOOL OF COMMUNICATION 58 eMarketer
59. BERGHS SCHOOL OF COMMUNICATION 59 Forrester
60. BERGHS SCHOOL OF COMMUNICATION 60 E-barometern
61. BERGHS SCHOOL OF COMMUNICATION Enkäter 61 Kvantitativ
62. BERGHS SCHOOL OF COMMUNICATION 62 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
63. BERGHS SCHOOL OF COMMUNICATION Social listening 63 Social
64. BERGHS SCHOOL OF COMMUNICATION Tänk på 64 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)
65. BERGHS SCHOOL OF COMMUNICATION Exempel 65
66. BERGHS SCHOOL OF COMMUNICATION Läs mer... 66
67. BERGHS SCHOOL OF COMMUNICATION 67 Digital Strategy Toolbox
68. BERGHS SCHOOL OF COMMUNICATION Kartläggning
    Hur besvarar vi “för vem”? 68
69. BERGHS SCHOOL OF COMMUNICATION 69 Konkret Abstrakt Strategi Visualisering Kartläggning • Experience model & maps • User journeys • Personas
70. BERGHS SCHOOL OF COMMUNICATION Personas 70
71. BERGHS SCHOOL OF COMMUNICATION 71 First name, last name, age Goals and motivators Attitudes and needs Demographic information Ålder, boende- & familjesituation Mål, pain points Känslor & behov
72. BERGHS SCHOOL OF COMMUNICATION Exempel 72
73. BERGHS SCHOOL OF COMMUNICATION Bra för 73 1. Skapar empati 2. Referenspunkt i en designfas
74. BERGHS SCHOOL OF COMMUNICATION Tänk på 74 1. Fastna inte i detaljerna 2. Kan lätt bli politiskt
75. BERGHS SCHOOL OF COMMUNICATION Experience Model & Maps 75
76. BERGHS SCHOOL OF COMMUNICATION 76 Prospect New Existing Customer behavior Primary purpose Business objective Brand proposition Modus Insikter Affärsmål Varumärkesmål
77. BERGHS SCHOOL OF COMMUNICATION 77 Research & Planning Booking Pre-travel Website Email Mobile Customer service Steg Travelling Kanaler
78. BERGHS SCHOOL OF COMMUNICATION Exempel 78
79. BERGHS SCHOOL OF COMMUNICATION Övning: Experience Map 79
80. BERGHS SCHOOL OF COMMUNICATION Experience Map för Stockholms Universitet 80 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
81. BERGHS SCHOOL OF COMMUNICATION 81 Research & planering Ansöka Inskrivning Hemsida Social media Mobil Första veckorna Kundbehov
82. 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 82
83. BERGHS SCHOOL OF COMMUNICATION User journeys 83
84. BERGHS SCHOOL OF COMMUNICATION Exempel 84
85. BERGHS SCHOOL OF COMMUNICATION Bra för 85 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
86. BERGHS SCHOOL OF COMMUNICATION Visualisering
    86
87. BERGHS SCHOOL OF COMMUNICATION 87 Konkret Abstrakt Strategi Visualisering Kartläggning • Klickbara prototyper • Pappersprototyper • Wireframes • Experience model & maps • User journeys • Personas • Research • Kundinsikter
88. BERGHS SCHOOL OF COMMUNICATION 88 Hög detaljnivå Låg detaljnivå Mycket interaktivitet Lite interaktivitet Wireframes Klickbara- Prototyper Pappers- Prototyper Skisser
89. BERGHS SCHOOL OF COMMUNICATION 89 Mycket tid Lite tid Wireframes Klickbara- Prototyper Pappers- Prototyper Skisser
90. BERGHS SCHOOL OF COMMUNICATION Skisser 90
91. BERGHS SCHOOL OF COMMUNICATION 91 Källa: http://uxdesign.smashingmagazine.com/2013/06/24/sketching-for-better-mobile-experiences/
92. BERGHS SCHOOL OF COMMUNICATION 92 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”
93. BERGHS SCHOOL OF COMMUNICATION 93 Inte så bra för: 1. Användas för presentationer 2. Detaljer
94. BERGHS SCHOOL OF COMMUNICATION Pappersprototyper 94
95. BERGHS SCHOOL OF COMMUNICATION 95 Källa: http://arielwaldman.com/projects/interaction-design/
96. BERGHS SCHOOL OF COMMUNICATION 96 Bra för: 1. Snabbt & enkelt visa interaktivitet 2. Att testa koncept tidigt i projektet
97. BERGHS SCHOOL OF COMMUNICATION 97 Inte så bra för: 1. Att visa komplexa interaktioner 2. Kan inte delas på ett enkelt sätt med teamet
98. BERGHS SCHOOL OF COMMUNICATION 98
99. BERGHS SCHOOL OF COMMUNICATION Övning: Pappersprototyp 99
100. BERGHS SCHOOL OF COMMUNICATION Pappersprototyp för Stockholms Universitet 100 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
101. BERGHS SCHOOL OF COMMUNICATION Wireframes 101
102. BERGHS SCHOOL OF COMMUNICATION 102 Bra för: 1. Specificera detaljer i interaktionerna 2. Gillas av utvecklarna 3. Gillas av designers
103. 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 103
104. BERGHS SCHOOL OF COMMUNICATION 104
105. BERGHS SCHOOL OF COMMUNICATION 105 Excel Keynote Omnigraffle Fireworks Illustrator Visio
106. BERGHS SCHOOL OF COMMUNICATION Exempel 106
107. BERGHS SCHOOL OF COMMUNICATION Klickbara prototyper 107
108. BERGHS SCHOOL OF COMMUNICATION 108
109. BERGHS SCHOOL OF COMMUNICATION Exempel 109
110. BERGHS SCHOOL OF COMMUNICATION 110 Bra för: 1. Visa komplexa interaktioner 2. Skapa en känsla för den “skarpa” lösningen 3. Att visa responsivitet
111. BERGHS SCHOOL OF COMMUNICATION 111 Inte så bra för: 1. Att ge till designers & utvecklare 2. Att dokumentera
112. BERGHS SCHOOL OF COMMUNICATION 112 Tänk på: 1. Kan ta mycket tid 2. Man kan fastna i detaljerna 3. Kan lätt bli komplext
113. BERGHS SCHOOL OF COMMUNICATION 113 Thank you! ! Marcus Castenfors @mcastenfors | mcastenfors.com | mcastenfors@gmail.com