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. Among many things, they needed a new website. This is the story of 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!

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 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 incredibly 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 grabbed this opportunity by the throat!

Backyard Babies and I standing on a rooftop in Stockholm.

Renowned photographer Ville Juurikkala took this photo of the band and I when I helped out with a photo shoot. It was taken on the top of Regeringsgatan 20 in Stockholm in February 2015.

Goals

From my experience, 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 to teach the guys in the band about the importance keeping up their appearance online.

Since I was also the project lead, I wanted to set an example of a smooth and well-structured design process. Together with the awesome Graphic Designer (and my good friend) Rickard Linder and the band members themselves (no middle-men), 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 the design process was set up and carried out.

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 and needed.

After some brainstorming 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 knew this, I reached out to these groups of users for learning more about what they’re looking for in a band website.

Writing the content

After meeting these groups of users and analysing their needs and wants, I wrote the content for the entire website. The text for the press kit was written by the band and their management, but they included most of my ideas for edits.

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

Solving the challenge: Finding images of record covers
Finding images of the band's many record covers for the discography page proved to be more difficult and time-consuming than expected. A majority of the covers were found using Google searches and the excellent Discogs community, but many were impossible to find in good enough quality. Backyard Babies' lead guitarist Dregen saved the day, by taking photos of his personal Backyard Babies record collection and mailing them to us. We even found some unknown promo singles, which we knew the die-hard fans would love.

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 developing the website.

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

Paper wireframe of the Backyard Babies website's discography page.

Early paper wireframe of the discography page with some annotations about the content. Lots of wireframes like these were drawn for the rest of the site as well.

Several paper wireframes of the Backyard babies website for a meeting.

Paper wireframes where used in meetings with the band for focusing on content and layout. They dug this way of working and we stayed focused.

Creating the graphic design

For creating the graphic design of the website, Rickard and I worked closely with the band’s lead guitarist Dregen.

Calling Dregen the Graphic Designer of the band would be perfectly fitting. He has drawn the band logo and been in charge of their visual appearance, album artwork and promotional photos since the beginning of the band.

Throughout the design process Dregen was involved in many details. He was incredibly pleasant to work with. For example: Dregen wanted the buttons on the website to feel punk rock. Hence, we went with his suggestion of using the colors of pink and yellow from the Sex Pistols’ first (and only) 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 much more than that. The members in Backyard Babies have been together since the late 80’s. This is not their jobs, it’s their entire lives.

Backyard Babies rehearsal space wall

Photo of one of the the well-decorated walls of band’s rehearsal space in Stockholm. One of the many pieces used 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 to mix and match colors and typography 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 and 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.

Result

The end result was a truly mobile first website with great content that really captured the Backyard Babies vibe and grit. You can visit it at backyardbabies.com.

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

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 the website they needed for marketing their comeback.

The Backyard Babies website on a desktop web browser.

The discography page on the Backyard Babies website. Finding photos of all album covers took a lot of time. Dregen helped out by taking photos of his personal record collection. We even found some promo CDs unknown for die-hard fans, which was really cool.

The Backyard Babies website used on Mobile Safari on an iPhone X.

Since great performance was a high priority, the websites was developed mobile first. If I was still maintaining the website I’d implement lazy loading images, especially on the discography page.

How it made me feel

Working with Rickard Linder and Backyard Babies was an educating, joyful and exciting experience! As a fan of the band, I constantly had to pinch myself. The situation was unreal from time to time.

I’m proud of the website and of the fact that band are still taking care of it and updating its content. They listened, learned and benefitted from it.

It was unfortunate I couldn’t carry on developing their website when I signed on for my new employer inUse in the summer of 2015. The band wanted me to continue working on the website, but couldn’t for contractual reasons.

However, I’m sure I’ll work together with Dregen again in one way or another.

Technology

The website was made 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 for improving performance, SEO and handling comments.

Sass was chosen for writing lean and easily maintained CSS. No framework was considered, only HTML5 Boilerplate was used for keeping the HTML markup tidy.

All images were compressed using either JPEGmini or TinyPNG. This had a huge impact on the website’s performance along with the WordPress plugin W3 Total Cache. Performance was measured using YSlow and Google Pagespeed Insights, but also by browsing the website on my smartphone with poor Internet connection while riding the Stockholm subway.

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 switching employer. If I were to make any improvements, I’d do the following for improving performance and simplifying maintainability:

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