GDS.FM

Winner Of The Year

Case summary

GDS.FM is a grassroots radio station based in Zurich. ATTRIBUTE developed a decoupled site based on Drupal, Vue and Nuxt in collaboration with Michel Luarasi.

Case description

GDS.FM is a grassroots radio station based in Zurich which went on air in 2014. Since then it has become an important platform for local artists and is an important institution for the alternative Swiss music scene today.

GDS.FM had a very outdated Drupal 7 Website and a separate unmaintained radio player. The content on the old website was hard to manage and was not presented in an appealing way. Two of the main pain points were:
- The program of the music club "Sender" was not well integrated on the website
- The website and the radio player were two separate applications running on different domains.

ATTRIBUTE was given the task to develop a new concept and implement a technologically sustainable solution for GDS.FM. In collaboration with Michel Luarasi we redesigned everything from the ground up starting with a revamped sitemap, a fresh new layout and an overall simplified user experience. The new design puts GDS.FM in its deserved light and welcomes all visitors to its main areas: Music, artists and events.

Case goals and results

- Generally provide a good overview of all the content on the site

The new front page displays a mix of the latest content of the website and makes it easy to access the most important areas.

- Provide an accessible website

Acessibility is crucial when developing a website for a radio station. We did our best effort to make it easier to control the radio player and access the content of the website by appling the rudarimatary a11y rules we are familiar with. Of course this is far from perfect. Because of that we are working with people with visual impairment to improve the accessability fruther.

- Unify the website and the radio player

We chose a decoupled approach with a Drupal installation providing a jsonapi endpoint and a Vue.js/Nuxt.js frontend consuming the data. Having a SPA was crucial for maintaining the radio player while the user navigates the page. We implemented complete SSR since GDS.FM heavily depends on marketing on social media and therefore setting individual metatags is crucial.

- Make the 400+ artists easier accessible and searchable and present their recorded sets in a nice way

The artists list and the collection of recorded sets is one of the biggest library of concerts and DJ set in Switzerland. It has become an important resource for venues and festivals to book artists and DJs. The artists list is sorted by the latest published set recorded. This encourages artists to post sets more regularly and play concerts at "Sender". We developed a search_api powered endpoint to make the artists searchable and filterable.

- Develop an appealing and usable program for the club "Sender"

A separate page "Club" providing some impressions of the club while also presenting the program in a simple, but engaging way was implemented. The calendar provides a nice overview of all the events happening at "Sender".

- Automate everyday tasks of GDS.FM (such as publishing setlists)

We used the audio publishing platform hearthis.at to create playlists by artist. This simplifies the process of updating sets a lot easier. Additionally a lot of adaptions to Drupal's Backend were implemented to make GDS.FM's everday life easier.

- Promote the possibility to become a GDS.FM member to fund the project

The "Member" page explains why GDS.FM members are important and help fund the project. We chose payrexx.com for the membership management for it's simplicity regarding integration and being a fully-fledget recurring payment and member management platform based in Switzerland. It provides the following payment methods crucial in Switzerland: credit card, bank transfer, Twint and PayPal. We implemented a teaser to promote meberships across the site.

- Explain what GDS.FM stands for and provide an overview of it's activities

It is hard to grasp all of GDS.FM's activities. This is why we explain the most important aspects on the "About" page and let Raphaela Haeflinger (GDS.FM's graphic designer) design a mindmap providing a good overview.

Challenges

- Maintaining the radio player state across navigation
- Live Updates of the Track Infrmation
- Creating a generic and reusable approach to fetch entities from a Drupal jsonapi endpoint and store them in vuex
- Migrating and cleaning up content from the Drupal 7 site
- SSR

Community contributions

We open sourced the complete Application. Especially becuase had a hard time figuring out very basic things to get Drupal and Vue/nuxt play nicely together:

https://gitlab.com/attribute/gds

Authored patches
https://www.drupal.org/project/imageapi_optimize_webp/issues/3160399

Reviews
https://www.drupal.org/project/imageapi_optimize_webp/issues/3154319
https://www.drupal.org/project/jsonapi_extras/issues/2884292
https://www.drupal.org/project/audio_embed_field/issues/2955601
https://www.drupal.org/project/multiversion/issues/3090566
https://www.drupal.org/project/subrequests/issues/3049395
https://www.drupal.org/project/config_installer/issues/3039052

Hosting

amazee.io

Why should this case win the splash awards?

It is a blazing fast nice looking website, which is completely opensourced and helps a great local non-profit project.