Context
Voor Zuiderbad te Hofstade ontwierp ik een interactieve kaart. De samenwerking met Zuiderbad begon als schoolopdracht, maar toen het traject afgelopen was, waren ze zo enthousiast over het resultaat dat we het project verder mochten uitwerken voor écht gebruik.
Uitdaging
Bezoekers van Hofstade vonden het moeilijk om het domein te verkennen. Er was geen duidelijke kaart die horeca, activiteiten en routes overzichtelijk toonde. De bestaande informatie was verspreid en niet mobielvriendelijk, waardoor gebruikers vaak verdwaalden of moeite hadden om snel iets terug te vinden.
Oplossing
We ontwikkelden een interactieve kaart die het volledige domein visueel en intuïtief weergeeft. Dankzij een routeplanner, filters en pop-ups kunnen bezoekers eenvoudig navigeren en direct de info vinden die ze zoeken. Het design is afgestemd op de Zuiderbad-branding, met op maat gemaakte iconen en illustraties. De kaart werkt bovendien responsief, zodat zowel gezinnen als sporters en bedrijven ze makkelijk kunnen gebruiken, op desktop en mobiel.
Mijn rol
Focus op UX/UI: interface in Figma, consistente visuele stijl, en een toegankelijk componentensysteem. In front-end werkte ik o.a. aan pop-ups, detailpagina’s, filters en UI-aanpassingen zodat het ontwerp 1-op-1 werd vertaald naar productie.
Mijn proces
Definitie & Analyse
In deze fase onderzoek ik de doelgroep, doelen en context om het probleem scherp te definiëren.
- Kick-off met Zuiderbad om de verwachtingen te bespreken.
- Sitebezoek om de fysieke omgeving en de gebruikersbehoeftes beter te begrijpen.
- Analyse van bestaande kaartoplossingen.
- Functionele scope bepaald.
UX Design
Ik werk wireframes, flows en gebruikerstests uit om de structuur en interacties te bepalen.
- Ontwikkeling van wireframes in Figma met focus op navigatie en gebruiksgemak.
- Informatiearchitectuur opgesteld en gebruikersflows uitgewerkt.
- Iteratieve feedbackrondes en interne tests.
Visueel Design
Ik vertaal de structuur naar een visuele stijl die past bij de branding en emoties van het project.
- Ontwerp van een visuele stijl die aansluit bij de branding van Zuiderbad.
- Illustraties en iconenset ontwikkelen.
- High-fidelity designs in Figma uitgewerkt en geoptimaliseerd voor mobile/desktop.
Development & Testing
De designs komen tot leven in code, waarna ik test en verfijn tot alles perfect werkt.
- Omzetten van het design naar een werkende kaart in Leaflet.
- Responsief design en prestatieoptimalisatie.
- iteratief testen, zowel op afstand als op locatie.
- Finale bugfixes en oplevering van een gebruiksklare kaart.
Reflectie
Dit project heeft me veel bijgebracht over hoe een idee uitgroeit tot een concreet product. Als UX/UI designer leerde ik niet alleen hoe belangrijk het is om een consistente visuele stijl te ontwikkelen, maar ook hoe die stijl effectief moet doorgetrokken worden in de front-end.
Daarnaast merkte ik hoe cruciaal duidelijke communicatie met de klant is. De regelmatige feedbackmomenten met Zuiderbad hielpen ons om verwachtingen scherp te houden, prioriteiten te stellen en misverstanden te vermijden. Het samenspel van design, development en klantcommunicatie maakte dit project voor mij een bijzonder waardevolle ervaring.
