Web development   Illustration   Animation


Web development   Illustration   Animation

An exciting new Motown inspired project for one of the UK's most successful producers of modern times.

Who is Naughty Boy?

Naughty Boy is an award winning English DJ, record producer, songwriter and musician. Having signed a recording contract with Virgin EMI and a publishing deal with Sony ATV, he has seen consistent success since bursting onto the UK music scene in 2009 producing Chipmunk’s “Diamond Rings”, featuring Emile Sandé. Whom he formed a very successful writing and production partnership with, resulting in a BRIT award winning album which sold 1.2million copies. Naughty Boy has worked with a host of top UK pop and urban acts, as well as international superstars such as Ed Sheeran, Rihanna and Beyoncé. He has also claimed BRIT awards for his own projects, including ‘Best Song’ and ‘Best Video’ for his 2013 hit “La La La” featuring Sam Smith.

Naughty Town is Naughty Boy’s latest project, it is a Motown inspired multi-single project which aims to fuse Naughty Boy’s modern production techniques and swagger with his love of Motown’s soulful sensibilities. Set to feature some of the biggest names in Pop, Soul and RnB, the first single features Laura Mvula, the haunting British Soul singer with one Gold album under her belt.

“Motown is so iconic, at first I didn’t want to interfere in case I upset the millions of Motown fans,” Naughty Boy says of his latest offering. “It took me a while to think I can do this, I can deliver. I realised it’s the coming together of music lovers and great songs.”

naughty boy promo shot
Naughty Town is Naughty Boy’s latest project, it is a Motown inspired multi-single project which aims to fuse Naughty Boy’s modern production techniques and swagger with his love of Motown’s soulful sensibilities.

The Brief

We were approached by Believe Digital who were working in association with Arctic Poppy Music to assist with the marketing of Naughty Boy’s new Motown influenced collaborative project, Naughty Town. Believe came to us with a loose idea for a website built around an interactive map inspired by the Motown aesthetic. Users would be invited to explore the map and discover exclusive behind the scenes content from Naughty Boy and his collaborators. A new section of the map would be added with each release to provide more exclusive content and to draw users back to the site.

It was imperative that the site functioned as a remarketing tool for Naughty Boy’s team, enabling fans to be alerted of forthcoming projects, releases and exclusive content. Our solution would need to incorporate social media and email data collection, integrated with conversion tracking tools such as Facebook Pixel and Google analytics.

The brief also specified that we create a built in player so that visitors could listen to the tracks during their visit. It would also function as a landing page for the project, offering clear links to the music on all major streaming and download platforms.

naughty town laura mvula-naughty boy artwork
We settled on an isometric style for the map, reminiscent of retro video games.


After putting our heads together, we fleshed out some concepts building on the original brief. It was decided that we should keep things simple. Users would be prompted to log in with Facebook, Twitter, or email upon entering the site. This served the purpose of allowing their progress to be saved, providing all important information on the demographic of the visitors to the site and allowing for remarketing to Naughty Boy’s fans as outlined in the brief. Visitors would then be taken to a top-down view of the map, similar to that found on a Grand Theft Auto pause screen. From there, they would tap or click to enter the section of the map they wanted to explore.

We assembled some mood boards to inform the design direction of the site, and the artistic style of the map itself. Having already peeped the artwork for the forthcoming release, we used that colour palette and style as a guide for the rest of the site to keep everything consistent. When it came to the map, we had a bit more freedom. We settled on an isometric style for the map, reminiscent of retro video games. This allowed us to display a large street area without significant obstruction from buildings, and made animations a little more straightforward.

We presented a mockup of a small area of the map in a colourful retro-futuristic style, with heavy nods to Motown. This was quickly approved and we set about building the map proper.

naughty town motown map detail

Development Notes

Taking full advantage of the latest web technologies we put together a vector based map that would maintain perfect clarity at all zoom levels, and allow us to animate each and every object within the image very easily. It also meant the finished product would look very clean, and load far quicker than a more traditional image.

We knew that creating a map from scratch on this kind of scale would be a fairly big undertaking. One thing we didn’t anticipate was the physical repercussions of staring at an isometric grid for hours on end. About a week in, our lead designer reported that he was seeing the blue isometric grid superimposed on everyday objects, even when he was away from his screen! This was alarming at first, although he did eventually come to appreciate the practical benefits of his new found visual augmentation in everyday life. Unfortunately, the effect didn’t last and his standard vision has since returned.

This first section of map we knew would accompany the debut track ‘Dancing Machine’, featuring Laura Mvula. We decided to place a big robot in the middle of the map which would dance when clicked to tie in with the theme, and as a nod to the original Jackson Five song. We liberally scattered several other references to Motown throughout the artwork, and brought the whole thing to life with some animation.

Lastly, we assigned active objects in the map for users to find. When clicked or tapped these would bring up exclusive interview clips with Naughty Boy and his collaborators. To reward the avid explorer, we also hid some additional interactive elements and hidden easter eggs.



The initial reaction to the site has been overwhelmingly positive and we have received a wide range of praise from the project stakeholders and our colleagues in the industry alike, however this is only the start of Naughty Town. With several other exciting releases in the pipeline, we will be adding to the site and creating entirely new sections of the map well into 2018.

Visit the live site at naughty-town.com