“Waar geen wil is, ben ik weg.” Jorg Verweij
4
Voorwoord Ik heb het geluk dat ik met een jeugdige club getalenteerde mensen werk. Mannen en vrouwen die vanuit hun passie werken. Het werkgebied van medewerkers bij een digitaal full service internetbureau is breed. Een deel is psycholoog en een deel is bezig met hardcore technologie. Wij maken in multidisciplinaire teams online ‘concepten’ voor onze klanten en daar zijn we trots op, daar ben ik trots op. We gebruiken de metafoor van een succesvol restaurant dat de lezer een kijkje in de keuken geeft. De keuken waar alleen maar ‘succesvolle’ websites worden bereid. Vol enthousiasme vertellen de verschillende specialisten over de ‘tricks of the trade’. Dit boek geeft een inzicht in hun visie, methoden en creatieve aanpak. Waarom een kookboek? Er zijn heel veel overeenkomsten tussen koken en ons vak. Alles valt of staat bij de juiste voorbereiding, de juiste ingrediënten, vakmanschap, passie en creatitiviteit om een succesvolle website te bereiden. Dit boek is een snapshot van onze dagelijkse kost, gekoppeld aan onze toepassingen in de praktijk. Het dient ter inspiratie, maar kan ook worden gebruikt als onderzetter. De rode draad in het boek is de realisatie van websites, waarbij de optimale mix gevonden moet worden tussen bezoekersdoelen, bedrijfsdoelen en usability. Het is een boekje waarin de theorie aan daadwerkelijke cases gekoppeld wordt. Hands-on snackable content. Deze theorie geeft een weergave van de losse ingrediënten die wij in huis hebben, die samen een vijfsterrengerecht vormen.
Jorg Verweij - Chef de Colours
5
N E
S
√
Doelen &
Optimalisatie Analyseren
Testen A
Optimaliseren
B
Crea
User-test eye tracking
6
N W
S
Strategie
Persona’s Customer journeys Cardsorting KPI’s
Analyse & Definitie
atie
MBTI
Persuasive Design
7
Colours is een top 10 internetbedrijf waarvoor geen uitdaging te groot is! Met een tal gedreven professionals maken wij succesvolle websites.
OVER COLOURS
12
Het proces begint allemaal met het ontwikkelen van een digitale strategie en het vaststellen van doelen voor klanten. In dit hoofdstuk vertellen we je hoe Colours dit aanpakt.
HET ONTWIKKELEN VAN EEN DIGITALE STRATEGIE
16
ONLINE SUCCES NADER VERKLAARD
20
MEETBARE DOELSTELLINGEN 22
PROJECTMETHODIEKEN
25
SCRUM METHODE
26
BUSINESS MODEL CANVAS
CASE: ENECO
8
Een website wordt altijd voor een bepaalde doelgroep gemaakt. In dit hoofdstuk wordt er een beeld geschept over hoe Colours deze doelgroep analyseert en definieert. Onthoud tijdens het proces altijd voor wie je de website maakt!
PERSONA
38
CARDSORTING
40
CUSTOMER JOURNEY
45
CASE: IXXIDESIGN
50
CASE: DE PERSGROEP
52
CASE: WOONBEDRIJF
54
DE PIRAMIDE VAN ONLINE SUCCES
56
VINDBAARHEID
58
USABILITY
62
USABILITY - MBTI
64
PERSUASION
70
CONTENT PROFILING
74
30
32
Bij het creëren van de website maak je stappen door, van schetsen tot uiteindelijke uitwerkingen. In dit hoofdstuk geven we je inzicht hoe Colours dit aanpakt.
EYETRACKING
100
CASE: QUINNY
102
CASE: STIP REIZEN
104
GOED GEDRAG BELONEN
106
A/B TESTING
108
REMOTE USABILITY TESTING
110
WEBSITE PERFORMANCE
112
EFFECTIEVE CALL TO ACTIONS
118
DO’S AND DON’TS VOOR UW HOMEPAGE
122
DOORSTAAT JOUW WEBSITE DE 5 SECONDEN TEST?
126
Bij optimalisatie streven wij naar een optimale gebruiksvriendelijkheid. Hierbij komen verschillende dingen kijken. In dit hoofdstuk laten we zien welke methodes Colours toepast om optimale gebruiksvriendelijkheid te creëren.
CASE: STEDIN
130
WEBCONVENTIES
96
CASE: EFTELING
132
ONBEWUST KIJKGEDRAG
98
SCHETSEN
78
INTERACTIE ONTWERP
79
CASE: SOA AIDS
80
CASE: RUTGERSWPF
82
HET HAMBURGER ICOON
84
CASE: NEDERLAND SCHOON
86
CASE: CASADE
88
EWALD VERHOOG
90
9
Elke tijd heeft zo zijn trends en ontwikkelingen. Wie mee wil gaan met de tijd is hiervan op de hoogte. Wij laten in dit hoofdstuk zien wat ons als Colours in deze tijd bezig houdt.
VAN “HEBBEN JULLIE AL EEN WEBSITE” NAAR “INTERNET OF THINGS”
138
E-COMMERCE: ONMISBARE ONLINE FACTOR
140
DESIGNTRENDS TOP 10
142
MAKE IT HAPPEN (PERSONALISATIE)
148
Sommige afbeeldingen vragen om een gedetailleerder overzicht. In dit hoofdstuk staan de bijlagen die dit overzicht bieden. Zeg nou zelf, wat is een boek zonder bijlagen?
TOP 10 LEESVOER
154
UITGEWERKTE PERSONA (TEMPLATE)
156
OGSM MODEL
158
BUSINESS MODEL CANVAS
159
10
11
COLOURS
Over Colours
“Colours, succesvolle websites met resultaat afspraken”
Wij ontwikkelen digitale strategieën en concepten, creëren succesvolle websites en activeren deze met doelgerichte online marketing. Dit kunnen wij door gepassioneerde collega’s met kennis van strategie, online marketing, mobile first design en techniek in huis te hebben. Colours staat voor succesvolle
websites en is bereid daarover resultaat afspraken te maken. Bij ons krijgt elke klant een KPI dashboard. In het Emerce onderzoek van 2014 is Colours wederom tot de top van de Nederlandse digitale bureaus verkozen. Colours maakt onderdeel uit van de LECTRIC Groep.
DISCIPLINES
25%
DESIGN DEVELOPMENT OPTIMALISATIE STRATEGIE
12
50% 15% 10%
START
1997
2008
LECTRIC INTERNET OPLOSSINGEN
COLOURS THE INTERNET COMPANY
MISSIE
Klanten blij en succesvol maken is de essentie van wat wij doen. Colours wil dan ook actief en concreet bijdragen aan het online succes van haar klanten. Dit doen wij door het realiseren van succesvolle websites.
VISIE
Colours is ervan overtuigd dat organisaties nog onvoldoende profiteren van de mogelijkheden van het domein internet en technologie. De link tussen het effect van online interactie en de bijdrage daarvan aan business doelstellingen wordt nog nauwelijks gemaakt. In die transitie staat niet alleen de directe klant centraal, maar moet er ook goed geluisterd worden naar de gebruikers. Colours ziet websites als levende ‘dingen’ die nooit af zijn en alsmaar veranderen. Zij streven dan ook naar een proces van continu meten en verbeteren.
WERKNEMERS
BEDRIJFSTAKKEN
76
•
Energie- & nutsbedrijven
•
Goede doelen
•
Onderwijs & opleidingen
•
Wonen & vastgoed
•
Overige
13
14
15
DOELEN & STRATEGIE
Het ontwikkelen van een digitale strategie Hoe ontwikkelen we voor klanten een digitale strategie die werkt, creëren we hieruit succesvolle digitale producten en activeren we deze met doelgerichte online marketing?
16
Het proces tot de realisatie van een succesvolle digitale strategie staat beschreven in de volgende figuur.
Stap 1 - Define De doelstelling formuleren en de strategie en KPI’s bepalen. Colours maakt hiervoor gebruik van het OGSM model. Het OGSM model (Objective, Goals, Strategies en Measures) is een krachtig en concreet businessplan op één A4. In een beknopt overzicht staan hierin de volgende onderdelen: •
Objective: kwalitatief einddoel
•
Goals: vertaling naar kwantitatieve doelstellingen (meetbaar)
•
Strategies: gekozen strategieën om de doelstellingen te behalen
•
Measures: Key Performance Indicators om het succes te meten
Met het OGSM model zijn in één oogopslag de doelstellingen, strategieën en KPI’s duidelijk. Dit maakt het een krachtig middel om de doelstellingen en KPI’s te bewaken tijdens het project.
Doelstelling: Binnen 2 jaar marktleider worden in Nederland en een online omzet realiseren van 10 miljoen euro met een loyaal klantenbestand. Goals Strategies Dashboard Actieplan Budget TRAFFIC De website is optimaal # bezoekers per SEO optimaliseren n.t.b. 25 % verhoging in vindbaar voor de verkeers-‐bron Google Adwords inzetten doelgroep en dit Affiliate Marketing bezoekersaantallen resulteert in maximale Extra campagnes bedenken traffic door een gedegen online marketing strategie. CONVERSIE De website verleidt de % conversie van Conversie expert review op de site n.t.b. 50 % verhoging van online bezoekers tot een bezoeker naar uitvoeren aankoop, doordat Onsite klantfeedback aankopen koper deze toegankelijk, A/B testing overzichtelijk en relevant Behavourial targeting is. Retargeting Rapportage, analyse, optimalisatie RELATIES ONTWIKKELEN Er worden langdurige # volgers Klantcontactstrategie bepalen, n.t.b. 25 % stijging in volgers via relaties aangegaan met # nieuwsbrief opzetten en uitvoeren (CRM) klanten, door actueel, sociale media inschrijvingen 25% stijging in nieuwsbrief relevant en persoonlijk te inschrijvingen communiceren. 25% stijging in vaste klanten
Planning n.t.b.
n.t.b.
n.t.b.
Voorbeeld OGSM, bijlage 2, blz 160
Stap 2 - Explore WORKSHOPS
De basis voor een digitale strategie zijn een aantal intensieve workshops waarmee we samen met u het OGSM verder gaan uitwerken en vormgeven. Elementaire elementen zijn hierbij de customer journeys en persona’s die er uiteindelijk voor zorgen dat de digitale strategie zowel matcht met u bedrijf als uw klanten. Alleen dat is volgens ons een basis voor een succesvolle digitale strategie. ANALYSE BEZOEKERSSTATISTIEKEN
Op basis van de bezoekersstatistieken voeren wij een uitgebreide analyse van de huidige website uit. Door middel van data uit Google Analytics maken wij het volgende inzichtelijk: •
Waar komen de bezoekers op uw website vandaan (traffic bronnen)?
•
Hoe navigeren de bezoekers op uw website en welke pagina’s bezoeken ze?
•
Waar komen de bezoekers binnen en waar verlaten de bezoekers uw website?
•
Zijn er verschillen te zien voor bezoekers met een mobile device?
•
Waar zitten sterke en zwakke punten in de navigatie van uw website?
17
DOELEN & STRATEGIE
SEO BENCHMARK
Stap 3 - Digitale Strategie
Bij de nulmeting geven wij door middel van een zoekwoorden-onderzoek inzicht in het zoekgedrag van de doelgroep binnen Google, meestal een van uw belangrijkste traffic kanalen. Daarnaast onderzoeken wij de vindbaarheid van uw huidige website voor deze zoekwoorden binnen de organische zoekresultaten. Er wordt antwoord gegeven op de volgende vragen:
Door middel van de voorgaande stappen presenteren wij een rapport met de resultaten en een digitale strategie. Als belangrijkste onderdeel van deze strategie stellen wij samen met u een roadmap op. Deze bevatten alle projecten die de digitale strategie daadwerkelijk vorm moeten geven.
•
Welke zoektermen worden het meest gebruikt door uw doelgroep?
RAPPORT MET RESULTATEN
Hoe vaak wordt er op deze zoektermen gezocht in Google?
•
SEO benchmark
•
Analyse bezoekersstatistieken
•
Op welke zoekwoorden scoort uw huidige website in Google?
•
SEO scan scores
•
Hoe presteert uw website op de belangrijkste zoekwoorden vergeleken met uw concurrenten?
VERBETERVOORSTEL MET
•
AANBEVELINGEN KPI WORKSHOP EN KPI DOCUMENT
SOCIAL SCAN
Hiermee meten wij een aantal belangrijke social media KPI’s zoals bijvoorbeeld Reach, IPM en sentimentanalyse, om inzicht te geven in uw prestaties en effect binnen de social media kanalen. Social is een zeer ondergewaardeerd kanaal wat volgens Colours, wanneer succesvol ingezet, als een van de pijlers van traffic gebruikt zou kunnen worden.
18
DIGITALE STRATEGIE
•
Plan van aanpak
•
Online speerpunten en koers
ROADMAP/ ENGAMENTPLAN
“Je hebt niets aan een goede website als niemand hem kan vinden.” Johan Verzendaal
19
DOELEN & STRATEGIE
Online succes nader verklaard Wat is het beoogde resultaat van uw website of app? Wilt u meer sales, service, branding/beleving resultaat? Bij de ontwikkeling van uw website is een helder beeld van het beoogde resultaat het startpunt. De strategie en aanpak wordt bepaald door de doelgroep, de doelstellingen, de verwachtingen en de wensen in kaart te brengen.
20
Zonder doelen geen succes Een website moet bijdragen aan het behalen van de strategische doelen van een organisatie. Vaak zijn de doelen terug te brengen tot grofweg drie categorieën: •
Het verhogen van omzet;
•
Het verlagen van kosten;
•
Het verhogen van de merkwaarde/beleving.
Een combinatie van de bovenstaande doelen is uiteraard ook mogelijk. Energiebedrijf Eneco verlaagt bijvoorbeeld de servicekosten door een gebruiksvriendelijke ‘mijn omgeving’ aan te bieden. Hier hebben klanten eenvoudig toegang tot. Hier kunnen zij zelf hun termijnbedrag aanpassen en bijvoorbeeld nota’s en betalingen inzien. Hiermee worden de kosten in het callcenter verlaagd. Iedere website heeft één of meerdere doelen (ook wel conversiepunten genoemd). Dit kunnen nieuwsbrief inschrijvingen, aantal product aankopen, webshop verkopen, contactaanvragen, maar ook PDF downloads zijn.
Deze doelen kunnen gemeten worden in het gratis analyse en statistiekpakket Google Analytics. Hiermee zie je niet alleen hoeveel bezoekers een conversie hebben gemaakt (dit zie je immers ook wel in je eigen back office data), maar bijvoorbeeld ook hoe goed je zoekmachinebezoek converteert in vergelijking met je e-mailcampagne bezoek of direct bezoek. Analytics maakt het dus mogelijk om te bepalen welk type bezoek het beste converteert, waardoor je hierop verder kunt inspelen om zo meer “Hoe dan ook, zonder rendement te doelen geen resultaat. behalen.
Zonder meting geen sturing!”
Het komt nog vaak voor dat Google Analytics wordt gebruikt voor het volgen van bezoekers op een website, maar dat de doelen hiervan niet worden gemeten. Dat is zonde, want op die manier mist u bruikbare informatie. Het liefst onderbouwt u besluiten met cijfers, om direct op verbeteringen in te kunnen springen. Daarom is het op de juiste manier instellen van Google Analytics uiterst belangrijk.
21
DOELEN & STRATEGIE
Meetbare doelstellingen Meetbare doelstellingen zijn belangrijk. Als u uw website wilt verbeteren is het cruciaal om de doelen te verbeteren. Een doel kan zijn om meer bezoekers te krijgen, bezoekers langer op uw website te houden of om bezoekers aan te zetten tot meer aankopen. Belangrijke conversie punten kunnen het aanvragen van e-mailnieuwsbrieven, of bestellen van producten zijn. Diverse tools Er zijn diverse tools beschikbaar om uw website statistieken uit af te lezen. Google is verreweg het meest gebruikte statistiek pakket. Google Analytics of andere statistiek pakketten geven een detailinzicht voor degene die er dagelijks mee bezig is. Om te communiceren met leidinggevenden of managers, is vaak iets meer abstractie gewenst.
22
We hebben hiervoor een (KPI) vdashboard ontwikkeld. Dit zou collega’s die minder vaak bezig zijn met de webomgeving eenvoudig inzicht geven in de resultaten. Hiernaast zie je een voorbeeld van een dergelijk KPI dashboard.
WEBSITE STATISTIEKEN 80.000
Bezoeken:
61.198
3,00
-28,35%
Pageviews per bezoek:
2,84
+13,28%
275
Gem per dag:
85
60%
-27,38%
% nieuwe bezoekers:
48,35%
-0,13%
SOCIAL STATISTIEKEN WEBSITE STATISTIEKEN ALGEMEEN
% mobiele bezoekers:
170
Social verkeer:
-64,46%
4,5% 13,6% Maart 39
+1,52%
April 75
Mei 28
HUIDIGE GOALS 150
Cases bezocht
109
Contactformulier ingevuld
1
Bezoek langer dan 3 min
185
Service pagina bezocht
267
Vacature bekeken
198
25
250
250
150
usability analyse helderheid
62
gemak
%
51
relevantie
%
Betreft de gemiddelde score na review op 212 aspecten (maximal score = 100%)
62
geruststelling
%
66
verleiding
%
Gemiddelde score:
40
56
%
(-)
23
