ART DIRECTION, DESIGN & UX

HIP HOP MASTERCLASS.

Turning an A1-size, visual puzzle containing 75 artists from the golden era of boom-bap hip hop in to a fully functioning mobile and web game.

ARTIST

Thomas Fowler


CONCEPT & UX

FelixGoFelix


DEVELOPMENT

Pilonce


THE CONCEPT.

Hip hop’s answer to the successul ‘Say What You See’ series of apps, HHMC is built around a stunning handdrawn piece filled with clues that are equally humerous and unsettling. Rendered in black and white, the image harks back to the ‘Rap Gods’ style of images often found in poster stores in the late 90s and early 00s.

I was approached to establish an identity for the brand and design a user interface for web and mobile.

//www.adamshabbodevelopment.com/adam-hunt/wp-content/uploads/hhmc-1.jpg

THE DIRECTION.

Initial exploration looked at pairing the image with a freehand-graffiti inspired interface. However, the two hand-drawn styles didn’t sit comfortably alongside one another and the ornamental style of tagging doesn’t lend itself well to typography as functionality. The key visual should remain the centrepiece with any framework around acting as an enabler for playing the game.

//www.adamshabbodevelopment.com/adam-hunt/wp-content/uploads/hhmc-2.jpg

Looking to iconic album covers, the bold type-setting of 90s/00s urban magazines and one of hip hop’s key touchstones, Scarface, I set out a simple pallet of black, red and white. This would be complimented by an authoritative, all caps sans-serif for headlines and CTAs. American Typewriter for the body copy is another hark back to a not too distant past.

//www.adamshabbodevelopment.com/adam-hunt/wp-content/uploads/hhmc-3.png

THE MOBILE APP.

The intricate drawing is built in a solid and clear framework for portrait
and landscape configurations.

HHMC Intro screen

Homescreen
Having logged in to the game through either a simple form or linking with their Facebook account, users are greeted by the cherubic face of Brooklyn’s very own Lil’ Kim.

HHMC - Artwork screen

Full screen
The game starts with the user being presented the full artwork to navigate.

HHMC - List view

List view
The list is accessible from the home screen or top right hand corner. This helps keep track of all the artists you have uncovered as well as selecting the ones you haven't.

HHMC Clue

Enter your guess
Having selected part of the image, users are prompted to enter their guess.

HHMC - Clues

Clues
Hints and clues can be unlocked with coins via in-game purchases or liking on Facebook.

HHMC - Profile

Artist bios
Once an artist has been discovered, the user is played a clip from a song and given access to a bio as well as links out to the iTunes store and their artist site.

HHMC - Restart

Pull it back
The game can be restarted by using the turntable mechanic.

THE WEBSITE.

The website works as a translation of the native app for web. On mobile browsers, the game play area is replaced with a prompt to download the app. Users can split gameplay across devices by using the same login credentials.

//www.adamshabbodevelopment.com/adam-hunt/wp-content/uploads/hhmc-4.jpg//www.adamshabbodevelopment.com/adam-hunt/wp-content/uploads/hhmc-5.jpg//www.adamshabbodevelopment.com/adam-hunt/wp-content/uploads/hhmc-6.jpg