Mai FM is a New Zealand hip hop and RnB radio station with a website and news portal.

The brief

Mai FM needed a modern website that reached more of its audience. It was one of 13 sites to be built from the same UI framework, and the first: we tested and developed the approach on Mai FM before reusing it for the other 12.

Mai FM on an iMac

My role

I was the UI architect, responsible for a scalable architecture that would later be deployed to all 13 radio station websites. I worked closely with a couple of designers and the Adobe AEM developers.

Mai FM on an iPhone

The theme approach

We discussed several options and settled on themes. Each component had its core CSS in the primary template, and each site's branding lived in its own theme.

That gave us a large core file that rarely needed changing. A fix to the core reached all 13 sites as soon as it was deployed, so we didn't have to fix each site separately.

Mai FM on an iPad

Within a few months, all 13 websites had launched on this architecture.

How it was built

We first built the site as static HTML files, compiled by Assemble in a Gulp and Node.js setup, with SASS as the CSS pre-processor. All components were then converted from Handlebars to AEM, which was the back end.

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