Een nieuwe website ontwerpen, hoe pak je dat aan?

Fase 1: Hear

Dit is de fase waarin we ons laten inspireren.

Het speelveld in kaart

Vanuit een eerste gezamenlijke sessie brengen wehet speelveld in kaart. We gaan cornervlaggen plaatsen. Als team wil je weten wanneer de bal uit is. Wat is de markt, wie is de organisatie en wat zijn de bepalende factoren waarmee we rekening moeten gaan houden? Stel: de techniek is bij de website van bijzonder groot belang. Dan weten we dat de bal uit is op het moment dat we voorstellen om een nieuw CMS te gaan gebruiken. Daarnaast verzamel we alle reeds bestaande relevante documentatie, zoals webanalytics, rapportages en gehouden klantonderzoeken.

De doelgroep leren kennen

We willen alles alles weten over de doelgroep(en) van de website. Wie zijn deze mensen? De bestaande documentatie vormt hiervoor de basis. Dit vullen we bijvoorbeeld aan met observaties en interviews. De uitkomsten geven inzichten en inspiratie. We krijgen een goede indruk waar de behoeftes van de doelgroepen liggen. Doelgroepen hebben eigen, maar ook gemeenschappelijke belangen. Als organisatie kies je zelf met welke belangen je rekening gaat houden.

Persona’s ontwikkelen

Vanuit de verkregen kennis en inzichten ontwikkelen kunnen we persona’s ontwikkelen. We gaan uit van vier persona’s, ieder gebaseerd op één van de vier MBTI-typeringen. We brengen de persona’s tot leven door ze een naam, een gezicht en een identiteit mee te geven. De persona’s staan centraal voor de doelgroep; we toetsen er gedurende het proces voortdurend aan.

Aanleidingen in de vorm van user stories

User stories ontstaan vanuit de observaties. Deze beschrijven de aanleiding van een persona om met je website te maken te krijgen. We richten ons hierbij vooral op de stories die het vaakst worden gedaan en waarmee je de grootste impact creëert (80/20 regel).

Design principles bepalen

In een multidisciplinaire sessie bepalen we de design principles en businessdoelstellingen (als die er nog niet zijn). Deze werken als inspiratiebron en ze vormen later in het proces de kapstok waaraan we ieder idee kunnen toetsen. De user stories en de persona’s bieden een framework waarbinnen we ideeën kunnen genereren.

Fase 2: Create

Het framework, bestaande uit de persona’s en aanleidingen, bevat onmisbare input voor de create fase. Dit is de fase waarin we vanuit heel veel ideeën toewerken naar prototypes.

Ideeën genereren

We starten deze fase met een multidisciplinaire sessie waarin we vanuit het framework heel veel ideeën gaan generen. We gaan voor minimaal 100 ideeën, gekke ideeën moeten. We maken gebruik van schetspapier en plakken alle ideeën op een sketchboard; een groot bruin vel waarop het framework staat getekend. Door de ideeën visueel te maken inspireren we elkaar tijdens de sessie. Download het schetspapier en ga ook zelf lekker aan de slag.

Ideeën prioriteren

Deze stap is niet zo leuk… tenminste, zo wordt het vaak ervaren. Want eerst kon alles (ideeën genereren) en nu kan heel veel niet meer. Ideeën prioriteren is echter van wezenlijk belang. We groeperen de verschillende ideeën en toetsen ze aan de design principles en business doelstellingen. Hiermee brengen we alle ideeën terug naar een positieve mix tussen gebruiker, organisatie en functionaliteit. Dit is een goed moment om de technische mensen aan te laten schuiven. Je voorkomt dan dat je later in het proces tegen problemen aanloopt. Binnen deze fase ligt ook al een stap naar verbeteren. Functionaliteiten die niet direct doorgevoerd worden kunnen we eventueel later doorvoeren.

Prototypes maken en testen

Vanuit de gekozen ideeën starten we met het maken van prototypes. We beginnen klein. We tekenen op papier eerst één scherm uit en verzamelen feedback van de klant en de websitebezoekers. We werken vervolgens op dezelfde manier een aantal andere belangrijke pagina’s uit. Het concept van de vernieuwde website staat nu en we kunnen een klikbaar prototype uitwerken. Je kunt dan alvast door de website klikken en je krijgt een goed beeld van hoe de site straks gaat werken. Hoewel het prototype nog niet is voorzien van een grafische vormgeving is het al wel geschikt voor een gebruikerstest. Wijzigingen die uit de test komen voeren we door. Op deze manier werken we stap voor stap naar een definitief prototype toe.

Grafisch ontwerp

Het prototype is een functionele basis. Deze vullen we aan met een grafisch ontwerp. Een grafisch ontwerp moet de bezoeker direct een positief gevoel geven en motiveren om door te klikken. Met behulp van de Gestaltprincipes zorgt onze designer dat de bezoeker de website als overzichtelijk en prettig ervaart. We zorgen ervoor dat het grafisch ontwerp aansluit bij de huisstijl en het imago van de organisatie. We kunnen het design testen met eyetracking. Door te testen komen we er bijvoorbeeld achter of de bezoeker alle belangrijke zaken op de website wel ziet.

Resultaat

Het resultaat van de create-fase is een werkend prototype, waarbij sommige pagina’s zijn voorzien van een grafisch ontwerp.

Fase 3: Deliver

Het prototype en het grafisch ontwerp zijn de basis voor de deliver-fase. In deze fase maken we het product geschikt om over te dragen aan de technische ontwikkelaars. Zij zullen de website voorzien van een werkend Content Management Systeem (al dan niet open source) en de eventuele koppelingen met backoffice-pakketten realiseren.

Wireframes

Het werkende prototype is de basis voor het maken van de wireframes. Alle interacties voor de volledige website worden tot in detail beschreven, zodat de ontwikkelaars precies weten wat er moet gebeuren. We voegen de 3d sitemap toe, zodat er direct inzicht is in de omvang van het project. De wireframes dienen vaak als een visueel functioneel ontwerp. Als we opmerkingen toevoegen aan de wireframes, hoeven we in principe geen functioneel ontwerp als apart document meer te schrijven. Dit bespaart veel tijd en moeite. Bovendien kan de technische partij op basis van de wireframes een goede offerte maken in doorlooptijd en kosten. Ze weten immers precies wat ze moeten maken en hoe het moet gaan werken.

Hoe nu verder?

Een laatste sleutel voordat de programmeurs aan de slag kunnen is het maken van de HTML. Alle wireframes worden voorzien van het grafisch ontwerp. Hiermee komt ook de volledige ‘front-end’ van de website vast te liggen. Dit ligt in principe bij Concept7. Echter, ook veel technische partijen hebben mensen in dienst die de HTML kunnen verzorgen. In een overdrachtsdocument en een persoonlijk gesprek worden de wireframes, de HTML en het prototype overgeleverd aan de technische partij. Zij kunnen aan de slag met het maken van het technisch ontwerp en de website verder realiseren.

Controle op input versus output

Na oplevering door de technische partij is een controle op input versus output gewenst. De juiste content kan worden geplaatst en in overleg kan de nieuwe site worden gelanceerd. Bedenk wel dat het verbeteren van je website direct begint!

Ook leuk om te lezen

Bezoekersaantallen verhoogd dankzij nieuwe website FC Groningen

Voor een ontwerptraject met voetbalclub FC Groningen zijn we als Groningers natuurlijk wel te porren. Met veel plezier ontwikkelden we het concept en interactieontwerp …

• Nieuwe website Alabastine legt nadruk op helpen van de klant
• Stijging klanttevredenheid na lancering nieuwe website Menzis

• Dit bericht is onderdeel van het volgende thema:
• Design 44