Achtergrond en uitdaging

Bij inBrain was ik 5 jaar lang de enige dedicated ontwerper voor inSight, het commerciële leerplatform van het bedrijf. inSight is een modulair, white-label LMS dat tijdens mijn tijd door 10+ organisaties in gebruik is genomen, waaronder Gemeente Den Haag en de E-academy van Thuiswinkel.org. Het gebruikersaantal groeide van enkele duizenden naar 100.000+.

Toen ik binnenkwam was het "nieuwe" platform net opgeleverd. Ik zag verbeterkansen op drie vlakken:

• Visueel: hiërarchie en ritme waren nog niet uitgewerkt, tekstgroottes niet systematisch, stijlen niet gedefinieerd
• Interactie: sommige patronen werkten wel op desktop maar niet op mobiel (bijvoorbeeld een hover flip-card voor details)
• Proces: flows, states en animaties waren nog niet in kaart gebracht, het platform was feitelijk een rits losse schermen

Volledig opnieuw beginnen was geen optie. De codebase was al substantieel, er waren actieve klanten op het platform, en er was nog geen product owner om een herstart te autoriseren. Ik moest binnen de bestaande realiteit verbeteringen doorvoeren die toch effect hadden.

Als extra context: de slogan "Maximise Potential", die nog steeds de commerciële kernbelofte van inBrain is, komt van mij.

Doelstelling en werkwijze

Draagvlak eerst, ontwerp daarna.

Ik ben begonnen met een audit van het gebruikersgedeelte. Bevindingen heb ik gepresenteerd aan de directeur, operationeel manager en lead engineer. Format: before & afters gekoppeld aan design principes, met het bouwen van een design system als vervolgstap. Zo was het idee van systemisch ontwerpen al geland voordat ik het formeel voorstelde.

‍

Design system vanaf nul opgezet in Figma

‍Voor het leerplatform bestond geen design system. Ik heb er één opgebouwd met component-structuur en later semantische- en component tokens, zodat stijlen per klant snel gewisseld konden worden zonder dat het hele systeem moest worden aangepast.

‍

UX-taal structureel bij development ingebracht
Ik was de enige designer die development-taal begreep. Om het UX-werk duidelijk te maken, heb ik design-system-denken en UX-principes bij development gebracht. Dat leidde tot een intensieve co-creatie werkwijze waarin ontwerp en engineering producten samen bouwen. Voorbeelden zijn:

• FigJam-sessies samen met development teamleden (waaronder lead) om eerst begrip te krijgen voordat er werd ontworpen
• Rollen-en-rechten-matrices samen met engineer-lead, zodat governance en interface op elkaar aansloten
• User stories gezamenlijk opgesteld in plaats van gescheiden ontwerp- en ontwikkelfases

De lead developer heeft herhaaldelijk complimenten gegeven over de introductie van deze werkwijze.

‍

8+ modules ontworpen.
In 5 jaar ben ik van het herontwerpen van het gebruikersgedeelte doorgegaan naar modules die inSight hebben uitgebouwd van basis-LMS naar volwaardig learning-ecosysteem: bookingsysteem, bibliotheek met filters, leerpaden, gamification, dashboard, admin-verbeteringen, adaptiviteit via pre-assessment, kalender en nieuws.

Eén van de meest interessante: het bookingsysteem voor een internationale enterprise-klant. Dit systeem ondersteunde 10 verschillende rollen en rechten.

Aanpak: discovery-sessie met meerdere stakeholders (product owner van de klant, engineer-lead van inBrain, mezelf en tech vanuit de klant). Alle rollen gezamenlijk in kaart gebracht en beschreven. Daarna hebben de engineer-lead en ik samen een rollen-en-rechten-matrix opgesteld die in meerdere iteraties met de klant is aangescherpt. Het resultaat: een overzichtelijk visueel document waar het developmentteam direct mee aan de slag kon. Dit verminderde abstractie, vragen en fouten.

Resultaten

• inSight gegroeid van basis-LMS naar volwaardig learning-ecosysteem met 8+ modules, waaronder complexe modules zoals adaptiviteit en een compleet bookingsysteem
• Gebruikersaantal gegroeid van enkele duizenden naar 100.000+, aantal zakelijke afnemers gegroeid van enkele naar 10+
• Publieke showcase: Gemeente Den Haag "Adaptief leerplatform maakt gepersonaliseerd leren mogelijk", adaptiviteit-module die door mij is ontworpen, staat op inbrain.nl/portfolio
• "Maximise Potential" is de commerciële kernbelofte op de inBrain-website tot op vandaag
• Klantfeedback tijdens mijn periode was positief
• Co-creatie werkwijze met development is blijven bestaan na mijn vertrek

Leermomenten

• Binnen legacy en constraints werken zonder te blijven hangen in "het had anders gemoeten". Helemaal opnieuw starten is niet altijd een realistische optie. Binnen de huidige realiteit stap voor stap verbeteringen doorvoeren is soms vereist
• Tokens doorvoeren in een bestaand systeem betekent dat je stap voor stap verbeterd terwijl het product gewoon blijft draaien. Zo blijf je waarde leveren voor de gebruikers. Geen grote risico's, geen stilstand. Elke aanpassing is te testen en terug te draaien
• Voor mij werkt het beter om eerst draagvlak te bouwen voordat ik ga ontwerpen. Een presentatie met before-afters en principes aan de directeur, operationeel manager en lead engineer maakte verschil: het idee van systemisch ontwerpen was geland voordat ik er een formeel voorstel van maakte
• Co-creatie met development als standaard. FigJam-sessies, rollen-matrices en user stories samen bouwen, niet afzonderlijk. Verschillende inzichten zorgen voor een beter ontwerp
• Het vertalen van 10-laagse rollen en rechten naar een werkbaar interface was lastiger dan het ontwerpwerk dat ik daarvoor had gedaan. Het hielp om de matrix samen met de engineer-lead te maken en in iteraties met de klant af te stemmen, in plaats van te proberen het zelf in mijn hoofd op te lossen
• Het design system met semantische tokens dat ik vooraf bouwde, kostte meer tijd dan een eenmalig ontwerp had gekost. Maar zonder dat fundament zouden de white-label-aanpassingen per klant later niet schaalbaar zijn geweest