Teach you how to build a live broadcast room module for live e-commerce from 0 to 1

The live broadcast room is the core module of the live broadcast, and is also the carrier module for all interactions and displays based on the live broadcast scene. As live streaming has developed, it has gradually evolved into a "live streaming +" model. Traditional shows have added live streaming content such as games, e-commerce, variety shows, and conferences. But there are genetic differences between show live streaming and e-commerce live streaming. This article mainly wants to share with you how to build the live broadcast room module of live broadcast e-commerce based on the product form of live broadcast e-commerce .

There are significant differences between live e-commerce and traditional show live streaming, mainly reflected in

1. Different user demands
2. Different live broadcast scenarios
3. Different product forms

In terms of user demands , traditional show live broadcasts are more inclined to social interaction. Users mainly watch the live broadcast around the host, and the core is the host. Live streaming e-commerce is more of an e-commerce transaction based on social interaction. Users mainly watch live streaming around products, and the core is the products.

In the live broadcast scene , traditional show live broadcasts rely more on the host's "show" and "performance" to maintain the live broadcast content. Live streaming e-commerce requires more "explanation" and "display" of products to interact with and answer users' questions, and use promotions and gaming to motivate users.

In terms of product form , traditional show live broadcasts need to think more about how to keep users in the live broadcast room. Live streaming e-commerce is more concerned about how to allow users to buy while watching, creating a one-stop shopping experience from watching live broadcasts to browsing products, from browsing products to completing purchases and then returning to the live streaming room.

Based on the above analysis, we can see that the core of the live broadcast room module of live e-commerce is to think about how to create a one-stop shopping experience for users where they can watch and buy at the same time. We still start from user scenarios to explore how to design the live broadcast room function for live e-commerce. This article is mainly divided into the following two parts:

1. Explore user scenarios for live e-commerce
2. Design the live broadcast room module for live e-commerce

User scenarios of live e-commerce

Let’s first take a look at the problems that live streaming e-commerce solves?

Traditional e-commerce solves the problem of product access and online display, allowing people to shop online through three powerful tools: search, classification, and product details page. However, as the number of product categories increases and product content becomes more and more homogeneous, the difficulty of people's screening gradually increases. After that, screening became the first major problem that traditional e-commerce platforms had to solve.

How to enable users to quickly filter out the products they want and quickly make orders after making decisions. Therefore, the recommendation system has become a common technique. You can search for the products you want to buy on Taobao, and the algorithm behind Taobao has helped you do a lot of things. However, Taobao has not fundamentally solved the following problems:

• The trouble users have with horizontal comparison when purchasing products. We evaluate which clothes to buy based on product details, reviews, ratings and many other factors, which is simply a pain for people with decision-making difficulties.
• The problem of buyer’s show after users purchase the product. It looks so good in the pictures online, but why does it look like something worn by an old lady when I wear it?
• Merchants’ stores have become a problem of efficiency head effect. There are more and more merchants with high transaction volumes, and there are always fewer merchants with low transaction volumes.

Live streaming e-commerce is precisely the solution to these problems.

First of all, live streaming e-commerce allows users to change from self-screening to expert recommendations. It’s like if you want to buy a car, without a professional to tell you the difference between each car, how can you find your own position? For example, when buying clothes, if there is no fashion expert telling you on live broadcast what the most popular matching style is this summer, will you buy last year's popular styles?

Secondly, in live e-commerce, the hosts are mostly experts in various fields. They will display the products in the live broadcast. Through the live broadcast, one can fully understand the characteristics of the products and can also interact and answer questions in real time. For example, when clothes are being shown live, models with different body proportions will be asked to try the clothes on personally. You can choose the size according to your body shape, and you can even ask the host directly what suits you.

Finally, live streaming e-commerce is a "mobile e-commerce platform" with the live streaming room as the core, and each live streaming room is a small center. There is no such thing as no display opportunity if sales are low. Of course, live streaming e-commerce also solves many other shopping problems, which will not be elaborated here.

So what are the user scenarios for live e-commerce? I have written about this in another article, "How to Design the Scenario Status of Live E-commerce". Students who are interested can read it. Only scenes related to the live broadcast room are listed here.

Let’s look at it from the host side and the audience side separately.

Anchor side:

1. During the live broadcast, I can quickly put products on the shelves and display certain products. Remind users to purchase with one click.
2. When broadcasting live, I can get real-time information about the user data of the live broadcast room, including the sales situation of the live broadcast. Adjust your content strategy based on data.
3. During the live broadcast, I can see the questions asked by users and answer them in real time.
4. During the live broadcast, I can be provided with some games or gameplay to activate the room. For example, sending coupons, red envelopes, etc.
5. During live broadcasts, I can conduct marketing activities, such as flash sales, group buying, etc., to promote conversions.
6. When I am live streaming, I can let users in the live streaming room follow me and become my fans, and I can also notify them of the next live streaming. It would be best if they could know my WeChat/Weibo and add me as their friend.
7. When I am not broadcasting live, users can know my next live broadcast and make an appointment in advance, watch my historical replays, or purchase directly in the live broadcast room.

…

Audience side:

1. Could you recommend categories of interest to me so I know what the theme of this live broadcast is?
2. Can you let me know what products are being sold in this live streaming room? Who is watching? Who will buy it again? What do you think of this product?
3. It allows me to interact with the host, have him answer my questions, and show me the products I want to buy in real time.
4. It allows me to follow this anchor and become her friend.
5. It allows me to purchase directly without closing the live broadcast

…

Of course, the audience has many more scene demands...

Design live e-commerce live room module

The live broadcast room module is a rather complex part, which includes many details. In order to ensure the scalability and maintainability of the live broadcast room, we need to build the live broadcast room framework in the early stages. Before designing the live broadcast room module, we need to define several levels of problems. These problems are the basis for solving the interactive design of the live broadcast room.

1. Live broadcast room status issue
2. Live broadcast room permission issue
3. Visual issues in live streaming
4. Live room module problem
5. Live broadcast room level issues
6. Live room interaction issues

Live broadcast room status

The live broadcast room is divided into three states: live broadcast, live broadcast playback, and non-live broadcast. The elements and interactions displayed in each state are different. Moreover, the various states in the live broadcast room can be transformed into each other. For example, when the host's live broadcast ends, the live broadcast you are watching becomes non-live state, you are watching a live broadcast replay, the system reminds you that the host is broadcasting live, click to switch to the live broadcast state, etc.

Live room permissions

Live room permissions mainly refer to operating permissions. The anchor side generally allocates functional permissions based on roles, and the user side will determine whether it has operating functional permissions based on whether it is logged in, user level, user identity, etc., which is related to the live room vision below. For example, only those who are associated with the anchor can receive red envelopes. (I have introduced this in another article, “What kind of sparks will be created when live streaming and red envelopes are combined”)

Live studio vision

The live broadcast room is generally divided into the anchor side and the audience side. Sometimes the anchor side is also subdivided based on roles and permissions, and different permissions can use different functions. The functions that the anchor terminal can generally have include:

1. Management of goods
2. View of transactions
3. Management of live broadcast room users
4. Control of interactive gameplay in the live broadcast room
5. Live broadcast room settings and data viewing

The functions that the audience can have include:

1. Chat, like, reward, etc.
2. Product browsing, purchasing, etc.
3. Participation in live broadcast activities, etc.

Live room module

The next step is to divide the live broadcast room modules. Regardless of the user role, we must consider the technical maintenance perspective and user cognition perspective when defining and designing the live broadcast room modules. Ensure the unity of modules in the visual display of the live broadcast room. In addition, affected by the live broadcast equipment and operating behaviors, the modules and layout of the live broadcast room will also be somewhat different. For example, when the anchor uses a camera or computer to broadcast live, the picture is displayed half on the mobile phone. Another example is that the user watches the live broadcast in horizontal screen. We will not consider these factors in this article for the time being. Here we will only discuss the situation of live broadcast on mobile phones without horizontal screen.

In the division of live broadcast room modules, we can define 11 modules, which are:

1. Basic information display area
2. Revenue statistics display area
3. Activity display area
4. Dynamic effect display area
5. Product message reminder display area
6. Task interactive display area
7. Interactive message display area
8. Product quick recommendation display area
9. Live broadcast room button operation area
10. Purchase and reward animation area
11. Like interactive area

What does each area represent? Don’t worry, we will introduce it later. Let’s read the definitions of the other questions first.

Live broadcast room level

Are there levels in the live broadcast room? That’s for sure. From a technical perspective, so many functions are developed layer by layer. In particular, many elements of the above modules will overlap. When encountering overlap, it is necessary to define which one is on top and which one is on the bottom. For example, which one should be on top, the animation or the live broadcast screen? The answer is definitely that the animation should fly above the live broadcast screen, otherwise you can't see the animation if it's below. When defining the hierarchy, we should judge based on the importance of the elements. The general principles to follow are:

1. Important information on top, less important information on the bottom
2. Button operation is more important than display information
3. The commodity category is larger than the interactive category, which is larger than the statistical category.

So, the rules we recommend are as follows:

The bottom layer of the live screen < basic data of the live room < chat messages in the live room < animation messages in the live room < clickable buttons in the live room

There will be further subdivisions on the clickable buttons in the live broadcast room.

Basic click button (follow, etc.) <Statistics click button (income, etc.) <Interaction click button (second-sale red envelope, etc.) <Product click button (product display, etc.) <Pop-up click button (input box/product list, etc.)

Of course, in terms of technical implementation, sometimes it is necessary to handle separately the situation when A is on top of B, but A is for display and B is for operation. At this time, clicking on area A should trigger the following B operation. For example, when there is a purchase animation on the follow button, the button cannot be suspended above the animation for visual reasons - it affects the visual experience! So we need to display the animation on the button, but when clicked, the animation actually has no click behavior, so the bottom follow button is triggered.

Live room interaction

The design of the live broadcast room interaction should try to ensure that the display and operation are within the live broadcast room, and do not jump out of the live broadcast room. Imagine that when you are watching a movie, an ad pops up, and when you click it, it jumps to a third-party page and the video is gone. How would you feel? Therefore, try to ensure that viewing information, clicking operations, etc. are all carried out in the live broadcast room. The best way is to pop up a window in the live broadcast room without interrupting the live broadcast.

There are three types of pop-up boxes in the general live broadcast room:

1. Bottom pop-up box: only displayed at the bottom, usually occupying 1/3 or 1/2 of the entire screen. The advantage of this design is that you can still see the host's presentation screen, but the disadvantage is that you can't see the message at the bottom.
2. Middle pop-up box: displayed in the middle of the live broadcast, and the size can be adjusted as needed. The advantage of this display is that you can see the message module at the bottom, but this cannot be seen on the screen displayed by the anchor. Of course, it can be made translucent to reduce the impact.
3. The full drama pop-up window covers the live broadcast room. Needless to say, the disadvantage of this is that you can’t see anything. The advantage is that it can display more information, giving the same experience as browsing a new page.

The first method is generally used for continuous and long-term operations such as product displays and interactive operations in live broadcast rooms; the second method is used for one-time or short-term displays such as message reminders and basic information; the third method is generally used for event introductions, personal homepage displays, and third-party website displays.

Small screen playback

In addition to these, there is another interactive behavior that is particularly important to explain, which is ordering products. How can we achieve a one-stop shopping experience of placing orders while watching live broadcasts? When we need to browse product details, it is certainly better to use the third pop-up box method mentioned above, but product browsing involves multiple interactive modes. Users may view large images in product details at any time, click to jump to other pages, and so on. Furthermore, the ordering process also involves unexpected interactive experiences, such as filling in the delivery address, selecting coupons, and making payments. It is not impossible to achieve it in this way, but the cost is very high and it is almost impossible.

So here we are going to introduce the "small screen" mode to achieve this. The live video can be enlarged or reduced along with the player, and can float above the page and be dragged. The trigger for switching to the small screen is determined by whether the user browses the product details, and the whole process does not affect the live broadcast. While browsing the page, you can click the small screen to switch back to the live broadcast room at any time.

Ok, after defining the above questions, let’s go back to the 11 live room modules mentioned above and take a closer look at what information each module contains.

1. Basic information display area

Three main things need to be made clear here: who is broadcasting live, what is being broadcast, and the broadcast data. So there are several elements here:

• Anchor information: An avatar and live broadcast room ID are enough. Clicking the avatar will pop up a box to display more information.
• Live broadcast topic: includes classification and live broadcast status, allowing users to broadcast what is being said in the live broadcast room.
• Live broadcast data: number of views, number of likes. Let the anchor and users know the number of people online in the room, and the anchor can interact and adjust the live broadcast strategy based on the number of people.
• Sharing entrance: You can share it to a third-party social platform and browse it on the web.

2. Revenue statistics display area

This is mainly for the anchor and users to see the purchase status of the live broadcast. The income here includes rewards and order income. Users are of course willing to watch live broadcasts that have many buyers and are lively, and the hosts will be motivated to do a good job of broadcasting when they see the revenue.

Because it is a social e-commerce, a ranking list will appear when you click here. The ranking list can encourage buyers to follow the trend of high-selling clothes, and also allow buyers to follow each other and become friends.

3. Activity display area

The activity position mainly refers to the activity content configured in the live broadcast room. It is generally controlled by the platform, and users can click to browse and participate in activities directly in the live broadcast room. Each live broadcast room serves as a publicity portal. Just imagine that the live broadcast rooms can be shared and moved. If each live broadcast has 100,000 people watching online, 100 live broadcasts would mean 10 million people. By configuring an activity and advertisement in the background, it can be exposed 10 million times. This is such an important traffic and monetization position, and it also facilitates participation in platform activity promotion.

The interaction here can be made into a carousel scrolling, and the banner entrance of the app can be reduced and placed here.

4. Animation display area

The motion effect here refers to the animation effect that flies out in the live broadcast room, which is used to remind and reinforce. Generally, there are reward animations and purchase animations.

5. Product message reminder display area

The interaction here is dynamic and is used to provide product prompts. When the anchor clicks on a product, the user can quickly see the product at this location, and after clicking, they can browse the details and make a purchase. It usually lasts for a few seconds and then disappears.

6. Task interactive display area

There are many interactive and promotional methods in the live broadcast room, but these functions need to be enabled by the anchor to be displayed. For example, if the anchor initiates a group buying activity for a product, the group buying entrance will appear in this area. Live streaming itself is a tool that helps anchors to better interact and monetize, so the richer the interactive gameplay and promotional methods, the more it can help anchors better maintain fan users.

7. Interactive message display area

Live messaging is a relatively complex interactive behavior. When designing messages, pay attention to the following aspects:

1. Message style display
2. Message type classification
3. Message importance classification
4. Message reminder frequency
5. Message click interaction
6. Message sending subject

The news from live e-commerce does not need to be lively like a fashion show, with constant scrolling on the screen. Instead, it needs to focus more on question-and-answer content and product purchases. Rewards and other reminders can be weakened.

8. Product quick recommendation display area

Here you can display recommendations based on the time the product was last updated or how popular it was, and you can swipe up and down to display more. The purpose is to allow users to quickly see new and popular products and click to browse.

9. Live broadcast room button operation area

The operations of the live broadcast room are basically at the bottom, distinguishing between the host side and the audience side. The host side is more about settings, while the audience side is more about interactive participation.

For example, the anchor side can be divided into

1. Chat: Sometimes it's easier to remember key information by typing it.
2. Private message: There are always people who want to chat with the anchor via private message, don’t ask me why!
3. Settings: Live broadcast settings entry
4. Interaction: Live broadcast room interactive gameplay opens the entrance
5. Promotion: Live broadcast promotion gameplay opens the entrance
6. Listing: Quickly list new products during live broadcast
7. Product library: quickly manage live broadcast products and link other products from the store

10. Purchase and reward animation area

This position represents the entire live broadcast room area. In order to highlight the dynamic effects of purchases and rewards and to make the buyers and rewarders look like rich people, some important reminders must be added.

11. Like Interaction Area

To make it easier for users to click "like", they only need to tap the screen with their finger, without having to find a specific button to click.

In this way, the entire live broadcast room has been basically built from module layout to functional interaction logic. Next, you need to define different functions in each module of the live broadcast room according to the company's specific business needs. After we have learned how to build and design the live broadcast room, we can design more functional gameplay based on the live broadcast room framework to make the most of the live broadcast.

Finally, to summarize, this article is based on the special scenario of live e-commerce. It starts with defining the status, permissions, vision, modules, levels, and interactions of the live broadcast room, and then analyzes the information design ideas of each module in detail according to the module classification and principles, so as to realize the construction of a complete live broadcast room framework for live e-commerce.

Author: Shui Dulizi

Source: jdccPM