UX-fase - Expertise benutten in een creatief proces

De eerste fase in onze werkwijze noemen we bij Zicht de UX-fase. UX staat voor User Experience en vormt de kern van ons creatieve proces.

De eerste fase in onze werkwijze noemen we bij Zicht de UX-fase. UX staat voor User Experience en vormt de kern van ons creatieve proces.

Een visie vormen en concreet maken

De UX-fase levert het volgende op:

  • Een visie op de User Experience (content, structuur, design en techniek)
  • Het concretiseren van de UX-visie tot schermen/interactie
  • Een bruikbare basis voor developers om de website mee te bouwen
  • De contouren van de nieuwe website zichtbaar maken

User Experience zien we als het samenspel van content, structuur, design en techniek om een gebruikservaring te faciliteren.

Het vinden van relevantie en waarde

Door de User Experience (gebruikservaring) centraal te stellen in onze werkwijze, kunnen we vanuit een breed en multidisciplinair perspectief gericht naar de vraag kijken. In de UX-fase komen de disciplines strategie, UX-design en UI-/webdesign als UX-team bij elkaar. De focus op het ontwikkelen van een User Experience, dwingt ons om naar een win-win situatie te zoeken waarbij zowel de belangen van de organisatie als de doelgroep een plek vinden. Dit vinden wij een voorwaarde om tot een relevante interactie te komen die waardevol is voor beide partijen.

Het vinden van relevantie en waarde

De stappen van de UX-fase

We nemen onze opdrachtgevers mee in een open werkproces waarin ze meekijken, meepraten en meedoen. Op deze manier benutten we elkaars expertise en komen we tot een goed maatwerkproduct. Twee werksessies spelen hierin een belangrijke rol. De UX-fase kent een aantal stappen die we op weekniveau hebben ingedeeld.

Week 1 - Context begrijpen

De UX-fase start met een voorbereiding. Om tijdens de werksessies en in ons ontwerpproces goed met de opdrachtgever mee te denken, is het voor ons noodzakelijk om de context van de vraag te begrijpen. Die context leren we kennen door middel van deskresearch. Bruikbare documenten zijn bijvoorbeeld het jaarverslag, het marketing- en communicatieplan, resultaten van onderzoeken, de huisstijlgids en de webstatistieken.

Aanvullend op het deskresearch kunnen we tijdens de voorbereiding fieldresearch doen. Dit zet je in wanneer er weinig bekend is over de doelgroep of gebruiker. Onderstaand de mogelijkheden:

  • 10 interviews met de doelgroep om de doelgroep beter in beeld te krijgen (behoeften, motivaties, imago). 
  • 10 interviews met stakeholders om de (interne) behoeften en belangen in beeld te krijgen.
  • 2 - 4 weken opnames laten maken van het huidige website gebruik via een monitoring-tool zoals Hotjar.
Week 1 - Context begrijpen

Week 2 - Inzichten delen

In onze eerste werksessie gaan we de informatie over de organisatie en de doelgroep met behulp van de opdrachtgever compleet maken. We hebben al veel op een rijtje gezet tijdens de voorbereiding, maar vullen dit tijdens deze sessie aan. Hier gaan we ook samen focus aanbrengen in het project door te bepalen wat belangrijk is voor de organisatie of doelgroep. Sessie 1 bevat de volgende onderdelen:

  • Identiteit - Het duiden van de identiteit, merk(waarden) en positionering.
  • Doelen - Het vertalen van de marketing- en communicatiedoelen naar conversiedoelen en klikpaden.
  • Gebruikers - Doelgroepen definiëren en in volgorde van belangrijkheid zetten. Kennis bundelen over de doelgroep aan de hand van persona’s.
  • Klantreis - De huidige klantreis van de belangrijkste 1-3 persona’s in kaart brengen en knelpunten/ kansen identificeren. Beeld schetsen van gewenste klantreis.
Week 2 - Inzichten delen

Week 3 & 4 - Concretiseren

In de tweede werksessie gaan we samen met de opdrachtgever mogelijke oplossingen verkennen. De te maken keuzes maken we visueel zodat het reactie oproept en dwingt om scherpe keuzes te maken. Na deze werksessie is er nog contact om onderdelen aan te vullen en lopen de werkzaamheden vloeiend over in het uitwerken van de wireframes. Sessie 2 bevat de volgende onderdelen:

  • Propositie - Op basis van sessie 1 hebben we een propositie gemaakt. Deze propositie vullen we aan.
  • Structuur - We stellen een nieuwe structuur voor die we aanvullen. We verkennen de indeling voor de navigatie.
  • Templates - We stellen de te maken templates en vullen aan indien nodig. Templates zijn de pagina-typen die gemaakt moeten worden tijdens de realisatiefase. Voor de belangrijkste templates bepalen we globaal de inhoud op het niveau van een priority guide of block frame.
Week 3 & 4 - Concretiseren

Week 5 & 6 - Ontwerpen

In de werksessies hebben we kennis opgehaald, een koers uitgezet en de conceptuele richting bepaald. In het ontwerpproces wekken we dit tot leven in een wireframe en visual design. Onze focus ligt hier op het opleveren van de vastgestelde deliverables van de UX-fase. Het ontwerpproces bevat de volgende onderdelen:

  • Wireframes - De wireframes geven inzicht in hoe de website straks gaat werken en zijn bepalend voor de structuur en functionaliteiten. Het is tevens input voor het visual design.
  • Visual design briefing - De visual designer voordat het visual design start, dieper ingaan op ‘vorm’. In dit overleg wordt de huisstijl toegelicht en ideeën uitgewisseld over het visual design op basis van goede en slechte voorbeelden.
  • Visual design - Het visual design geeft een goed beeld van hoe de website er straks uitziet. Hier komen inhoud, structuur, interactie én vorm samen. We richten ons op 3 tot 5 schermen die we zowel voor mobile als desktop uitwerken.  Lees meer over onze visie op design.
Week 5 & 6 - Ontwerpen

Deliverables

  • Een structuur gevat in een sitemap en voorstel navigatie.
  • Overzicht en korte beschrijving van de benodigde templates.
  • De belangrijkste templates als wireframes (bijvoorbeeld de top 3 user flows).
  • Een selectie van de belangrijkste wire-frames als visual design (3 tot 5 templates).
  • Design gevuld met teksten en beelden die onze visie op de content representeren.
  • De onderdelen van het visual design als losse componenten in een style guide.
  • Een backlog in concept als basis voor de definitieve backlog.
  • Ingevulde modellen en notities uit onze werksessies (denk aan conversiedoelen, klantreizen, productpropositie, user flows).

Indien wenselijk, vullen we de bovenstaande lijst aan met de onderstaande (optionele) deliverables:

  • Content-formats voor het redactieteam die houvast en inspiratie bieden.
  • Aanpak voor content en contentmigratie.
  • Extra templates als visual design.
  • Een design system als bibliotheek en handboek van de online componenten (de uitgebreide versie van de meer pragmatische style guide).
  • Een presentatie van de structuur, visual design en prototype aan interne stakeholders of achterban.
  • Een klikbaar prototype t.b.v. bijvoorbeeld een concepttest met gebruikers.
  • Een concepttest met gebruikers inclusief brainstorm bevindingen/ optimalisaties. Lees meer over onderzoek bij UX-design.
  • Voorstellen voor mogelijke optimalisaties via AB-tests.

Het UX-canvas als hulpmiddel

In de UX-fase maken we gebruik van ons UX-canvas. Dit canvas staat in de online tool Miro en pakken we tijdens offline en online sessies erbij. Iedere stap kent een aantal deelopdrachten en modellen die we samen invullen. Dit UX-canvas faciliteert een transparante en open samenwerking waarin we snel ideeën kunnen visualiseren. We merken dat zo’n manier van werken het heel laagdrempelig maakt om als opdrachtgever een mening te vormen en direct mee te sturen in het project.

Onderstaand een schermafbeelding van het UX-canvas in Miro.

Dit proces versnellen met de UX-sprint?

De UX-fase die we standaard aanbieden is een traject dat zo’n 4 - 8 weken duurt. Het is mogelijk om dit proces te versnellen en de fase in 3 weken te doorlopen. Deze versnelde variant noemen we de UX-sprintLees meer over de UX-sprint.