Catch of the Day voor StuBru: hét nummer dat je vandaag moet horen

Catch of the day - hét nummer dat je vandaag moet horen.  

Op 4 februari lanceerde Studio Brussel hun grote reboot, de radiozender oogt en klinkt volledig anders. En dan ging het niet enkel over een fris nieuw logo. Zo werd de wekelijkse Hotshot ingeruild voor een Catch Of The Day, hét nummer dat je iedere dag moet gehoord hebben.

Wieni ontwikkelde de website voor Catch of the Day: een progressieve web app waarbij performantie, user experience en design gecombineerd werden tot een future-proof website die uitblinkt in visueel design, animaties en aanvoelt als een native app.

In het kort:

  • Mobile-first progressive web app

  • Top notch performance & UX

  • React + nieuwe React hooks API

  • Audioplayer met 365 nieuwe tracks per jaar

  • Interactieve carousel met native gestures

  • Spotify player + authentication

  • Dynamische social share images via imgix

Ik wou voor Catch of the Day een perfect mobiele site. Een klein, maar ambitieus project met krappe timing dat een van de uithangborden moest worden van de ‘reboot’ van Studio Brussel. Het was dus noodzakelijk dat we elkaar perfect aanvoelden en aanvulden. Dat gebeurde met Wieni zeer organisch via dagelijkse calls en een demoversies. We kicken er bij Studio Brussel op om op korte termijn het verschil maken met creatieve ideeën, daarvoor heb je de juiste partners nodig. Missie geslaagd!

Brecht Vaes - Chef digital Stubru

Voor Catch of the Day was Studio Brussel op zoek naar een partner die op een korte termijn een straffe webapp kon ontwikkelen die hun dagelijkse Catch of the Day op de radio doorvertaalde naar een website die visueel krachtig was, interactief en bovenal performant.

Dagelijks verschijnt er een nieuw nummer op de website die samen met alle andere tracks kan beluisterd worden met een geïntegreerde audioplayer. Bezoekers kunnen elke track up- of downvoten en krijgen ook een overzicht van alle tracks met rating.

Een klein project, maar een grote uitdaging

  • Een performante website ontwikkelen die goed werkt bij lancering, maar ook enkele jaren later als er enkele honderden tracks getoond moeten worden
  • Inzetten op een mobile-first design dat de website moet doen aanvoelen als een interactieve applicatie door middel van onder andere gestures en animaties
Catch of the Day prototype in Google Presentations

Catch of the Day - functioneel prototype in Google Presentations

catch of the day - mobile
catch of the day - desktop
catch of the day - mobile speciale pagina's

Wat je zelf niet doet, doe je goed!

Deze gespecialiseerde diensten en systemen hielpen ons met de implementatie van Catch of the Day. 

Imgix

Elke afbeelding die op de website verschijnt wordt aangeboden via Imgix. Met deze online dienst zorgen we ervoor dat onze afbeeldingen geoptimaliseerd worden voor elk soort scherm en zo licht mogelijk aangeboden worden, zodat ook onze mobiele gebruikers met beperkte data zonder zorgen de website kunnen gebruiken. Daarnaast gebruiken we dit systeem ook om de data die in ons CMS aan de tracks gekoppeld wordt (denk maar aan titel, uitvoerder, afbeelding) te gebruiken om automatisch graphics te genereren, die vervolgens gebruikt kunnen worden om op sociale media of andere kanalen te delen.

Drupal CMS

Net zoals het grootste deel van onze projecten is ook Catch of the Day gebouwd op een Wieni-flavoured versie van Drupal, het populaire open source Content Management System. Via een gebruiksvriendelijke interface kan de klant tracks toevoegen, tot in detail inhoudelijk aanpassen en zelfs per dag inplannen. Daarnaast is het ook een plaats om alle media die doorheen de website gebruikt wordt te beheren, menu’s aan te passen en nieuwsbrieven op te stellen en uit te sturen.

reCAPTCHA v3

Om te voorkomen dat het raten van liedjes, het indienen van suggesties en het abonneren op de nieuwsbrief spambots zou aantrekken hebben we gebruik gemaakt van reCAPTCHA v3, de meest recente iteratie van Google’s anti-spamdienst. Dit ingenieuze systeem kijkt naar het (geanonimiseerde) gedrag van elke bezoeker om te bepalen of het gaat om menselijke gebruiker of een bot of script, waardoor we eenvoudige valse inzendingen er uit kunnen filteren.

Spotify API

Het playergedeelte van de applicatie is mede mogelijk gemaakt door de API van Spotify, de populaire en alom bekende muziekdienst. Via een gebruiksvriendelijke integratie met ons CMS kan de klant een bepaalde Spotify track koppelen aan een Catch, waardoor de bezoekers van de website een preview van het nummer kunnen beluisteren. Tijdens de testfase werd deze API gebruikt om de website te vullen met realistische voorbeeldtracks, wat ons heeft toegestaan om de performance van de applicatie tot in de puntjes te kunnen optimaliseren.