PROJECT ‘CASES’ Project: casepagina EPurple.nl

6 FEBRUARI 2018 EPURPLE

Jeroen Fennema

1

Inhoudsopgave PAGINANUMMER Opdracht omschrijving ............................................................................................................................2

Debriefing ....................................................................................................................................2

Globale planning………………………………………………………………………………………………………………………………..3

Concurrentieanalyse .......................................................................................................................... 4-15

Happy Idiots……………………………………………………………………………………………………………………..(4-7)

RED Online Marketing………………………………………………………………………………………………………(4-9)

Storm Digital…………………………………………………………………………………………………………………(10-12)

PauwR…………………………………………………………………………………………………………………………..(12-13)

Adwise………………………………………………………………………………………………………………………….(14-17)

Uitvoeringsvoorstel…………………………………………………………………………………………………………………………18

Input pagina’s……………………………………………………………………………………………………………………………..…..20

Wireframes…………………………………………………………………………………………………………………………………21-23

Realisatie…….……………………………………………………………………………………………………………………………………24

2

Opdrachtomschrijving

Doel: de potentiele klant inzicht te geven in de behaalde successen van EPurple door middel van een

casepagina. De casepagina bestaat uit een: element op de hoofdpagina, hoofd casepagina, subpagina’s.

Wat: een casepagina aanmaken die te vinden is op de website van Epurple. Door middel van een casepagina

willen wij de bezoeker inzicht geven op onze afgeronde case/successen.

Cases kunnen we opnemen in onze nieuwsbrieven en social media.

Hoe: door een overzichtelijke pagina in te richten die een duidelijk overzicht geeft over onze afgeronde cases

en antwoord geeft op de vragen:

• Wat wil de klant (klantvraag)

• Welke strategie hebben we gebruikt

• Welk resultaat hebben we bereikt (in de vorm van een grafiek, wat zegt de klant over ons?)

De casepagina kan als volgt worden ingericht maar hier een eigen draai aan geven wordt natuurlijk

gewaardeerd:

• Landingspagina: fungeert als doorverwijspagina. Op deze pagina staan al onze cases onderverdeeld in

verschillende branches: B2B, B2C. (dienen nog verder uitgewerkt te worden). Deze worden

weergegeven als ‘tiles’ in een rij van 4 breed.

• Individuele casepagina’s: klik op een case en je wordt doorverwezen naar de desbetreffende case die

op deze pagina verder wordt toegelicht.

1. Deze individuele casepagina’s worden afhankelijk van het onderwerp en plaats intern

doorgelinkt naar andere bestaande pagina’s. we focussen ons voornamelijk op het

doorlinken naar dienstpagina’s.

2. De individuele casepagina’s zullen een CTA knop hebben met de tekst ‘dit wil ik ook’. Deze

knop zal linken naar de bijpassende dienst

3. De individuele casepagina’s zullen een overzicht hebben met een voor en na effect inclusief

cijfers en of tabellen.

Debriefing

Ik ben verantwoordelijk voor het opzetten en realisatie van het project de ‘casepagina’. Dit project komt voor

uit de vraag ‘we willen de potentiële klant inzicht geven in behaalde successen van Epurple door middel van

een casepagina’.

De casepagina bestaat uit drie dingen:

1. Element op de website (uitgelicht)

2. Algemene landingspagina waar alle cases staan

3. Specifieke subpagina waar de case van de klant is beschreven

Het element op de website bevat een call to action en is aantrekkelijk om naar te kijken. Het nodigt de lezer uit

om door te klikken.

De algemene landingspagina is duidelijk en overzichtelijk en geeft de lezer een goede indruk voor welke

klanten EPurple (heeft) (ge)werkt. De cases zijn onderverdeeld in verschillende branches.

De specifieke subpagina’s bevatten een SEO geoptimaliseerde teksten en ondersteunende (CSS3)animaties,

afbeeldingen, video’s en/of infographics. Er zal een link worden gelegd met de bijhorende dienst. Daarnaast zal

er een CTA (call-to-action) knop aanwezig zijn om de potentiele klant meer informatie te geven over onze

diensten en uiteraard te kiezen om ze daadwerkelijk af te nemen.

De opdracht bestaat uit vooronderzoek, voorstel en realisatie. Er zal contact worden gelegd met collega’s en

klanten om de benodigde informatie te verkrijgen.

3

Globale planning

Weeknummer: Activiteiten:

6 7 8 9 10

11

12

13

14

15

16

17

18

19

20

21

22

23

Debriefing

Globale planning

Concurrentieonderzoek

Uitvoeringsvoorstel

Voorstel bespreken en keuze maken

Wireframes (homepage, landingspage en casepage)

Mail input casepagina & meeting

Deadline input casepagina

Bespreken wireframes (meeting Sylvester)

Onderzoek ThemeWaves & mogelijkheden gekozen elementen

Nieuwe pagina’s ontwerpen op WordPress (inclusief content creatie als afbeeldingen, widgets e.d.)*

Feedbackronde concept alle pagina’s*

Verwerken eventuele feedback*

Publicatie pagina’s op website*

* Het maken van de nieuwe pagina’s kost waarschijnlijk niet de volledige drie weken. De planning is

ruim genomen met ruimte voor plotselinge veranderingen. Als alle concepten klaar zijn, schuiven de

andere taken een of twee weken op.

4

Concurrentieanalyse

Er wordt per concurrent gekeken wat zij hebben staan op de website betreft cases. Het concurrentieanalyse is

op een logische volgorde opgebouwd:

• Korte omschrijving bedrijf

• Homepagina (indien van toepassing)

• Landingspagina cases

• Casepagina

• Call to action (indien van toepassing)

• Eventuele bijzonderheden

Opmerking: de overige elementen die de concurrenten op de website hebben staan als een ‘bel mij terug’ knop of een

contactformulier worden in principe niet meegenomen in het onderzoek. Alleen als het de casepagina versterkt zal het

worden vermeld.

#1. Happy Idiots Korte omschrijving

“Fris en gedreven. Een verlengstuk van de klant. Betrokken. Dat is online marketingbureau Happy Idiots. Wij

gaan nét die stap verder. Zijn altijd op de hoogte. Lopen voorop met nieuwe ontwikkelingen. De kanalen die we

inzetten staan nooit op zichzelf – ze vormen onderdeel van een totaaloplossing. Een oplossing die zorgt voor

aantoonbare resultaten. Daar worden we iedere dag weer happy van. Jij toch ook?”

Homepagina

Happy Idiots maakt geen gebruik van een uitgelicht element op de homepagina.

Landingspagina cases

In het menu staat ‘Cases’ op nummer 7. De pagina bestaat uit een overzichtelijk, op dienst gesorteerde,

navigatie. Onder elke case staat een korte beschrijving (2 tot 3 zinnen) die case inleiden. De cases hebben een

‘fade in’ en ‘fade out’ effect als ze getoond of verborgen worden. Er is geen hover-overlay aanwezig (als je dus

met de muis op een case gaat staan, gebeurt er niets).

Lees verder op pagina 5 →

5

Casepagina

Iedere casepagina is hetzelfde opgebouwd. Het bestaat uit een korte introductie over de klant, de klantvraag,

de strategie en het resultaat. De informatie bestaat volledig uit tekst en wordt niet ondersteund met

afbeeldingen, infographics, animaties of iets dergelijks. Het gegeven voorbeeld hieronder is het enige

voorbeeld met een simpel screenshot van de omzetstijging.

6

Call to action

In het totaaloverzicht op de landingspage is een call-to-action terug te vinden. Zie pagina 7 voor de

uitvergroting. →

7

De tekst nodigt de potentiële klant uit om contact op te nemen met Happy Idiots. De ‘lees verder’ knop

verwijst naar de contactpagina.

#2. RED Online Marketing Korte omschrijving

“RED is een online marketing bureau en werkt uitsluitend voor reis- en recreatie wereld in Nederland, België en

Duitsland. We werken o.a. voor OTA’s, reisbureau’s, vakantieparken, attractieparken, musea, campings, hotels

en vakantie makelaars. Wij helpen deze bedrijven met bijvoorbeeld hun zoekmachine advertenties in Google

en Bing, succesvolle Facebook advertising, email marketing, conversie optimalisatie of strategisch advies. Ons

team bestaat uit gedreven online marketing specialisten die exact weten wat er in de reiziger om gaat. En

daarnaast uiteraard experts op hun vakgebied. Mede door twee Duitse specialisten kunnen we campagnes

voor Nederlandstalige, Engelstalige en Duitstalige landen verzorgen.”

Homepagina

Op de homepagina is in het 4e ‘blok’ een animatie (de teller) te zien. Het gaat om slechts één case. Alleen het

logo van Tjingo is aanklikbaar.

8

Landingspagina cases

In het menu staat ‘Cases’ op nummer 2. De pagina wordt geïntroduceerd met de volgende tekst: “Hier vind je

een aantal van onze online marketing cases. Wil je meer informatie over de successen die we hebben behaald?

Neem contact op met Roy Platje op r.platje@redonlinemarketing.nl”

De pagina bestaat uit een overzichtelijk, op categorie gesorteerde, navigatie. De cases zijn weergegeven als

(zwartwit)logo van de klant. De cases hebben een ‘fade in’ en worden weergegeven in kleur als je met de muis

op de klant/case gaat staan. Ook wordt de tekst (naam van de klant) ondersteund met een rood blok. Er is een

‘fade out’ effect als ze verborgen worden en gaan terug naar zwartwit.

Casepagina

Iedere casepagina is hetzelfde opgebouwd. Het bestaat uit een korte introductie over de klant, de klantvraag,

de bijdrage van RED en het resultaat. De informatie bestaat volledig uit tekst en wordt ondersteund met

uitgelichte quotes van de klant en het logo van het bedrijf. Daarnaast is de header (foto) enigszins gerelateerd

aan de core business van de klant.

Zie afbeelding op pagina 9. →

9

Call to action

De call to action is pas onderaan de pagina te vinden, net boven de footer. Echter is deze balk op elke pagina

zichtbaar en niet specifiek op de casepagina.

10

#3. Storm Digital Korte omschrijving

“Storm Digital is een growth marketing agency. Werkzaam vanuit alle digital marketing disciplines, zorgen wij

voor een gedegen en explosieve groei van jouw organisatie. Wij helpen marktaandeel te veroveren in dit

digitale tijdperk!”

Homepagina

Op de homepagina staan vrij bovenaan (zie afbeelding) drie cases uitgelicht. Er wordt gebruik gemaakt van drie

afbeeldingen die 400x400 pixels zijn. Met een korte tekst wordt aangegeven waar de case over gaat. Als je

hovert over de case komt er een ‘meer over deze case’ knop tevoorschijn. Alleen de knop is aanklikbaar, de

afbeelding niet. Daarnaast staat rechtsboven in het klein een hyperlink ‘Bekijk alle cases’. Ook staat in de

navigatie een knop ‘Cases’ op positie #2.

11

Landingspagina cases

De landingspage bestaat uit een blog-vorm van cases. Er zijn grote blokken per case, waar een korte

omschrijving in staat, een passende/relevante afbeelding en het logo van de klant. De groene button ‘lees

verder’ is aanklikbaar.

Casepagina

De casepagina is ingericht op basis van de informatie die Storm Digital heeft. Ik pak het meest uitgebreide

voorbeeld. De pagina begint met een korte samenvatting van de klantvraag, daarnaast zie je profielfoto’s van

de medewerkers die hebben gewerkt aan deze case. Daaronder staat de uitgebreide aanpak beschreven die

wordt versterkt met een slideshow van afbeeldingen. De pagina wordt afgesloten met een quote van de klant.

12

Call to action

Spreek voor zich. Knop verwijst door naar het contactformulier. (onderaan de website):

#4. PauwR Korte omschrijving

Wij helpen Nederlandse bedrijven en organisaties met een jaarlijks advertentiebudget van 50.000 tot ca. 5

miljoen euro om succesvol de transformatie te maken naar digitaal adverteren. Dit resulteert in minder

verspilling van mediabudget en betere resultaten van hun campagnes.

Homepagina

Op de homeknop is een rode button te vinden ‘Bekijk onze cases’ (dit is een anchor point: een link die opdelfde

pagina blijft, maar scrollt naar de sectie d.m.v. smoothscroll. Eenmaal aangekomen bij de cases sectie treffen

we een full width, geanimeerde slider aan. In deze case komen een aantal cases voorbij inclusief tekst,

afbeeldingen en logo’s van de klant. De gehele slider is aanklikbaar en linkt door naar de specifieke casepagina.

Er is niet perse sprake van een button, of je moet de slider als button zien.

13

In de navigatie valt de pagina ‘Cases’ onder ‘Referenties’.

Landingspagina cases

De casepagina is opgebouwd uit fullwidth blokken per case. Daarbij is links het logo te zien, vlak daarnaast drie

resultaten van de case en rechts een korte omschrijving en rode button ‘Bekijk de gehele Case’.

Casepagina

De casepagina’s zijn nooit in dezelfde structuur opgebouwd. Uiteraard zit in elke case wel de vraag, het traject

en het resultaat beschreven. Dit wordt ondersteund met video’s (indien van toepassing), screenshots van de

resultaten en graphics. Boven de meeste cases staat een teller met bijhorende resultaten die worden

ondersteund met bijhorende icoontjes.

14

#5. Adwise Korte omschrijving

“Internet marketing specialist in Strategie, Online marketing & Webdevelopment * 10+ ervaring *

Internetmarketing bureau met passie & toonaangevende expertise * Leadgeneratie, E-commerce,

Arbeidsmarktcommunicatie, Service & Loyalty, Procesoptimalisatie en Branding.

Adwise is een full service internetmarketing bureau. Je kunt bij ons terecht voor de online marketing strategie,

ontwikkeling, beheer en optimalisatie van websites & webshops en internet marketing campagnes. Wij

combineren op doortastende wijze onze ervaring op het gebied van marketing & sales, bedrijfskunde en

internettechnologie. Bovendien zijn we altijd op de hoogte van de laatste ontwikkelingen in ons vakgebied. Wij

structureren jouw online activiteiten en zorgen voor optimaal bereik en maximaal rendement.”

Homepagina

Op de homepagina zijn de cases uitgelicht met een fullscreen slider (het bedekt het hele scherm). In de slider is

een mooi vormgegeven design opgenomen dat bestaat uit:

I. Een hoge resolutie bijhorende wallpaper;

II. Screenshots van de klant zijn website vormgegeven in de devices van Apple;

III. Het logo van de klant;

IV. Een quote van de klant over Adwise;

V. Een button ‘Referentie bekijken’

In de navigatie wordt de casepagina vermeld als ‘Referenties’.

15

Landingspagina cases

Deze pagina is opgebouwd met bovenaan dezelfde slider als op de homepagina. Het overzicht is verdeeld in 1

grote afbeelding (hoogstwaarschijnlijk een van de grotere projecten) en 4 kleine daarnaast. Zie afbeelding voor

toelichting. Daaronder staat een grote lijst met logo’s waar Adwise voor werkt (die heb ik in de afbeelding voor

het gemak even uitgezet). De call to action ‘Laten we samen sparren’ verwijst door naar een specifiek

contactform (dus anders dan hun normale contact). Daaronder staan nog twee blokken met een daarvan een

klantenrecensie en een widget met feedback van The Feedback Company.

16

Casepagina

De speficieke casepagina's zijn structueel opgebouwd door het gebruik van 'blokken'. Elk blok heeft een andere

kleur of afbeeldling die de leesbaarheid verberen. Bovenaan de casepagina staat altijd een fullwidth banner van

de case die minimaal 75% van het hele scherm bedekt. De tekst op de pagina wordt ondersteund met

(sliders)afbeeldingen, iconen en (voor een aantal cases) video. In het voorbeeld hieronder worden zelfs de

blokken vormgegeven in de huisstijl kleur van de klant. (in dit geval paars). Er wordt (indien van toepassing)

altijd afgesloten met een quote van de klant.

Alle casepagina's zijn anders opgebouwd en nemen geen eigen structuur aan. Het hangt af van de klantvraag

wat Adwise vermeld.

17

Call to action

De call to action is interessant. Onderaan de casepagina staat een uitgelicht blok met een foto van een van de

medewerkers, maar daarnaast ook een hoofdvraag die slaat op de specifieke case. Bijvoorbeeld: Adwise heeft

voor Morskate o.a. een conversie optimalisatie uitgevoerd. Zie onderstaande afbeelding:

Elke button verwijst door naar de ‘spar met ons’ pagina:

18

Uitvoeringsvoorstel (conclusie concurrentieanalyse) Na het uitgebreid te hebben gekeken naar vijf concurrenten zet ik de resultaten en bevindingen in

kaart. In het paars wordt meteen een voorstel gedaan van ideeën hoe wij het in kunnen zetten.

Homepagina Navigatie/menu In de navigatie staan ‘Cases’ bij vrijwel elke concurrent op een hoge positie. Oftewel vrij vooraan.

Het is aan te raden om de komende casepagina op te nemen in de navigatie en bij voorkeur een hoge positie.

Cases uitgelicht Per concurrent verschilt het hoe de cases zijn uitgelicht op de homepagina. Zo maakt RED gebruik van een

‘teller’ en licht daarmee een case uit. Storm Digital kiest ervoor om drie cases uit te lichten en een onduidelijke

link waar je het overzicht kan vinden. PauwR acht cases als zeer belangrijk, zij hebben zelfs een knop op de

homepagina die verwijst naar de uitgelichte slider verder onderaan. Adwise tilt het niveau nog hoger door de

cases volledig in het licht te zetten d.m.v. een fullscreen slider. Op elke website van de concurrent staan de

uitgelichte cases vrij hoog op de hompepagina.

Voor het beste resultaat wil ik voorstellen om het beste van beide in te zetten met nodige aanpassingen.

Op de homepagina een knop ‘Bekijk onze succesvolle cases!’ of ‘Bekijk onze successen!’ (o.i.d.) die door het

klikken scrollt naar de uitgelichte cases op de homepagina [PauwR]. De uitgelichte cases bestaan uit een full-

width slider die is vormgegeven in de stijl van de klant. Dus een wallpaper van de klant met bijhorend logo.

Daarnaast kunnen we de resultaten waar mooie visuals van gemaakt kunnen worden in de Apple devices

vormgeven. Of eventueel de website/applicaties van de klant als het hiervoor genoemde niet haalbaar is.

Onder de wallpaper wordt tekst opgenomen die in een of twee regels de case toelicht met daarbij een knop

‘Lees verder’ of ‘Zie resultaat!’. De slider is volledig aanklikbaar en wijst, net als de lees verder knop, naar de

casepagina.

De aantrekkelijke vormgeving en uitdagende buttons moeten ervoor zorgen dat de lezer de specifieke

casepagina bezoekt en geïnteresseerd raakt in onze diensten. Van de slider is een template te maken in

Photoshop waarvoor je alleen de afbeeldingen hoeft te vervangen om het per case zo eenvoudig mogelijk te

houden.

Alternatieve suggestie: als je met de muis hovert over de wallpaper, dan komt er een transparant blok

overheen met de knop ‘Bekijk volledige case’. Echter is dit niet van toepassing op mobiele websites, dus dan zal

het aanraken van de wallpaper voldoende moeten zijn om de pagina te openen.

Landingspagina cases De voorkeur van Epurple was om de cases op de landingspagina te verdelen in een menu dat de cases

onderverdeeld in verschillende branches. Uit het onderzoek blijkt ook dat de meeste concurrenten dit doen.

Het geeft overzicht en het is makkelijk kiezen voor een lezer wat hij wilt lezen.

Gebruik maken van het ‘menu’ en de verschillende cases per branche onderverdelen in tiles van vier breed.

Wellicht kan je ook sorteren op bijhorende dienst(en): bijv SEO, conversieoptimalisatie etc. Door het klikken op

de branche verschijnen alle cases die daarbij horen d.m.v. een animatie. Echter is het wel aan te raden om

voldoende cases te hebben, anders zie je bijvoorbeeld maar één case per branche. De 4 tiles bestaan uit een

bijhorende foto van de klant/case en hun logo.

Je zou het menu ook in kunnen zetten voor de pagina ‘Diensten’ om zo consistentie te creëren.

Casepagina Uit de analyse blijkt dat alle concurrenten zeker de klantvraag, de weg naar het resultaat en het resultaat zelf

verken in de casepagina’s. De cases worden ondersteund met grafieken, infographics, afbeeldingen, resultaten

en quotes van klanten.

19

Het voorstel is om de pagina in te leiden met een fullwidth header met daar een gerelateerde afbeelding van

de klant in. De afbeelding is deels transparant, want over de afbeelding is een counter te zien met 3 of 4

resultaten (afhankelijk van de case). De pagina’s kunnen vormgegeven worden in de huisstijl kleur van de klant.

De tekst bevat minimaal de klantvraag, strategie en het resultaat. Deze tekst kan worden aangevuld met

eventuele bijzonderheden of opmerkingen. De tekst wordt ondersteund met iconen zodat het ook fijn is voor

mobiele gebruikers om te begrijpen waar dat deel tekst over gaat. Daarnaast is verwerken we een uitgelicht

veld voor de quote van de klant over de case.

Om de link te leggen met de dienst kan er gekozen worden om o.a. woorden te hyperlinken. Maar als extra

kunnen we een uitgelicht blok ontwerpen waar staat ‘Meer over deze dienst?’ oid.

Call to action Uiteraard willen we met de cases potentiële klanten enthousiasmeren en informeren over de diensten die

Epurple aanbiedt. Eigenlijk alle concurrenten verwijzen met een simpele knop door naar hun contactformulier

dat niet verschilt van hun normale contactformulier. Alleen Adwise kiest ervoor om een speciale contactpagina

te gebruiken voor klanten die van de casepagina afkomen. Daarnaast gebruikt Adwise ook een wisselende tekst

per case.

Call to action 1: korte tekst/een zin die doorverwijst naar het offerte contactformulier

Call to action 2: in de landingspagina een ‘case’ toevoegen met het logo van Epurple en de tekst ‘Jouw case

hier?’ die doorverwijst naar het offerte contactformulier

Call to action 3: een knop ‘Dit wil ik ook’ oid onder de resultaten

20

Input

Teksten van specialisten, afbeeldingen van klanten, logo’s, afbeeldingen vormgegeven in Apple devices.

Mail aan collega’s voor input Beste collega’s,

Zoals jullie wellicht al weten ben ik momenteel bezig met het opzetten van casepagina’s voor Epurple. Ik heb vorige week een uitgebreid onderzoek gedaan

naar concurrenten: hoe doen zij het? Uit deze informatie kwam een voorstel voor de pagina’s en zal ik deze de komende week/weken werken aan de opzetjes

van elke pagina. (wireframes)

Uiteraard kan ik alle content niet alleen maken. Vandaar deze mail en morgen de bijhorende meeting. Ik heb het volgende van jullie nodig:

- Naam klant

- Wat wil de klant (klantvraag)

- Welke strategie hebben we gebruikt

- Welk resultaat hebben we bereikt

- Quote van de klant over de case/Epurple

- Resultaten in cijfers (mag kort en bondig) het idee is om deze cijfers ongeveer zo in te gaan zetten:

- Toelichting bij welke dienst(en) de case past. We gaan op de casepagina linken naar de relevante dienst

- Als er contact wordt gelegd met de klant, zou het fijn zijn als jullie kunnen vragen om hoge resolutie wallpapers, relevante afbeeldingen, video’s en logo’s.

Deze ga ik later verwerken in de casepagina’s.

Enkele voorbeelden van casepagina’s in een zelfde soort opzet: https://redonlinemarketing.nl/portfolio/oasis-parcs/ en

https://www.happyidiots.nl/cases/fatboy-2/

Is het voor jullie haalbaar om de input in week 9 (26 februari – 2 maart) af te hebben? Dan verwacht ik zeker mijn wireframes af te hebben en in die week, of

de week erop, te beginnen aan de realisatie van de pagina’s.

Morgen (dinsdag 13 februari) zitten we om 16:00 om dit nog live te bespreken!

Met vriendelijke groet,

Jeroen Fennema | Online Marketeer

EPURPLE B.V.

Edisonbaan 14C

3439MN Nieuwegein

E: jeroen.fennema@epurple.nl

T: +31 30 227 0594

www.epurple.nl

KVK: 58390308

BTW: NL853018315B01

21

Wireframes

22

23

24

Realisatie