Namit

Namit is an iOS game app in which players “name” things on the category cards that will be given. The cards tell random categories, and users will take turn to answer in a certain period of time. When a player cannot answer on time, he or she will have to do variety of challenges which makes the party more fun and exciting. It is the perfect ice-breaking game app for any socializing environments.

Download on the App Store

URL: https://smakerspace.github.io/namit
Team size: 2 (Me and iOS developer)
Duration: 1 month

MY ROLE

My role in this project was a UXUI designer. In addition to UXUI design, I did branding and have set up a landing website (HTML/CSS/Javascript).

 

USER TYPE

Namit is targeting young people who enjoy parties and drinking games. I made the overall design to resembles a dark party venue with vibrant light. It is a modern and flat design that attracts young users. The user flow is simple enough to play when the users are drunk.

 

FLOWCHART

 

PROTOTYPE

 

DESIGN PRINCIPLES

User Journey Simplification


The app is designed based on a principle that gives only one pathway to do one task. I hid some of contents strategically to limit the user flow and leave a simpler path way.

Controlling User Behavior


To avoid users getting confused by many instructions, I intentionally minimized the amount of instruction texts. For example, to make sure that the user sets players before playing, it forcefully shows the user setting screen when the user opens the app for the first time.

Managing User Stress


I discovered that user stress can pile up even if individual task is small. Because this is a party app, the app is structured to minimize repetitive buzz-kill moments by giving one bigger task at the beginning of the user flow alternatively. Repetitive moments are limited for only increasing excitement of the playing experience.

Visual Clarity


All of components in the app have strong visual consistency because this is a party game app, and the users might be under influence. For example, all of the buttons have red with drop shadow, and all of messages/instructions have white outline.

 

BRANDING

Logo sketch
Logo Sketch


 

LOTTIE INTEGRATION

Several animations are used to increase visual clarity and serve as visual feedback. Conventionally making animation programmatically is a very time consuming task for developers. In this project, me and the team used a library called Lottie by Airbnb to speed up the task. I created all of animations in Adobe After Effects, and the developer just used JSON file that is generated by Lottie plugin. Using Lottie made implementing animation extremely easy, precious, and quick in the team.

Animation example
Animation example
Tutorial Screen Animation
Tutorial Screen Animation

SaveSave

SaveSave

SaveSaveSaveSave