December 2014 to June 2015 (part-time)
In 2015 classic 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, which I designed and developed.
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.
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 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.
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.
As the project lead and after having experienced several frustrating projects over the years, I wanted to set up a smooth design process.
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
- 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.
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.
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.
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.
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 feedback
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.
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.
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 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