XL Recordings

Designing and building a webpage dedicated to the 1997 album “Fat of the Land” by The Prodigy.

ui design + branding

Overview

This project was done for the D&AD New Blood Awards 2022 competition. The brief by XL Recordings was to design and build a dedicated website for the 25 year anniversary of the 1997 album “Fat of the Land” by The Prodigy.

I teamed up with Jenny Hedlund (Berghs SOC). After 3 weeks we had a working mobile website built in Webflow.

What

UI Design
Branding

Where

D&AD Brief
Berghs School of Communication

When

Spring 2022

Personality

Raw & Noisy
Rebellious & Unpolished
1997 vs 2022

Research

Investigation of the past and present

We engrossed ourselves in the band, the album and the zeitgeist of 1997. We didn’t want to fall into the trap of creating only a nostalgic throwback, and thus explored what the prodigy represented back then and how that would translate onto today. The Fat of the Land was a groundbreaking and genre transcending album ahead of its time, and we wanted to mirror that in our designs, whilst also bringing forth the nostalgic grunge of the late 90s.
Tonality and Brand

Defining a tone of voice

About as polished as public toilet doodles - that was our early direction for the brand. We elaborated that initial direction through 6 keywords. We explored the keywords further by creating two moodboards.

Brand keywords
- Raw
- Punk
- Rebellious
- Noisy
- Unpolished
- "Fuck-off-mentality".

Our moodboard inspired us to pursue an analog feeling for the brand. We explored what this could entail through a workshop. We collected various materials, manipulated them and digitalized them with a scanner and cameras.
Moodboard 1.
Moodboard 2 - picked for the project.
Our moodboard inspired us to pursue an analog feeling for the brand. We explored what this could entail through a workshop. We collected various materials, manipulated them and digitalized them with a scanner and cameras.
We assembled our brand explorations into a Brand Toolbox.
Wireframes

Early UI sketching

Early low fidelity sketching and wireframing defined what we would build - what user journeys our demo would support, how those pages would roughly look and what assets we might need.
Asset creation

Creating the funky shit

We worked almost exclusively with assets created by us. This would allow us to have a unique brand which would convey the analog DIY-aesthetic.

Imagery
We scanned and photographed materials and textures in order to achieve the analog expression.

Typography
We created our own font (called "Funky Shit Sans") by writing letters with a marker pen on transparent plastic, throwing gravel on it, scanning it and then process it using Glyphs.

GIF:s
We created moving gif:s by screen capturing music videos and related material. These were used to space out the website and create breathing space between the cluttered sections.

Decor
We scanned and cut out png-images of tape and other materials which were used as floating assets on the webpage, mainly masking the orderly division of sections on the webpage.

Merchandise
We created fake merchandise images in Photoshop, inspired by the album themes. The merchandise images use a grainy filter, assuring they fit in with the webpage tonality.

Components
We strived to create components which would closely relate to the analog DIY expression of the brand. We created buttons, product cards, selectors and more. Influences include early desktop operating systems and analog graphic design magazines.
Figma

HiFi UI design

We designed the high-fidelity UI in parallel whilst creating assets and fine tuning the brand. This was the canvas where we explored how everything would come together in a few key pages. I moved on to work and iterate further in Webflow as soon as we had a good enough outline of the entire user journey and a few finished key pages.
final website in webflow

Building the website

I build the webpage using Webflow. Jenny kept creating more assets in parallel with me building the website. The final site consists of seven interactive pages which demo our concept.
The band ("nostalgia") section
The tracklist section
The merch section
The product page, "Firestarter"
Casefilm

Casefilm &  Walkthrough

The casefilm summarizes the project and was submitted together with the final webpage to the D&AD New Blood Awards 2022 competition,. The films main focus is to convey the tonality and brand of the project.
UI Design

Talkative heading blabla

The ambition was to create a UI that would keep the usability and simplicity of the earlier UX-prototypes while staying true to the modern and minimalist stylescape and brand. This requires a fair amount of exploration in Figma and design critique from other designers who could see the UI from a fresh perspective.

The final app has a typography-heavy minimalist yet fun design. Images and illustrations have been replaced with color fields that add to the funky aesthetic whilst also carrying meaning and intuitively separation categories. My UI-design explorations also brought with them a few extra features that add an additional layer of zest to the app, such as fun descriptions of each category that change every day.