UX/UI-ontwerp voor gebruiksprofielen en een interactieve navigatiestructuur
Stichting 113 Zelfmoordpreventie is de nationale organisatie voor preventie van suïcide. Hun missie is een land waarin niemand eenzaam en radeloos sterft door zelfdoding. Naast hulpverlenen zet 113 zich in voor onderzoek, samenwerkingsprojecten en het doorbreken van het taboe op praten over zelfdoding.


Uitdaging
113 vroeg mij mee te denken over het ontwerpen van een user profile-blok dat meer informatie biedt over een professional, en over een vernieuwde, interactieve navigatiestructuur die op meerdere pagina’s kan worden toegepast.
Het doel was deze onderdelen gebruiksvriendelijker en toegankelijker te maken, zodat websitebezoekers eenvoudig informatie kunnen lezen over een professional, en gemakkelijk door het menu kunnen navigeren en een stappenplan kunnen volgen.
De interface moest een professionele uitstraling hebben en een interactieve ervaring bieden, zodat de lezer beter wordt meegenomen in de informatie die 113 deelt. Daarbij was het belangrijk dat het ontwerp goed aansluit bij de huisstijl van 113.
Om dit te realiseren werd mij gevraagd een nieuw ontwerp te ontwikkelen voor zowel het user profile-blok als de navigatiestructuur.
Mijn rol & bijdrage
Ik heb de user-profile en de navigatiestructuur vertaald naar een gebruiksvriendelijk, interactief en toegankelijk ontwerp dat geoptimaliseerd is voor mobiel gebruik en vormgegeven in lijn met 113 Zelfmoordpreventie.
UX/UI design:
- Ontwerpen afgestemd met mede-designer en feedback geïntegreerd.
- Ontwikkelde wireframes, interactieve prototypes en visuele ontwerpen voor desktop en mobiel
- Toegankelijkheid gewaarborgd door toepassing en adviseren gebruik van WCAG-richtlijnen
Implementatie:
- Samenwerking met developer voor technische doorvertaling in Drupal.
- Het valideren van componenten op de testomgeving zodat ze visueel en functioneel overeenkomen met het ontwerp.
Samenwerking & proces:
- Wekelijks overleg met klant en projectteam (online via Teams).
- Afstemming over voortgang, ontwerpbeslissingen en testresultaten.

Resultaat
Het resultaat is een user-profile component en een interactieve navigatiestructuur die op meerdere pagina’s kan worden ingezet.
Het user-profile component is een blok dat op verschillende pagina’s kan worden geplaatst. In dit blok worden de naam, functie en foto van de professional weergegeven. Wanneer een professional ervoor kiest om geen foto te tonen, wordt in plaats daarvan een anonieme afbeelding weergegeven. Vanuit dit blok kan de gebruiker doorklikken naar de biografiepagina van de professional om meer over deze persoon te lezen.
Daarnaast is er een nieuwe navigatiestructuur ontwikkeld in de vorm van een carousel met een tweede uitklapmenu voor het stappenplan. Doordat het menu compact is vormgegeven, neemt het minder ruimte in op de pagina. De inhoud van de pagina’s worden per menu item weergeven, waardoor de gebruiker beter kan focussen op één onderdeel tegelijk. De interactieve opzet van deze navigatiestructuur stimuleert gebruikers aan om door het menu te navigeren.

Projectmanagement
Naast mijn rol als UX/UI designer nam ik ook projectmanagement taken op me. Deze rol vervulde ik wanneer er geen design werkzaamheden waren voor 113, maar voor technische opdrachten die door developers werden uitgevoerd.
Ik hielp mee met het coördineren van de voortgang van verschillende opdrachten door stand-ups te organiseren en leiden, het Jira-bord bij te houden en te zorgen dat de communicatie tussen Digitpaint en 113 soepel verliep. Daarbij hield ik het team op de hoogte van deadlines, verzamelde feedback van de klant en zorgde ervoor dat ontwikkelaars, designers en stakeholders goed op elkaar waren afgestemd.
Door deze ervaring heb ik mijn organisatie- en communicatievaardigheden verder kunnen ontwikkelen en liet het mij zien hoe belangrijk een goede structuur en samenwerking in een team zijn.
