In 1989, Nirvana released their first album, Bleach. The album would make way for the birth of nineties grunge and tackled many aspects of American society that the majority of bands out there (excluding the punks) didn’t dare write songs about. Fast forward 30 years; are the themes discussed in Kurt Cobain’s lyrics still current? And what on Earth does that have to do with AMP stories?
If you haven’t heard of AMP yet, it’s a framework that extends HTML to improve page loading speed, to provide users with the best mobile (and desktop) experience possible. As marketers, we know the value of strong storytelling, which is why we think AMP stories are an integral part of the mobile experience. Through powerful visuals, AMP stories give the consumer an immersive brand experience like never before.
If you were to guess what project brought together Serpico by Croud’s Strategy and Planning Executive, Lisa Sajwani, Global Head of Technical SEO, Kevin Ellen and Creative Leads, Andrea Mattioli and Maria Evrenos, our money’s on you not having the faintest clue. Don’t worry, they didn’t either. But as four very different personas, who work in different departments, they were excited to be called upon to collaborate and create Serpico by Croud’s very first AMP story, for the recent Serpico x Google: Mobile maturity roundtable event.
This article, written in collaboration by the team, explores the journey towards Serpico’s first AMP story: 30 Years of Nirvana Bleach.
Understanding your audience
Strategy and Planning Executive, Lisa Sajwani
As Serpico’s Strategy and Planning Executive, my first thoughts for the content AMP story revolved around understanding who the audience is, and what their interests are. You cannot create the subject without first understanding who you are going to target. We knew that with a tech-innovative structure such as the AMP story, that we’d want to target tech seniors at brands and so alongside Creative Design Lead, Andrea Mattioli, we decided that the AMP story would focus on Generation X – those born between 1965 and 1979.
Using a variety of insight tools including Global Web Index and Hitwise’s TGI data, I dug into the data around the interests of Generation X. Initial results showed that Generation X are over-indexed in music, above all other social interests, and nostalgia. And that’s when the run really began.
As I ran a deeper analysis of Generation X, I found a survey from Fona which stated that Generation X has a strong interest and/or passion for either Madonna or Nirvana. The link between Nirvana and/or Madonna and nostalgia was too strong for us to ignore, and so we decided to choose Nirvana to be the subject of our AMP story. I began to research the band and quickly found that Nirvana’s debut album, Bleach, had turned 30 last June (2019).
Shocked at the serendipitous turn of events, and equally very excited, we realised we had found Serpico’s first AMP story. It would take the form of illustrating stories of songs from the underrated album and bringing them to life – whilst also taking a peek into Kurt Cobain’s mind in the process. But that wasn’t all, we decided that to truly make it relevant to Generation X, we would take the subjects of six songs from Bleach, and compare the numbers of these societal topics within the US from 1989 to present day. This would add an emotional element to take Generation X through the last thirty years of their lives.
As I began my descent into Bleach, I found myself transported back to 1989, and faced with Kurt Cobain’s thinking behind all eleven of the sinister songs that make up the album. Once we had the six songs, the copy and the data, I passed them onto our creative leads to design the spectacular visuals that would accompany this menacing sequence of songs.
Raw and nostalgic animations
Creative Design Lead, Andrea Mattioli
When we decided to use Nirvana’s Bleach album as a way to convey how society has evolved over the past 30 years, the first challenge we faced was finding a way to make the graphics look authentic, yet somehow give the viewer something unexpected to see.
Grunge aesthetics are far removed from today’s pixel-perfect and user-friendly design, but we decided to treat ourselves and our audience to something a bit unusual, a bit nostalgic and a bit rough around the edges.
We started by deconstructing the album cover from a visual standpoint and picked the most relevant elements to incorporate within the graphics.
We used the font Sardonyx for our headlines, as we wanted to be in line with the album’s artwork, but most importantly, Sardonyx is the font of Nirvana’s logo that they used throughout most of their career. Using Sardonyx was a way to instantly make the visual connection with Nirvana and resonate with our audience on some level.
The most iconic and recognisable feature of Bleach’s album artwork is the negative film effect, which we used throughout the AMP story. We added two bright complementary colours; cyan and red, in order to amplify some of the movements within our artwork.
As AMP supports video as well as graphics, we decided that looped animations were going to be the best visual route for the stories. We wanted to create animations that both spoke to the lyrical contents of the songs, but also the broader social themes.
David Carson’s Ray Gun magazine was probably our first stop when it came to grunge visual research, given how influential he was in his time. We combined his style with our animated loops, which we created using Sketch and Toon, which in our opinion, gave the AMP story with an overall grunge effect we were looking for, whilst also providing enough visual surprise to keep the viewer engaged and the attention span in check.
The tech we used to take flight
Global Head of Technical SEO, Kevin Ellen
Armed with the content and designs, it was time to add the tech. AMP stories are built in the same way as a normal HTML page, but they have various restrictions which require additional AMP story-specific elements. Starting with the ‘skeleton’ I had the ‘pages’ (or ‘slides’) rapidly available with the content. The next step was defining fonts used colours and setting up the groundwork where we can easily change the designs of the slides – allowing us to implement the designs created.
With the skeleton ready, I implemented the secondary requirements, which included defining the theme colour to dictate the colour of the navigation bar for the browsers who support this (for example Chrome), as well as a very extensive structured data object.
While we humans understand that Bleach is a music album by Nirvana, search engines and other bots do not. The implementation of structured data allowed us to define that this is about a music album (Bleach) by the artist Nirvana. We even took the opportunity to include the band members of Nirvana from 1989 – information we could reuse when we defined who was credited as members of the album.
Of course, we also wanted to learn how people visit the story and what pages they view. Luckily, AMP stories allowed Google Tag Manager and Analytics to be seamlessly implemented. Each story page that becomes visible to a user, an event is fired with the name of the page as ‘event label’.
Armed with all three elements to this project, we were able to create Serpico’s very first AMP story. We encourage you to lose yourself in ‘Bleach’ and celebrate its 30 years of existence, through the power of our research, in-house designs and powerful tech.
You can take a full look at Serpico’s AMP story here, and if you’d like to know more about AMP and how we can help, get in touch.
