The Brief

Design a website for an event series

Tools

Atom, Adobe Illustrator, Adobe Photoshop & Figma

Duration

5 weeks

When

Sep 2019

'Cartel Madras' Website Re-Design

orange background with multiple app screens layered on top
The Brief

Design a website for an event series

Tools

Atom, Adobe Illustrator, Adobe Photoshop & Figma

Duration

5 weeks

When

Sep 2019

The Problems

I did an initial design audit of Cartel Madras' website and discovered:

Tour Dates Hard to Find

Tour dates, locations, and supporting artist information is hard to find.

No Memorable Aesthetic

Cartel Madras' aesthetic is extremely bold, while the website looks dated and subdued.

Business Objectives

The goal was to produce a website that promotes the band, Cartel Madras - particularly their new tour and album, 'Planet Goonda'. Additionally, I wanted to produce a digital experience that streamlines ticket purchasing for Cartel Madras' live shows and drives more traffic to their social media pages.

The Solution

A digital platform redesign will help the website better reflect their brand.

Ultra-Modern Feel

This will be done through underground modern typography, a Brutalist/Pop Art colour pallette, and glitch reworks of images.

Fresh yet Grunge-y

The simple, clean look of the website elements will contrast with unconventional web type setting.

Editorial Tone

Cartel Madras is legendary for their fashion-forward, stunning photos on Instagram, so the website should feel similarly editorial.

Site Map

Diagram of the app's man components

Low & Mid-Fidelity Wireframes

I began the process of redesigning the website by plotting out content with sketches.

Using low and then mid fidelity wireframes, I was able to identify where the content needed to placed - and work within the constraints of a fully front-end coded website.

1 / 11
Cartel Madras process work 1
2 / 11
Cartel Madras process work 2
3 / 11
Cartel Madras process work 3
4 / 11
Cartel Madras process work 4
5 / 11
Cartel Madras process work 5
6 / 11
Cartel Madras process work 6
7 /11
Cartel Madras process work 7
8 / 11
Cartel Madras process work 8
9 / 11
Cartel Madras process work 9
10 / 11
Cartel Madras process work 10
11 / 11
Cartel Madras process work 11

Image Edits

The creative direction for the website is a new wave aesthetic combined with the 'bad-ass' nostalgia of 90s hip-hop.

These edits were designed to look as if they were cut out of magazines and to capture a gritty, grungey visual aesthetic. Thick, high-contrast grain, color noise, and high-pass filters are used to emulate this effect.

Cartel Madras

Two dark-skinned women wearing stylish clothing

Original photography by @unfoldingcreativephoto (Instagram)

Snotty Nose Rez Kids

Two dark-skinned men holding microphones and dressed in black

Original photography by @nolanguichon (Instagram)

Jae Sterling

Dark-skinned man wearing comfortable athletic clothing and holding a cellphone

Original photography by @yungkamaji (Instagram)

Logo

This logo draws from the trend of using Blackletter fonts for the brand identities of Hip-Hop and Rap musicians. The font 'Unifraktur Cook' is used to create an elegant, intricate aesthetic - with help from the ornate serifs and the refined, modernized Blackletter letterforms.

The letters 'e' and 'd' have their strokes connected to represent the duality and connection of sisters Priya and Bhagya - the members of Cartel Madras - and to create an overall visual unity.

Logotype of 'Cartel Madras'

Mood Boards

#1

Moodboard 1

#2

Moodboard 2

Style Guide

Style guide for the Cartel Madras website redesign