Serena Zhang
All selected work
HANZI Bricks · Current project

Making characters
make sense.

Connecting product logic and visual storytelling in a Chinese-learning experience.

Focus
Learning flow · Interaction · Visual direction
Format
Mobile learning prototype
Status
In development · Unreleased

Selected excerpts only. The full learning system and prototype remain private.

HANZI Bricks marketing composition with launch-screen artwork and a selected learning interface
Marketing composition for an unreleased product. Selected interface only.
The design challenge

Help learners see
how a character works.

HANZI Bricks connects visual storytelling with character structure and meaning. An illustration can introduce that relationship, but recognizing the picture is different from recalling the character.

This selected excerpt explores how a visual cue can support understanding, while a later interaction checks recall without it.

01 / Visual & interaction design

An image that
does explanatory work.

Original selected interface · Other lesson stages and navigation omitted
Within one learning moment

See it.
Break it down.
Connect the meaning.

01

Visual relationship

The illustration introduces a memorable relationship to the written character.

02

Component structure

Bricks distinguish the sound part and meaning cue, with the full character alongside them.

03

An explicit cue

The meaning explanation makes the image part of the learning task.

The tradeoff

A memorable image can become a crutch. A later recall state removes the illustration, so recognition of the artwork is not treated as proof of recall.

02 / Feedback design

An error can
still teach something.

Design decision

Explain the connection, then offer a way forward.

The recall state distinguishes an incorrect selection from the correct answer. Feedback explains the meaning, reconnects it to the visual cue, and offers an optional hint before phrase context.

Color is paired with icons and text, so the feedback does not depend on color alone.

Original feedback fragment · Complete question screen remains private
The tradeoff

Revealing the answer keeps a first lesson moving, but an immediate continuation does not demonstrate independent recall.

03 / Learning logic

Support understanding.
Check independent recall.

Attempt

Recall without
the picture.

Check the answer state.

Correct

Confirm the answer.

Incorrect

Explain the meaning.
Offer an optional hint.

Reinforce

See the character
in a phrase.

Continue into context.

An editorial abstraction of the selected recall decision, rather than the complete product flow. The key distinction is understanding with support versus recalling independently.

04 / Next questions

What I would
validate next.

01

Connection

Can learners connect the visual explanation to the character without prompting?

02

Useful feedback

Does the explanation clarify the meaning, or do learners simply read and continue?

03

Recall over time

After a delay, can learners recall the character without an image or hint?

HANZI Bricks has not been publicly released. Learning gains, retention improvements, and usage metrics are not claimed.

This case shares the existing marketing cover, two selected interface fragments, and a simplified decision flow. The source file, complete prototype, and remaining product content stay private.
Open full image