"De juiste weg naar werk begint hier. Een methodisch herontwerp van de digitale voordeur van Flexisgroup."
Zet deze modus aan om de beoordelingscriteria in de tekst te highlighten en mijn verantwoording per criterium te zien.
Je zet relevante theorie over mensgerichte ontwerpmethodes in om jouw keuzes te onderbouwen.
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.
Je realiseert (deel)producten die aansluiten bij de/het ontwerpdoel(en).
Je bereidt zelfstandig methodische ontwerpactiviteiten voor die je passend bij de situatie zelfstandig óf met andere belanghebbenden kunt uitvoeren.
Je verantwoordt de gemaakte keuzes en resultaten en communiceert dit pro-actief en helder met de belanghebbenden én begeleiders.
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.
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:
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:
"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?"
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:
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.
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.
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.
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.
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.
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).
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.
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.
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:
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:
Hieronder zie je voor elk concept eerst mijn originele schets, en na een klik de digitale uitwerking in Figma.
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.
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.
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.
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.
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.
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.
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:
Hieronder zie je de vergelijking. Let op het verschil in rust, uitlijning en consistentie tussen de eerste opzet (Before) en de definitieve versie (After).
Ik vertaalde het goedgekeurde ontwerp naar een werkende technische realisatie, klaar voor de praktijk.
Bekijk het interactieve ontwerp inclusief de animaties via mijn open link.
Start de testomgeving ↗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.
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
Alle literatuur en methodes die ik in dit ontwerpproces heb gebruikt als onderbouwing, met werkende links naar de originele publicaties.