Document directory:
1、 Document Overview
1.1 Revision History
one point two PRD Output environment
1.3 Product introduction
2、 Product analysis
2.1 User demand analysis
2.2 User orientation
3、 Product structure
3.1 Product function structure diagram
3.2 Product Information Structure Diagram
4、 Global Description
4.1 Function authority
4.2 Keyboard description
4.3 On page interaction
4.4 Page abnormality
4.5 Switching interaction mode between pages
4.6 More operations
5、 User operation main process (notes)
6、 Page logic (user browsing notes are the main logic)
7、 Detailed function description of the page
7.1 Startup page
7.2 Login/registration page
7.3 Discovery page
7.4 "Follow" page
7.5 "Purchase" page
8、 Test abnormal pages and emergencies
8.1 Network abnormalities
8.2 Login Exception
8.3 Data loss
9、 Problem exploration&improvement suggestions
10、 Summary
1、 Document Overview
1.1 Revision History
1.2 PRD output environment
1.3 Product introduction
“ Quotations from Chairman Mao Zedong ”Launched in March 2014, it is a mobile app defined by the information platform of user sharing content (UGC), through which users can find good things around the world and complete online shopping. Users can upload their own experience, and overseas shopping users can also get detailed product strategies.
The "Little Red Book" mobile app, which meets the basic functions of users when using products on the mobile end, mainly includes users browsing other users' shared content, users publishing shared content, online shopping, etc.
2、 Product analysis
2.1 User demand analysis
With the rise of online shopping era, more consumers tend to shop in overseas markets, but some external factors affect overseas shopping:
(1) Overseas shopping lacks a trusted and exclusive platform;
(2) Unable to understand the trend of fashion and the launch of new products at the first time;
(3) Don't know the real product User experience Experience;
(4) Overseas shopping is time-consuming, laborious and expensive.
2.2 User orientation
(1) Consumers who lack the time and ability to shop overseas;
(2) Internet users willing to display and share on the network platform;
(3) Consumers who are keen on cosmetics and health care products;
(4) Overseas shopping is a pursuit of genuine consumers;
(5) Pursue the convenient and fast consumption mode of overseas shopping.
3、 Product structure
3.1 Product function structure diagram
(Right click to open in a new tab to view)
3.2 Product Information Structure Diagram
(Right click to open in a new tab to view)
4、 Comprehensive description
4.1 Function authority
(1) It is divided into login failure status and login status
(2) When you are not logged in, you can see a small video that keeps circulating
Phone number login
Third party login: WeChat, QQ, Weibo, Facebook login
(3) All operations in APP can be performed under login status
4.2 Keyboard description
(1) When clicking the mobile phone number input box, the numeric keypad pops up at the bottom of the screen;
(2) When clicking the search box, edit note box or comment box, a full keyboard with letters will pop up at the bottom of the screen.
4.3 Interface interaction description
(1) Description information, prompt/warning information, update information
(2) Bottom, left pop-up window
4.4 Abnormal surface
4.5 Switching interaction mode between planes
Use the right stroke gesture at the left edge of the current page to quickly return to the previous page
4.6 More operations
5、 User operation main process (notes+shopping)
It can be seen from the user operation process of Little Red Book APP that Little Red Book mainly promotes the note taking function. In order to better view the notes that users are interested in and improve user interaction, Little Red Book requires account login from the beginning of use. By browsing other users' notes, we can find more good things, so that we can start the shopping process with more confidence.
6、 Plane logic
7、 Detailed function description
7.1 Startup page
After entering the Xiaohongshu APP, whether the mobile phone is connected to the network or not, the background of the page will repeatedly play a small video of the promotional film.
(1) Connected to the network
Page logic:
When the network is connected, start the app to enter the video page directly;
If the user does not operate the page, the video will not be affected and will play the video all the time, and no other prompt information will be generated;
Users can log in directly through Xiaohong's account or select a third-party account;
After logging in in any way, you can enter the content of Liula on the home page.
(2) Login not connected to the network
When the app is not connected to the network, it directly enters the exception alert page and prompts to reload the page.
The prompt message always shows that the network is not strong enough to try again later, even if the network settings are not connected to the network, this prompt is easily misunderstood as the result of full network speed, which does not give users a good guide.
7.2 Login/Registration Page
Xiaohongshu APP uses mobile phone number and verification code login, or mobile phone number and password login, or four third-party account login methods, which saves the registration process for users who log in for the first time. The user can log in directly with the mobile phone number and SMS verification, and log in with a third party account. If the third party account is logged in, the third party can authorize it; If there is no third-party app or login on the phone, enter the account and password to complete the login. For users who use the app for the first time, this login method can save registration trouble and quickly experience the main functions of the app.
(1) Login/Registration Page
Page logic content:
After the user enters the mobile phone number, click the OK key to receive the 6-digit verification code. The page will jump to the verification code input page and start the countdown for 60 seconds. After 60 seconds, the countdown will change to the resend button;
If the verification code is not received within 60 seconds, wait 60 seconds for "Resend" to appear and click to obtain a new verification code;
The user enters the verification code within 3 minutes after receiving the verification code;
Old users can log in with their mobile phone number and verification code, or they can log in with their mobile phone number and password;
Users can also click the four third-party buttons at the bottom to call out their authorized ports for login.
Page interaction description:
The user clicks Login, and the page jumps to the login page of entering mobile phone number. Click "Enter mobile phone number", and the keyboard pops up;
After entering the mobile phone number, click the OK button, and the page will jump to the page of entering the verification code and start the 60 second countdown. The keyboard will automatically pop up, and the user will adjust to the number keyboard;
When the 60 second countdown is over, the words "Resend" will turn blue, and you can click to obtain a new verification code again;
The user clicks the password login button, and the page is called to the password login page, and the keyboard will pop up accordingly;
The user clicks 4 third parties, and the authorization page pops up from the right side of the page.
(2) Logic flow of login/registration function
7.3 Discovery page
In the Xiaohongshu APP, if the user wants to use the browsing function, he or she will browse from top to bottom. If the user wants to use a function, he or she will look for it from the left and right. Therefore, a page is introduced from top to bottom, and some functions are introduced from left to right.
(1) Page name: "Discovery" note page
(2) Page entry: Start the Little Red Book app to directly enter the "Discovery" page
(3) Page Structure
Browse content switching area
Notes, products, and user search boxes
User switch label area
View Note Content Portal
View other content portals of note users
Note popularity
All operation contents about the user are gathered here
Entrance to upload notes
View all message portals
View shopping cart entry
(4) Detailed description of logic content
1) Browse content switching area: the default "Discovery" is the home page. Click the title to switch to the "Follow" or "Commodity" page.
Page interaction description:
Start the small red book app and directly enter the "Discovery" page. There is a red horizontal line under the word "Discovery". Click the "Attention" font, a light gray rectangular background will appear and disappear for one second;
When the gray rectangle appears, the red horizontal line quickly moves to the left below "Attention";
When the red horizontal line moves to the left, the "attention" content also moves quickly to the right;
The red horizontal line moves to the right, and the content page moves from right to left;
Click the title twice quickly, and the content page can return to the page quickly;
Quickly click the title twice, and a red circle will appear below the label line to indicate that the content is being updated. When new content is updated, a prompt message will appear below the label line for 1 second and then disappear.
2) Notes, products and user search box: click the search box to automatically jump to the search page.
Page logic content:
On the "Follow", "Discover" and "Purchase" pages, the search box exists;
The search page structure is divided into search box, history and popular search;
The history record always displays only one recent search record, and the word length is limited to 20, and the excess part is replaced by "...";
Click the trash can icon to delete the history;
The tag content recommended by popular search comes from the range of tag content that users pay attention to;
The user enters keywords to search. During the input process, the system will constantly predict the content that the user may search. The predicted content is classified by goods, notes and other related content, which can be quickly searched by the user;
After the search is completed, the page will jump to the notes, products, and user search results page;
The "all" part of the search results generally belongs to notes, which can be reordered according to time and popularity, and the results can also be filtered according to ordinary notes, video notes or long notes;
The "goods" part of the search result belongs to the list of shopping goods, which can be sorted and filtered in different ways;
The "Users" section of the search results is a list of all users whose names contain search keywords.
Page interaction description:
Click the note, product and user search box under the "Discovery" page to enter the search page immediately, and the letter keyboard pops up from the bottom;
The red cursor in the search box appears and disappears continuously, and the recommended search text in the search box appears in gray; When inputting text, the recommended text disappears;
When the first text is entered, the history and popular recommendation tags disappear, and the search box begins to predict the keywords that users may want to enter;
When the keyword to be searched appears in the prediction box, click the keyword, the keyboard pops back from the bottom, the page jumps to the search results page, and the tag with # pops up from the right side;
Any label can be selected by clicking, or you can view the following labels by sliding left and right, and click different contents;
The default note list of search results is displayed first. Slide up the screen to view more note list contents. Click a note image, and the note page pops up from the right;
Click the "Comprehensive Sort" text, and the comprehensive sort line and all the contents below will move up together, covering the upper search box, the "All" line, and the # label line. Then the page color will darken, and the comprehensive sort drop-down menu will pop up from the top down for selection; After selection, the red circle in the center of the page rotates the updated content, and the content update ends when it disappears;
Clicking the "Filter" text has the same effect as clicking the "Comprehensive Sort" text, but the filter menu pops up from the right to the left of the page. After selecting an option, the option box is programmed in dark color with a closed "" on the right. At the same time, the red circle in the center of the menu marks that the content is being updated, and other options disappear.
3) Note viewing portal: The app mainly promotes the note sharing function. If users have no browsing purpose, they can view notes from the "Discovery" page or the "Follow" page. If they have browsing purpose, they can click the search box directly; When entering the slide down page of each note, more relevant notes will be available for browsing, and users can open notes infinitely.
Page logic content:
On the "Discovery" page, click the picture in the list, the title below the picture or the white background of the title to enter the specific content page of the notes;
Click the heart icon at the bottom of the image to like users without browsing notes;
Click the user name or user profile below the image to enter the personal space of the publisher, where you can see the user's published notes and favorite notes;
When viewing the user's notes, there is a black function bar at the bottom of the page. Click the heart shape to like the user, and the heart shape turns red; Click "Comment" to leave a message to the user; Click the five pointed star to collect this note in your own space; "Purchaseable products" exist in some notes;
When viewing a user's note, the three points in the upper right corner share this note with their friends.
Page interaction description:
When you click the picture to enter the note page, a light gray circle appears at the picture, like a special effect that drops water into the water for one second before entering the note page; Click the white area under the title of the image to have the same special effect;
Browse more content in the note list, slide up the page in any area of the picture, and more content below will be loaded continuously;
When you enter the note page and the content is not loaded in time, the page appears white with a red circle in the middle;
Click the left arrow in the upper left direction of the picture, and the page pops up to the right to return to the previous page;
Click the heart shape at the bottom of the note page, the icon shrinks and turns red when zoomed in, and the number of likes increases by 1; Click the red heart shape to cancel liking;
Click the comment icon, and the keyboard will pop up from the bottom of the page immediately;
Click the collection icon, the entire page will be dimmed for 1 second, and the Select Album menu will pop up from the bottom.
4) Other content portals for viewing note users: whether on the "Discovery" page, note page or other pages, as long as there is a page with a user's avatar and user name, as long as you click the text of the avatar and user name, the page will jump directly to the user's personal space; Personal space can see more information of the user and more other notes about the user.
Page interaction description:
Click the avatar or name text position, and the current page will directly jump to the user's personal space page;
The upper part of the page displays the personal information related to the user. Slide the page up anywhere, and the upper part will be overwritten. Only the user name text, the "Follow" button, and the title bar of "Notes, Album" will remain on the top of the page;
Continue to move up the interactive page and load more content;
Click the left button in the upper left corner to pop up the page to the right and return to the previous page.
5) Note popularity: The number next to the heart shape represents how many children like the note. Users can click the icon directly to like the note. The icon also appears at the bottom of the note page. After browsing the note, users can also like it again.
Page interaction description:
Click the heart icon or number position to produce a light gray circle developed special effect, and the icon first shrinks and then turns into a red heart shape to enlarge, and a red circle pops up around it to enlarge and then disappear immediately;
Click the red icon to cancel liking. After clicking, the light gray circle zooms in and fades out. At the same time, the red heart shrinks, and the gray border heart becomes smaller and larger.
6) All the user's personal operation contents are gathered here: whether you enter the "Follow", "Discover", "Purchase" page, there is always the user's uploaded avatar in the upper left corner, and all the user's comments, concerns, favorites, shopping carts and other information can be found here.
Page logic content:
Click the personal portrait on the upper left corner of the page, and the list menu of options related to individuals will be opened;
The list menu is divided into three parts separated by a gray horizontal line. Clicking the new page of the first part of the title directly shows that it does not need to be loaded. Clicking the second part of the title takes time to load the page content, and the third part does not need to be loaded;
Click each option, and the new page will be loaded directly.
Page interaction description:
Click the personal portrait on the upper left corner of the page, and the menu pops up from the left to the right. The menu accounts for 2/3 of the whole page, and the remaining 1/3 still displays the home page content. When the menu pops up, 1/3 of the page darkens;
Where there is a new information notice in the list, there will be a red dot on the right side of the corresponding title;
Click the "My Attention" text, the text will generate a light gray rectangular background for 1 second, and the new page will be loaded directly; Slide the page up to load more content, slide the page left and right to switch to the page with subtitle, the title text of the subtitle page turns black, and the red horizontal line under the title text moves accordingly;
Click the option in the second part to load the page. A red horizontal line will appear under the title and become longer from left to right. When the page content appears, the horizontal line disappears;
Click the arrow at the upper left corner of the secondary page, and the page pops up to the right to return to the parent page; Or slide the page from the left edge of the page to the right to return to the parent page, while the menu still stays there without retracting.
7) Access to upload notes: On the "Follow", "Discover" and "Buy" pages, there is a camera icon in the upper right corner. Users can find the access to upload notes at any time.
Page logic content:
Click the camera icon to generate three options: upload pictures, upload videos, and edit the latest draft. Pictures and videos can be taken directly or selected from the phone album;
Upload up to 9 pictures. After selecting pictures, you can decorate them, add filters, beautify pictures, and add labels;
After beautifying the picture, enter the new page to edit the note text part, add the title, talk about the experience, @ friends, add # topics, add the location, and which third-party platform to publish in addition;
In the editing text phase, you can choose to publish notes or save them in the draft box;
Select to upload video, you can cut video clips, and then add stickers and text;
Then edit the note text for the video in the same way as the picture editing steps;
After successful publishing, refresh the "Discovery" page to see your notes;
If you want to delete notes, you can go back to the 7th menu to find personal space to delete notes.
Page interaction description:
Click the camera icon in the upper right corner of the "Discovery" page, and the screen will darken. A small menu pops up at the bottom to choose whether to upload pictures or videos. Click the place outside the small menu to exit the upload, and the small menu will disappear directly back to the original page;
Click the picture icon, the page will directly display the phone album photo list, click the box with the camera icon in the upper right corner of the list, and directly enter the camera status; Click the check mark in the upper right corner of the photo box in the photo list. If the check mark turns red, the picture is selected. Click the right side of the photo direct page to pop up the preview of the original picture of the photo. At most 9 photos can be selected;
After selecting the photo, click the "Continue" button on the upper right corner of the page, and the lower page will pop up on the right side to enter the editing photo;
Select different effects in the "Filter Library". The selected border in the small picture effect turns red, and the above figure will not change;
Page interaction description:
Click the camera icon in the upper right corner of the "Discovery" page, and the screen will darken. A small menu pops up at the bottom to choose whether to upload pictures or videos. Click the place outside the small menu to exit the upload, and the small menu will disappear directly back to the original page;
Click the picture icon, the page will directly display the phone album photo list, click the box with the camera icon in the upper right corner of the list, and directly enter the camera status; Click the check mark in the upper right corner of the photo box in the photo list. If the check mark turns red, the picture is selected. Click the right side of the photo direct page to pop up the preview of the original picture of the photo. At most 9 photos can be selected;
After selecting the photo, click the "Continue" button on the upper right corner of the page, and the lower level page will pop up on the right side to enter editing the photo;
Select different effects in the "Filter Library". The selected border in the small picture effect turns red, and the above figure will not change;
Click the "beautify photo" text, the text will become black, and the "filter library" text will become gray. After each option in the beautify photo is clicked, the small menu will directly jump to display the adjustable status;
After finishing the picture, click the Continue button in the upper right corner. A prompt dialog box "Please wait while saving the picture" pops up in the middle of the page. The lower level page pops up from the right side. After editing the text, you can click Publish or Save Draft Box;
If you choose to upload video, click the video icon, and the camera shooting status will be removed from the right side;
After selecting the video, click the check icon in the upper right corner, and a prompt dialog box will pop up in the center of the "⻚"
After one second disappears in the video synthesis, jump to the text editing page. After editing the text, click the publish button to send it directly. Jump to the "discovery" page to display the prompt message dialog box. Then the page automatically refreshes the content. The upper part of the page notes shows how many new notes are displayed in the prompt message dialog box;
Click the "Save Draft" button and the "View" will darken. At the same time, a dialog box will pop up in the center asking whether to save notes to the draft box. Click the "OK" button and the "View" will pop up to the right and return to the "View" View.
8) View all message portals: on the three main pages, there are message icons in the lower left corner of the page. When there are new messages, a small red dot appears in the upper right corner of the icon. Click the icon to open the message page directly.
Page logic content:
Click the message icon in the lower left corner to open the message page;
Praise and collection, comments and @, follow, notification message, and private message option list are displayed on this page;
Click each option to see the specific content of each message.
Page interaction description:
Click the message icon in the lower left corner to jump to the message page directly;
Click each option, and the lower level page will pop up from the right side of the screen;
Click the left arrow in the upper left corner to pop up to the right and return to the parent page;
Or slide your finger from the left edge of the page to the right and return to the parent page;
Click the private mail option, and the new page has a red loading bar under the title to load new content.
9) Check the shopping cart entry: on the three main pages, there are shopping cart icons in the lower right corner of the page. When there is a new message, a small red dot appears in the upper right corner of the icon. Click the icon to open the shopping cart page directly.
Page logic content:
Click the message icon in the lower left corner to open the message page;
Praise and collection, comments and @, follow, notification message, and private message option list are displayed on this page;
Click each option to see the specific content of each message;
Click Cancel Order before order payment.
Page interaction description:
Click the message icon in the lower left corner to directly open the shopping cart page. The red loading bar displays the loading progress. There are four color dots in the center of the page flashing the updated content, and then the shopping cart goods are displayed;
By default, the left side of the item is selected and displayed in red, and the left side of the item is selected and displayed in black by clicking Cancel;
Click the settlement button in the lower right corner, and the order payment page pops up from the right side;
The payment button in the lower right corner starts the 30 minute countdown;
After selecting the payment route, click the payment button, and the Confirm Payment menu pops up from the bottom of the page.
7.4 "Follow" page
In the Xiaohongshu APP, the "follow" page pays more attention to the content published by other users that users follow, and also recommends users to some small partners that users follow, other partners they have followed, or notes that are liked by the small partners. The content is mainly composed of the following three parts.
(1) Page name: Follow Page
(2) Page entry: start the small red book app, slide the page to the right or click the text to enter the "Follow" page
(3) Page structure:
Recommended users
Follow notes published by users
Follow notes users like
(4) Detailed description of logic page
The "Follow" page has elements with the same functions as the "Discovery" page. For details, refer to the contents of 1, 2, 7, 8, 9, and 10 in 6.3, which will not be repeated here.
1) Recommended users: This part of content is to enable users to know more partners in the Little Red Book app. This part of content consists of users, products, labels, and albums.
Page logic content:
Swipe the screen to the left to see more users; Click the avatar to enter the personal space; Click the Follow button to show that the business card has been followed and disappears; Click the Hide button and the business card disappears directly;
Click "View More" to enter the recommendation page, which includes recommended users, recommended merchants, recommended tags and recommended albums.
Page interaction description:
Click the picture page to go to the user's personal space;
Click the "Follow" button, the text changes to followed and the business card disappears;
Click "Hide" the text business card to disappear directly;
Click the "View more" text page to jump to the "Recommended attention" page;
The title of the current page is "User", the text is black, and the other three are gray text. There is a red horizontal line below the text. When you slide the page to the right or click the text of "Merchant", the page slides to the left across the text of "Merchant", and the red horizontal line slides from the bottom of "User" to the bottom of "Merchant".
2) Follow notes published by users: focus on browsing some notes published by the friends that users have followed, click to enter the note browsing page, and other operations are consistent with all operations on the note page.
Page logic content:
Click the user name or user profile to directly go to the user's personal space page;
Click "..." to choose to share notes or report notes;
Click the picture page to jump to the note page, and all operations are the same as those in Part 4;
Click the heart-shaped icon at the bottom of the picture to like it, click the comment icon to enter the comment area of the note page, and click the follow icon to pop up the album selection menu.
Page interaction description:
Click the "..." button, the page will darken and the menu "Share", "Report" and "Cancel" options will pop up at the bottom. Click the screen outside the menu or "Cancel", and the menu will pop back down from the bottom;
Click the picture, there is a red circle in the middle of the page to rotate the loading page and then jump to the notes page;
Click the heart shaped icon, the icon will first shrink and then become red, and the number will increase by 1;
Click the comment icon, the page will go to the comment area of the note page and slide upward until the last comment appears, then the keyboard will pop up from the bottom;
Click the following icon, and the darkening menu of the page pops up from the bottom.
3) Follow the user's liked notes: the system will recommend the liked notes to the user after the user has followed the partners.
Page logic content:
Click "..." to pop up the menu option "Not interested". After selecting this option, these notes disappear;
Click the user name to jump to personal space;
Click the picture to go to the notes page;
Clicking the icon below the picture will produce the same effect as the previous part.
Page interaction description:
Click the "..." page to darken and the menu "Not Interested" and "Cancel" options pop up at the bottom. Click the screen outside the menu or "Cancel", and the menu pops back down from the bottom; Click "Not interested" and the liked notes will disappear from this page;
Click the picture, there is a red circle in the middle of the page to rotate the loading page and then jump to the notes page;
Click the heart shaped icon, the icon will first shrink and then become red, and the number will increase by 1;
Click the following icon, and the darkening menu of the page pops up from the bottom.
7.5 "Purchase" page
In the Xiaohongshu APP, the "shopping" page is to support the note page. The note page will find the link to purchase the goods, and the user's relevant notes about these goods can also be seen on the purchase page.
(1) Page name: "Purchase" page
(2) Page entry: start the small red book app, slide the page to the left or click the text to enter the "purchase" page
(3) Page structure:
Promotional advertising
Commodity classification
Limited time purchase of goods
Black card upgrade
New grass online
Product List
(4) Detailed description of logic page
The "Follow" page has elements with the same functions as the "Discovery" page. For details, refer to the contents of 1, 2, 7, 8, 9, and 10 in 6.3, which will not be repeated here.
1) Promotional advertisement: Below the search box on the "Shopping" page is a promotional advertisement. The advertisement will use words to indicate what kind of products have low discounts today, the degree of discounts, and the one yuan second kill activity. It will be placed in a prominent position to give users more benefits.
Click the promotion advertisement to enter the low price discount zone. The top of the page is the zone title, return icon and share icon. The following items are the products recommended by four special zones, which are specially for users to plant grass. At the bottom is the commodity classification floor of the special area. Click the down arrow of the floor to open all floors; Click the floor you want to know to jump to its location directly, or directly slide up the page to browse the contents of all floors.
On the seasonal floors of "Seckill", "New Year Goods Street", and "Hot List", there will be promotional advertising links. Click the ads to enter the new page, and you will see four listed products, one floor, and a list of products. The other floors are the list of goods. Click to enter the detailed introduction page of goods. There is always a shopping cart icon at the bottom right of the promotion advertisement link page to the shopping cart page, which can quickly change the page.
2) Commodity classification: Seven classifications are listed in the "Shopping" page, and the eighth is "More classifications". Click to see all the commodity classifications. There are more detailed classifications in each classification. Click this more detailed classification to enter the page containing notes, commodities and users, which is the page that can be directly reached in the search. Click a category randomly on the "Shopping" page to enter the exclusive page. The top is the title, return and share icons, and the bottom is the listing products that switch to the left continuously for 2 seconds; Next is the floor row. Click the down icon to pop up the down menu to display all floor titles.
At the bottom of the floor, there are "Today's Activity" and "Low Price Zone" links. The structure of the page you click to enter is the same as that of the page you click on the promotion advertisement in 1 above. The corresponding parts of the first several commodity categories in the floor include the list, discount area and commodity list, and the other categories are only commodity lists.
3) Limited time purchase of commodities: the display shopping area displays 4 commodities. Clicking on the commodities will not directly transfer to the details of this commodity. Clicking on the limited time purchase area will enter the limited time purchase page. The black line at the top will display the specific time when the commodities start to be snapped up. The background of the current snap up is red. Members can give priority to the next rush purchase period, and the titles of "about to start rush" and "members now rush" can be switched up and down.
Users can click a certain time, and the background turns red after being clicked. Most of the red squares stay in the middle of the time line to browse which goods are limited time and low price in this time period.
For the goods that have been looted, there is a countdown to the end of the activity distance at the top of the goods list. For the goods that have not been started yet, there is a countdown from the start of the time and members have priority to grab the time at the top.
In the list of goods, you can see the picture of the goods, the name, the price of the rush purchase, and the "rush now" button. The prompt message of "Add to the shopping cart" is displayed at the bottom of the time line when you click the button, and disappears after a second. There is a shopping cart icon in the lower right corner of the list to quickly jump to the shopping cart page. Click the product to go to the product details page, and you can see comments and related notes.
4) Black card upgrade: Black card members are members created by Little Red Book specifically for users (small sweet potatoes) to shop. From the "shopping" page to the "blackout" details page, first there is a membership card picture. Click the "View details" page in the picture to darken the central pop-up menu to explain the details of money saved by black card members and the "Join black card members now" link button, Users can pay for quarterly cards, half yearly cards and year-round cards according to their needs, and can purchase them at one time or activate the automatic renewal function.
The membership privileges listed below the membership card picture include: special package mail, limited time advance robbery, automatic refund of seven day insurance, exclusive price, exclusive customer service and exclusive packaging.
There is also "What do black card members say" below. Click to go to the notes page to view notes about black card members. The lower part is the main content. In the "Black Card Member Privilege" part, swipe left through the title line to see which products can participate in the product member discount, and swipe up the page to view the product promotion title and some product lists. Click the product promotion title to move to the product list under this title. When browsing the list of goods, the shortcut "Join Now" appears at the bottom of the page.
5) New draft online: It mainly recommends some newly launched goods. The page consists of classification lines and goods lists. The first part of some floors will recommend some popular community notes and then the goods list. Click the goods image to go to the goods shopping page.
6) Product list: click the product to go to the shopping page, which includes product pictures, price marks, product security, product function introduction, view of brand space (including brand pen brand products), purchase of this product and other product links, product use comments, view of relevant notes, product specifications and information, FAQs, user guide, graphic details Follow the instructions and related products. There are always shortcut icons at the bottom of the page, such as store, shopping, wish list, add to shopping cart, and buy now.
Click the image to go to the product details page, slide the image left and right to view multiple images of the product, click the image further to enlarge the image, and then click the image to return to the original size. Slide up the page to see the price of black card members. Click left to pop up a new page, which is the introduction page of black card members mentioned in 5. Continue to slide up the page to see the brand of the product. Click the brand text to the left to pop up a new page, where you can see the list of other products and related notes of the brand. You can also follow the brand.
Click the right arrow on the right side to pop up a menu item description at the bottom of the page, which details the six policy notices of this item, namely, "one price for compensation", "seven days for price protection", "bonded warehouse delivery", "unit price package", "tax package", and "no return support". Click the page outside the menu or click the close icon to pop up the menu from the bottom.
For some goods, you can select the number of pieces. Click this line, and you can select the number from the pop-up menu at the bottom of the page and click the Confirm Add button. The menu pops up from the bottom and returns to the shopping cart icon at the bottom of the parent page. A small black menu displays "successfully added to the shopping cart" and a red "go to settlement" button is attached to the shopping cart page.
There is a shop logo under the product function introduction. Click it to go to the merchant's home page. The home page of merchants consists of home page, new products, hot spots and activities. There are sharing and classification icons in the upper right corner, but a search box is missing. At the bottom of the logo is the product link that people who have seen these products have also seen. What do people say about product reviews? At the bottom is the detailed picture and text introduction of the product and the list of related products. Related products can be the same product or other products of the same brand. Click the image to enter the shopping page.
At the bottom of the product page, there are always stores, shopping carts, wish lists, add shopping carts and quick links to buy now.
8、 Test abnormal pages and emergencies
After using the Xiaohongshu app experience, the author tested what the app's countermeasures were when network exceptions, login exceptions, and data loss occurred, and what functions could still be operated without the network.
8.1 Network abnormalities
Test content: under the premise of no network, the user enters into the logged in app and the status of sudden network disconnection when using the app.
Through the test, it is found that when there is no network connection, the app has done the data cache display text of "no web page found" for the functions of shopping cart, order, potato coupon, wish list, and black card member, while other pages that have not done data loading have done the pop-up design of network abnormal prompt information, The text "Network connection is disconnected, please check the network settings" is displayed at the top of the page, and stay on the page until you are connected to the network.
Even if there is no network situation in the process of using the app, the app also presents the above two states. However, if the user is unable to connect to the network while sliding up and down the page to browse the note list, the user can still click like or cancel like the note, or browse the following content to know that all the loaded content is browsed, and the prompt message pop-up window will appear when more content needs to be updated.
8.2 Login Exception
Test content: Start the app without network and login.
Start the Little Red Book app without logging in to the network, and the video on the welcome page can be played normally. Figure 1 shows that in the case of no network, the user logs in to the app through the mobile phone number and sends the verification code. After entering the mobile phone number, go to the page for entering the verification code, and there will be a prompt message "The network connection is disconnected, please check the network settings". This prompt message remains on the page all the time. The page shows that the verification code has been sent and there is a countdown for sending, but the author did not receive the verification code within the countdown time, and did not receive it after several attempts.
Figure 2 shows that the user logs in to the app through a third-party account when there is no network. Without the third party on the network, the user can't authorize. The page has a UI design that displays the text "Network error, please click the button to reload" and the reload button. There is a prompt message at the bottom of the page, "The network is not strong, try again later (C7002)", and the text does not disappear. All the prompts do not indicate that the network is not connected and the button to jump to the mobile network settings is not given.
8.3 Data loss
When the background operation of the warrant officer is interrupted for a long time in the process of using the app, when the network or login is abnormal, these external conditions are likely to cause the data loss of the app. When the user returns to the app again, the page cannot be allowed to perform any operation. The system has to restart the cover page of Little Red Book and then enter the "Discovery" page. If the user cannot click any function and the system cannot be reloaded when the app crashes, the user can only choose to manually exit the app and re-enter.
9、 Problem exploration&improvement suggestions
Question 1: Label content switching
Experience:
When users browse notes in the "Video" tag, they need to slide up the page to load more notes. At this time, they find that the tag line is hidden. When users want to switch other tags, they need to go back to the top of the content to switch tags. With iOS system, click the time and position twice quickly to reach the top. With Android system, I used the most stupid method to slide down the page crazily to return to the top. This method also led to my unwillingness to switch labels in the future.
It was not until recently that the hidden function was discovered through the crazy use of the Little Red Book app. Only one click on the "find" text not only achieved the highest speed but also updated the new notes. However, sometimes repeated clicking on the "find" text would not have any effect. I think I am spoiled by the quick top button of most web pages. Sometimes I want to slide the page from side to side, but I find that the trick is to switch between paying attention, finding and buying pages.
Modification comments:
The two corners at the bottom of the page have been occupied by two shortcuts, and there is no more space. The system can actively identify that when the user slides down the page, the shortcut to quickly set the top appears above the shopping cart icon, and it will be automatically hidden when the user slides up the page or stops sliding.
Question 2: Video note traffic
Experience:
When the user enters the "Video" tab, all videos in the video list will play videos automatically according to the traffic flow, even when connected to the mobile network.
Modification comments:
The app should pop up a prompt message to prompt the user, "Is the app allowed to use the mobile network?" and give the "Go to Settings" button to jump to the mobile network settings section.
Question 3: Pictures, video notes
Experience:
In other tags, picture notes and video notes are mixed together. When browsing the note list, both pictures and videos are in traffic, and all notes are sorted in chronological order by default, which will make users lack the initiative to control the app.
You can add a sorting method and filter at the top of all notes. By default, the notes are sorted by time. The sorting method can be sorted by time and heat. Filtering methods can be divided into picture notes and video notes, which can reduce traffic.
10、 Summary
Through analysis and continuous application of the Xiaohongshu app, the author found that there is a close relationship between the different functional pages of Xiaohongshu. For example, when browsing notes, you can directly access the purchase links of the products mentioned in the notes, and you can also view the relevant notes published by other users of the product on the product purchase page to learn about the experience of using the product. And the real experience is that note sharing really makes me realize that an app can realize the function of discovering good things around the world.
Author: THDNI
Link: https://www.jianshu.com/p/855b5f103087
