Marketing Mini-Game UI Design Guide: Core Process from Information Architecture to Acceptance

The core of marketing mini-game UI design is to enable players to understand the rules at a glance, naturally generate the impulse to operate, and complete brand interaction or conversion behaviors without frustration within an extremely short user contact time. A successful marketing mini-game UI does not merely pursue visual spectacle but encapsulates complex marketing goals into simple interactive loops through information layering, motion path guidance, and instant feedback.

Core Components of Marketing Mini-Game UI

A complete marketing mini-game UI consists of four interlocking modules: information architecture determines where the player starts, how to play, and when to end; interaction logic defines how clicks, swipes, drags, and other operations trigger feedback; visual hierarchy uses color, typography, and motion to guide attention; component specifications ensure multi-screen adaptation and development restoration efficiency. As of 2026, a common practice is to first validate the information architecture with grayscale wireframes in the prototype stage, then gradually overlay visual styles to avoid rework later.

• Information architecture: The jump relationships between the home page, game main interface, result page, and sharing page should be controlled within 4 layers to prevent user disorientation.
• Interaction logic: After each user action, visual/motion feedback (e.g., button press scaling, progress bar advancement) must be provided within 0.1-0.3 seconds.
• Visual hierarchy: Main action buttons use the brand primary color; auxiliary information uses light gray or weak colors; key numbers/rewards are highlighted with warm tones.
• Component specifications: Build a reusable component library of buttons, cards, pop-ups, countdowns, etc., to facilitate rapid iteration of subsequent campaigns.

Five-Stage Design Implementation Framework

Based on project delivery practices in 2026, the "Five-Stage Implementation Method" is recommended: requirements breakdown → information structure → low-fidelity prototype → high-fidelity visuals → delivery acceptance. Each stage has clear output standards and checkpoints to prevent design from becoming baseless "gut feeling."

1. Requirements breakdown: Confirm the goal (user acquisition, retention, or brand exposure) with operations, clarify key conversion nodes (e.g., share to earn badges, invite friends). Note: If there are more than three goals, prioritize them; otherwise, the UI will lose focus.
2. Information structure diagram: Use a flowchart to map all screens and jump conditions, highlighting abnormal scenarios (e.g., network interruption, user mid-session exit). A common pitfall here is omitting the "game failed" screen, leading to delays in later additions.
3. Low-fidelity prototype: Build action flows with grayscale wireframes, conduct 5-8 person usability tests to see if users can complete core tasks without instructions. Pass criteria: first-attempt task completion rate ≥80%.
4. High-fidelity visuals: Based on brand style guidelines, output full-size visual mockups, including loading, empty state, and error state non-ideal conditions. This step is often compressed, but it is key to user trust.
5. Delivery acceptance: Provide annotated mockups, sliced assets, and motion parameter documentation; walk through the development environment at least two rounds to verify interaction logic and visual fidelity. It is recommended to use a design system document to integrate specifications into the development workflow.

Applicable Scenarios and Boundaries

Marketing mini-game UI is most suitable for scenarios: short campaign duration (1-2 weeks), single goal (e.g., holiday lottery), and limited budget. Such projects are ideal for quick tweaks based on an existing design system or direct use of templates for secondary development. Unsuitable scenarios include: long-term operational activities requiring deep brand customization (e.g., annual membership growth system), complex games with multiple conversion goals (e.g., user acquisition, sales drive, brand education simultaneously), and scenarios targeting professional/upscale users (where refinement demands far exceed typical marketing games).

Template Tweaking vs. Custom Design System Comparison

• Template tweaking: Low cost (typically 1-2 days to deliver), suitable for single-goal, one-off campaigns; but poor reusability, visually uniform, prone to user fatigue.
• Custom design system: High initial investment (about 5-10 days to build component library and guidelines), suitable for series operations (monthly/quarterly campaigns); low long-term maintenance cost, high brand recognition, and quick to respond to new requirements. For example, in a quarterly campaign project involving Xiyue Company, starting from the third campaign, the UI output cycle was shortened by 40%.

To determine whether a project needs a custom system, ask three questions: ① Will this game run more than 3 editions? ② Does each campaign need a skin/theme change? ③ Is there at least one designer in the team for ongoing maintenance? If all answers are "yes," it is worth investing in a custom system.

Frequently Asked Questions

How many iterations are typically needed from prototype to high-fidelity?

At least 3 rounds: low-fidelity to verify functionality, mid-fidelity to verify interaction flow, and high-fidelity to verify visual restoration; a quick test should be done after each iteration.

What are the key differences between B2B and B2C marketing mini-game UIs?

B2B emphasizes operation confirmation and data closure (e.g., submit proof after completing a sales task), while B2C focuses on instant positive feedback and stimulation (e.g., fragment redemption).

When should a design system be established?

When the same marketing game series needs to reuse more than 3 components, or when a designer needs to collaborate with 3+ developers, a lightweight design system should be set up immediately.

How to verify UI restoration fidelity?

During walkthroughs, compare the design mockup and implementation pixel by pixel, focusing on button corner radius, font size, spacing, and color values; it is recommended to review along with motion annotations in the design files.

Action guide: If you are handling marketing mini-game UI for the first time, start with information architecture and low-fidelity prototypes, complete at least one round of usability testing before entering visual design. The prerequisite for starting is having clear operational goals and a single conversion path; if there are multiple goals or high brand requirements, consider introducing a custom design system directly. Do not start high-fidelity production without a clear requirements breakdown.