Home > Portfolio >

3 min leestijd - 24 oktober 2025

De web app die UX Coach zelf gebruikt voor loonadministratie werkt perfect: alles functioneert naar behoren, de loondocumenten zijn allemaal beschikbaar, de input wordt perfect verwerkt elke maand. Maar.... het is als gebruiker toch moeilijk om je weg erin te vinden. En bovendien is de look en feel echt niet meer van deze tijd. Marjan van UX Coach maakte wireframes voor desktop en mobile en deelde haar ideeën voor een betere UX met de ontwikkelaar. 

Wireframes van het dashboard van een web app voor loonadministratie.

👀 Bekijk de bijbehorende prototypes voor mobile en desktop in Figma. 

De huidige gebruikerservaring (UX)

De huidige web applicatie werkt technisch gezien echt uitstekend. Alles wat je als gebruiker nodig hebt, is aanwezig. Je kunt de maandelijkse timesheets goedkeuren en verzenden. Daarna ontvang je alle loondocumenten in het platform, en ook nog eens per email. Er zijn op vlak van UX zeker positieve punten aan te wijzen:

Wat werkt goed?

• ​Consistente user flows: de informatiearchitectuur is heel vlak, dus alle pagina's zijn voor de gebruiker op dezelfde manier bereikbaar vanuit het menu op de Home pagina.
• Data is volledig: voor gebruikers staan alle medewerkers en bestuurders van het bedrijf correct opgelijst in de web app, met de bijbehorende details en documenten.
• Feedback na acties: Als de gebruiker timesheets goedkeurt of verzendt, krijgt die via een icoon te zien dat de status van de timesheets is gewijzigd.

Wat kan beter?

• Formaat van interactieve elementen: de links in het menu zijn allemaal heel klein, en daardoor moeilijk te lezen en moeilijk aan te klikken. Ook uitklapbare items in het menu zijn moeilijk te onderscheiden van niet-uitklapbare, vanwege het formaat. 
• Settings zijn niet vindbaar: als ik de taal van mijn interface wil aanpassen van Engels naar Nederlands, dan zoek ik tevergeefs naar die instelling. Per toeval ontdek ik dat dit kan worden aangepast vóór het inloggen.  
• Relevante inhoud mist op het dashboard: er ontbreekt een duidelijke link naar individuele recent aangemaakte loondocumenten, en naar timesheets van individuele (nieuwe) werknemers. Op dit moment krijgt de handleiding van de applicatie enorm veel ruimte, terwijl ik die waarschijnlijk nooit zal gebruiken.

Wireframes van het dashboard van een web app voor loonadministratie.

Oplossingen voor het dashboard

Zonder de volledige web applicatie uit te willen werken, heeft Marjan van UX Coach enkele wireframes gemaakt van het dashboard. Dat betekent dat ze nog geen aandacht heeft besteed aan het grafische design (de 'look and feel'), maar zich heeft gericht op de benodigde content en componenten. Wat is er anders in het redesign?

• Een menu dat zich leent voor zowel desktop en mobile: door het gebruik van duidelijke iconen en grotere knoppen, die ook op een touch screen gemakkelijk te gebruiken zijn. Het aantal items in het menu is bovendien verkleind, waardoor er minder gezocht hoeft te worden naar de juiste pagina.
  
• Labels zijn korter gemaakt: kleine woordjes als "My" in "My timesheets" zijn achterwege gelaten in de user interface, omdat de essentie van het label in het woord "timesheets" zit.
• Dashboard haalt relevante content naar voren: als gebruiker zie ik een overzicht van de laatst aangemaakte loondocumenten en ik kan ze direct downloaden vanuit het dashboard. Bovendien zie ik een overzicht van (nieuwe) medewerkers en hun timesheets. Zodat ik die direct kan beginnen goedkeuren.
• Acties worden aangeduid via een kalender: tijdens de lopende periode moet je als beheerder van je bedrijf of als HR manager concrete acties uitvoeren. Je ziet op je dashboard welke data in het oog gehouden moeten worden. 

🔎 Wat is een wireframe, en waarom zou je die maken? Lees verder.

Figma's simpele design systeem

Componentenbibliotheek van Figma

Voor deze wireframes gebruikte Marjan het simpele design systeem van Figma. Met deze componenten-bibliotheek krijg je namelijk direct toegang tot geschikte menu's, titels en paragrafen, links, avatars, formulieren en cards. Door deze componenten in Figma letterlijk op de schermen (frames) te slepen, kun je snel je pagina's opbouwen, en je ideeën overbrengen.

De ontwikkelaar staat open voor deze oplossingen

Het was voor Marjan een positieve verrassing dat de ontwikkelaar van deze web applicatie open stond voor de feedback van haar als UX designer én gebruiker van de web applicatie. Het was aangenaam om deze ideeën te delen met de product owner. Die op hetzelfde moment ook in gesprek was met andere eindgebruikers. Chapeau voor die aanpak!

Design is altijd een samenwerking

Voor UX Coach is design altijd een samenwerking met de mensen die de business goed kennen (meestal de opdrachtgever of klant), mensen die de technologie kennen (het development team of de developer) en de noden qua design (van de bezoekers van de website, de gebruikers van een app). 

Als dit nieuw voor je is, bekijk dan eens mijn video over deze 3 perspectieven op Youtube of lees het artikel Design Thinking en UX design.

Neem contact op

​Marjan

Senior UX designer met 15+ jaar ervaring in de combinatie design en onderzoek. Ze gelooft dat empathie voor de klant betere en aantrekkelijkere producten en diensten oplevert. Ze is founder van UX Coach, een UX design studio in Antwerpen.

+32 (0)487 424 713