Interactief
Herontwerp Flexis.

Drie grote risico's in het oude ontwerp.

Ik startte niet met tekenen, maar met een objectieve beoordeling van het oude werk. Deze beoordeling onthulde drie problemen die het hoofddoel van de pagina blokkeerden:

• Hoge denkbelasting: Beide actieknoppen toonden exact dezelfde paarse merkkleur (#814C97). Het brein van de bezoeker zag geen visueel verschil in de paden. Dit dwingt de gebruiker te hard na te denken, wat zorgt voor afhakers.
• Verschil in identiteit: Het oude ontwerp bouwde op een diep donkerblauw vlak (#242653) met speelse afrondingen van tien pixels. Dit kwam niet overeen met de strakke websites van het bedrijf. Dit schaadt het vertrouwen.
• Generieke teksten: Het platform sprak de doelgroepen niet direct aan. De teksten waren een compromis voor iedereen en raakte daarmee eigenlijk niemand.

Harde ontwerpeisen formuleren.

Uit de bovenstaande gap-analyse vloeiden vier eisen voort (dit zijn de 'praktijkkaders' waarbinnen het doel gerealiseerd moest worden). Deze eisen beschermden het merk tegen verdere versnippering. Ze dienden als absolute voorwaarden voor het nieuwe ontwerp:

• Binaire merkscheiding: Acties voor Re-integratie mochten alleen Teal bevatten, en Recruitment uitsluitend oranje. Mixen verboden.
• Strikte randen: Speelse hoeken (10px+) werden verworpen t.b.v. 0px (Re-integratie) of 2px (Recruitment) radius.
• Allotrope Hiërarchie: Maximaal 52px titels in de huisstijlfont "Allotrope", met een strakke, leesbare body-copy.
• Doelgroep-isolatie: Zodra interactie plaatsvindt moesten teksten specifiek gericht zijn op werkgevers óf werkzoekenden, zonder generieke taal (een vereiste voor conversie).

Divergeren via Crazy Eight.

Voordat ik de vier bovenstaande objectieve regels digitaal ging platslaan in één enkel ontwerp, forceerde ik mijzelf om eerst maximaal out-of-the-box te divergeren. Hiervoor paste ik bewust de Crazy Eight techniek toe (geselecteerd vanuit het academische CMD Methods Pack / Hasso Plattner Institute). Deze formele brainstorm-methodiek was voor mijn situatie cruciaal: het dwong mij om binnen de keiharde vaste kaders (zoals strikte kleuren en strakke vormen) toch acht totaal verschillende en creatieve lay-outs te bedenken in een zeer korte tijd. Zo voorkom je dat je onbewust voor de simpelste oplossing gaat en je vastroest in je allereerste concept, wat leidt tot een veelvoud aan superieure oplossingsrichtingen.

• De Klassieke Split: Een harde, verticale lijn door het midden met gelijke 50/50 verdeling.
• De Dynamische Diagonaal: Een schuine lijn die meebeweegt met de cursieve vorm van het bedrijfslogo.
• De Zwevende Kaarten: Twee scherpe, vierkante blokken prominent in het midden van het scherm.
• De Typografische Focus: Geen beelden of actieknoppen. Enkel grote, krachtige tekstlinks richting de sub-labels.
• De Hover-Expansie (De Winnaar): Een levendig scherm dat reageert op de muis. Het geselecteerde veld groeit visueel naar zeventig procent van het scherm en legt de focus volledig op één pad.

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

Scherpe iteraties op basis van de review.

De theorie achter het concept werd geaccepteerd. De combinatie van binaire sturing en premium uitstraling raakte de juiste snaar. Tijdens de sessie stuurden we het ontwerp bij op basis van specifieke expert- en klantkennis. We spijkerden de bruikbaarheid verder dicht met drie concrete iteraties (testresultaten vertaald in actie):

• Visuele Lokroep: Mijn allereerste versie toonde geen enkele afbeelding in de ruststand (dekking op nul). De ontwerper adviseerde een hele lichte doordrukkingen te tonen, zodat de gebruiker toch geprikkeld wordt. Dit bleek een meesterzet voor de affordance.
• Uitlijning in Actie: Ik hield teksten strak gecentreerd. We besloten de actieve tekstblokken naar links uit te lijnen. Dit breekt sneller af in de ooghoek en leest superieur voor zakelijke bezoekers.
• Aanscherping Woordkeuze: De tekst op de actieknoppen was nog te algemeen. We formuleerden hardere zakelijke copy die aansluit bij de formele toon van het bedrijf.

Het live ontwerp.

Beoordeel het interactieve geheel inclusief de animatiestroom via mijn open link.

Hulp voor de bouwer: Het implementatiepakket.

Ik draag het resultaat over aan de WordPress specialist van de organisatie. Hiervoor schreef ik een gedegen overdrachtsdocument binnen het mapje 'Flexis Implementation'. Code-architectuur, kleurcodes en gedrag staan overzichtelijk gegroepeerd. Dit voorkomt dat het interactie-ontwerp sterft tijdens de bouw.