Studio Theo
Back

Website voor judovereniging

Tijdlijn
Jan – Mar 2025
Rol
UX Designer · Front-end Developer
Tools
Figma · HTML · CSS · JS
Type
School project
Website voor judovereniging — project visuals

Context

Voor een case rond sportverenigingen in Den Haag ontwierp en bouwde ik een nieuwe website voor een judovereniging.

Veel sportverenigingen hebben websites die verouderd aanvoelen, lastig te navigeren zijn en niet goed aansluiten op mobiel gebruik.

De opdracht was om een professionele en gebruiksvriendelijke website te maken waarin de identiteit van de vereniging duidelijker naar voren komt. De website moest bestaande leden helpen om snel informatie te vinden, maar vooral ook nieuwe leden overtuigen om een proefles aan te vragen of zich in te schrijven.

Mijn rol in dit project was UX/UI designer en front end developer. Ik werkte aan het volledige traject: van informatiearchitectuur en wireframes tot visueel ontwerp, prototype, gebruikerstest en de uiteindelijke HTML, CSS en JavaScript website.

Probleem

De oude online ervaring sloot niet goed aan op wat nieuwe en bestaande leden nodig hadden.

Informatie over lessen, sporten, trainers en lidmaatschap was aanwezig, maar niet altijd logisch gestructureerd. Daardoor moesten bezoekers te veel zoeken voordat ze antwoord kregen op simpele vragen.

Voor nieuwe leden was vooral de aanmeldflow belangrijk. Wie interesse heeft in judo of een proefles wil aanvragen, moet snel begrijpen waar de vereniging voor staat, welke lessen er zijn en welke actie nodig is om mee te doen.

Ook mobiel gebruik speelde een belangrijke rol. Ouders, jongeren en nieuwe bezoekers bekijken dit soort informatie vaak snel op hun telefoon. De website moest daarom niet alleen visueel sterker worden, maar ook responsive en makkelijk te gebruiken op kleine schermen.

Aanpak

Analyse

Analyse van de opdracht, persona's en bestaande content. De doelgroepen: nieuwe leden, ouders van jonge sporters en bestaande leden die praktische informatie zoeken.

Informatiearchitectuur

Content herordend met card sorting en verdeeld in logische thema's. Vanuit deze structuur is een sitemap gemaakt die de basis vormde voor de navigatie.

Ontwerpprincipes

User needs, principes en eisen opgesteld. Kernwaarden: eenvoud, duidelijke navigatie, respectvolle communicatie en een visuele stijl passend bij judo.

Ontwerp & build

Wireframes, visueel ontwerp en klikbaar prototype in Figma. Na feedback en testen aangescherpt en gebouwd in HTML, CSS en JavaScript.

Prototype

Homepage

De homepage introduceert de judovereniging met een sterke eerste indruk. De hero laat direct zien waar de vereniging voor staat en geeft bezoekers twee duidelijke acties: lid worden of een gratis proefles aanvragen.

Onder de hero krijgt de bezoeker snel toegang tot belangrijke informatie zoals sportaanbod, trainers, nieuws en lidmaatschap. Zo werkt de homepage niet alleen als introductie, maar ook als startpunt voor de belangrijkste taken van de gebruiker.

Sportaanbod 1
Sportaanbod 2

Sportaanbod

Het sportaanbod is ontworpen om bezoekers snel te laten begrijpen welke vechtsporten de vereniging aanbiedt. Elke sport krijgt een eigen kaart met korte uitleg en een duidelijke vervolgstap.

Deze opzet maakt het makkelijker voor nieuwe bezoekers om te vergelijken en door te klikken naar meer informatie. In plaats van lange tekstblokken krijgt de gebruiker overzicht en keuze.

Lesrooster

Lesrooster

Het lesrooster is een van de belangrijkste praktische pagina's. Bezoekers moeten snel kunnen zien op welke dagen en tijden lessen plaatsvinden.

Daarom is het rooster overzichtelijk opgebouwd per dag. De informatie is compact gehouden, zodat ouders, jongeren en bestaande leden snel kunnen vinden wanneer een les plaatsvindt. Ook op mobiel blijft het rooster leesbaar en scanbaar.

Aanvraag proefles

De proeflesflow is ontworpen om de stap naar meedoen sneller en laagdrempeliger te maken. Bezoekers die interesse hebben, hoeven niet direct lid te worden, maar kunnen eerst eenvoudig een proefles aanvragen.

De flow is bewust kort en rustig gehouden. Alleen de belangrijkste gegevens worden gevraagd, zodat ouders en nieuwe sporters zonder verwarring kunnen doorlopen. Na het versturen krijgt de gebruiker direct bevestiging, waardoor duidelijk is dat de aanvraag is ontvangen.

Mobiele versie

Mobiele versie

De mobiele versie is apart uitgewerkt, omdat veel bezoekers praktische informatie onderweg of snel via hun telefoon bekijken.

De navigatie, knoppen en content zijn aangepast voor kleinere schermen. Belangrijke acties zoals lid worden en proefles aanvragen blijven goed zichtbaar, terwijl de inhoud overzichtelijk blijft.

Testen

Het prototype is getest met negen gebruikers via een scenario based user test.

De belangrijkste opdracht was het vinden en aanvragen van een proefles.

Uit de test bleek dat de proeflesactie niet overal duidelijk genoeg zichtbaar was. Gebruikers konden de weg uiteindelijk vinden, maar moesten soms langer zoeken dan gewenst. Dat liet zien dat de call to action sterker en consistenter aanwezig moest zijn.

Op basis van de test zijn de belangrijkste acties duidelijker gemaakt. Ook is de flow aangescherpt met een bevestigingspagina na het aanmelden. Daardoor krijgt de gebruiker meer zekerheid en voelt de aanmeldflow completer.

Terugblik

Dit project liet zien hoe belangrijk structuur is voordat je begint met ontwerpen.

Door eerst content, doelgroepen en navigatie scherp te krijgen, werd het makkelijker om keuzes te maken in de interface.

Ook leerde ik hoe waardevol het is om ontwerp en development dicht bij elkaar te houden. De Figma style guide, auto layout en developer mode hielpen om het ontwerp consistenter naar HTML en CSS te vertalen.

Een belangrijk leerpunt was planning. Daarnaast heb ik geleerd om AI tools slim te gebruiken voor code, zonder de controle over het eindresultaat te verliezen. Door gegenereerde code te begrijpen, aan te passen en te verbeteren, kon ik sneller werken en toch blijven leren als front end developer.

Meer werk