CHUG IT is a flagship game of the game collection inspired by the concept of “social darts”. It merges the social aspect of darts with a creative score visualization above the dartboard.

Starting with a clean slate I designed the information architecture, defined functionality requirements, user flows, created interaction prototypes, and UI design concept, including actionable steps and advice on implementation for the development team.

INFORMATION ARCHITECTURE

This product is a three-part system unit containing a physical dartboard equipped with cameras, a monitor, and a tablet.

Closely observing people interacting with similar products through competitor research, helped me understand the dynamics of these types of games and the way people were interacting with the game unit.

Each “system unit” has its own booth in the bar that can host from 2 to 12 people. So it was important to plan for a flexible UI.

The game needed to be both beginner and advanced player-friendly.

Users were expected to switch attention between the game, social interactions, and the bar. This called for straightforward AI and interactions with minimal complexity.

Using rapid prototyping helps find mistakes early on. This first low-fi prototype of the gameplay pointed out a gap in the rulebook, that couldn’t have been visible before the user flow was made into the prototype.

The second prototype was made to present the interaction in higher fidelity, showing the states of smaller UI elements. It also marked the beginning of the UI design concept ideation.

Watch the prototype video here.

USER INTERFACE

The journey of creating an engaging game doesn’t end just yet. To provide the development team with maximum support, I created the UI design concept accompanied by interaction and animation functionality recommendations.

We went through numerous options of score visualization to choose the right one.

There were many options to consider. Eventually, we settled on a classic – beer! And the game got its name soon after – CHUG IT.

Watch the score ideation video here.

The stylescapes helped the client choose the desired visual style and direction. We went with the “neon” style.

The chosen style informed the rest of my design decisions like animation and interactions style.

To accompany the documentation, along with the prototypes and user flows, I added a quick style guide of the design concept.

Watch the design concept video here.