To content

Alexander Skogberg

UX Designer in Stockholm

Hi, I’m a UX Designer based in Stockholm. I dig design systems, accessibility, and loud rock music.

Backyard Babies promotion photo

Website for rock band Backyard Babies

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.

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

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

Goals

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.

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).

Design Process

As the project lead and after having experienced several frustrating projects over the years, I wanted to set up a smooth design process.

Identifying users

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
  • Journalists
  • 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.

Writing content

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.

Drawing wireframes

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.

Wireframe of the discography page with some annotations about categorization. I drew a lot of wireframes like this one.
Lots of paper wireframes and some notes on a table
We used wireframes in meetings to put focus on content and layout instead of graphic design, which we would work on later. They band dug this way of working.

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.

Backyard Babies rehearsal space wall
One of the heavily decorated walls in the band’s rehearsal space. We used stuff this for inspiration.
A mixture of different typefaces, colors, buttons, the band logo and so on.
One of the style tiles Rickard and I created to find the right look and feel.

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.

The Backyard Babies website on a desktop web browser.
The discography page. Dregen helped out by taking photos of his personal Backyard Babies record collection.
The Backyard Babies website used on Mobile Safari on an iPhone X.
We should have used lazy loading for images on the discography page to improve performance on mobile devices.

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.

Technology

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 used third-party Javascript libraries like Picturefill and Waypoints for implementing responsive images and triggering events when scrolling.

Future improvements

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
Much responsive Many CSS Very breakpoint So media query Such HTML Wow