Designing NetEase Snail Reading: Brand Experience from Zero to Launch

Brand Experience Design (BX Design)

Brand experience design (BX Design) goes beyond logos and visual identity, encompassing UI, UX, graphic, motion, and every user touchpoint to deliver a consistent, integrated feeling.

Brand Exploration (Brand Research)

We researched the market, distinguishing the fast‑consumption novel segment from the quality‑focused traditional publishing segment, and defined Snail Reading’s positioning as a deep‑reading, time‑paid service offering a quiet, distraction‑free experience.

Brand Positioning

The brand targets readers who value curated, high‑quality books, differentiating itself from the fast‑food literature market.

Brand Philosophy

“Slow but steady, read good books.” The philosophy encourages users to be like a snail—steady, calm, and immersed in reading.

Brand Definition

Inspired by Eastern aesthetics such as tea ceremony and Zen, we distilled the brand keywords: simple, natural, elegant, quiet.

Design Principles

We defined four principles – simplicity, friendliness, consistency, and aesthetics – to guide the design system and evaluate each design decision.

Brand Design

Brand Colors

Colors were derived from the “snail” and “book” imagery, creating a scene‑based palette that reinforces brand recall.

Logo

Concept sketches explored snail, book, time, and speed. The final linear logo merges snail and book symbols, refined through proportion and line‑weight adjustments.

Typography

After testing dozens of combinations, we chose the Chinese typeface “HanYi QingYaTiJian” for its balanced, elegant strokes that convey cultural depth while matching the logo.

App Design (Application Design)

Brand Gene

The core visual language uses a circular motif, applied to icons, buttons, avatars, book covers, cards, and overall corner radius, creating a harmonious brand feel.

Layout & Grid

A 4pt UI grid and 2pt baseline grid ensure consistent spacing and hierarchy, improving readability and interaction efficiency.

Projection & Shadows

Subtle linear shadows simulate natural light decay, adding depth without breaking the brand’s soft, harmonious tone.

Image Design

All illustrations follow the brand’s aesthetic, reinforcing the “slow, quiet” narrative.

Motion Design

Motion serves functional purposes—state indication, feedback, hierarchy, and focus—while adhering to principles of functionality, restraint, and smoothness using custom Bézier curves.

Animations are produced in After Effects and exported as lightweight Lottie JSON files, enabling 100% fidelity and easy A/B testing.

Design Guidelines

Comprehensive guidelines—including brand manual, UI style guide, pattern library, motion specs, and operational rules—ensure consistency across designers, developers, and content editors.

Brand Extension

Offline events and promotional materials continue the visual language, reinforcing brand touchpoints.

Design Verification

Design is a cyclical process of analysis, research, design, and verification; we validate decisions with user feedback and data, iterating continuously.

Conclusion

Recent updates to the brand colors reflect strategic shifts. The case study shares the entire brand experience design workflow, hoping to inspire others and invite further discussion.