Werk

UX Design PE-online

UX Design
Onderzoek
Design System

UX redesign van een monitoringsplatform dat meer dan een half miljoen professionals verbindt met beroepsorganisaties en aanbieders van educatie.

Smartphone mockup van het PE-online platform

PE-online is een monitoringsysteem dat beroepsorganisaties, professionals en aanbieders van educatie samenbrengt in één platform — voor accreditatie, registers en bijscholing.

De uitdaging

PE-online wordt door meer dan een half miljoen mensen gebruikt, gekoppeld aan uiteenlopende beroepsorganisaties. Die organisaties willen hun eigen huisstijl terugzien in de interface. Tegelijkertijd moet het platform werken voor een breed publiek met verschillende niveaus van digitale vaardigheid.

Qua ontwerp en gebruiksvriendelijkheid lagen er duidelijke mogelijkheden voor verbetering. Ik werd gevraagd om een verbeterslag te maken.

Onderzoek

Na gebruikersonderzoek bleek dat huisstijlkleur voor de meeste herkenning zorgt bij gebruikers. Dat inzicht bepaalde de richting van het ontwerp: een neutraal, toegankelijk interface met slimme mogelijkheden voor kleurintegratie per organisatie.

Vroeg mockup van de zoekfunctie in het PE-online register

Het proces

Het project is opgedeeld in kleinere onderdelen om het behapbaar, haalbaar en betaalbaar te houden. Het eerste onderdeel was een openbare zoekfunctie in het register.

Stap 1: Kick-off

Kick-off

Na verschillende kennismakingsgesprekken organiseerde ik een kick-off meeting om alle betrokkenen te aligneren en verwachtingen af te stemmen.

Stap 2: Start ontwerp

Start ontwerp

Er was veel laaghangend fruit in het bestaande ontwerp. Ik maakte twee concepten die elk oplossingen boden voor de meest urgente problemen.

Stap 3: Testen

Testen

Beide ontwerpen zijn getest bij mogelijke gebruikers via interviews en korte opdrachten. De resultaten gaven inzicht in gebruik, begrip en voorkeur.

Stap 4: Delen en presenteren

Delen en presenteren

De twee ontwerpen en testresultaten zijn gedeeld met de opdrachtgever. Er is een keuze gemaakt voor één richting, waarbij nadrukkelijk gekeken is naar technische haalbaarheid en impact.

Stap 5: Door ontwerpen

Door ontwerpen

Na de presentatie zijn conclusies gemaakt. Een belangrijke stap, want de gemaakte keuzes zijn ook bepalend voor de overige schermen en functies van PE-online.

Stap 6: Aanpassen en finetunen

Aanpassen en finetunen

Er volgden meerdere aanpassingsrondes aan het ontwerp voordat het werd opgeleverd aan de technische ontwikkeling.

Stap 7: Aanlevering

Aanlevering

Het ontwerp is opgeleverd in Adobe XD. Waar nodig zijn video’s gemaakt met uitleg.

Definitief ontwerp van PE-online op een smartphone

Design system

Als onderdeel van het project heb ik een design system opgezet dat de basis vormt voor de gehele UI van PE-online.

Inzichten

Veel verschillende gebruikers PE-online moet werken voor een breed publiek. Oplossing: zo simpel mogelijk houden en vertrouwen op UI-patronen die gebruikers al kennen.

Meerdere organisaties Het ontwerp moet bij uiteenlopende organisaties passen. Oplossing: een neutraal ontwerp met kleur als aanpasbare laag — kleur bleek in onderzoek de sterkste herkenningstrigger.

Beperken Voor een grote doelgroep kun je moeilijker een eigen merkidentiteit kwijt of specifieke UI-elementen toevoegen. Die beperkingen bepalen deels het uiterlijk van PE-online.

Specifieke wensen Elke organisatie toont andere content. Oplossing: de meest voorkomende situaties als vertrekpunt gebruiken.

Veel kennis en informatie De opdrachtgever heeft veel kennis en ervaring over het product. Oplossing: die inzichten optimaal benutten bij het maken van keuzes.

Weinig gebruikt Professionals gebruiken PE-online slechts een paar keer per jaar. Oplossing: rekening houden met waar je wel en geen tijd in stopt.

Het ontwerp is nog in volle gang. Deze pagina wordt verder bijgewerkt naarmate het project vordert.