To content

Alexander Skogberg

UX, Web & Writing

Backyard Babies promotion photo

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. They needed a new website. This is how it came to be.

Backyard Babies is one of my all time 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 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. On the show, 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.

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

This is the story of how I designed and developed 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 developed a website for their lead guitarist Dregen in 2013, I jumped at this opportunity!

Backyard Babies and I on top of a building in Stockholm
Finnish photographer Ville Juurikkala took this photo. The band and I were on the roof at Regeringsgatan 20 in Stockholm for a photo shoot in February 2015.

Goals and challenges

Based on my fandom, rock bands usually have terribly built and designed websites with out of date and poor content.

I set out to make the best band website ever and teach the guys in the band about the importance keeping up their appearance online.

Since I was the project lead, I wanted to set an example of a smooth and well-structured design process. Together with my good friend and graphic designer Rickard Linder and the band members, we created a small and powerful team.

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) on the floor.

Design Process

This is how Rickard, the band and I set up the design process.

Finding our users

For making the best band website ever we knew we needed great content. This meant we needed to learn more about who we were writing for and what these people wanted and needed. After meetings and discussions with the band and their management we knew what we needed to please:

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

Once we identified these groups of people, I reached out to them for learning more about what they’re specifically looking for in a band website.

Writing the content

After having met these people and analysed their needs, I wrote the content for the entire website. For feedback I included members of the band, their management, a journalist and a couple of rock music fans. Their input was invaluable!

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

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

Solving the challenge: Finding images of record covers
Finding images of the band's record covers for the discography page proved to be more difficult than expected. We found most of of the covers using Google searches and the excellent Discogs community, but many were impossible to find in good enough quality. The band's lead guitarist Dregen helped us by taking photos of his personal Backyard Babies record collection. This way we even found some unknown promo singles that we knew die-hard fans would love to learn about.

Drawing wireframes

With the content set, I drew wireframes of the entire website. One variant for small screens and one variant for large screens. For saving time, everything in-between would be decided in the browser during when developing the website.

After drawing, I evaluated the wireframes with some of my designer colleagues, before getting them approved by the band.

Early wireframe of the discography page with some annotations about content. Lots of wireframes like these were drawn.
Lots of paper wireframes and some notes on a table
Paper wireframes where used in meetings with the band for focusing on content and layout and not graphic design which would be done later. They dug this way of working.

Creating the graphic design

For creating the graphic design of the website, Rickard and I worked closely with the band’s lead guitarist Dregen, who was incredibly pleasant to work with.

Calling Dregen the graphic designer of the band would be fitting. He has drawn the band logo and been in charge of their visual appearance, album artwork and promotional photos since the beginning. He’s also done graphic design work for The Hellacopters and Michael Monroe (of Hanoi Rocks).

Throughout the design process Dregen was involved in a lot of details. For example: He wanted the buttons on the website to feel punk rock. Hence, we went with his suggestion of using pink and yellow just like on the sole Sex Pistols’ studio 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 members in Backyard Babies have been together for over 30 years. It’s not their jobs, it’s their entire lives.

Backyard Babies rehearsal space wall
One of the the well-decorated walls in band’s rehearsal. We used this for inspiration.
A mixture of different typefaces, colors, buttons, the band logo and so on.
One of the style tiles Rickard and I put together for finding the right look and feel.

Development and browser testing

After finishing the content and 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 that were poorly designed for small screens and touch input. The goal was to make a state of the art 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 and working without any technical debt, which is rare working as a consultant.

Result and feedback

The end result was a truly mobile first website with great content that really captured the Backyard Babies vibe and grit. After its release in the Summer of 2015, you can still visit it at backyardbabies.com.

The website got great feedback from fans, organisers and journalists. It also had a positive 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 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. Finding photos of all record covers took a lot of time. Luckily, Dregen helped out by taking photos of his collection.
The Backyard Babies website used on Mobile Safari on an iPhone X.
Great performance was a high priority for the website. However, the discography page could have been even faster if I had used lazy loading for its images.

How it made me feel

Working with my friend Rickard Linder and favorite band Backyard Babies was an educating, joyful and exciting experience. As a fan of the band, I constantly had to pinch myself. It felt unreal!

I’m proud of the website and that band really listened and learned about the importance about keeping up their appearance online.

Unfortunately, I couldn’t carry on developing the website after signing on for my new employer inUse in 2015. The band and management wanted to keep me onboard, but couldn’t for contractual reasons.

Technology

The website was developed using WordPress since Dregen already had experience using it as an editor. A child theme of the official WordPress theme Twenty Twelve was developed. Popular plugins like Yoast SEO and W3 Total Cache were used for improving SEO and performance. Disqus Comment System was used for handling comments.

Sass was chosen for writing easily maintained CSS. No framework was considered, apart from 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 huge impact on the performance along 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 broadband bandwidth.

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

Future improvements

As of the Fall of 2015, I do not maintain the website any longer due to contractual resons after switching employer. However, if I were to make any improvements to performance and maintainability I’d do the following:

  • Remove social media sharing buttons
  • Automatically compress uploaded images
  • Create a WordPress theme from scratch for less code bloat
  • Implement lazy loading for images on the discography page
  • Remove support for legacy browsers like Internet Explorer 8 to 10
Much responsive Many CSS Very breakpoint So media query Such HTML Wow