Anouschka Scholten verbeterde namens Online Dialogue bestelfunnels voor de KPN.com website en haalde hiermee een eerste conversie verbetering van 9% en is op weg naar meer. De aanpak van het traject en de learnings werden besproken op de 3e Online Dialogue Donderdag op 13 januari 2011. Wil jij ook een Online Dialogue Donderdag bezoeken: http://onlinedialogue.nl/donderdag

1. Praktijkcase KPN.com
Herontwerp online bestellen,
de check out
Online Dialogue Donderdag 13 januari 2011
Door Anouschka Scholten (@anous)
Seats2Meet Maarssen
Resultaatgericht dialoog ontwerpen

2. Afbeelding van pagina zoals deze live stond op kpn.com op 22/4/2010
Bestelflow Internet, Bellen en TV
Situatie
Bezoeker heeft keuze gemaakt en wil
bestellen: Pakket Internet + Bellen + TV
Dat kan vanaf o.a. deze pakket
informatiepagina via de knop ´Bestellen´
Alleen de stappen daarna zijn
herontwerpen:
de check out

3. Bestelflow Internet, Bellen en TV
Startpagina van check out Deze check out geldt voor elke
productcombinatie met internet,
bellen of TV
Afbeelding van pagina zoals deze live stond op kpn.com op 22/4/2010

4. Bestelflow Internet, Bellen en TV
Check out: van beschikbaarheid product naar
winkelwagen en bedankt voor uw aankoop
Opdracht
Verhoog de gebruikerservaring
door een herontwerp van de
check out
Afbeelding van pagina zoals deze live stond op kpn.com op 22/4/2010

5. Aanpak
De opdracht
Ontwerp
Inhoud
Ontwerp & Resultaat: lessons

6. Opdracht en resultaat
3 maanden (april-juli 2010)Doorlooptijd ontwerp
Live per 28-10-2010Ontwikkeling & implementatie
volledig door KPN
Ontwerpuren alleen interactie 250 uur
9% conversiestijgingResultaat
Per 10-11-2010

7. Aanpak
De opdracht
Ontwerp
Inhoud
Ontwerp & Resultaat: lessons

8. theory © http://onlinedialogue.com
icons © http://dryicons.com
Tuning the conversation
Company goals Customer goals€€€ 
Company
Behavior
Behavior
Prospect / client
Multi
purpose
Multi-
channel
Multi
phase
Social environmentCompetitors Media
External influencers

9. Besluit genomen, aan de kassa

10. Bedrijfsstrategie (gegeven)
Online Dialoog
Strategie
Online Dialoog
Ontwerp
Online Dialoog
Organisatie Inrichting
Dialoog
aanpassingen
Organisatie
aanpassingen
Bestaande situatie
Evolutie
Revolutie Revolutie
Constant
verbeteren
Evolutie
Dialoog processen
theory
© http://onlinedialogue.com

11. Bedrijfsstrategie (gegeven)
Online Dialoog
Strategie
Online Dialoog
Ontwerp
Online Dialoog
Organisatie Inrichting
Dialoog
aanpassingen
Organisatie
aanpassingen
Bestaande situatie
Evolutie
Revolutie Revolutie
Constant
verbeteren
Evolutie
Dialoog processen
theory
© http://onlinedialogue.com

12. Case KPN bestelflow: aanpak
1 Quick review vooraf
5 Oplevering ontwerp
3 Ontwerp
2 Analyse & Brown paper sessie
4 Usability test

13. Quick review
Content
Wat is hier de
bedoeling? Waarom
is het aantal
huishoudens
relevant?
Afbeelding van pagina zoals deze live stond op kpn.com op 22/4/2010
Onderdeel in de review, ‘Controle van aansluiting’- dialoog
Controle en
flow?
Nu ben ik weer hier?
Welke stap?
Nog een controle???

14. Quick review
Veel drempels…
Content
Akkoord gaan?
Hoezo? Waarom?
Wat als ik de
aansluiting wil
vervangen, dat kan
niet?
Grote afhaker
Ook helpdesk kon
niet helpen…
Inconsistenties , jargon, geen antwoorden op gebruikersvragen, geen controle, …
En uitstraling, tone of voice, persuasion?
Afbeelding van pagina zoals deze live stond op kpn.com op 22/4/2010

15. Onderzoek – stakeholder gesprekken
De inhoud, veel jargon
Word cloud via http://www.wordle.net/

16. Onderzoek – stakeholder gesprekken
Processen en verantwoordelijkheden
Word cloud via http://www.wordle.net/

17. Onderzoek – stakeholder gesprekken
Situatie dynamisch en complex
Word cloud via http://www.wordle.net/

18. Onderzoek – meekijken klantcontact
centrum en chatlogs
Klanten: veelal vertrouwen in KPN
Vragen over o.a. wijzigen, overstappen, levering
Beeld van nolanlawgrouppllc.com

19. Case KPN bestelflow: aanpak
1 Quick review vooraf
5 Oplevering ontwerp
3 Ontwerp
2 Analyse & Brown paper sessie
4 Usability test

20. • Gebruikersbehoeften, taken, context
• Inhoud, content analyse
• Concurrentie analyse
• Requirements: beperkingen en
mogelijkheden
Gesprekken met inhoudelijk betrokkenen
Bronnenanalyse
Analyse

21. Brown paper sessie
Stakeholders bij elkaar
Beeld © http://onlinedialogue.com

22. Brown paper sessie
Stakeholders bij elkaar
Inzicht in complexe materie
Inzicht in processen over afdelingen heen
Beeld © http://onlinedialogue.com

23. Case KPN bestelflow: aanpak
1 Quick review vooraf
4 Oplevering ontwerp
2 Analyse & Brown paper sessie
3 Usability test
2 Ontwerp

24. Herontwerpen
Van globaal naar detail
Korte iteraties
Gebruikers centraal
Copy © http://www.userneeds.nl

25. Ontwerp
Mentale model
Ik wil (meer/beter/anders):
bellen, internetten , TV kijken
– Winkelen> persoonlijk, geholpen worden
– Kiezen, jij bepaalt
– Onderhandelen, controle, kassabon
Helping them to buy

26. Gewenste resultaat voor gebruiker
Ik wil duidelijkheid in wat kan,
spelen met mogelijkheden en
consequenties zien
Lijkt stupid simple?
Ontwerp

27. Mijn situatie = ! Niet simpel
Adres allesbepalend voor mogelijkheden en
configuratie internet, bellen en TV

28. Beschikbaarheid + aansluiting
check Postcode + huisnr +situatie
Bestelproces: 4 noodzakelijke stappen
Bestelling
samenstellen
Bestelling afronden
Controleren & Verzenden
Bevestiging
• Beschikbaarheid
• Jouw situatie> ons aanbod/ Best buy offer
• Productvarianten (internet, telefonie,tv)
• Extra opties per variant (Value added services)
Situatie lijn:
• A Geheel nieuw (geen aansluiting of extra aansluiting);
B. Bestaande configureren (aansluiting overzetten naar nieuwe situatie);
C. Bestaande van andere leverancier overzetten (overstappen)
• Telefonie: A. Nieuw nummer B. Bestaande telnr. meenemen
• Noodzakelijke persoonlijke gegevens
• Internet onder water check?
• Evt. Keuzes die gemaakt moeten worden maar geen invloed
hebben op prijs (gidsvermelding)?
• Gegevens evt. wijzigen (terug naar een vorige stap)
• Akkoord met voorwaarden
• Op de pagina en per mail
• Bedankt & Wat gebeurt er nu
• Next step
1
2
3
4
Copy © http://onlinedialogue.com

29. Helping them to buy, not selling
Andrew Chak
Make simplicity key
and motivate, high ability
BJ Fogg
Ontwerp

30. Ontwerp iteraties
Start check out
Van eerste opzet 26 mei
… naar demo
usability test 26 juni
…en +/- 4 tussenversies
Geen grafisch ontwerp!!
Copy © http://onlinedialogue.com

31. Ontwerp iteraties
Bestelling samenstellen
Van eerste opzet 10 mei
… naar demo
usability test 26 juni
…en +/- 6 tussenversies
Geen grafisch ontwerp!!
Copy © http://onlinedialogue.com

32. Ontwerp iteraties
‘Zitnoggers dialoog’
Van eerste opzet 6 juni
… naar demo
usability test 26 juni
…en +/- 6 tussenversies
Geen grafisch ontwerp!!
Copy © http://onlinedialogue.com

33. Case KPN bestelflow: aanpak
1 Quick review vooraf
5 Oplevering ontwerp
2 Analyse & Brown paper sessie
3 Ontwerp
4 Usability test

34. 1. Kwalitatief onderzoek:
Hardop denkmethode, observatie gedrag +
oogbeweging registratie + vragen voor- en achteraf
2. Gebruikers (6) uit de doelgroep
3. Realistische taak met klikbaar demo
Begrijpen waarom een gebruiker iets doet
Usability test

35. Copy © http://onlinedialogue.com
Usability test

36. Copy © http://onlinedialogue.com
Usability test

37. Case KPN bestelflow: aanpak
1 Quick review vooraf
4 Oplevering ontwerp
2 Analyse & Brown paper sessie
3 Ontwerp
4 Usability test
5 Oplevering ontwerp

38. Copy © http://onlinedialogue.com
Oplevering ontwerp

39. Aanpak
De opdracht
Ontwerp
Inhoud
Ontwerp & Resultaat: lessons

40. Ontwerp & resultaat: lessons
9% conversiestijging is een mooi resultaat
maar…
Geldt dit ook voor de langere termijn?
Kan het beter?
Oplevering en implementatie verschilt ….

41. Ontwerp & resultaat: lessons
Geïmplementeerd (6-1-2010) http://bit.ly/gCbSnl
Afbeelding van pagina zoals deze live stond op kpn.com op 9/1/2011

42. Ontwerp & resultaat: lessons
Opgeleverde ontwerp
Copy © http://onlinedialogue.com

43. Ontwerp & resultaat: lessons
Geïmplementeerd (6-1-2010, bovenkant Bestelling samenstellen pagina)
Afbeelding van pagina zoals deze live stond op kpn.com op 9/1/2011

44. Ontwerp & resultaat: lessons
Geïmplementeerd (6-1-2010 onderkant Bestelling samenstellen pagina)
Afbeelding van pagina zoals deze live stond op kpn.com op 9/1/2011

45. Ontwerp & resultaat: lessons
Opgeleverde ontwerp (bovenkant)
Copy © http://onlinedialogue.com

46. Ontwerp & resultaat: lessons
Opgeleverde ontwerp (onderkant)
Copy © http://onlinedialogue.com

47. Ontwerp & resultaat: lessons
Hoe
Concept en consistentie van het ontwerp
behouden?
Misinterpretaties voorkomen of keuzes voor andere oplossingen in
samenspraak oppakken.
Bewaken concept: een ontwerp opgezet om de dialoog met gebruiker
mogelijk te maken,
………………………de gebruiker blijft aan tafel!

48. Ontwerp & resultaat: lessons
Hoe
Belang van multidisciplinair totaalontwerp binnen scope
houden?
Interactieontwerp is niet totaalontwerp, de user interface = interactie.
Structuur, grafisch en content is altijd in samenspraak met elkaar.
Hoe professioneel is de uitstraling en is deze voldoende in lijn met de
online winkel? Kan usability- en persuasion niet nog veel krachtiger
worden ingezet?

49. Ontwerp & resultaat: lessons
Hoe
Helpen gestructureerd te verbeteren en de klant steeds beter
leren kennen?
Toekomstgericht en uitbreidbaar naar meer conversie; een gericht
optimalisatieproces met hypotheses. De nieuwe 0-meting is het
herontwerp, van daaruit optimaliseren en meer conversie behalen!

50. @onlinedialogue @anous
Meld je op de site aan voor onze nieuwsbrief!
Anouschka Scholten
www.onlinedialogue.com
anouschka@onlinedialogue.com
Tel: +3130 4100 176
Contact:

51. Deze case is gepresenteerd op de
Online Dialogue donderdag.
Je kunt deze 2 maandelijkse kennis
sessie in Utrecht zelf bijwonen.
Schrijf je nu in voor de wachtlijst:
http://onlinedialogue.com/donderdag
Volgende sessie:
• 31 maart 2011, met:
• Social media strategie & aanpak
• Kras.nl conversie praktijkcase
• Conversie clinic & best practises
Schrijf je nu in
En deel mee in onze kennis!