Why Redesign Empty State Pages? A Mobile App UX Case Study

WHY – Why Replace Empty State Pages?

Empty state pages appear when content is missing or an error occurs, providing feedback or prompts to users. The old pages were rarely seen, had several issues, and were often ignored.

1. Lack of Systematic Design

Previously each empty state was designed individually, resulting in no visual consistency across pages.

2. Unfriendly Copy

The old copy was flat, often using jargon that users found hard to understand.

3. Single‑Form Layout

Multiple empty states shared one abstract illustration to save design cost, which reduced user experience and created a sense of distance.

WHAT – Goals of the Redesign

After identifying the problems, the team set four main objectives.

1. Systematic – Unified Visual Style

Create a cohesive visual system for all empty states to strengthen brand promotion.

2. Friendlier – Optimized Copy

Write copy that feels approachable and brings users closer to the product.

3. Scenario‑Based – Different Visuals for Different Contexts

Show distinct illustrations for different empty‑state scenarios to improve comprehension and add fun.

4. Soulful – Give the Product Personality

Infuse the redesign with a character that reflects the product’s identity.

HOW – Design Execution

With goals defined, the team began practical design work, ensuring each empty state had a unified mascot that could display varied feedback.

User Research

Surveys from early 2016 revealed three main user traits:

1. Predominantly Female Users

2. Mostly Young Users (20‑25 years)

3. Corporate Employees and College Students

These users are curious, eager to learn, and want to make the most of their spare time.

Keyword Extraction & Character Concept

The design team brainstormed keywords reflecting growth, learning, and the inevitable laziness or lack of perseverance of users. The resulting mascot is a small seedling representing the desire to grow.

Final Mascot Design

The seedling is placed in a pot to bring it closer to users’ daily life, allowing expressive facial features. A straight‑tube pot with simplified lines was chosen; glasses were removed to avoid a “nerd” stereotype.

Color palette: low‑saturation gray, green, and yellow to create a cohesive family of empty‑state illustrations.

Copy Optimization

Two main empty‑state categories were defined:

1. Content Empty

When no content is available, the copy should be encouraging, possibly using famous quotes to create a learning atmosphere.

When the emptiness is due to missing material (e.g., a teacher hasn’t uploaded a lesson), a humorous tone can make users smile.

2. Page Error

When an error occurs, the copy must clearly explain the issue and suggest a solution.

Before‑After Examples

1. My Notes Empty Page

The new design adds a classroom scene with the seedling and an inspiring quote, making the page more engaging.

2. Search No‑Result Page

The updated version adds a solution suggestion and visual elements like a magnifying glass to better convey the “no results” state.

Final Collection

All redesigned empty‑state illustrations are compiled in a large overview image.

Source: Hujiang original content, reproduced with permission.