RedNote Redesign

Project Overview

My Role: UI/UX Designer
Timeline: 2 weeks (2025)

RedNote (Xiaohongshu) is a lifestyle content and social commerce platform founded in 2013, where users share photo and video on fashion, beauty, travel, and food, and it now has over 300 million monthly active users, with users spending about 40 minutes a day on the app.

On RedNote, a popular category of posts relies on a tight one-to-one relationship between images and body text — travel guides, restaurant reviews, and product roundups where each paragraph references a specific photo (ex, "Picture 1: Alaska's 26 Glacier Cruise…"). The current format forces this correspondence to be expressed manually, in plain text, leading to friction for both readers and creators.

I redesigned this experience to make image-text pairing effortless — without disrupting the platform's existing reading habits.

The Problem

Posts with strong image-text correspondence currently force users to scroll back and forth between the photo carousel and the body copy to match "Picture 3" with the third image. The workaround — creators manually numbering each reference — is fragile: a single misnumbered photo breaks the entire post, and editing the order means relabeling everything.

Two pain points emerged:

• For readers: constant scrolling between images and text breaks the reading flow and makes it hard to connect descriptions with the right visuals.

• For creators: manually labeling "Picture 1, Picture 2…" is tedious and error-prone, especially during edits.

Exploring Four Solutions

I explored four directions before converging on a final approach.

1. Split-screen layout

Lock images to the top half, text to the bottom; swipe horizontally for photos, vertically for text. Pros: zero change to the creator flow; everything visible at once. Cons: breaks the established mental model — in user testing, several people thought the screen had frozen.

2. Inline image icons

Let creators drop image icons directly into the body text, similar to adding tags. Tapping an icon opens the corresponding photo in a full-screen overlay. Pros: minimal cognitive shift, matches existing Xiaohongshu interaction patterns. Cons: one extra tap; the overlay prevents viewing text and image simultaneously.

3. Per-image captions

Creators annotate each photo individually; readers tap a button on the image to toggle captions. Pros: simple, direct context for each photo. Cons: fragments the information architecture by introducing a second content layer competing with body text. Default-on captions clutter the image; default-off adds another hidden interaction. In testing, users missed the toggle button entirely.

4. Plog format (existing feature)

Reuse RedNote's native plog editor, which users overlay text directly on photos. Pros: no new design needed. Cons: heavy text undermines image aesthetics, doesn't scale when one paragraph maps to multiple photos, and the editor itself is more cumbersome.

The Decision

I chose Solution 2: inline image icons.

It struck the best balance between solving the problem and preserving what already works. Readers stay in their familiar text-first reading flow, with images now just one tap away in context. Creators get a lightweight, tag-like authoring tool that fits muscle memory they've already built.

The trade-off — that images and text aren't visible simultaneously — was the most acceptable compromise compared to the cognitive disruption (Solution 1), structural complexity (Solution 3), or aesthetic and scalability limits (Solution 4) of the alternatives.

Final Design

• Reader experience: Image icons appear inline within the body text, anchored to the exact sentence that describes them. A tap opens the referenced photo as a full-screen overlay, so readers never have to guess which image "Picture 3" refers to — or scroll up to find it.

• Creator experience: Adding an image icon mirrors the existing tag-insertion flow — a pattern RedNote users already know. This kept the learning curve near zero and eliminated the manual-numbering errors that plagued the original format. (See below pictures)

Reflection

The most interesting part of this project was resisting the temptation to redesign more than necessary. Solutions 1 and 3 were technically more "expressive," but they ignored the weight of established user habits on a mature platform. The best fix turned out to be the smallest one — extending a familiar interaction (tagging) to solve an adjacent problem (correspondence), so the feature feels less like something new to learn and more like something that should have been there all along.