Overzicht
77% van de bezoekers kwam binnen op een telefoon. De site kwam uit 2015, werd in 2020 nog uitgeroepen tot beste website van het jaar, maar was nooit voor die telefoon gebouwd. Dat verschil los je niet op met een likje verf. Ik pakte de Ziggo Dome website aan als een compleet mobile-first website redesign: opnieuw opgebouwd vanaf het scherm waar de meeste mensen echt op zitten.
De uitdaging
Een geliefde site die stilletjes veroudert. De techniek onder de motorkap liep achter, features haperden, de laadtijd zakte weg. En al die tijd groeide het mobiele verkeer door op een fundament dat daar niet op was berekend.
De doelgroep maakte het scherper. De grootste groep zit tussen de 25 en 34, maar het opvallende was dat écht elke leeftijd op mobiel binnenkwam, tot de oudere bezoeker aan toe. Geen kleine niche om voor te ontwerpen, wel de meerderheid. Dus daar begon het.
De aanpak
Eerst luisteren. Ik sprak met medewerkers, met de organisatie en met bezoekers die maandelijks of jaarlijks kaarten kopen. Daaruit kwamen de keuzes die het redesign sturen.
Mobile-first, letterlijk vanaf de duim. In tien jaar zijn telefoonschermen verdubbeld, waardoor de bovenkant onbereikbaar werd zonder je hand te verleggen. Ik verplaatste de belangrijkste acties naar een bottom-navigatie, binnen de zone die je duim moeiteloos haalt. De secundaire dingen schoven naar boven. Navigeren voelt daardoor rustig in één hand.
De agenda werd het hart van de site. Events komen prominenter op de homepage, de eventpagina's zijn persoonlijker. Daaromheen een interface in de stijl van Netflix en Videoland: grote beelden die overgaan in video, dynamic scrolling, card-transitions, dark mode en micro-interacties die precies laten zien dat je actie is aangekomen. Geen los opgeplakte trends, wel bewegingen die de flow soepeler maken.
Voor bezoekers die de zaal nog niet kennen bouwde ik een interactieve 3D-plattegrond. Drie verdiepingen, met gestures door de Ziggo Dome heen, van de begane grond tot het uitzicht vanaf de tribune op het podium. Rondkijken voordat je een kaartje koopt.
Wireframes toetste ik wekelijks met de developers van Touch Creative, zodat elke keuze ook echt te bouwen was. Alle regels legde ik vast in een styleguide: kleuren, typografie, iconen, knoppen en hun hover-states, de micro-animaties. Eén document waar het team zonder ruis mee verder kon. Responsive was daarbij geen sluitstuk maar het uitgangspunt: consistent en bruikbaar op elk formaat.
Het resultaat
Een site die doet wat de bezoeker verwacht op de plek waar hij hem gebruikt. De belangrijkste acties liggen onder je duim, de agenda duwt de eerstvolgende events naar voren en de 3D-plattegrond laat je binnenlopen voordat je koopt. Waar de oude site tegenwerkte op mobiel, werkt deze mee.