Home page of Noods Radio
Where it all happens at Noods

Taavi is a designer based at our Bristol Studio, who loves all things music. For the past couple of years, he’s dedicated a good chunk of his spare time to a side project that brings his passion for music and design together...

Noods what?

Noods is an independent radio station based in Bristol. It started just over two years ago by my friends Leon and Jack who felt there was a gap in the online radio space for a platform for all kinds of musicians, DJs and performers from Bristol and beyond.

The first, very short-lived iteration of the site was put together by Leon using Squarespace, it soon became evident it wasn’t going to work in long-term. I knew Leon and Jack before they started the station and offered to help on the online side of things. I figured it would be a nice project to spin on the side and learn new skills. I also saw it as a good way to give back to the communities I care about, both local (Bristol) and wider world (independent music).

The site has now gone through two iterations since the launch and a lot has changed - both in terms of how things look externally and how the site is being built and handled behind the scenes. Here are my thoughts on the process of building and managing a project like this from a designers point of view.

Challenges and things I’ve learned while solving them

Tech stack & getting things running

The first challenge was deciding on the ‘tech stack’ (using the term extremely loosely here!). I’ve worked on several WordPress and Drupal based projects before and felt like both of them would be a bit too heavy of a choice for this. After research into various alternatives such as Craft, Ghost and Bolt, I decided to go with Kirby. Kirby is a lightweight flat-file CMS that’s super simple to get up and running. It’s really nimble and malleable once set up, so felt like a good match.

After I’d decided on the CMS, I had to set up the development environment for myself. Until this point I’d used Grunt in personal projects, but grown frustrated with a few aspects of it. I decided to give Gulp a go. I’ve worked on plenty of projects in the past where someone else set up the environment and build scripts for the team, but this was the first time I attempted it all by myself. Through this, I learned to understand npm packages and the whole ecosystem a lot better. This has been beneficial for me even outside of the parameters of this project. Don’t get me wrong though - it was immensely frustrating at times, but the satisfaction of getting the build script to spit out a tidy bundle of stuff ready to be deployed was all worth it!

Web audio

We’re using a dedicated third-party service for the audio streaming, and the audio server they supply provides me with two endpoints to hook on to depending on the use case: one for live streams, and another for replays when there’s no live show on air. I wanted the audio player to look at the live stream first, and then automatically switch to the secondary replay stream if there’s no live show playing. Getting this to work in a robust way proved a bit of a challenge and I ended up writing a teeny-tiny proxy that handles the request to the audio stream service provider’s server and then passes the response back to me in a way I can then action on. Before this I had no real grasp on what the function of a proxy was, nor had I any idea of how to write one, but I got it up and running with a bit of guidance from a developer friend at the Potato Bristol studio.

In the front-end I initially tried using a few third party audio player libraries, but quickly got so frustrated with them I decided to roll my own implementation instead. This was actually really easy using some basic Javascript and the box-standard <audio> element, which I then themed and jazzed up.

Resident DJ Crosspolar's page on Noods Radio
Noods' residents are eclectic to say the least

Organising content

Even though the content on the Noods site is relatively simple - on the surface we only have two types of content: residents and shows. Under the hood however, there’s a lot of tagging and organisation going on. For each show we log three primary genres that describe the show the best, the artists or collectives associated with the show, as well as any guest or featuring artists involved. These tags are then used to surface the shows in relevant places, such as displaying links to all shows tagged with Resident A on their respective resident profile page. Right now we’re only using a part of the metadata we’ve gathered over the past two years, but we have plans for the next iteration and a number of new features for the site which will make more use of this.

What’s next

As the station grows, it’s increasingly important to have an intuitive way to browse shows and residents by location, genre and other attributes, as well as display similar shows and suggestions to our listeners. So that’s something I’ve been exploring solutions for. We’re also looking at how we can improve the accessibility of the site - there’s no reason everyone shouldn’t be able to enjoy music and other creative content regardless of their ability to browse the web with the conventional methods. Other developments will include providing support for new types of content and a better deployment workflow - I’ll post a new blog on the learnings from this as we get further along.

My takeaways

I’m the type of person who has always learned the best by doing something repeatedly until it clicks. However, rather than making several loose bits and bobs that don’t really form anything as a whole, it helps to have a framework where I can try new things and practise different ways of solving problems continuously. Having an ongoing project like this has been a great way of putting my existing skills into practise while gaining better understanding of things I only had (at best) a loose idea of. In my day-to-day practise as a designer at Potato it has made me more empathetic to the challenges developers around me face, and has given me a stronger grasp of holistic user experience across the board.

It’s been great to get feedback from the artists and the listeners who use the site regularly and it feels great to be able to give back in my own way to communities that I care about. I’m really excited about bringing new features on board and improving the platform so it can best serve all the incredibly skilled people involved with it.

Thanks Taavi - we’re excited to hear about the next developments at Noods. You can listen to Noods here: http://noodsradio.com/

Follow Taavi at: https://twitter.com/taavetkelle