Create a better Lifestyle community
Xiaohongshu
About
Xiaohongshu is a lifestyle community centered on user-generated content and community atmosphere
I optimized Dark Mode and the Android experience to improve the quality of content creation
[1] Dark Mode
Xiaohongshu Dark Mode
Color definitions were built from mapping rules across two models. We unified token names on top of the existing naming system, then added usage descriptions in Sketch and Figma styles based on scenario and frequency. This clarified color values and contexts, made tokens easier for designers to use, and reduced development cost
After the color system was defined, it was applied to the discovery feed, profile, messages, and note detail pages
Color definition
Colors were defined with the HSL model, using hue-wheel analysis to set precise hue ranges
The color curve was structured to maintain separation and scale in Dark Mode across complex pages and functional modules
Data
Designed Dark Mode prompts and mode switches so users could quickly change appearance
Experiment data showed lower adoption at both ends of the day, with user activity concentrated between 7:00 PM and 2:00 AM
[2] Following feed redesign
In the Following scenario, users saw an average of 15 notes, and 51% followed fewer than 10 people. The available content pool was limited, and the double-column layout reduced consumption and interaction. We redesigned the feed as a single-column experience to increase both metrics
Image swipe mode
Because users often tap and swipe through images, we redesigned the image-swipe gesture so more images could be previewed on the first page, then refined the engagement interactions around it
[3] Immersive Card
After reviewing global single- and double-column feed patterns, plus entry behavior into image and video detail pages, we unified scrolling behavior and framework structure for Xiaohongshu image and video content to create a more immersive consumption experience
Immersive content card
The card layout integrates image, text, and video information more clearly, improving perceived affordance for swipe and tap actions
Engagement actions and content hierarchy were separated. Additional content was structured in a modal format, reducing card height while preserving complete consumption
[4] Youguang Video
In the Xiaohongshu main app, 70% of users did not tap video notes in the double-column layout. Short term, we validated consumption differences between single- and double-column formats. Long term, we aimed to grow vertical-category consumption and convert search-and-leave users into active consumers across travel, beauty, food, fashion, and other decision-making categories
Recommend Feed
The recommendation feed uses a single-column layout with downward scrolling to move to the next note, supporting quick browsing while preserving full text and save actions for a complete content experience
Profile
The profile page uses a 3:4, three-column layout to balance browsing efficiency and cover quality
To improve cover presentation, the crop ratio was adjusted and the page background was unified
