Emerce Engage 2016 - ANWB - Nooit meer een redesign
•Download as PPTX, PDF•
0 likes•27 views
Dutch presentation for Emerce Engage about the way the Dutch road assist company ANWB did a massive omnichannel redesign, impacting the whole digital team and getting great end results without the frustrating the customer.
Recommended
More Related Content
Similar to Emerce Engage 2016 - ANWB - Nooit meer een redesign
Similar to Emerce Engage 2016 - ANWB - Nooit meer een redesign (20)
Emerce Engage 2016 - ANWB - Nooit meer een redesign
- 1. Nooit meer een redesign Lieneke Roos - Frank de Wit
- 5. Maar we bieden ook …. Routeplanner Lidmaatschap Ledenvoordeel Belangenbehartiging Vrijwilligerswerk Creditcard Verzekeringsmaatschappij Vakantie informatie en inspiratie Ledenreizen (+7 reisdochters) Kamperen Alarmcentrale Trauma helikopters Gipsvluchten Rijopleidingen Mobiliteit/Auto Vrije tijd Wandelen, Fietsen, Watersport, Motor Theater tickets, Dagje weg, Avondje uit. Wandel-, Fiets-, Auto-, Motorroutes, Waterkaarten.
- 6. Met 4 miljoen leden Meer dan 10.000 vrijwilligers ANWB is een vereniging
- 7. 116 miljoen visits per jaar >51% is mobiel >50% organisch zoekverkeer 140 Applications 10.800 Content pages 21.025 Unieke url’s 27 Apps 18 Nieuwsbrieven ANWB Online
- 9. Situatie voor het redesign Voorbeeld: Verkeersinformatie Gedecentraliseerd ontwerp en realisatie Anwb.nl/verkeer desktop Anwb.nl/verkeer mobiel Onderweg App (iOS)
- 10. Desktop en mobiele site Desktop site Mobiele site
- 11. Wat moest gebeuren •Volledige herinrichting van de site (dus ook technisch) •Front en Back-end losgekoppeld •API architectuur adopteren •Content en opmaak volledig gescheiden •Continues delivery, integration and innovation En dus toch nog één keer een Redesign
- 12. Uitgangspunten voor het redesign •Meer consistentie, beleving, inspiratie, hiërarchie •Content beschikbaar op ieder device (Responsive) •Gebaseerd op data (Onderzoek, Tests, bezoekerscijfers) •Geen revolutie maar een evolutie. Klanten houden niet van grote veranderingen
- 13. Om te beginnen
- 16. Atomic design (Brad Frost)
- 17. Design toegepast
- 18. 18 Integratie van de drie methodieken in 1 proces OPLOSSING Conceptualiseer Stel hypothese op Experimenteer Onderzoek & observeer Stel klantbehoefte vast Herzie hypothese Prioritiseer inzichten DESIGN THINKING INZICHT KLANTBEHOEFTE Nieuwe ideeën obv feedback AGILE ONTWIKKELING LEAN UX
- 19. Ontwerpen = Onderzoek •Informatie werd sneller gevonden •Nieuw ontwerp nodigt meer uit om door te klikken •Respondenten bleven langer en scrolden in detail pagina’s •Uitstraling werd zeer goed gewaardeerd
- 20. Skinnen
- 21. Skinnen
- 23. Hoofdnavigatie
- 24. Content omzetten •10.800 pagina’s •Bottom up: Detailpagina’s eerst, gevolgd door overzichten, subhomes •En uiteindelijk ook de homepage
- 26. Situatie na redesign Voorbeeld: Verkeersinformatie 1 merkbeleving, 1 omnichannel stijl, 1 ANWB Desktop Mobiel iOS Android phone Web App
- 28. 28 28 Directe Redesign resultaten • Hogere NES • SEO zichtbaarheid gestegen • Sterkere SEO posities
- 29. If we want to avoid a monster of a redesign project we need to start thinking small
- 30. Ever increasing design debt will always force a redesign
- 31. Through an iterative and governed process we can change anything at any time we want.
- 33. Lieneke Roos lroos@anwb.nl Frank de Wit fdewit@anwb.nl
Editor's Notes
- Voorstellen. Naam – Functie en door
- Meeste mensen kennen ons van de Wegenwacht
- De 89 ANWB Winkels + webwinkel
- Of de verkeersinformatie
- LR: Groot landschap, groot bereik. We zijn zoveel. En online komt het allemaal samen
- LR: Context schetsen, in welke omgeving zitten wij?
- LR: Context schetsen, in welke omgeving zitten wij?
- LR: Als je achteruit blijft kijken blijft je doen wat je altijd al hebt gedaan. Je moet er natuurlijk wel van leren maar vooral vooruit blijven kijken en je daarop richten
- FdW: We bieden onze gebruikers overal een net iets andere ervaring. En zijn we alles behalve 1 afzender. Het is versnipperd doordat we niet goed samen werkten. Geen goeie richtlijen hadden en geen goede regie.
- FdW: Daarnaast hadden we ook nog 2 apparte omgevingen. Mobiele website en een desktop website. Waarbij de mobiele website maar een heel klein deel van de content en de belangrijkste applicaties van de desktop site ontsloten werden. Wil je meer personaliseren en bezoekers engagen dan zullen we dit beter moeten inrichten. LR: Mobiele site had geen CMS en daardoor kon deze nooit echt up to date zijn. Was niet te beheren
- LR: Voorwaarden om continu verbeteringen door te voeren en echt iteratief te werk te gaan en te kunnen innoveren
- FdW; en daar hebben we een aantal uitgangspunten voor gedefinieerd
- LR: Opschoonactie: Van 319 naar 25 templates. Deze zorgden voor de enorme grote hoeveelheid aan inconsistentie. Redactie had hier vrijheid in om templates te maken en aan te passen. Decentraal georganiseerd. Veel stakeholders. Deze basis zorgde er ook voor dat er geen 319 templates geredesigned moesten worden maar enkel de 25.
- LR: Vervolgens heel erg naar de inhoud, de content en de opbouw gekeken en de conclusie getrokken dat de site eigenlijk maar bestaat uit overzicht pagina’s, content pagina’s en applicaties (waarbij applicaties zoekmachine’s en formulieren zijn). Daarnaast dat onze grote diversiteit van overzichten ook weer in te verdelen zijn in 3 categorieen: Informerend, inspirerend en converterend. Op basis hiervan hebben we de templates bepaald en is content overgezet naar nieuwe – nog niet responsive – templates. Tegelijkertijd content rationalisatie toegepast. Content schrappen waar niet meer nodig
- FdW: Tegelijkertijd hadden we met visual design alles bij elkaar gegooid. Van desktop site, mobiele website, webwinkel, nieuwsbrieven, app’s maar ook offline brochures, folders, magazine om te zoeken naar de grote gemene delers. Voorheen was nog mogelijk dat ontwerp decentraal bij diverse bureaus terecht kwam en eigen invulling kon doen dus het was een flinke diversiteit. Nu centraal belegd bij UX.
- FdW: Door middel van Atomic design eerst de kleinste elementen ontworpen waarna je met de kleine elementen gaat samenstellen en doorgroeit naar templates en uiteindelijk pagina’s en heel designlanguage. ⁃ We wilden bewust geen pagina’s ontwerpen maar een design taal voor al onze digitale touchpoints ontwikkelen
- FdW: Door al die elementen samen te voegen en de voorgedefinieerde templates eenvoudig pagina’s op te maken die we voor konden leggen aan community DenkMeeMetDeANWB door middel van Usabilla. We konden mensen opdrachten geven en aan de hand van de resultaten conclusies trekken. Want ontwerpen is aannames doen en die valideer je met onderzoek
- FdW: Tijdens redesign hebben we steeds terug gepakt op de data door middel van onderzoek. Dit deden we door design thinking toe te passen en waar nodig Lean UX. Vervolgens pakten de developers het in een sprint op. Ook hebben we een prototyope gecreerd om een gevoel te krijgen hoe responsive nou zou kunnen werken voor bijvoorbeeld het menu, afbeeldingen etc.
- FdW: Ontwerpen = Onderzoeken. Het onderzoek wees uit dat de respondenten informatie sneller vonden, eerder uitgenodigd werden door te lezen en de uistraling beter gewaardeerd werd.
- FdW: Om de overgang naar de nieuwe responsive templates voor onze gebruikers zo soepel mogelijk te laten verlopen eerst de huidige website geskint. Dat houdt in dat we alles hetzelfde laten behalve de opmaak van een paar kleine dingen. Ronder, Blauwer, Vriendelijker, groter. In productie gebracht en resultaat: Niks
- Niemand heeft hier iets van gemerkt. Het gaf ons juist de mogelijkheid om naast de bestaande pagina’s, nieuwe pagina’s te plaatsen zonder dat de overgang daar al te groot werd voor de bezoeker. Deze nieuwe pagina’s wijken ook weer niet heel veel van de bestaande pagina’s. Ze zijn groter, wijder, responsive en ademen meer maar de content is gelijk gebleven. Behalve de producttemplate. Deze wijkt wel erg af van de vorige producttemplate
- FdW: Deze is ontworpen in een design studio in samenwerking met enkele business lines. Voordat we deze template in productie hebben genomen hebben we 2 maal een usability onderzoek naar gedaan in ons eigen UX center om te bepalen of deze beter functioneert dan de bestaande. Dat doet hij Ook gaf het skinnen van de site ook de mogelijkheid om een aantal A/B tests uit te voeren op het het weglaten van CTA, het toevoegen van micro copy en aanpassingen in de hoofdnavigatie.
- FdW: De echt grote veranderingen in de website begonnen pas bij de aanpassingen in het hoofdmenu. Geen wijzigingen in de terminologie of volgorde maar wel in de opbouw. Van megamenu naar een eenvoudig menu. Van een emmer vol mogelijkheden naar een beperkte set hoog over mogelijkheden. Door user value, business value, SEO value en ambitie aan elkaar te koppelen zijn we tot de menu invulling gekomen. Hierdoor krijgen elementen die in de hoofdnavigatie staan meer SEO waarde en meer aandacht. Hier gaan we als organisatie dus echt anders mee omgaan dan voorheen. Ieder item in de hoofdnvagiatie moet die plek daar verdienen, letterlijk een bepaalde value hebben om daar te mogen staan anders ontneem je die waarde weer van anderen. Zowel SEO waarde als aandachtswaarde.
- LR: In de website zijn van onderaf begonnen. Eerst de content pagina’s Artikelen en nieuwsartikelen. Het draait tenslotte om content. Traffic dat daar op land heeft een fijne ervaring, traffic wat daar hierarchies op land heeft een positieve verassing Vervolgens de overzicht pagina’s, de subhomes en uiteindelijk de homepage. Toen pas is de mobiele website uit de lucht gehaald en wordt al het traffic naar de responsive website gestuurd.
- FdW: Hierdoor op alle devices beschikbaar, snel, actueel en als 1 merkbeleving neergezet.
- LR: We werken met NES(NPS).
- LR: Hogere rankings, hogere score
- FdW: Als we willen voorkomen dat we nog zo’n monster van een project gaan doen moeten we klein denken
- FdW: Iedere stijging van de design dept zal altijd een redesign forceren. Iedere afwijking creert een afhankelijkheid, een los eind en een blok aan je been
- FdW: Door een iteratief en beheersbaar proces kunnen we namelijk alles veranderen wat we willen, flexibel zijn en tegelijkertijd de kwaliteit en stabiliteit waarborgen
- LR: