UI/UX, Mobile Experience, Web Game Design, Branding

Hennessy X NBA

Year: 2022

Duration: Over 6 months

This project for Hennessy V.S.O.P. in collaboration with NBA lasted across two phases. The first phase included a multiplayer game with online scoreboard and prize pool. Its second phase consists of a marketing campaign showcasing cocktails inspired by NBA teams and a local refurbished Hennessy themed basketball court.

The overall design was largely kept consistent with the branding guidelines of the Hennessy and NBA collaboration. The visual design drew heavy inspiration to elements of street basketball and graffiti. To imitate the look and feel of graffiti, each button was designed with custom hand-written looking font.


Overview

I developed the art direction and overall aesthetic, creating a dark ambient environment with spotlighting to evoke a street basketball vibe. This included using custom graffiti fonts, spray paint backgrounds, and brick textures, complemented by accents in NBA blue and red. I also designed custom iconography and buttons that light up on hover, utilizing NBA brand colors and graffiti-style fonts for each button. My responsibilities extended to wireframing and laying out the event registration process, confirmation pages, gameplay, cocktail viewing, and sharing functionalities.

In terms of gameplay design, I crafted elements such as the loading screen, countdown clock, ball spinning animations, gameplay interface, button interactions, and features for joining and hosting game rooms. Additionally, I exported and aligned visual assets for development.

User testing focused on several key areas, including creating a room to identify any UI and backend issues, inviting another player to ensure proper confirmation and setup, and assessing the overall gameplay experience for smooth animations, lag, excitement generation, gameplay duration, and loop. Finally, I evaluated the ranking system for live updates and the ranking board functionality.

Design System

Typography

Color

Iconography

Wireframe

Layout (Phase 1)

Layout (Phase 2)

Other Works

MTR Tap Tap Game

Gold Coast Piazza

Gold Coast Residence