De nieuwe Humo.be: the making of

52
NIEUWE WEBSITE NODIG ?
  • date post

    21-Oct-2014
  • Category

    Documents

  • view

    3.153
  • download

    0

description

Het ontstaansproces van de nieuwe Humo.be website.Tegelijkertijd het ontwikkelproces bij Netlash-bSeen.

Transcript of De nieuwe Humo.be: the making of

Page 1: De nieuwe Humo.be: the making of

NIEUWE WEBSITE NODIG ?

Page 2: De nieuwe Humo.be: the making of
Page 3: De nieuwe Humo.be: the making of
Page 4: De nieuwe Humo.be: the making of

‣ Merkwaarde humo.be versterken

‣ Meer omzet genereren uit advertenties

‣ Positieve invloed uitoefenen op verkoop tijdschriften

Doel?

Page 5: De nieuwe Humo.be: the making of

We willen meer bezoekers die meerpagina’s bekijken en vaker terugkeren.

Page 6: De nieuwe Humo.be: the making of

WIJ KUNNENU HELPEN !

Page 7: De nieuwe Humo.be: the making of

VISIE

Page 8: De nieuwe Humo.be: the making of
Page 9: De nieuwe Humo.be: the making of

Netlash-bSeen streeft naar een geïntegreerde aanpak gebaseerd op 5 peilers: strategy, build, traffic, optimize & engage.

We willen goede websites bouwen, websites voorzien van kwaliteitstrafiek en websites optimaliseren voor conversie op basis van web analytics en het gebruik van social media.

Page 10: De nieuwe Humo.be: the making of
Page 11: De nieuwe Humo.be: the making of

Opdracht: informatie-architectuur & design

voor humo.be.

Page 12: De nieuwe Humo.be: the making of
Page 13: De nieuwe Humo.be: the making of

Aanpak

1. Analyse van meetbare doelstellingen

2. Webstrategie

3. Informatie-architectuur

4. Grafisch ontwerp

5. Aanleveren html/css templates

Page 14: De nieuwe Humo.be: the making of

ANALYSE

Page 15: De nieuwe Humo.be: the making of

Uitgangspunt:

We willen meer bezoekers die meer pagina’s bekijken en vaker terugkeren.

Page 16: De nieuwe Humo.be: the making of

‣ meer bezoekers

‣ meer pageviews

‣ meer bezoeken

Meetbare doelen

Page 17: De nieuwe Humo.be: the making of

WEBSTRATEGIE

Page 18: De nieuwe Humo.be: the making of

Meer bezoekers

1. SEO

2. Integratie met grote sociale netwerken

3. Bezoekers omvormen tot Humo-ambassadeurs

4. Sappige info makkelijker verspreidbaar maken

Page 19: De nieuwe Humo.be: the making of

Meer pageviews

1. Gebruiksvriendelijkheid verbeteren

2. Relevantie verhogen

3. Interactie verhogen

4. Inhoud uitbreiden met user-generated content

Page 20: De nieuwe Humo.be: the making of

Meer bezoeken

1. Communitygevoel & betrokkenheid

2. Interactie tussen bezoekers

3. Relevante én gepersonaliseerde inhoud

4. Updates via e-mail

Page 21: De nieuwe Humo.be: the making of

Mooi meegenomen ...

1. Leuke input voor magazine

2. Meer inhoud op de website

3. Minder werk voor de redactie

Page 22: De nieuwe Humo.be: the making of

WE MAKEN EEN CONCEPT

Page 23: De nieuwe Humo.be: the making of

In kaart brengen: mindmapping.

Page 24: De nieuwe Humo.be: the making of
Page 25: De nieuwe Humo.be: the making of

Informatie-architectuur

Interactief prototype (Klikbare wireframes!)

‣ Bezoeker (usability, geloofwaardigheid & user experience)

‣ Organisatie (doelstellingen)

‣ Ontwikkeling (functioneel ontwerp, technische haalbaarheid)

Page 26: De nieuwe Humo.be: the making of

Iteratief proces.

Page 27: De nieuwe Humo.be: the making of
Page 28: De nieuwe Humo.be: the making of
Page 29: De nieuwe Humo.be: the making of
Page 30: De nieuwe Humo.be: the making of
Page 31: De nieuwe Humo.be: the making of

DESIGN

Page 32: De nieuwe Humo.be: the making of

Vooronderzoek

‣ typografie

‣ huisstijlelementen

‣ schetsen

Page 33: De nieuwe Humo.be: the making of

Starten met het werkpaard: overzichtspagina.(Nooit beginnen met de homepagina...)

Page 34: De nieuwe Humo.be: the making of
Page 35: De nieuwe Humo.be: the making of

Aangevuld met duiding - wat is de consistente vormtaal?

Page 36: De nieuwe Humo.be: the making of
Page 37: De nieuwe Humo.be: the making of
Page 38: De nieuwe Humo.be: the making of

Iteratief proces.

Page 39: De nieuwe Humo.be: the making of

‣ na x aantal iteraties: finaal ‘werkpaard’

‣ goedkeuring ‘werkpaard’

‣ x aantal afgeleide pagina’s ontworpen

Page 40: De nieuwe Humo.be: the making of
Page 41: De nieuwe Humo.be: the making of
Page 42: De nieuwe Humo.be: the making of
Page 43: De nieuwe Humo.be: the making of

Huisstijlgids voor online gebruik als

basis voor front-end en development.

Page 44: De nieuwe Humo.be: the making of
Page 45: De nieuwe Humo.be: the making of
Page 46: De nieuwe Humo.be: the making of
Page 47: De nieuwe Humo.be: the making of

FRONT-END

Page 48: De nieuwe Humo.be: the making of
Page 49: De nieuwe Humo.be: the making of

Front-end ontwikkeling van de verschillende templates en onderdelen als basis voor implementatie.

(Implementatie werd door het Humo-team uitgevoerd.)

Page 50: De nieuwe Humo.be: the making of

HET PROJECT TEAM

‣ Karolien

‣ Thomas

‣ Bram

‣ Stephen

‣ Thomas

Page 51: De nieuwe Humo.be: the making of

‣ Meer omzet genereren uit advertenties

‣ Betrokken bezoekers worden brand ambassadors

‣ Versterking van merkwaarde humo.be

‣ Positieve invloed op verkoop tijdschriften

Waar we voor gaan

Page 52: De nieuwe Humo.be: the making of

Meer weten?

Contacteer ons voor een vrijblijvende afspraak.

Dan bespreken we je plannen bij een kop koffie.