How Suning Reading Revamped Its Brand and UI for a Modern Reading Experience

Project Background

In 2017 the content industry became a new driving force for mobile internet. Reading products were becoming homogeneous, so Suning leveraged its brand strength to create a unified design language that highlights the product's core value across visual identity, user experience, and online‑offline promotion.

Goal

Suning Reading aims to quickly break the stagnation of the old version, seize opportunities in the reading market, and build a vibrant reading community for elite users.

Design Challenges

Electronic book products are mature in form and experience; the challenge was to avoid homogeneity, define a unique competitive edge, and ensure that design adds value to content operations.

Design Thinking

The previous version lacked clear direction and was overly simplistic. The redesign seeks a richer design language to meet new requirements.

Brand Design

Brand Strategy : Position Suning Reading as an elite reading community that offers a high‑quality, enjoyable experience and facilitates idea sharing.

Slogan : “Enjoy Life, Read the World”. Core values: rich content, fun, refined.

Logo Evolution

Old logo combined the letters S and N with three book shapes and a gradient green color. New logos progressed from a blue lion that felt cold, to a seal‑like version, and finally to a refined lion reading a book, using the brand’s blue accent.

Color System

Primary gradient blue (#3399FF‑#5AADFF) conveys calmness and intellect; a lighter blue (#63CFFF‑#9DD0FF) serves as an auxiliary color. Red (#FF4E4E) highlights price information.

Typography System

Brand font: FZ RuiZhengHei, a sturdy, modern sans‑serif. Interface font: Apple PingFang SC, chosen for its visual impact and readability.

Icon System

Icons prioritize recognizability, using simplified real‑object shapes, 3 px light‑gray line style, and a rounded aesthetic to create a lively, cohesive visual language.

Main Page Designs

a. Launch Page

Two concepts were explored: a lion sailing among books and a lion in a hot‑air balloon. The final design presents the brand logo and slogan directly for instant impact.

b. Guide Page

Illustrated scenes match four themes—relaxation, exploration, reflection, and inspiration—using a warm green palette.

c. Bookshelf

White background with card‑style layout; a prominent green sign‑in button encourages daily sign‑in, increasing user retention.

d. Book Cover Design

Adopted rounded corners with diffuse shadows, applying a consistent style across modules for visual harmony.

e. Category Page

Single‑level categories displayed as gradient‑gray cards with dual‑book icons, creating a premium feel.

f. Book City

Search bar in the navigation, large banner, card‑style recommendations, and blue line‑icon “more” button for balanced visual weight.

g. Book Detail Page

Immersive frosted‑glass header adapts to the book cover color; rounded icons and a prominent blue “Buy Now” button drive conversion.

h. Audio Book Playback Page

Frosted‑glass background with rotating book‑cover animation mimics a music disc, enhancing the listening experience.

i. Reading Page

Soft gray‑yellow background reduces eye strain; typography set to 34 pt size with 76 pt line height for comfortable long‑form reading.

Motion Design

a. Pull‑to‑Refresh

Animated lion reading in a study scene, created in After Effects with 3D layers; a lamp lights up as the user releases.

b. Tab Interaction

Version 2.0 adds color diffusion from the center and a 45° wobble, using masks in After Effects for a lively feel.

c. Loading Animation

A small blue book flips pages, aligning with the brand theme and keeping users engaged during load times.

Summary

Strategic brand and UI redesign can give a mature e‑book product a distinct identity, improve user engagement, and support business goals through cohesive visual language and thoughtful interaction design.