How One Night Werewolf Became a Benchmark Mini‑Game: Design Secrets Revealed
This article walks through the complete design process of the online tabletop game “One Night Werewolf,” covering story world‑building, scenario‑driven gameplay, card visual design, emotion‑focused animation, and technical implementation that together created a compelling, high‑engagement mini‑game experience.
Story Background – Setting the World
Welcome to the world of One Night Werewolf, where adventurers gather in a dark forest to reach a treasure‑filled castle by dawn, while hidden werewolves plot to seize the loot. Players must uncover the werewolves before reaching the castle to secure the treasure.
Game Design – Scenario‑Driven Experience
Based on the story, the game follows usability principles and introduces scenario‑driven design across three phases: the Trigger Phase creates surprise with clear layout and quick onboarding; the Immersion Phase deepens engagement through black‑white scene switches; the Conclusion Phase highlights achievement with striking visual effects and decisive win‑lose outcomes.
Card Design – Visual Impact
Cards serve as the game’s soul, representing player identities and also as physical merchandise. Nine roles are divided into three factions: Good (Prophet, Watchman, Trickster, Robber, Insomniac, Drunkard), Werewolf (Werewolf, Minion), and Third (Tailor). The American‑style magical aesthetic emphasizes atmosphere while keeping character clarity, using waist‑up portraits from front and three‑quarter views, with faction‑specific borders and colors.
Animation Design – Creating Peak Emotion
Dynamic effects are applied at key moments to generate emotional peaks. The Trigger Phase uses ritualistic card‑dealing animations to spark curiosity; the Immersion Phase adds smooth transitions and feedback to enhance flow; the Conclusion Phase builds suspense and delivers a high‑impact reveal that maximizes player satisfaction.
Implementation – From Concept to Engine
The animation pipeline employed particle and glow plugins along with pseudo‑3D techniques. Designers delivered detailed effect annotations, code snippets (e.g., displacement, simple particle scripts), and reference sequences/MP4 videos to developers. Implemented in a game engine, the final product achieved roughly 80% visual fidelity to the original designs.
Conclusion
As Baidu MEUX’s first self‑developed game, the project coordinated UI, art, and animation teams to faithfully realize design intent. After launch, the game attracted notable daily active users, and the team plans to iterate further by aligning business goals with design improvements.
Baidu MEUX
MEUX, Baidu Mobile Ecosystem UX Design Center, handling end-to-end experience design for user and commercial products in Baidu's mobile ecosystem. Send resumes to [email protected]
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.
