Mai FM is New Zealand's #1 Hip Hop and RnB radio station with a large audience built around their website and news portal.

The Challenge

As the largest urban contemporary radio network, Mai FM needed a modern website with a wider reach of their audience. Mai FM was one of 13 sites that were going to be developed from the same UI framework, replicable and enhanceable to the other 12 sites. Mai FM was going to be the primary project where we tested and further developed this approach.

Mai FM on an iMac

The Team

I worked as the UI architect on this project who was responsible for designing a scalable architecture that would, later on, be deployed to all 13 radio station websites. The backend team I closely worked with included a couple of designers and Adobe AEM developers.

Mai FM on an iPhone

The Solution

We discussed multiple solutions but eventually settled on a theme approach. The project consisted of several components that had their core CSS in the primary template, with all branding definitions in its individual themes.

The approach allowed us to have a large core file that didn't need to be modified too often. Patches in the core file would eventually spread over to all 13 sites as soon as updates were deployed, without the need to fix each site when an issue was discovered.

Mai FM on an iPad

The project was a success, and within a span of a few months, all 13 websites were launched. They are maintained using this architecture.

The Technology

The project was initially developed as a list of static HTML files that were compiled by Assemble in a Gulp/Node.js setup. We used SASS as the CSS pre-processor. All components were converted from Handlebars to AEM and served as the backend.

  • Node.js
  • Gulp
  • Assemble
  • HTML
  • SASS
  • CSS Themes