Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

33
Nooit meer een redesign Lieneke Roos - Frank de Wit

Transcript of Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Page 1: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Nooit meer een redesignLieneke Roos - Frank de Wit

Page 2: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)
Page 3: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)
Page 4: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)
Page 5: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Maar we bieden ook …. Routeplanner Lidmaatschap

LedenvoordeelBelangenbehartiging

Vrijwilligerswerk Creditcard Verzekeringsmaatschappij Vakantie informatie en

inspiratie Ledenreizen (+7

reisdochters) Kamperen

AlarmcentraleTrauma helikoptersGipsvluchten

Rijopleidingen Mobiliteit/Auto Vrije tijd

Wandelen, Fietsen, Watersport, Motor Theater tickets, Dagje weg, Avondje uit.

Wandel-, Fiets-, Auto-, Motorroutes,

Waterkaarten.

Page 6: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Met 4 miljoen leden

Meer dan 10.000 vrijwilligers

ANWB is een vereniging

Page 7: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

116 miljoen visits per jaar>51% is mobiel>50% organisch zoekverkeer

140 Applications10.800 Content pages21.025 Unieke url’s

27 Apps18 Nieuwsbrieven

ANWB Online

Page 8: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)
Page 9: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Situatie voor het redesignVoorbeeld: Verkeersinformatie

Gedecentraliseerd ontwerp en realisatie

Anwb.nl/verkeer desktop Anwb.nl/verkeer mobiel Onderweg App (iOS)

Page 10: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Desktop en mobiele site

Desktop site

Mobiele site

Page 11: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

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

Page 12: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

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

Page 13: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Om te beginnen

Page 14: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Hiërarchie bepaald

Page 15: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Visual design verzamelen

Page 16: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Atomic design (Brad Frost)

Page 17: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Design toegepast

Page 18: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

18

Integratie van de drie methodieken in 1 proces

OPLOSSING

ConceptualiseerStel hypothese op

ExperimenteerOnderzoek

& observeer

Stelklantbehoefte

vastHerzie

hypothese

Prioritiseerinzichten

DESIGN THINKING

INZICHT KLANTBEHOEFTE

Nieuwe ideeënobv feedback

Bouwen

Feedback

AGILE ONTWIKKELING LEAN UX

Page 19: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

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

Page 20: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Skinnen

Page 21: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Skinnen

Page 22: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)
Page 23: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Hoofdnavigatie

Page 24: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Content omzetten

•10.800 pagina’s

•Bottom up: Detailpagina’s eerst, gevolgd door overzichten, subhomes

•En uiteindelijk ook de homepage

Page 25: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Situatie na redesign

Page 26: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Situatie na redesignVoorbeeld: Verkeersinformatie

1 merkbeleving, 1 omnichannel stijl, 1 ANWB

Desktop Mobiel iOS Android phone

Web App

Page 27: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)
Page 28: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

28 28

Directe Redesign resultaten

• Hogere NES• SEO zichtbaarheid gestegen• Sterkere SEO posities

Page 29: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

If we want to avoid a monster of a redesign

project we need to start thinking small

Page 30: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Ever increasing design debt will always

force a redesign

Page 31: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Through an iterative and governed process we can

change anything at any time we want.

Page 32: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)
Page 33: Emerce Engage 2016 - Lieneke Roos & Frank de Wit (ANWB)

Lieneke [email protected]

Frank de [email protected]