Scope
UX Design, UI Designn
Team / Individual
Hoang Thuan, Nguyen Huy Thang, Vu Truong Sinh
Domain
Techology
Overview
Cookie Arena is a casual battle game where cookie characters fight in playful arenas filled with color and energy. The goal of this project was to create a cheerful, expressive, and easy-to-navigate interface that instantly communicates fun and friendliness. The design focuses on delivering a delightful experience through bright visuals, smooth interactions, and character-driven UI elements that match the game’s lighthearted tone.
Problem statement
Many casual games tend to rely on generic visual patterns that lack distinct identity or emotional depth. Players often find interfaces cluttered, overly complex, or disconnected from the game’s theme. The challenge for Cookie Arena was to build a UI that feels unique, joyful, and instantly recognizable — one that enhances the gameplay experience rather than distracts from it.
Objectives
Design a UI system that expresses the fun and energy of the cookie-themed world. Ensure smooth navigation and accessibility for both new and returning players. Use color, motion, and iconography to create a cohesive and emotionally engaging experience.
Empathy
We began by observing casual gamers and studying how they interact with similar battle games. Players wanted something simple, fast, and visually engaging. They didn’t want to spend time learning the interface — they wanted to play immediately. These insights shaped our approach to prioritize clarity, energy, and intuitive control.
Define
We identified two main design challenges: first, making the UI easy to read and navigate even in fast-paced moments; second, giving the interface a distinct personality that reflects the fun and whimsy of the cookie universe. From this, we defined our design goal: every screen should feel like part of the same playful world.
Ideate
We explored a design direction built on soft shapes, vivid colors, and expressive motion. Each component — from buttons to icons — was designed to look tasty, rounded, and full of life. The color palette draws from warm cookie tones, creamy whites, and candy-like accents, while the typography uses bold and friendly letterforms to convey energy and approachability.
Prototype
We developed high-fidelity mockups and motion prototypes to simulate real gameplay flow. The home screen, battle lobby, character selection, and result screens were all connected in a single interactive prototype to test transitions and user flow. Motion and feedback animations were crafted to make every tap feel rewarding.
Test
Playtesting sessions with casual gamers revealed that players quickly understood navigation without any tutorial. They described the experience as “fun,” “easy,” and “alive.” Minor adjustments were made to improve contrast, highlight states, and button responsiveness. The final iteration balanced vibrant motion with clear usability.
Solution
The final UI design for Cookie Arena delivers a cohesive and joyful experience from start to finish. The bright color scheme, rounded elements, and lively animations give the interface a sense of charm and playfulness. Expressive icons help players instantly recognize game modes and actions. Motion effects are carefully timed to create a sense of rhythm and reward, making the game feel dynamic without overwhelming the player.