Create Better Lifestyle Community
Xiaohongshu
About
As an APP that records the user's life community, Xiaohongshu focuses on the mining of user content production and the creation of community atmosphere.
I’m optimizes the dark mode and Android platform device experience to provide a better quality content production experience.
[1] Darkmode
Xiaohongshu Darkmode
Color definitions are based on mapping rules from two models. Unified color names are defined on the original naming basis, and color description fields are defined through the Style panel in Sketch and Figma according to scenarios and usage frequency to clarify color values and specific usage contexts, making it easier for designers to use and reducing development costs.
After defining the color scheme, it was applied to Xiaohongshu's discovery double-column, personal page, message page, and detailed note page.
Color Definition
Colors are based on the HSL color model, with a clear analysis of the hue circle to define precise hue range intervals.
Defining the color curve presentation to ensure color separation and quantity in Dark mode can support complex pages and functional modules.
Data
Design dark mode pop-ups and mode toggle switches to allow users to quickly switch color modes.
Experimental data shows fewer openings on both ends, with user activity concentrated 7:00 PM - 2:00 AM.
[2] Follow Feed Redesign
In the followed scenarios, the average exposure is 15 notes per person, and 51% of users have fewer than 10 people they follow. The content presented is relatively limited due to the number of followers, and the double-column layout causes some loss in content consumption and interaction rates. We hope to use a single-column layout to display followed content, aiming to increase consumption and interaction rates.
Image Slide Mode
People like to click and slide images, so we redesign the images slide gesture, people can view more images in the first page. and we redesign the engagement interactions.
[3] Immersive Card
By reviewing the interactions and display formats of global single and double column feeds, as well as clicks leading to graphic and video detail pages, we aim to unify the scrolling interaction behavior and framework structure for Xiaohongshu's graphics and videos, ensuring an immersive content consumption experience for users.
Immersive Content Card
The design uses a card layout style where images, text, and video information are better integrated, providing improved perception for swipe and click actions.
Engage and content hierarchy are separated, with more content information structured in a Modality format, reducing card height while ensuring complete content consumption.
[4] YOU GUANG VIDEO
On the main Xiaohongshu app, 70% of users do not engage in clicking video notes in the double-column layout. In the short term, verify the consumption differences between single and double columns; in the long term, ensure user consumption in vertical categories to increase user scale. By focusing on decision-making consumption in travel, beauty, food, fashion, and other content, convert “efficiency users” who search and leave into consuming users, ensuring video consumption while gradually strengthening users' decision-making mindset.
Recommend Feed
The recommended feed uses a single-column layout with downward scrolling to switch to the next article, enabling quick content browsing while retaining full text and bookmarking features for a more complete content experience.
Profile
The personal page uses a 3:4 3 column layout for displaying works to balance efficiency.
To ensure better cover display effects, the view cropping ratio has been adjusted, and the overall page background color has been unified.
