I designed the full UI/UX flow for the Mystery Box event - a repeatable reward feature where players select from multiple shuffled boxes to win valuable prizes.
The system includes progressive interaction states, hint mechanics, currency-based choices, and a two-step reward reveal. My work covered layout design, screen states, transitions, user guidance, and interaction clarity across all stages of the event.
As part of the feature development, I also defined the visual structure of the scene, which consists of multiple layered elements - the character, the table, background curtains, and the boxes placed on top. The character changes poses depending on the state, and I supported this process together with artists, narrative designers, and animators.
I also contributed to screen animation, micro-interactions, and collaborated on visual effects to enhance key moments and make the experience feel lively and rewarding.
The main challenge was to create a fun, readable, and engaging flow while balancing randomness, player control, and monetization through hints and secondary currency.
This screen shows all potential rewards before the round begins. The player can review all prize tiers, understand what’s at stake, and then press Shuffle to start the round. The layout focuses on preview clarity and sets expectations before entering the interactive part of the event.
In addition to milestone rewards, top-performing players appear in a leaderboard, where higher rankings grant extra prizes and exclusive recognition.
The feature operates in recurring cycles, launching and resetting periodically, which required the interface to clearly communicate both current progress and time-based availability.
After shuffling, five boxes appear in randomized positions.
Here, the player can:
select a box using a Winding Key,
apply a Hint (each hint can be used once per round),
or visit the Store to exchange Harlequin Masks for resources.
Hints are available only before the first box is opened. This state focuses on choice clarity, usability, and highlighting the key interactive elements.
I created and implemented the Info Popup for the Mystery Boxes event - a multi-section informational panel that explains the rules, reward types, progression levels, and available hints.
The popup consolidates all essential details into a single scrollable view, structured with clear hierarchy and easily readable content blocks.
My work included:
defining the layout structure for multiple information sections (rules, box types, reward levels, hint descriptions);
organizing content into a vertical flow with consistent headers, iconography, spacing, and text hierarchy;
preparing icons and visual markers to reinforce meaning and improve readability;
integrating all elements into Unity, including scroll behavior, panel animations, and responsiveness across screen sizes.
The popup was designed to be accessible at any moment during the event, giving players a complete understanding of mechanics without overwhelming them, while visually matching the tone and atmosphere of the Mystery Boxes feature.