Herindeling platform

De herziening van het menu was mijn eerste opdracht bij Tymes4. De bestaande navigatie bestond uit een ouderwets dropdownmenu zonder duidelijke categorisatie. Alle menuopties kregen hetzelfde gewicht: veelgebruikte functies stonden tussen accountinstellingen en opties die alleen in bepaalde situaties relevant waren. Ook pagina’s zonder inhoud bleven bereikbaar.

Op mobiel werd hetzelfde dropdownmenu gebruikt als op desktop, met kleine aanklikbare onderdelen. Dat maakte de navigatie lastig te bedienen, juist onderweg of voor het stadion.

Wat begon als een redesign van het menu, groeide uit tot een herindeling van het platform. Dit liep samen met de ontwikkeling van Identity Based Ticketing (IBT), waarvoor supporters hun tickets ook moesten kunnen beheren, op naam zetten en delen. Daarmee ging de opdracht verder dan navigatie alleen: welke functies hebben supporters nodig, wanneer zijn ze relevant en hoe brengen we die logisch samen?

• Alle toegangsbewijzen op 1 plek. geen zoektocht meer naar je tickets in de regen, voor het stadion
• Mobile first. Tickets makkelijk kunnen vinden en gebruiken in je ‘broekzak.’
• Duidelijk onderscheid tussen hoofdinteracties en secundare pagina’s.
• Alleen relevante opties tonen. Opgeruimt staat netjes.

Naast een betere ervaring voor de supporter wilde ik het team meenemen in het denken vanuit de gebruiker en kritischer nadenken over wat er waar getoont wordt. De oude iteratie was duidelijk vanuit software gedacht (pagina’s op volgorde van aanmaken ipv relevantie).

Wat probeert iemand te bereiken en wat heeft hij daarvoor nodig? Wat kan ik doen om dat zo efficient mogelijk te doen? Dat moest het vertrekpunt worden bij het ontwerpen en ontwikkelen van het platform.

Het menu moest alleen relevante opties tonen, maar daarvoor moet het platform wel weten wat er voor een supporter klaarstaat. Voor iedere gebruiker op iedere pagina opnieuw die informatie ophalen, zou te veel calls opleveren.

Daarom speelde performance ook een belangrijke rol in het ontwerp van de navigatie. Met caching konden we die informatie hergebruiken en het menu aanpassen aan de situatie van de supporter. Dit gaf mogelijkheden om situationele knoppen zoals reserveringen en identificeren alleen te tonen wanneer er reden toe was om er op te klikken.

Voor het systeem zijn een seizoenkaart, passe-partout en los ticket verschillende producten. Maar een supporter zoekt zijn toegangsbewijs voor de wedstrijd. Vanuit die gedachte heb ik voorgesteld om alle tickets samen te brengen onder ‘Mijn tickets’.

Dat betekent niet dat alle tickets hetzelfde moeten worden weergegeven. Een seizoenkaart mag herkenbaar blijven als seizoenkaart, die experience is belangrijk. Het type bepaalt alleen niet meer waar je moet zoeken in de navigatie. Op de mijn tickets pagina wordt dat verschil zichtbaar.

Zo veranderde niet alleen het menu, maar ook het uitgangspunt voor de indeling: wat wil de supporter doen en hoe helpen we die daar zo makkelijk mogelijk bij?

80% van het verkeer op Tymes4 ging via mobiele devices. Toch gebruikte het platform een dropdownmenu wat vooral voor desktop was ontworpen. Mede door mijn inbreng om UX een keer toe te passen, werd mobiel als serieus platform behandeld. In 2023. Werk aan de winkel!

Ook in het IBT ontwerp zijn pas voor het eerst mobiele designs gerealiseerd.

Daarom nam ik mobiel als begin- en uitgangspunt voor de nieuwe navigatie. De belangrijkste acties moesten makkelijk bereikbaar zijn, met knoppen die je ook onderweg of voor het stadion goed kunt bedienen. Vanuit die mobiele basis werkte ik de navigatie verder uit voor grotere schermen.

Bron: Google Analytics van de aangesloten clubs, gemiddeld over een periode van circa één jaar.

Een van de favorieten was een menu met twee pagina’s: de hoofdopties op de eerste en de rest op de tweede. Met een swipe wisselde je tussen beide. Leek een goed idee, tot we het lo-fi prototype binnen het team probeerden.

Bij 4 van de 12 testjes werd pas duidelijk dat je kon swipen nadat dit werd verteld. Je moest dus eerst ontdekken hoe het menu werkte voordat je alle opties kon vinden. Dat schoot het doel een beetje voorbij.

Daarom kozen we voor de tweede variant, met alle opties in één overzicht. Het verschil in grootte van de knoppen maakte duidelijk wat de hoofdinteracties waren. Maximaal vier hoofdopties, de rest secundair. Technisch haalbaar en flexibel genoeg om de indeling aan te laten sluiten op de verschillende clubs.