Product Management 17 min read

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.

VMIC UED
VMIC UED
VMIC UED
How Vivo Redesigned Its Game Welfare Tab to Boost User Engagement

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.

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

VivoMobile GamingProduct RedesignUX designwelfare tab
VMIC UED
Written by

VMIC UED

vivo Internet User Experience Design Team — Designing for a Better Future

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.