How Vivo Redesigned Its Game Welfare Tab to Boost User Engagement
This article details the systematic redesign of Vivo's game center welfare tab, covering project background, design goals, step‑by‑step framework creation, visual styling, animation, holiday themes, membership coupon and mall modules, and the evaluation that proved increased user activity and satisfaction.
Introduction
Vivo Game Center provides a full‑lifecycle service platform for games, with "welfare" as one of its three core service capabilities. The welfare tab aggregates the most important benefits and serves as the primary entry point for users to discover and claim rewards.
Project Background
Since 2020, the welfare tab has evolved through two versions: 1.0 (a tool‑type page for claiming game benefits) and 2.0 (an operational page aggregating platform benefits). In 2022, version 3.0 was launched to incorporate more welfare content, enrich user scenarios, and set activity metrics for active and high‑value users.
Design Goals
Based on platform positioning and user needs, the redesign aimed to improve perception (clear welfare aggregation mindset and overall attractiveness) and usage (efficient benefit acquisition and behavior conversion).
Step‑by‑Step Framework
STEP1 – Analyze Welfare Content
Identify all available welfare types, target audiences, characteristics, providers, and acquisition methods.
STEP2 – Produce Functional Modules
Package each welfare type and product capability into modules using a "verb + noun" naming principle, resulting in six modules: "Coupon", "Earn Points", "Cash Draw", "Promotions", "Game Welfare", and "Shop for Gifts".
STEP3 – Derive Page Layout
Prioritize the most relevant welfare modules at the top based on user‑game relevance, then arrange remaining modules, adjusting visual weight according to the redesign focus.
STEP4 – Design Interaction Flow
Guide users within limited screen space through behavior cues, quick‑access reminders, horizontal scrolling for similar content, and tab‑switch prompts.
Visual Design
The new welfare page adopts a "rich and valuable" and "young and vibrant" visual tone. Color palettes were extracted for each business module to aid quick recognition, with a 7:3 primary‑to‑module color ratio and differentiation between atmosphere‑heavy and information‑heavy modules to ensure readability and harmony.
Graphics and Animation
Header banners combine a game console and money‑spraying gun to convey "play games, get rewards". Animated elements such as tab‑guide effects, point‑collection feedback, and VIP light sweeps enhance visual appeal and reinforce the perception of abundant benefits.
Holiday Atmosphere
Seasonal themes are added to the tab to provide fresh visual surprises aligned with marketing events.
Membership Coupon Module
Coupons are differentiated by VIP and Premium membership levels, with clear hierarchy (action button > amount > usage scenario > quantity) and proactive prompts guiding users from eligibility to claim and usage.
Welfare Mall
The mall, located at the page bottom, focuses on easy browsing and information recognition. It uses high‑contrast card layouts, F‑pattern visual flow, and tags to highlight new or discounted items, while a wish‑list feature gathers user preferences.
Evaluation
Post‑launch data showed increased overall activity, higher penetration of the welfare tab, and growth in high‑value user proportion. User satisfaction reached 86% overall, with NPS above 35, and key metrics such as "information clarity", "simple operation", and "short steps" scoring above 80%.
Conclusion
The redesign established a new page framework, visual tone, and interaction design for the welfare tab, validated through systematic evaluation, delivering notable improvements in user engagement and satisfaction.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
VMIC UED
vivo Internet User Experience Design Team — Designing for a Better Future
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.
