Innovatie

Van heldere strategie naar aansprekend siteconcept in 4 stappen

0

De ontwikkeling van een (mobiele) site of app begint uiteraard met een strategiefase. Als deze online strategie staat, ga je aan de slag met het ontwikkelen van het concept. Deze creatieve fase is leuk, maar soms ook lastig. Want hoe kom je – samen met je collega’s en stakeholders – van een abstracte strategie naar een aansprekend en doeltreffend concept? In dit artikel gaan we in vogelvlucht door de verschillende tools en activiteiten die je daarbij helpen. Van ouderwets brainstormen tot superhip ‘group sketchen’.

Geen concept zonder heldere strategie

Zoals voor elk marketing- of communicatieproject geldt, valt of staat een goed concept bij een heldere strategie. Dit zijn de kaders van waaruit je het idee voor de site, intranet of app (vanaf nu voor het gemak: site) gaat ontwikkelen. Want als jouw organisatie geen duidelijke keuzes heeft gemaakt, is het ‘garbage in, garbage out’. Zonder een gedegen strategie kun je namelijk niet toetsen waar het aan bijdraagt binnen je organisatie en voor wie. Hoe leuk of goed je ideeën dan ook zijn, het blijft ‘los zand’.

Die strategie hoeft overigens geen enorm boekwerk te zijn. Wat je in ieder geval moet weten:

  • Bestaansreden en ambitie

    De bekende missie en visie: waarvoor is deze organisatie op aarde? Wat is de bestaansreden en wat is het gemeenschappelijke toekomstbeeld? Wat zijn de doelstellingen van de organisatie op de lange termijn? Hoe ziet het bedrijf er over vijf jaar uit?

  • Wie zijn de doelgroepen?

    Wat zijn de primaire en secundaire doelgroepen? En welke van deze doelgroepen zijn relevant voor dit communicatiemiddel cq. deze communicatieactiviteiten? Doelgroeponderzoek is daarbij essentieel: want hoe goed ken je deze doelgroepen nou echt? Denk aan marktonderzoek, interviews, enquêtes: hoe meer inzicht in kennis, houding, gedrag, motivaties en behoeften, hoe beter.

Siteconcept: hoe smaakt dat?

Wat is een concept? Een idee? Een grondgedachte van waaruit we werken? De meningen lopen erg uiteen. En toegegeven, ‘concept’ is ook best een vaag begrip. Wikipedia beschrijft het als volgt:

lamp“Een concept (van het Latijn concipere – conceptum: bijeen nemen, vatten, begrijpen), ook een begrip, is een cognitieve eenheid, namelijk de mentale voorstelling van een of meer ideeën die worden samengevat in een hogere klasse van gelijkaardige of verwante verschijnselen of abstracte relaties.”


En dat is natuurlijk nog steeds vrij abstract. Simpel gezegd is een concept een verhaal dat alle losse ideeën samenvoegt voor de activiteiten of middelen die je ontwikkelt. Floor en Van Raaij omschrijft het als ‘de creatieve vertaling van de propositie’. Kortom: waar de strategie antwoord geeft op de vraag ‘wat’: bepaalt het concept vooral het ‘hoe’ en ‘waarmee’.

Ik geloof dan ook dat een goed concept vooral bestaat uit een nauw samenspel tussen (content)strategie (wat gaan we vertellen?) en vorm (hoe gaan we dat vertellen?). Een sterk concept geeft focus aan het ontwikkelingstraject en gaat het verschil maken in de uiteindelijk gebruikservaring.

Concept voor je site ontwikkelen – in 4 stappen

Laten we aan de slag gaan. We hanteren vier fasen voor het ontwikkelen van het concept. Nadat deze fases zijn afgerond, ligt er een compleet pakket waarmee de design- en bouwfase kan worden gestart (steeds vaker in een iteratieve, Agile-aanpak, waarbij in sprints onderdelen worden ontworpen en gerealiseerd). Noot vooraf: er leiden meerdere wegen naar Rome. Met andere woorden, niet alle activiteiten en tools zijn noodzakelijk om in te zetten. Afhankelijk van de complexiteit van je site en (project)organisatie kun je meer of minder activiteiten inzetten.

Stap 1. Strategisch concept

Het strategisch concept omvat de basisuitgangspunten voor de site. Voor wie gaan we wat ontwerpen? En met welk doel? Tools die je hierbij kunt gebruiken:

Probleemstelling op basis van klantreis

Formuleer een gezamenlijke probleemstelling, zodat iedereen doordrongen is van het probleem dat je wilt gaan oplossen. Het kan daarbij zinvol zijn om de klantreis in kaart te brengen met customer journey-maps: daarbij visualiseer je de stappen van de reis, de touchpoints en interacties met jouw organisatie (en kanalen) en de emoties van de klant. Waar liggen de grootste uitdagingen in de huidige klantreis? Eerder schreef Robert van Nouhuys hier een uitgebreid artikel over. Op Pinterest vind je daarnaast interessante voorbeelden van customer journey maps.

Schermafbeelding 2013-06-21 om 13.02.13

Gezamenlijke visie op project

Creëer een gezamenlijke beeld op (online) marketing en communicatie. Welke trends en visies spreken aan? Laat je inspireren door holistische visies als Service Design of Design Thinking dat – kort door de bocht – gericht is op het ontwerpen van een dienstverlening waarin de volledige klantreis centraal staat (in plaats van losse diensten en producten).

designthinking

Of, wat concreter voor je site of intranet, kijk naar toptaakmanagement van Gerry McGovern, dat er vanuit gaat dat slechts een kleine set aan taken op je site het overgrote deel van de business waarde oplevert.

Laat je inspireren door de verschillende manieren waarop je het ontwerpproces kunt inrichten met de Design Decision Styles van Jared Spool. Of kijk naar Lean UX, dat gericht is op het sneller ontwerpen en toetsen van ideeën op basis van alle aannames die aanwezig zijn bij de verschillende stakeholders.

Road map

Stel een roadmap op waarin je vastlegt welke activiteiten en features wanneer gepland zijn. Wordt hierin niet te specifiek – exacte functionaliteiten en onderdelen werk je later uit. Een roadmap is vooral gericht op het aanbrengen van prioriteit op hoofdlijnen: deze road map geeft richting aan je projectplanning.

Persona’s

Ontwikkel persona’s waarmee je de doelgroep letterlijk en figuurlijk een gezicht geeft. Beschrijf wie ze zijn, wat ze verwachten en waarom. Myer-Briggs Type Indicator (MBTI)-indelingen kunnen daarbij nuttig zijn.

 User stories

userstoryHiermee beschrijven we welke handelingen je klanten in welke context (aanleiding, behoefte, devices) op je website, intranet of app willen uitvoeren. Denk aan: als aspirant-cursist wil ik weten welke opleidingen in mijn stad aangeboden worden, zodat ik mij goed kan oriënteren. Doorgaans levert een user storie-sessie of workshop een flinke lijst aan concrete handelingen op. Prioriteer deze lijst vervolgens op basis van je prioriteit in doelgroepen en doelstellingen. Meer over user stories als strategische ontwerptool (Engels).

Stap 2. Design-principes

Design-principes zijn de regels die je hanteert bij het ontwerpen en ontwikkelen van de site. Ze bepalen de context waarbinnen je ontwerpt. En geven een duidelijk kader waarin de belangrijkste wensen en behoeften van gebruikers, organisatie en techniek vastgelegd worden. Daarmee is de gewenste gebruikerservaring voor iedereen helder. Superhandig en inspirerend om mee te ontwerpen én designs te toetsen. Concept7 en mijn collega Gertjan Melgers schreven hier eerder al over.

design principes

Tools

Tools die je hierbij kunt gebruiken:

mental_notes_cards

  • Mind maps: Een open deur, maar heel effectief: ga mind-mappen. Brainstormen werkt het beste door het direct te visualiseren. Pak pennen en stiften en creeer mind-maps.
  • Mental notes: Een Engelstalige kaartenset waarop inzichten staan beschreven van het menselijk gedrag en suggesties hoe je dit kunt toepassen op jouw online communicatie. Ideaal voor een brainstorm.
  • Method cards: Een min of meer vergelijkbare kaartenset, maar dan van de wereldberoemde design agency IDEO.

Stap 3. Interaction & UX design

Nu wordt het concreter: we gaan schetsen en ontwerpen. De deliverables van deze stap zijn doorgaans wireframes (klikmodel of interactieontwerp), taxonomieën en structuren. Essentieel om het uitgewerkte concept te toetsen en als basis te gebruiken voor design en realisatie. Maar welke stappen kun je inzetten voorafgaand aan het maken van de wireframes? Tools die je hierbij kunt gebruiken:

Collaborative design (Design studios, sketchboarding & Group Sketching)

Design studios, sketch boarding en Group sketching zijn technieken waarbij je met een groep mensen zoveel mogelijk schetsvarianten maakt van hoe (een deel van) de site of applicatie eruit moet komen te zien – met markers op een whiteboard of pen en (een groot stuk) papier. Daarbij kan het handig zijn om varianten te schetsen op basis van het MBTI-model. Henk Wijnholds heeft hier handige templates voor gemaakt.

Het voordeel van dit soort schetssessies is dat je niet verzand in de details van een wireframe, maar op hoog tempo ideeën genereert van hoe de site de taak moet ondersteunen. De detailuitwerking – op basis van de beste ideeën en oplossingen – volgt dan later.

Story boards

storyboardOorspronkelijk uit de film- en televisiewereld, maar voor sommige projecten heel handig: story boards. Voor (campagne)sites waarin de klant een (min of meer) lineaire reis doorloopt, kan het uitwerken van het verhaal in een story board heel verhelderend werken. Een simpele tekening met beschrijving per story point geeft inzicht in de logica van het verhaal. Ook ideaal als aanvulling op de customer journeys: wat doet je klant in welke fase? En hoe ziet dat scherm eruit?

Stap 4. Art direction

De wireframes zijn uitgewerkt: we weten hoe de site gaat functioneren, wat de ideale structuur is en welke content waar staat. We sluiten de conceptfase af met de art direction-fase waarin we de visuele stijl voor de site bepalen. Tools die je hierbij kunt gebruiken:

Inspiratie!

Laat je inspireren door andere sites. Er zijn talloze websites met overzichten van inspirerende sites. Een selectie van mijn persoonlijke favorieten:

Mood boards

De ouderwetse collage is ideaal om ideeën op te doen voor het design van de site (naast zaken als huisstijl – maar dat spreekt voor zich). Tom Osborne maakt in zijn artikel ‘Mood Boards: Dressing For Different Occasions‘ een interessant onderscheid tussen inspiration boards, style boards en concept boards.

moodboard

Style tiles

Style tiles, bedacht door Samantha Warren (designer bij Twitter), spelen in op de behoefte om in de art direction-fase iets concreter te ontwerpen dan een mood board, maar niet zo concreet dat je de pagina’s volledig gaat uitwerken (dat volgt later). Met een style tile bepaal je in een vierkant vlak (vandaar ‘tile’) het kleurenpalet, de typografie, de ontwerppatronen en de vormtaal.

style tile 2

Tot slot: samenwerking sleutel tot succes

De beschreven stappen en tools helpen je bij de totstandkoming van een goed concept. Daarbij is samenwerken met de verschillende collega’s en stakeholders essentieel: een goed concept ontstaat door samenwerken met verschillende visies en disciplines. Zodat alle facetten worden meegenomen. Niet voor niets zie je dat de meeste tools en activiteiten gericht zijn op interactieve werkvormen.

Floor van Riet schreef dit artikel ten tijde van zijn dienstverband bij Sabel Communicatie. Mocht je naar aanleiding van de ideeën en kennis in dit artikel meer willen weten, dan beantwoordt Sabel Communicatie graag je vragen.