Interactief
Herontwerp Flexis.

"De juiste weg naar werk begint hier. Een methodisch herontwerp van de digitale voordeur van Flexisgroup."

Gateway Design UX Research Brand Identity Interactie-ontwerp

Docentweergave (Criteria & Verantwoording)

Zet deze modus aan om de beoordelingscriteria in de tekst te highlighten en mijn verantwoording per criterium te zien.

BC 8.1.2

Je zet relevante theorie over mensgerichte ontwerpmethodes in om jouw keuzes te onderbouwen.

BC 8.2.1

Je creëert met behulp van creatieve technieken ideeën voor interactieve digitale producten of diensten en onderbouwt welke het best aansluiten bij de ontwerpeisen en de praktijkkaders.

BC 8.2.2

Je realiseert (deel)producten die aansluiten bij de/het ontwerpdoel(en).

BC 8.4.1

Je bereidt zelfstandig methodische ontwerpactiviteiten voor die je passend bij de situatie zelfstandig óf met andere belanghebbenden kunt uitvoeren.

BC 8.4.2

Je verantwoordt de gemaakte keuzes en resultaten en communiceert dit pro-actief en helder met de belanghebbenden én begeleiders.

De Opgave vanuit Flexis.

Tijdens mijn stage bij Like Bamboo liep de organisatie tegen een positioneringsprobleem aan bij Flexis Groep. Hun portaal moest worden gesplitst naar twee heel verschillende bedrijfsonderdelen: Re-integratie en Recruitment.

Er lag al een waardevolle eerste verkenning van een collega voor deze "digitale gateway". Maar mijn begeleidend ontwerper vond dat dit scherm de moderne merkidentiteit en professionaliteit niet goed overbracht. Aan mij werd de taak gegeven om het scherm niet alleen visueel strak te trekken in lijn met de nieuwste branding, maar het ook daadwerkelijk interactief op te bouwen.

Plan van aanpak.BC 8.4.1 BC 8.1.2

Dit was geen langdurig onderzoekstraject, maar ik wilde het toch methodisch aanpakken. Daarvoor gebruikte ik de ontwerponderzoekscyclus van Erika Hall ('Just Enough Research'). Die helpt je om in overzichtelijke stappen onderbouwde data te verzamelen voor ontwerpbeslissingen.

Voordat we met wilde ideeën aan de slag gingen (een bewuste stap in deze methode), bakenden we de structuur en betrokkenen als volgt af:

  • Interne Stakeholder (Mijn begeleidend ontwerper): Zij begeleidde de opdracht. Ze had gesprekken gehad over wat het bedrijf wilde. Doordat we stappen regelmatig doorspraken, zagen we niks over het hoofd en kwamen we tot een ontwerp dat aansloot bij wat de klant nodig had.
  • De Opdrachtgever (Klant): De directie van Flexis. Zij vonden dat hun bedrijf te weinig identiteit had in de B2B-tak. Het moest dus professioneler worden.
  • De Eindgebruikers (Doelgroep): Een dubbelrol. Aan de ene kant mensen die op een laagdrempelige manier willen re-integreren. Aan de andere kant bedrijven die een betrouwbare recruitmentpartner zoeken.
  • De Systematiek (Erika Hall Ontwerpcyclus): Het traject bestond volgens de methode uit de volgende zes fases:
    • 1. Define the Goal: De cyclus begint met het stellen van de goede vraag en weten wat je precies wil beantwoorden.
    • 2. Select the Approach: De meest passende methoden selecteren die bij de context en mogelijkheden passen.
    • 3. Plan, Prepare and Design: De opzet en uitvoering van de gekozen methoden ontwerpen en passend maken voor de specifieke context.
    • 4. Execute and Collect/Create Results: De ontworpen aanpak uitvoeren, resultaten verzamelen en ontwerpalternatieven tastbaar maken.
    • 5. Making Sense of the Results: De verkregen resultaten en ontwerpen omzetten naar inzichten: patronen, analyses en bewustwording.
    • 6. Consider Next Steps: De resultaten in relatie brengen met de vooraf gestelde vraag en bepalen wat de volgende stappen zijn.

Het startpunt.BC 8.4.1

Vroege iteratie collega

Wat mis ging met de eerdere versie.

We doken niet meteen een design-bestand in. Ik keek eerst goed naar de vorige webversie. Daar kwamen drie dingen uit die echt niet goed liepen:

  • Te verwarrend aan de voorkant: Je zag meteen twee acties die allebei paars waren (#814C97). Je snapte niet direct wat de routes van elkaar onderscheidde. Best frustrerend.
  • Weinig overeenkomst met het merk: De afwerkhoeken waren heel zacht (radius van 10px). Maar de organisatie gebruikt online veel strakkere afwerkingen. Dat mismatch wekte minder vertrouwen.
  • Vlakke copy: Doordat ze probeerden zowel re-integratie als recruitment af te dekken, sprak de copy een soort middenweg uit. Maar daardoor raakte het uiteindelijk geen van beide doelgroepen echt.

HET DOEL (DEFINING THE GOAL):

"Hoe ontwerpen we een digitale gateway die de twee hoofddiensten (Re-integratie en Recruitment) onmiskenbaar van elkaar scheidt in de juiste en exacte nieuwe merkidentiteit, zodat de bezoeker intuïtief en efficiënt de juiste route kiest?"

Methodiek selecteren & voorbereiden.

Om de ontwerpvraag te beantwoorden moest ik de juiste methoden kiezen (Select the approach). Om subjectieve smaak uit het onderzoek te halen, koos ik code-scraping (via Firecrawl) om de feitelijke stijlkaders van de losse branches in kaart te brengen. Daarnaast koos ik de Crazy 8 methode om die feiten later om te zetten naar brede oplossingen.

Ter voorbereiding (Plan, Prepare & Design the activity) definieerden we exact naar welke waarden de scraper moest zoeken om de merkidentiteit objectief boven water te halen. We focusten op drie fundamentele pijlers van hun digital branding:

  • Typografie: Welke font-families worden gebruikt voor headers vs. bodytekst? Welke font-groottes op schermen (bijv. minimaal 16px) en font-weights bepalen de hiërarchie?
  • Kleursysteem: Wat is het primaire en secundaire kleurenpalet in harde HEX-codes? Waar worden accentkleuren precies voor ingezet?
  • Vormtaal & Grids: Wat zijn de vaste regels voor component-afwerking, zoals border-radius (bijv. strak of afgerond), paddings en structurele grids?

In essentie stelden we de scraping-parameters zo in dat we de ongeschreven regels van hun design system konden uitlezen. Met deze specifieke data-punten wisten we zeker dat we straks gericht konden focussen en ontwerpen.

Uitvoeren data-extractieBC 8.4.1 via Firecrawl.

Aan de slag met de uitvoering (Execute). Ik las de actuele lay-outcodes uit van de live-websites van Recruitment en Re-integratie via Firecrawl.

Dit legde direct bloot welke elementen we konden overnemen uit de vroege iteratie en welke nog aangescherpt moesten worden. Je keek naar de harde data en de regeltjes uit de Flexis codebase.

Scrape Re-integratie
Fig 1. Data-extractie Re-integratie (pakket: licht thema, teal #7BC7CB, 0px radius).
Scrape Recruitment
Fig 2. Data-extractie Recruitment (let op: de paarse kleur uit de scrape wordt verplaatst naar de groepsidentiteit, de klant eiste specifieke oranje accenten voor de nieuwe recruitment branch).

Analyseren (Sensemaking): Wat ik in de code vond, vergeleek ik met de vroege iteratie van mijn collega. De gaten (gaps) die ik daartussen vond, vertaalde ik naar vier vaste kaders.

1. KLEUREN EN WEG WIJZEN

Oud: Alles zat vast op het standaard bedrijfspaars (#814C97).
Nieuw: Elke kant moest echt een eigen kleur krijgen: Teal (#7BC7CB) voor Re-integratie en Oranje voor Recruitment.

2. DE AFWERKING

Oud: Veel ronde, inconsistente vlakken en lijnen (vaak 10px).
Nieuw: Dat moest strakker. In de HTML was de styling afgewerkt op 0px radius (Re-integratie) en 2px bij Recruitment.

3. LETTERTYPES

Oud: Vrij lompe letters, de hero-kop stond op bijna 64px.
Nieuw: Die verving ik door de rustigere variant van Allotrope, afgeremd op maximaal 52px (op basis van hun huidige systeem).

4. RICHTING DE MENSEN

Oud: Het tekstverhaal zweefde als één grote stroom.
Nieuw: Twee kanalen apart behandeld en direct gesplitst: eentje voor bedrijven en eentje voor re-integratie. Twee doelgroepen, twee verhalen.

Van regel naar concept.BC 8.2.1

Ik vertaalde de gaps naar harde eisen. Dit Program of Requirements was het resultaat van mijn eerste sensemaking. De checklist was duidelijk: gescheiden merkkleuren, strakke hoeken, doeltreffende tekst en de vertrouwde typografie. Met deze regels startte ik een creatieve sprint.

Sensemaking: Program Of Requirements

Uit de gap-analyse kwamen logisch vier eisen naar voren. Het vertalen van data naar werkbare ontwerpkaders was sensemaking. Deze regels vingen de wildgroei van het merk af en dienden als harde kaders voor de ideatiesessie:

  • Req 1 - Merken en split over kleur: Re-integratie werkt uitsluitend vanuit Teal, Recruitment vanuit Oranje. Geen vage tussenverhalen meer.
  • Req 2 - Zachte vlakken verhelpen: Te speelse hoeken (10px hier en daar) gaan weg. We haalden de verhoudingen terug naar wat er was gescraped (0px voor re-integratie).
  • Req 3 - Typografie vastleggen: Titels maximaal op 52px in plaats van 64px. Daaronder heldere teksten over de vlakken heen.
  • Req 4 - Content splitsing: De tekst mag niet meer zo algemeen zijn. We spreken werkzoekenden en zakelijke partners apart aan. Dat geeft meer duidelijkheid.

Uitvoeren: Divergeren met Crazy Eight (Execute & Create Results).

Tijd om het in de praktijk te brengen. In plaats van me blind te staren op één logische opbouw, haalde ik de rem eraf. Ik maakte acht losse ontwerpalternatieven met de Crazy 8 techniek. Dat haalt veel ruis eruit, omdat het tastbare resultaten forceert binnen de eisen die we net hadden vastgesteld. Dit zijn de acht varianten:

  • De Klassieke Split: Een simpel splitscherm, vijftig-vijftig.
  • De Dynamische Diagonaal: Een schuine snede over het midden, geïnspireerd op het Flexis logo.
  • De Typografische Focus: Strak op leestekst, bijna geen beeld.
  • De Zwevende Kaarten: Twee grote blokken zwevend over de pagina.
  • De Hover-Expansie (De Winnaar): Een interactief scherm dat reageert op de muis. Samenloop met Stakeholder: Ik deelde alle schetsen met mijn begeleidend ontwerper. Zij checkte dit aan de hand van haar gesprekken met Flexis. De beslissing om hierop te bouwen namen we samen. Dit gaf de strakke sfeer die Flexis zocht.
  • De Pop-up: Een minimalistische aanpak waarbij informatie verschijnt via inspringende overlays.
  • De Speelse Vlakken Schets: Een lossere layout met vlakken van verschillende afmetingen die een asymmetrische, moodboard-achtige flow creëerden.
  • De Gestapelde Blokken Schets: Een variant waarbij de keuzes goed te onderscheiden zijn en groter worden bij hover.

Hieronder zie je voor elk concept eerst mijn originele schets, en na een klik de digitale uitwerking in Figma.

Schets Variant 1
SCHETS 01

De Klassieke Split schets.

Aantekeningen voor een standaard, verticale verdeling in twee vlakken.

Variant 1 Figma
VARIANT 01 — CLASSIC SPLIT

De Klassieke Split.

Schets Variant 2
SCHETS 02

De Dynamische Diagonaal schets.

Idee voor een schuine snede over het beeldscherm.

Variant 2 Figma
VARIANT 02 — DIAGONAL CUT

De Dynamische Diagonaal.

Schets Variant 3
SCHETS 03

De Typografische Focus schets.

Grote nadruk op losse woorden, zonder vaste blokken.

Variant 3 Figma
VARIANT 03 — TYPOGRAPHY LEAD

De Typografische Focus.

Schets Variant 4
SCHETS 04

Zwevende Kaarten schets.

Vierkante blokken strak gepositioneerd, inclusief knoppen.

Variant 4 Figma
VARIANT 04 — FLOATING CARDS

Zwevende Kaarten.

Schets Variant 5
SCHETS 05

De Hover-Expansie schets.

Een dynamisch vlakverdeling die reageert op de muis. Dit werd de winnaar.

Variant 5 Base Figma
VARIANT 05 — FUSION (RUST)

De Hover-Expansie.

Een strakke, serene voordeur in ruststand. Perfect binaire keuze.

Variant 5 Left Expand
VARIANT 05 — FUSION (HOVER LINKS)

Re-integratie uitgelicht.

Het vlak groeit naar zeventig procent met een diepe laag van foto's en tekst.

Variant 5 Right Expand
VARIANT 05 — FUSION (HOVER RECHTS)

Recruitment uitgelicht.

Directe omschakeling van sfeer, kleur en vormtaal via de animatie.

Schets Variant 6
SCHETS 06

De pop-up schets.

Aantekeningen om de zwevende poort centraal te tekenen.

Variant 6 Figma
VARIANT 06 — THE MODAL

De pop-up.

Schets Variant 7
SCHETS 07

Speelse vlakken schets.

Idee voor een vertraagde overgang met asymmetrische vlakken.

Variant 7 Figma
VARIANT 07 — ASYMMETRIC

Speelse vlakken.

Schets Variant 8
SCHETS 08

Gestapelde blokken schets.

Ontzetting waarbij een gestapeld vlak groter wordt bij hover.

Variant 8 Figma
VARIANT 08 — STACKED NAV

Gestapelde blokken.

Beslissen op basis van theorie.BC 8.1.2

We hadden acht concepten, maar moesten nog bepalen welke het beste was. Ik legde de resultaten langs de theorie om onderbouwde keuzes te maken. Door wetenschappelijke theorieën op de acht concepten los te laten, vielen er zeven af. Variant 5 (De Hover-Expansie) bleef als logische winnaar over.

1. Hick's Law (Hick, 1952): Snijden in keuzestress.

Volgens Hick's Law neemt de beslistijd logaritmisch toe naarmate het aantal opties groeit. Variant 5 is de enige die het startscherm leegveegt en puur focust op pad A of B. De beslistijd wordt hiermee zo goed als nul.

2. Fitts's Law (Fitts, 1954): Maximale vuurkracht.

Hoe groter het doelwit, hoe sneller een gebruiker het raakt. Klassieke layouts zoals de Zwevende Kaarten (Variant 4) vereisen dat je een muis precies op een kleine knop navigeert. In Variant 5 pak ik het anders aan: niet de knop telt, maar het volledige beeldscherm. Door het scherm per helft op te delen is het onmogelijk om mis te klikken. Je hoeft minimaal te bewegen voor resultaat.

3. Isolation Effect (Von Restorff, 1933): De juiste context afstoten.

Als iets anders beweegt of kleurt dan de rest, eist het alle aandacht op. Bij Variant 3 (Typografische Focus) was de strijd om aandacht gelijk. Variant 5 doet dit slimmer: zodra je over één helft hovert, groeit die naar zeventig procent breedte en krijgt de foto volle dekking. De andere helft krimpt weg. De bezoeker ziet alleen wat telt, zonder ruis.

4. Gestalt & Affordance (Norman, 2013).

De Klassieke Split (Variant 1) was te statisch: als je niks ziet gebeuren, wil je niet klikken. In Variant 5 schemert de achtergrondfoto in ruststand al licht door (lage dekking). Dat wekt affordance. Je brein signaleert dat er content verborgen zit, en dat triggert direct klik-gedrag.

Realisatie & Evaluatie.BC 8.4.2 BC 8.2.2

Nadat de Hover-Expansie methodisch als winnaar uit de bus kwam, was het tijd voor de Next Steps: realiseren. Ik vertaalde de schets naar een interactief Figma-ontwerp en werkende front-end code (HTML, CSS). Daarmee was de onderzoeksvraag beantwoord en de cyclus rond.

Omdat we niet op aannames wilden eindigen, evalueerde ik het eindproduct via een kwalitatieve Expert Review met de begeleidend ontwerper.

Puntjes op de i na de review.

Ze was blij met de theorie en het idee erachter. Vooral de actieve tweedeling en de strakke uitstraling vielen goed. Maar tijdens de bespreking stuurden we het ontwerp nog bij met drie iteraties:

  • Iets laten doorschemeren: Mijn eerste versie had nog volledig dekkende achtergronden. De begeleidend ontwerper gaf als feedback om de foto's licht door te laten schemeren, zodat je al snapt dat er iets achter zit. Dat werkte heel goed (zie afb. A).
  • Uitlijning in Actie: Ik had de teksten gecentreerd (zie afb. B en C). We besloten ze links uit te lijnen. Dat is veel rustiger voor je oog en leest beter.
  • Betere copy: De tekst op de knoppen was nog te algemeen. We schreven directere, zakelijke copy die aansluit bij het doel van de websites.

Hieronder zie je de vergelijking. Let op het verschil in rust, uitlijning en consistentie tussen de eerste opzet (Before) en de definitieve versie (After).

Before (Figma Schets)

Variant A Ruststand
Afb A. Initiële Ruststand - Dekkende blokken zonder doorschemering.
Variant B Hover Re-integratie
Afb B. Initiële Hover - Gecentreerde tekst en algemene copy.
Variant C Hover Recruitment
Afb C. Initiële Hover - Teksten strak gecentreerd, vlak voor de links-uitlijning iteratie.

After (Live Front-end)

Eindresultaat Ruststand
Afb A. Finale Ruststand - Met lichte fotodoordrukking achter de logo's om affordance te triggeren.
Eindresultaat Hover Re-integratie
Afb B. Finale Hover - Hardere zakelijke copy en strak naar links uitgelijnd.
Eindresultaat Hover Recruitment
Afb C. Finale Hover - Rustiger in de ooghoek en superieure leesbaarheid.

Een werkend eindresultaat.BC 8.2.2

Ik vertaalde het goedgekeurde ontwerp naar een werkende technische realisatie, klaar voor de praktijk.

Het live ontwerp.

Bekijk het interactieve ontwerp inclusief de animaties via mijn open link.

Start de testomgeving ↗

Hulp voor de begeleidend ontwerper: Het implementatiepakket.

Ik draag het resultaat over aan de begeleidend ontwerper van Like Bamboo. Daarvoor schreef ik een overdrachtsdocument in het mapje 'Flexis Implementation'. HTML, CSS en JS zijn overzichtelijk gegroepeerd en voorzien van een implementatieplan. Zo sterft het interactie-ontwerp niet tijdens de bouw.

IMPLEMENTATIE BESTANDEN (BC 8.4.2 / BC 8.2.2):

  • 📄 Handleiding implementatie.docx (Routing & strategie WordPress)
  • 📄 HTML.docx (DOM-structuur voor hover divs)
  • 📄 CSS.docx (Styling, transities & media queries)
  • 📄 Javascript.docx (State-management triggers)
Email communicatie voor hand-off

Hoe dit Like Bamboo heeft geholpen.BC 8.4.2

Flexis was benieuwd naar interactieve mogelijkheden. Met dit ontwerp kunnen we laten zien wat we voor Flexis kunnen betekenen op interactie niveau. Het wordt nu ook ingezet om de klant aan de klant te laten zien wat de mogelijkheden zijn..

Ik begon dit traject met het idee om de kleurverwarring en stijlfouten recht te trekken. Maar doordat ik liet zien wat ik in korte tijd kon maken en de gateway nu interactief kan worden getoond, kreeg ik al in de eerste week veel vertrouwen binnen het team. Ook de vaste ontwerper binnen het team is enthousiast over het resultaat.

"Ik vind het vet wat je hebt gemaakt. We kunnen dit gebruiken om de klant te laten zien wat we voor ze kunnen betekenen."

— Terugkoppeling ontwerper LikeBamboo

Back to start

Portfolio Overview

Academische Bronvermelding.BC 8.1.2

Alle literatuur en methodes die ik in dit ontwerpproces heb gebruikt als onderbouwing, met werkende links naar de originele publicaties.

  • Norman, D. A. (2013). The Design of Everyday Things: Revised and Expanded Edition. (Affordance & System Logic). Basic Books.
  • Fitts, P. M. (1954). The information capacity of the human motor system. (Gebruikt voor afweging knop-scaling). [Meer over Fitts's Law]
  • Hick, W. E. (1952). On the rate of gain of information. (Cognitieve belasting, reduceren opties). [Meer over Hick's Law]
  • Hogeschool van Amsterdam (HvA). (n.d.). CMD Methods Pack. Geconsulteerd voor methodologisch itereren. [Naar CMD Methods]
  • Interaction Design Foundation. (n.d.). What is Design Thinking? Toegepaste HCD framework faseringen. [Lees de HCD definitie]
  • Hall, E. (2013). Just Enough Research. A Book Apart. (Methodisch kader voor de zes-stappen ontwerponderzoekscyclus die dit traject structureert). [Bekijk het boek]
  • Knapp, J., Zeratsky, J., & Kowitz, B. (2016). Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days. (Grondlegger van de "Crazy 8" techniek). Simon & Schuster.
  • Von Restorff, H. (1933). Über die Wirkung von Bereichsbildungen im Spurenfeld. (Gestalt/Isolation effect bij kleuronderscheiding). Psychologische Forschung.