How Tieba Revamped Its Membership Experience: From User Research to Visual Design

Background

Tieba, a community product with a 20‑year history, relies heavily on membership revenue. The old membership suffered from high price, few benefits, and an outdated interface, leading to declining purchase intent. To address this, a new dual‑membership model (high‑price and low‑price tiers) was introduced, along with additional exclusive benefits for the premium tier. The design team aimed to refresh the brand, make it feel younger, and improve the overall user experience.

1. Brand Upgrade

Understanding User Preferences – A survey of over 3,000 active users revealed that members value self‑expression, community leadership, and a trendy, attitude‑driven image rather than traditional notions of prestige.

Visual Elements

Color : VIP uses high‑saturation blue with purple accents for a vibrant, youthful feel; SVIP adopts a translucent black base with a bright gradient of yellow‑red‑purple to convey luxury and coolness.

Shape : The design incorporates a playful mascot’s head and hands, using expressions, props, and gestures to convey personality—VIP projects confident, expressive youth, while SVIP exudes a bold, “top‑of‑the‑world” attitude.

Texture : Moving away from flat graphics, the new assets add brightness and saturation variations to create depth and a modern aesthetic.

Structure : A three‑layer layout (front, middle, back) emphasizes foreground information and branding, with large rounded cards for better readability.

Motion : Dynamic effects highlight the mascot’s character, with pre‑action animations, fluid button effects, and celebratory visuals that enhance engagement.

2. Experience and Aesthetics

Pre‑Payment : The entire membership entry flow received a visual overhaul—consistent colors, graphics, and textures reinforce brand recognition. An immersive background and highlighted benefits area make the entry more attractive, while automatic carousel displays showcase premium outfits.

During Payment : High‑value benefits (e.g., exclusive skins, one‑click sign‑in) are presented with unified visual cues on the payment panel, using lightweight icons and side‑by‑side text‑image layouts to reinforce perceived value. Frequently used payment methods are pre‑selected to shorten the checkout steps.

Post‑Payment : Celebratory effects such as confetti and flash animations provide positive feedback, enhancing achievement and habit formation. Visual upgrades to one‑click sign‑in and other premium features deliver a satisfying, immersive experience.

3. Summary

Through user research, a youthful visual language, and end‑to‑end experience improvements, Tieba’s membership redesign boosted perceived value, with over half of users reporting a fresh look and willingness to pay for aesthetics. Close collaboration between design and business teams led to significant growth in membership revenue and user engagement.