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 a few occasions.
This is the story of how I designed and developed their website.
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!
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.
This is how the design process was set up by Rickard and I.
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 they 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
- 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 looking for in a band website.
Writing the content
After meeting these groups of people and analysing their needs and wants, I wrote the content for the entire website. 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.
The text for the press kit proved to be most challenging to write. I wrote an initial draft that the band found too humorous 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 since they were 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 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 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. The band's lead guitarist Dregen saved the day by taking photos of his personal Backyard Babies record collection and emailing them to us. We even found out about some unknown promo singles, which we knew the die-hard fans would love to learn about.
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.
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 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 bands such as The Hellacopters and Michael Monroe.
Throughout the design process Dregen was involved in many details. He was incredibly pleasant to work with. For example: He 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’ 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.
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.
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.
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 one day.
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.
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