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 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!
Problems and goals
From my experience and 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 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, we created a small and powerful team.
This is howRickard 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
- Gig and festival organisers
- The band members themselves
Once we had 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, 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. 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 too humorous 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 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. We even found 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 for saving valuable project time.
I then usability tested the wireframes with some of my colleagues, before getting them 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, 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 bands such as The Hellacopters and Michael Monroe of Hanoi Rocks.
Throughout the design process Dregen was involved in many details. 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 for over 30 years. 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 still 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. From time to time, the situation was unreal!
I’m proud of the website and of the fact that band listened and learned about the importance about keeping up appearances online. When it comes to social media markering they though me many valuable lessons.
It was unfortunate I couldn’t carry on developing the website after signing on for my new employer inUse in 2015. The band wanted me to continue, but couldn’t for contractual reasons. However, I’m sure I’ll work together with Dregen again one day.
The website was developed 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 installed for improving performance, SEO and 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 standards.
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 Google Pagespeed Insights and by browsing the website on my smartphone while riding the Stockholm subway.
As of the fall of 2015, I do not maintain the website any longer due to contractual resons after 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, especially Internet Explorer 8 to 10