How a Reward Center Boosts User Engagement with Video Ads: Design Strategies and Visual Effects

Design Goals

The incentive video feature in the reading app, which previously scattered video ads across subscription and chapter‑end scenes, often disrupted continuous reading and annoyed non‑target users. The Welfare Center extends this strategy by aggregating video‑ad rewards, keeping non‑paying readers active and gradually converting them to paying users.

01 Interaction Design

Two strategies drive the design: Value perception – tangible benefits motivate users to watch videos; and Emotional incentive – a “Bai Ze” vitality mechanism visualizes progress. Users earn rewards by watching ads, see a crystal ball indicating vitality points, and receive feedback through Bai Ze’s changing expressions.

Encourage users to watch video ads for long‑term activity.

Enhance top‑of‑page atmosphere with Bai Ze’s mood changes and a vitality crystal ball, making ad‑watching benefits clear.

Maintain visual distinction from sign‑in and reading‑package pages while preserving overall style.

02 Visual Design

The visual design focuses on strengthening atmosphere and guiding users to watch videos for rewards, cultivating user mindset.

Vitality Visualization

The abstract vitality value is visualized as a crystal ball and Bai Ze’s facial expressions, reflecting the frequency of video watching and task completion.

Reward Feedback

After an ad is watched, Bai Ze shows a surprised expression and a glowing background highlights the reward slot.

The crystal ball’s numeric roll and internal wave animation sync with the reward.

Reward collection is confirmed with a simple check‑mark icon.

Animation Implementation

Apple’s early CoreAnimation CASpring model inspired the spring‑based animations. Figma replicates these using timing, curve, and parameter settings, allowing independent element transitions and component‑based prototypes for smooth parallax effects.

Figma’s spring animations drive vitality value changes, Bai Ze’s expression switches, and crystal‑ball wave motion, all achievable within the tool without external software.

03 Scene Expansion

By consolidating scattered video ads into a single Welfare Center, the project reduces reading disruption and serves as a growth tool. Previously, ads were isolated and intrusive; now users can complete tasks in one place, lowering the cost of free reading and fostering habit formation that can lead to paid conversion.

04 Reflection & Summary

Atmosphere creation: A cheerful orange theme and Bai Ze’s dialogues align user emotions with the goal of quickly obtaining free reading.

Abstract concept visualization: Vitality is expressed through crystal‑ball animation and Bai Ze’s facial cues.

Interaction details: Dynamic crystal‑ball refresh, directional arrows, background effects on reward claim, and expressive feedback enhance user enjoyment despite added complexity.