How Wonder App’s Gen‑Z‑Focused Design Transformed User Experience

Introduction

Wonder is an exploratory product aimed at the Gen‑Z audience for information acquisition. Although the product did not progress far, the design team valued the opportunity to experiment, using the process to deepen user understanding, push design boundaries, and pursue an extreme experience.

Understanding Users

Through desktop and field research, the team discovered that Gen‑Z users prefer personalized, diverse, and visually appealing content. Users were divided into two groups: efficiency‑oriented users who need quick, focused information, and leisure‑oriented users who enjoy browsing rich content. The design was segmented accordingly.

Mode Switching for Multi‑Scenario Support

The framework uses two dimensions—panel variability and fixedness. The homepage panel is variable, hosting different content such as search and feed scenes. A second‑level search panel is fixed, providing a constant core function above the variable scenes. Fixed header and footer areas support basic functions and the two major consumption scenarios.

The search box sits atop the content, forming a double‑layer panel interaction that satisfies both browsing and focused search needs. The footer bar splits into efficiency (left) and entertainment (right) zones, creating a differentiated homepage layout.

Deep User Insight and Experience Upgrade

Further research revealed that Gen‑Z users favor interest‑based content circles, are willing to pay for interests, and seek community belonging. This insight drove an upgrade of the overall framework and layout.

Unified Framework and Immediate Interest Content

The design targets four core goals: unified experience, rapid filtering, distinctive perception, and highlighted focus. A planetary visual metaphor structures the interface, with each “planet” representing a content type while maintaining overall consistency. The bottom bar hosts core functions such as voice, messaging, and personal center, and modules are designed to be composable and configurable for evolving operational needs.

Dynamic entry points attract interaction, and secondary pages create immersive scenarios.

Crafting a Youthful Design Language

Before launch, a brainstorming session distilled a youthful design language based on user research. An image board helped define the visual concept, which was then applied to key pages and core components, culminating in a consistent youthful aesthetic.

IP Character – Lemon Spirit

The Lemon Spirit, Wonder’s official IP, is a personified lemon that embodies the brand’s youthful vibe. Its design, colors, and expressions are used across various scenes, including 3D adaptations that align with the planetary concept, fostering community identity and engagement.

Conclusion

Design is not a random guess but a step‑by‑step derivation from user traits, needs, and scenarios. The process emphasizes continuous user insight, solution‑oriented thinking, and adaptable design, offering valuable inspiration for designers seeking innovative, youth‑focused experiences.