[Product Design] How to design the personal data card of the information flow product?

The profile card page can let users know more about creators and their creative content, attract users' attention, promote follow-up retention, and then promote effective content growth and monetization. So, how should we do a good job in the corresponding page design?

insert image description here
In a feed product, the profile card is a very important page. On the one hand, creators use this page to display account value, highlight the charm of the account, and guide users to pay attention; on the other hand, consumer users use this page to learn about creators and view more content of creators, which is an important part of the content consumed by many consumer users. part of the Only by doing a good job of this cycle can we promote the ecological development of the platform in the long run.

This page carries so much value, how should it be designed? This article will take the design idea of ​​upgrading the data card of QB Kandian number as an example to analyze and answer.

I. Introduction

During the preliminary analysis, we found that there are many problems in the current version. From the data point of view, compared with similar products in the company, the conversion rate of the follow button is lower (due to data protection and data hiding).
insert image description here
From the style point of view, the information layout is messy and the focus is not prominent.
insert image description here
Based on the above background, we started to revise and upgrade the data card.

2. What should be considered before designing

Before doing any design, you should think about the design goals, otherwise the design results are meaningless and lack process basis and support. So what is the design goal of the data card? This starts with the mission and value of data cards in information flow products.

On the one hand, consumer users use this page to learn about the creator and view more content; on the other hand, creators use this page to display the value of the account, highlight the charm of the account, and guide viewers to pay attention.

If the creators can fully display their talents and charms on the data card and bring more "attention" from viewers, then they will be more motivated to share or produce high-quality content, which will enrich the content of the product; thereby attracting more Browsing and retention of new users.

The addition, browsing, and retention of more new users will give content producers more room to increase their fans, and commercialization will begin after the number of fans is increased. This is beneficial to consumer users, content producers, and platforms, and thus creates a virtuous circle.
insert image description here
insert image description here

3. How to design the data card

After understanding the mission and value of the data card, the design goal is ready to come out. As a platform side, we need to help creators solve two problems: assist creators to attract fans & help commercial realization.

Of course, the key to attracting fans is to produce high-quality content for creators, and the platform can only assist. However, different information flow products have different positioning and focus, attracting different users, so the design styles of data cards are also different.
insert image description here

1. Assist creators to attract fans

When assisting creators to attract fans, there are two dimensions to think about:

  1. content display dimension;
  2. User attention dimension.

1) Analysis of content display

In the data card, there are three large areas: header image area, information area and work area.

  1. Header image area: refers to the header image area at the top, where creators can set a personalized header image to show their personality.
  2. Personal information area: Mainly the author's basic information, including nickname, account name, profile, number of fans, certification information, etc... There are usually some ratings and lists here, which belong to the information display and official endorsement area.
  3. Works area: It mainly displays the content published by the account. This part is usually the part that the viewer pays the most attention to and spends the longest time browsing.
    insert image description here
    By comparing 20+ information flow products in the market, we found some interesting rules:
    insert image description here
    ① Header image area : The more community-oriented products, the more attention is paid to the personalization of the head image, while information products are less important.

From the point of view of product function, the more it is biased towards community attribute products, the larger the area of ​​the header image, and the wider the scope of customization and replacement. From the perspective of user usage, users of community products also love to show themselves more, with a larger proportion of head image replacements and more diverse styles. However, creators of information products mostly use the default header image without personalization, and the proportion of customized header images is very small.

Therefore, when we design the page layout, we need to think about our own product positioning and the needs of creators, and make the best use of the limited space.
insert image description here
② Information area : The more commercial products pursue diversified benefits, the greater the carrying capacity of the information area.

The creator is not a living Lei Feng. If he wants to stay on the platform for a long time, he must give the creator more benefits (benefits are not only explicit but also invisible, such as Bilibili, where many creators earn less from posting on the platform than other platforms. , but because the brand has a big voice and a good atmosphere, it has gained huge attention and exposure, so even if the income is low, creators will continue to contribute on the platform).

In addition to traffic sharing, platforms are also helping creators achieve diversified benefits, such as shops, live broadcasts, fan circles for paid courses, etc. Even many Douyin creators directly write business cooperation in their personal profiles to attract investment. Therefore, in this area, with more attempts to diversify commercial income, the information carrying capacity is also increasing.
insert image description here
③ Content area : the longer the content, the more works and more information it tends to display; the shorter the content, the more "you're done watching".

Comparing multiple products, we found that the longer the content of the product, the more efficient the selection in the content area. More content is usually displayed, and a single piece of content will display more dimensions to help viewers decide whether to click to view. It may be guessed that because the content is longer, the viewer usually spends more energy on selection. And the shorter the content, enlarge the content of a single piece of content, so that the viewer can click, and "just watch it", anyway, one piece of content doesn't take too long.

Therefore, when designing a data card, designers need to clearly understand the content characteristics of their own platform and user behavior preferences, and make a design that is more suitable for their own platform style.
insert image description here
To sum up, when doing content layout and display, it is necessary to comprehensively consider product positioning and think about what these areas mean to products, creators and viewers.

For example, in the header image area, information products do not pay much attention to it. After all, the account still depends on the content. Even if a personalized header image is displayed, viewers will not pay attention to it. And everyone uses the default header image, so there is no way to talk about personalization, let alone meaningless.

So how to make the header image valuable? The creator is willing to change it, and the viewer can feel the specialness of the account when they see it?

The author provides an idea to start a discussion, referring to the editor's selection of the App Store: only selected apps can have the right to the header image, and other apps have the default style. Scarcity and recognition are exactly what human beings pursue and desire. If the platform selects some selected accounts, it will be given the qualification to set the header image. As a creator, I am very willing to change, because it can reflect the difference from other accounts. Viewers can also feel the high-quality attributes of the current account through the header image.

insert image description here
2) Research on user behavior

Since I want to attract fans for the account, I need to understand the behavior preferences of the viewers, and know what content the viewers use to judge whether to follow the account.

Here we surveyed 12 users offline to understand what information and elements they use to decide whether to Follow the account.
insert image description here
Through interviews, we obtained the original statements of 12 users.
insert image description here
We found that when viewers follow an account, they mainly care about "whether the content is interesting", "number of followers" and "content field". A small number of students mentioned that they will pay attention to the number of works, and basically do not read other information.
insert image description here
Excerpt from the original words:

〇 Mainly look at the content posted by the author, take a look at the high-play volume, and if you are more interested, you will pay attention. I will look at the number of fans. More fans means better quality, and attention will not step on the pit. I will take a look at the number of works. If there are too few works, such as less than 5, I will not pay attention and look directly.

〇 Only look at the content, basically do not look at other author materials, occasionally look at the number of fans. Tutorials don't look at the number of fans. If the tutorial is what I need, I will pay attention even if there are few fans.

〇Mainly watch the author’s other videos, follow mainly for collection, and watch all videos if you don’t watch anything else. I will pay attention to the playback volume of the recent content, and basically ignore the others.

〇 It must be to see if you are interested in the content. The key is to look at the content. The number of fans and the number of likes will be checked, but it will not be the main reason for attention. If the number of fans and works is large, the motivation for attention will be greater. Don't look at anything else.

〇 Still see if you are interested in the content. The number of fans is divided by the number of fans. The content that is particularly needed does not pay attention to the number of fans. The content of funny life will look at the number of fans before considering whether to pay attention. Some authors will not pay attention if they are only interested in individual content but not in the field as a whole. Use the title to roughly judge whether it is the type you like, the most important thing is the content, don't read the others, just check the number of fans and don't be too bad.

On the operation path, after entering the data card: first go to the work area to view the content list → drag the page up to view more content → return to the information area to view the number of followers → follow the account. Present the operation path of first down and then up.
insert image description here
Behavior path combined with attention decision-making, there are three key elements that form an operation chain and bind together: content, number of fans, and follow button. And the content is high-volume content, so for high-volume content, the number of fans is the key to decision-making, which will stimulate the next step of attention.
insert image description here
Moreover, we found in the interview that following behavior is also an impulsive behavior. Users usually make a decision within a few minutes of entering the data card. The longer they stay on the page, the less likely it is to follow the behavior. Therefore, in the design, the decision-making path should be shortened as much as possible to reduce the decision-making time.

Based on the above conclusions, we made two plans to test again:

  1. Option 1: traditional style;
  2. Option 2: Place high-volume content, fans, and follow buttons in the same area to shorten the decision-making path.
    insert image description here
    The reason for doing a comparison test with a traditional solution is also because many product information card pages are now converging, and everyone has formed a cognitive inertia, and respecting user habits is also a factor that needs to be considered in product design. Next, we found another 12 students to conduct interviews and tests.

Unexpectedly, everyone has a high degree of acceptance of new things, and eight students choose option 2. Although it is only a theoretical choice and has not been extended to actual behavior, it also proves that there is indeed a high demand for high-volume content. For students who choose Option 1 (traditional style), the main reason is that they don’t like horizontal sliding operation and don’t want to change their existing habits.
insert image description here
Excerpt from the original words:

〇 I like Option 1, I don’t like horizontal sliding, I am used to vertical operation, and the title is clear.

〇I like Option 1. It seems that the horizontal display is not as clear as the vertical display. I like this long strip style.

〇I like Option 2. I like this one. It is focused and in line with my habits. If the content with high playback volume is good, I will pay attention to it, so I don’t have to look for it.

〇I like option 2, the above thing similar to youtube's popular uploads can let you see where the UP master is at first glance.

Regardless of the style, content is the top priority. Since it is the top priority, you will also notice that some videos in the content area are in the form of double columns, and some videos are in the form of single columns. So how do viewers perceive this distinction? Will it affect attention?

Based on two styles of interviews, the score was tied in the end. Although everyone has their own choice under the requirement of choosing 1 from 2, they all agree in the end that the difference is not too much and they can all accept it. In terms of information utilization, the double-column form displays more content, and is more video-friendly, with a larger preview image. So if it is video content, you can use the double-column large preview image style.
insert image description here
The above is the part that focuses on attracting fans. When designing, it is necessary to comprehensively consider product positioning and user behavior characteristics for page layout.

  1. Facilitate the realization of commercialization
    The commercialization ability is the link between the creator and the platform to form a strong relationship. In order to help creators monetize, the platform not only provides subsidies through various support policies, but also integrates various commercial resources, continuously expands commercial channels, opens up the whole process of commercial chain, and helps creators maximize the value of content. There are three types of general platform commercialization.

1) Basic tools

  • Business foundation: the platform provides traffic sharing, cash rewards, etc.;
  • Commercial functions: rewards, e-commerce functions, content payment functions, live broadcast functions, etc.;
  • Precise push function: fan group push, fan must reach, etc.

2) Platform Policy

  • Support plan: Introduce various traffic support policies to enable realization;
  • Incentive policy: MCN signing, creative activities.

3) Resource integration

Commercial resource integration: Integrate various resources such as advertiser resources, commercial activity resources, investment and financing services, and new media account incubation inside and outside the platform.

The commercial display involved in the data card mainly includes: e-commerce capabilities, content payment, fan circle/fan payment. When there is such commercial content, it usually occupies a row of information area, which is the case for most information flow products.
insert image description here
But when multiple commercial capabilities are provided at the same time, different products offer different solutions. For example, most products are combined in one row in the information area, and more are displayed by horizontal strokes to ensure the exposure of other content. After all, for viewers, the content is the most important.
insert image description here
There are some products that do not choose to merge and each takes up a row of space. At the same time, the creator’s information is displayed in more detail, which may be related to the positioning of its own community products. I hope to pay more attention to content. The creator's own unique value.
insert image description here
There are also some products that use the content tab area to carry showcases and paid services, reducing the occupation of the information area, and can also guide users from different channels or scenarios to different tabs through logic, allowing viewers to see more suitable content.
insert image description here

Four. Summary

The data card carries a lot of information, from the creator's personality display to content to commercial realization, we need to constantly balance the relationship between each area.

Doing this for other products is not necessarily suitable for our own business. We need to find out the positioning of our own products and comprehensively consider the current business priorities.

Is the business information-oriented or community-oriented? Is it a short content platform or a long content platform? Have you provided enough commercial monetization capabilities for creators? How is the commercialization capability doing? What about user data for different modules? Only by fully understanding the existing business, can we know which are the key points at this stage, and can make a more evidence-based design for a page.

Guess you like

Origin blog.csdn.net/qq_41661800/article/details/132333663