Alexander Skogberg

UX, Web & Design

To content

Website for rock band Backyard Babies

In 2015, legendary Swedish rock band Backyard Babies made a comeback after a five year hiatus. During these years, their online presence had heavily deteriorated (and it wasn’t that great to begin with). Among many things, they needed a new website. This is the story of how it came to be.

Backyard Babies website

Backyard Babies is one of my favorite bands. When I was a teenager in the early 2000’s, rock and metal were in a poor state. Limp Bizkit were climbing the charts, Axl Rose had gotten cornrows and guitar solos seemed to be a thing of the past.

I was losing faith in the future of rock ‘n’ roll, until I one day turned on the TV and the Swedish music show Voxpop. There, I saw the video for Backyard Babies’ new single Brand New Hate. It blew my mind!

Since then, I’ve gotten all of their albums, seen them live six times and met them on numerous occasions.

This is the story of how I made their website.

Background

For their 2015 comeback, Backyard Babies had signed a deal with my former employer HiQ. They needed a digital partner for marketing their upcoming tour and album and staying ahead in the ever-changing and tough music industry.

A new website was on top of the to-do list and since I successfully developed a website for their lead guitarist Dregen in 2013, I jumped at the opportunity.

Goals

From my experience, rock bands usually have terribly built and designed websites with out of date content. I set out to make the best band website ever and to teach the guys in the band about the importance keeping up their appearance online.

Since I was also the project lead, I set out to create a smooth, fun och well-structured design process.

Together with the awesome Art Director Rickard Linder (also a great friend of mine) and the band members themselves (no middle-men), I wanted to set an example for how to plan and carry out a project like this.

Design Process

Finding our users
For making the best band website ever, we needed great content. This meant we needed to know who we were writing for and what they wanted.

After some brainstorming with the band and their management, we knew what we needed to please fans, journalist, gig and festival organisers and the band members themselves.

Writing the content
With the different groups of users and their needs analysed, I wrote the content for the majority of the website.

For feedback, I had included members of the band, their management and some journalist and fellow rock fans. The feedback from them was invaluable.

Drawing wireframes
With the content set, I drew wireframes of the entire website. One variant for small screens and one variant for larger screens. Everything in-between would be decided in the browser when writing the actual code for the website.

Wireframe from Backyard Babies website

Early paper wireframe of the website’s discography page.

The wireframes were usability tested by some of my colleague UX Designers, before being approved by the band.

Creating the graphic design
For creating the graphic design of the website, Rickard (the Art Director) and I worked very closely with the band’s lead guitarist Dregen.

Calling Dregen the Art Director of the band would be suitable. He had drawn their logo and was heavily involved in their visual appearance from album artwork to promotional photos.

Throughout the design process Dregen was involved in the smallest details, but he was incredibly pleasant to work with.

Backyard Babies and I on the top of Regeringsgatan 20 in Stockholm, Sweden
Renowned Finnish rock photographer Ville Juurikkala took this photo of the band and I when I helped out with a photo shoot. Lots of fun!

Working with a well known brand is a delicate matter, but a band is much more than that. The members Backyard Babies have been together since the late 80’s. This is not their jobs, it’s their lives.

Development and browser testing
After nailing the content and graphic design, I finally got to start developing the website. The goal was to make a state of the and fast responsive website.

Apart from some colleagues helping out with browser testing, I did all of the development on my own. It was such pleasing experience starting from scratch without any technical debt.

Result

The end result was a truly Mobile First website that really captured the Backyard Babies vibe and grit.

We got great feedback from fans, organisers and journalists and the website made a large impact on the band’s visibility in Google searches.

At the time of the release, Backyard Babies was about to hit stages all over Europe and release their new single. Now, they had the website they needed to help marketing their comeback.

backyardbabies.com

Technology

The website was done using WordPress. A child theme of the official WordPress theme Twenty Twelve was developed. Popular plugins like Yoast SEO, W3 Total Cache and Disqus Comment System were also installed.

SASS was chosen for writing lean and easily maintained CSS. Neither Bootstrap or Foundation were considered. Only HTML5 Boilerplate was used for keeping the HTML markup tidy.

All images were compressed using either JPEGmini or TinyPNG. These tools had great impacts on the performance of the website along with the WordPress plugin W3 Total Cache. Performance was measured using YSlow and Google Pagespeed Insights.

Popular third party Javascript libraries like Picturefill and Waypoints were used for implementing responsive images, triggering events when scrolling.

Future improvements

As of the fall of 2015, I do not maintain the website any longer. If I were to make any improvements, I’d do the following:

Much responsive Many CSS Very breakpoint So media query Such HTML Wow