Website for rock band Backyard Babies

December 2014 to June 2015 (part-time)

In 2015 Swedish rock band (and personal favorites) Backyard Babies made a comeback after a five-year break. Their online presence had deteriorated and now they needed help with a new website for their upcoming album and tour. I got to design and develop it.

Quick Summary

The Backyard Babies website used on a desktop web browser. — The discography page on the Backyard Babies website.

My coworker Rickard Linder and I shipped backyardbabies.com in June 2015 after having worked on it part-time since December 2014. It improved visibility for the band in Google searches and provided fans, journalists, and event organizers with what they needed in time for the band’s first album and tour in five years.

We designed and built the website mobile first to make sure it had great performance and worked well on mobile devices. I was responsible for user research, writing content, wireframing and development. Rickard focused on graphic design where he involved Backyard Babies lead guitarist Dregen for capturing the band’s grit and vibe.

Shortly after shipping the website I switched employer and has since then not done any additional work on it. I still listen to Backyard Babies just as much as a did before though.

Background

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

I was slowly losing faith in the future of rock ‘n’ roll until I one day turned on my parents’ TV to watch the Swedish music video show Voxpop. there I saw the video for Backyard Babies’ new single Brand New Hate.

It. Blew. My. Mind.

The video for Brand New Hate was directed by Jonas Åkerlund and Jocke Åhlund.

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 had already developed a website for their lead guitarist Dregen in 2013. I jumped at this opportunity and started working part-time in December 2014.

Backyard Babies and I on top of a building in Stockholm — Finnish photographer Ville Juurikkala took this photo. The band was on the roof at Regeringsgatan 20 in Stockholm for a photoshoot in February 2015. I made coffee for them.

Goals

Based on my deep love for loud rock music I’d say that rock bands usually have terrible websites with out-of-date content. Hence, I set out to make the best website ever for a rock band.

I also wanted to teach the guys in the band about the importance of keeping up one’s appearance online for SEO purposes.

Backyard Babies and the HiQ team — The band and the HiQ team: Nicke Borg (vocals, guitar), me, Johan Blomquist (bass), Rickard Linder, Dregen (vocals, lead guitar) and Helena Forsmark (sales at HiQ), and Peder Carlsson (drums).

Design Process

As the project lead and after having experienced several frustrating projects over the years, I wanted to set up a smooth design process.

Identifying users

For making the best rock band website ever we knew we needed great content. Hence, we had to learn what type of users we were designing for. After meetings and discussions with the band and their manager Per Kviman we knew had to please:

Casual fans
Die-hard fans
Journalists
Gig and festival organizers
The band members themselves

Once we had identified these types of users, I reached out to them to learn more about what they’re usually looking for on a band’s or musician’s website. My prior coworkers at Finnish newspaper Nya Åland were especially helpful.

Writing content

After having summarized all user insights, I wrote all content for the website. For feedback, I included members of the band, their management, a journalist, and a couple of rock music fans I knew.

The press kit proved to be most challenging to write. I wrote an initial light-hearted draft that the band found too tongue-in-cheek and wasn’t satisfied with at all. Their management took over, didn’t include me, and wrote multiple drafts that I didn’t think held up.

In the end, I got to make some edits to the final draft. It was a good compromise, but a lot of time and energy I didn’t have (I was working on two projects in parallel at the time) was wasted.

Trouble finding images of all record covers Finding images of the band's record covers for the discography page proved to be surprisingly difficult. We found most covers using Google and the amazing Discogs community, but many were too hard to find in decent quality. Guitarist Dregen came to the rescue by taking photos of his personal record collection. Thanks to him we even found obscure promo singles that we knew die-hard fans would love to learn about.

Drawing wireframes

I then drew wireframes of the website, both for small and large screens. Everything in-between I would design in the browser in order to save time.

Before getting the wireframes approved by the band, I asked some other designers at HiQ to have a look at them so we could find and fix potential usability and copywriting issues.

Wireframe of the discography page with some annotations about categorization. I drew a lot of wireframes like this one.

Lots of paper wireframes and some notes on a table — We used wireframes in meetings to put focus on content and layout instead of graphic design, which we would work on later. They band dug this way of working.

Creating graphic design

For creating the graphic design, Rickard and I worked with the band’s lead guitarist Dregen. Calling Dregen the visual designer of the band would be fitting. He has drawn the band logo and is (somewhat) in charge of their visual appearance, album artwork, and promotional photos. He has also done graphic design work for his other band, The Hellacopters.

Throughout the design process, Dregen was involved in a lot of details. For example, he wanted the buttons on the website to have a punk rock vibe. Hence, we went with his suggestion of using pink and yellow like the cover of the legendary punk album “Never Mind the Bollocks, Here’s the Sex Pistols”.

Working with a well-known brand is a delicate matter, but a band is more than that. The four guys in Backyard Babies have been making music and touring for over 30 years.

Backyard Babies rehearsal space wall — One of the heavily decorated walls in the band’s rehearsal space. We used stuff this for inspiration.

One of the style tiles Rickard and I created to find the right look and feel.

Development and browser testing

After having finished writing the content and creating the graphic design, I finally started developing the website. My fingers were itching!

At the time, I was heavily interested in responsive web design and working mobile first. I was fed up with slow-loading websites poorly designed for small screens and touch input. I wanted to make a state-of-the-art responsive website.

Apart from some coworkers at HiQ who helped out with browser testing, I did all development. It was such a rewarding experience to start from scratch and write code without any technical debt.

Result and impact

The result was a true mobile first website with great content that captured the Backyard Babies vibe and grit. It was released in the Summer of 2015 and is still online at backyardbabies.com.

The website got great feedback from fans, organizers, and journalists. It also increased the band’s visibility in Google searches. Mission accomplished!

When we launched the website, the band was about to hit stages all over Europe and release their new single Thirteen or Nothing from their album Four by Four. Now, they had more help marketing their comeback.

The Backyard Babies website on a desktop web browser. — The discography page. Dregen sent us photos of album covers from his personal record collection.

The Backyard Babies website used on Mobile Safari on an iPhone X. — Performance on the discography page would have benefited from using lazy loading.

How it made me feel

Working with my good friend Rickard and one of my all-time favorite bands was both exciting and educational. As a fan of the band, I constantly had to pinch myself. It felt unreal!

Unfortunately, I couldn’t keep maintaining the website after switching to my new employer inUse later in 2015. The band and management wanted to keep me on board, but I couldn’t do it for contractual reasons.

Technology

The website was developed using WordPress. Primarily since Dregen already had experience using it. For saving time I made a child theme of the official WordPress theme Twenty Twelve.

For plugins I used Yoast SEO and W3 Total Cache for improving SEO and performance. Disqus Comment System was used for its superior spam filter.

I chose Sass for writing easily maintained CSS, but didn’t rely on any framework like Bootstrap. However, I did use HTML5 Boilerplate for keeping the HTML markup tidy and up-to-date with current best practices.

All images were compressed using either JPEGmini or TinyPNG. This had a big impact on performance together with the W3 Total Cache plugin. Performance was measured using Google Pagespeed Insights and by browsing the website on my smartphone in areas with poor 3G reception.

I used third-party Javascript libraries like Picturefill and Waypoints for implementing responsive images and triggering events when scrolling.

Future improvements

I haven’t maintained the website since the Summer of 2015. However, if I could make any improvements I’d make the following:

Remove social media sharing buttons
Automatically compress uploaded images
Create a WordPress theme from scratch for less code
Implement lazy loading for images on the discography page
Remove support for legacy browsers like Internet Explorer