Backline Design system

When I joined Festicket, the company was in the middle of collaborating with a brand agency to figure out what the brand should represent. What I cover in this case study will give you some insight into that new and improved brand and how we used it to create the official Festicket design system, Backline.

My Role

Product Designer

Collaborators

Guillaume Verbaere
Jack Parrish
Belen Poyo
Jevgeni Tarlokov
Natalia Trotyl

Our Goals

To adapt the new brand's look & feel across the entire product

the brand

The brand exploration and final logo delivery was completed by Proxy. We knew we wanted a bold, edgy brandmark that we could integrate across different areas and they really helped bring that to life.

1

Colour palette

For the colour palette we knew we wanted to be able to assign each festival with a colour that best represents their appearance for that year. This was a concept we tested through performance marketing and it showed people interacted more when the colour was relatable to that of the festival.

To help us manage the palette, we split it up into 3 categories Global for neutral content, Theme for festival related content & Safety for validation.

2

Component Library

We started by taking several generic components we knew we needed to begin with and used them as a basis for structure and inspiration. This helped us figure out the spacing system we wanted to use and the typography rules we wanted to follow.

From there, basically any feature we were working on where new components would add to the user experience we would spec out to be built when the feature was handed over to the developers. These components eventually all got added to a sketch library where they are being used today.

3

The Spacing System

For spacing, we chose to work with a 5pt baseline grid and set up a responsive system that worked for both design & development.

4

Iconography

We split our iconography into 2 levels depending on purpose. Functional to represent or support actions and Display to support labels or messaging.

5

Illustrations

For illustrations we needed something to work with our global greyscale colours as well as our theme colours so incorporating a kind of frame for each piece gives us that added bit of flexibility for incorporating white into the palette letting the foreground stand out from the background.

6