Zuiderbad: interactieve kaart

Over dit project

Zuiderbad

Wie is Zuiderbad?

Zuiderbad is een horecazaak aan de vijver in Zemst, waar ontspanning en gezelligheid centraal staan. Bezoekers komen er na een duik of een namiddag aan het strand terecht voor een drankje of hapje in een ongedwongen sfeer.

De plek heeft veel charme, maar bezoekers vonden de juiste locatie-informatie niet altijd snel genoeg. Daarom was er nood aan een digitale oplossing die de weg op het domein duidelijker maakt.

De opdracht: een interactieve kaart voor bezoekers

De samenwerking met Zuiderbad begon als schoolopdracht: we moesten een digitale interactieve kaart uitwerken waarmee bezoekers zich beter konden oriënteren. Na het traject waren ze enthousiast over het resultaat, waardoor we het project verder mochten uitwerken voor echt gebruik.

Het doel was duidelijkheid scheppen voor klanten. De kaart moest bezoekers helpen om sneller locaties, voorzieningen en praktische info op het domein terug te vinden, zonder dat de ervaring saai of technisch zou aanvoelen.

De oplossing: UX design en front-end development

Samen met twee teamgenoten, {{team}}, werkte ik aan een interactieve kaart die beter aansluit bij de sfeer van Zuiderbad. We startten met een klantgesprek om hun noden scherp te krijgen. Daarna maakten we wireframes, high-fidelity designs en gebruikerstesten om te controleren of alles duidelijk aanvoelde.

Mijn rol lag vooral bij het development. We hertekenden de kaart, kozen duidelijke iconen en bouwden een speelse interface die bezoekers helpt zonder in de weg te zitten.

Design

Het was moeilijk om ons volledig in de stijl van Zuiderbad in te leven, en bovendien was het de eerste keer dat we een interactieve kaart moesten ontwerpen.

We hebben doorgezet, veel feedback gevraagd en stap voor stap de stijl beter leren begrijpen, waardoor het ontwerp steeds sterker werd.

Development

Omdat we met Leaflet werkten, een technologie die we nog niet kenden, liep het coderen niet altijd vanzelf.

We hebben tutorials gevolgd en ook AI ingezet om problemen sneller op te lossen en de juiste codevoorbeelden te vinden.

Communicatie

In het begin verliep onze communicatie met de klant niet altijd vlot, waardoor er soms onduidelijkheden ontstonden.

We hebben actief ingezet op betere communicatie, afspraken duidelijker gemaakt en feedbackmomenten ingebouwd, waardoor het contact tegen het einde veel beter liep.

Communicatie

Het werk was niet altijd eerlijk verdeeld binnen het team en soms waren er tegenstrijdige meningen over aanpak of keuzes.

We hebben een systeem opgesteld om taken te verdelen en namen de tijd om naar elkaars meningen te luisteren, de voor- en nadelen te bespreken en samen tot beslissingen te komen.

Onderzoek

We startten met een korte maar gerichte verkenning: wie zijn de bezoekers van Zuiderbad, wat zoeken ze online en welke info is cruciaal om meteen te vinden?

• Meeting met de klant
• Analyse huidige situatie
• Doelen en noden scherpstellen

Wireframes & flow

Op basis van de inzichten maakten we wireframes en dachten we de belangrijkste user flows uit. Zo konden we snel valideren of de structuur logisch was en aansloot bij de verwachtingen van de klant.

• Structuur & navigatie uitwerken
• Klikbare wireframes testen
• Feedbackmoment met klant

Visual Design

Daarna gaven we het ontwerp kleur en karakter. We kozen voor frisse visuals, illustraties en iconen die de speelse sfeer van Zuiderbad weerspiegelen en tegelijk de info duidelijk houden.

• Frisse kleuren & typografie
• Illustraties en iconen
• Consistente componenten

Build & test

In de laatste fase vertaalden we het design naar code. We werkten met Leaflet voor de interactieve kaart en optimaliseerden de site voor performance en gebruiksgemak. Door continu te testen en itereren leverden we een stabiel en aantrekkelijk eindproduct op.

• Leaflet integratie
• Iteratief testen
• Performance & gebruiksvriendelijkheid