Bilibili Co-Up Platform

UI/UX Design

This is a platform bringing different types of video producers together so that the cost for video production is reduced and more people can get involved or even make money by video production.

Lower the cost and increase the pay by uploading videos in groups.

 

Scope: UI Design, Usability Test, Low-fidelity Design, High-fidelity Design, UX Report

Time: 11.2020 - 12.2020

Group numbers: Product Manager, Marketing, Developers

Competition: 1st Prize in Bilibili Star

 

  • The Change of Video Production

Bilibili is famous for the animation, comics, and games (ACG) on the site, and users enjoy the community by leaving comments on the video bullet screen. Although Bilibili has been the most popular video-sharing website since 2012, it suffers pressure from short-video production recently.

 
 
portfolio0-sm.jpg

Shorter Videos after 2016

Short videos are getting more and more popular, this can be seen even in long video streaming websites. Statistic data of Bilibili demonstrate the decreasing average video length since 2016. More people tend to upload shorter videos that take less effort for both producers and viewers.

Video Producer Distribution by Follower Number

Almost 80% of video producers have fewer than 5,000 followers, and less than 0.5% of video producers have more than 100,000 followers. Those small video producers are less familiar with video editing tools and are more likely to give up because there is less sense of achievement.

 

Pain & Gain for Short/long Video Producers

Long video producers interviews: Gain>Pain

  • Gain can be divided into achievement and money.

  • Efforts can be divided into time to make videos, payment, the risk from ads and thinking time and energy.

The concept of time for video producers:

  • Video producers will think about pain and gain first, and then act. If the entry barrier is low and the expected pain is less, producers will take action

  • Video producers will pay first and then gain.

portfolio0-sm3.jpg
Pain and gain for video producers with different numbers of followers

Pain and gain for video producers with different numbers of followers

 

  • Information Architecture

Through user interviews and workflow analysis, by integrating the needs of users and enterprises, the core functions are as follows: recommendation (homepage), projects, creator, event, work, and co-edit.

  • The homepage provides all the interfaces that users are interested in when browsing, including recommended works, recommended activities, recommended creators and recommended activities, which are similar in logic to the main website and conform to user habits.

  • Projects and creator pages are the key features, providing display and indexing functions for both parties.

  • The event interface displays current events. The requirement from the marketing group is to promote current events and to reduce the cost of participating in events. It is beneficial for the main site and other departments.

  • The works page displays the community of works created in groups. In addition to the main site itself, it provides a community environment with a more sense of team honour.

  • The co-edit page acts as a video production platform for co-creation, cloud editing technically supports a teamwork platform with low cost, high collaboration, high efficiency, and real-time feedback.

Information architecture of the platform

Information architecture of the platform


  • Low-Fidelity Prototype

In the process of designing the prototype, the activity interface was moved out of the main navigation bar as a sub-page jump of the home page activity, reducing the user information burden on the main navigation bar. At the same time, it reduces the complexity of the overall atmosphere of the platform, makes the product more suitable for initial users, and shortens the learning curve.

5 Main Tabs + Profile Page

5 Main Tabs + Profile Page

 
  • 1st Round Usability Test

Carry out the usability test of the low-fidelity prototype for five target users (potential user or small user) and observe the user interaction process. Mainly test the completion of five platform core tasks:

result diagram_1 eng.jpg
 
 

Problem Shooting

portfolio3-sm.jpg
 

1st Round Usability Test Feedback

Product score: 3.7 (5 is the easiest to use, 1 is the most difficult to use)

Users’ functional requirements:

  • Is it possible to have more than one editor, such as one person adding background music and one person adding subtitles,

  • Is it possible to provide a cloud disk? Everyone can find and put together the video materials.

  • What to do if you change people halfway,

  • How to divide the video revenue? How to divide the rice?

  • What should I do if I haven't reviewed it?

  • What should I do if my teammate disappears suddenly when I want to post a video, or someone doesn't like to read messages at station b, can I bind my mobile phone number?

  • Can you add a checkpoint function to cloud editing, such as making a two-version plan, you can send two points to the planner, or you want to go back to the previous version, and there is also a backup.

Conclusion:

  • The usability of the interface for the creator to publish the work is not good, it requires a long reaction time, and there are some situations where the user cannot find the entry;

  • The usability of the function of viewing opinions in the common editing interface is not good. Most users cannot find the message page and need to be prompted, and the functional features are not outstanding enough;

  • The activity interface hopes to be recommended on the homepage without occupying the navigation bar and can be used as a secondary jump.

Low-fi Prototype

This is the video showing the interactive low fidelity prototype which was tested as above.

 
 

  • High-Fidelity Prototype

Combined with the results of the first round of testing, the most popular cloud editing interface in the first round of testing was improved and highlighted, and a welcome interface for first-time users was added to highlight the features. At the same time, improve the creator release interface, optimize the upload and display methods of music, copywriting, and video creators. Together with the image creator, you can preview and pre-play on the homepage. Improve the message function of the joint video creation interface, and the message will be prompted on the projects page.

5 Main Tabs + Profile Page

5 Main Tabs + Profile Page

 
  • 2nd Round Usability Test

Carry out the usability test of the low-fidelity prototype for five target users (potential user or small user) and observe the user interaction process. The five tasks in the first round of testing and the selection of candidates, the completion of a total of six tasks:

result diagram_2 eng.jpg
 
 

Improved Interfaces

portfolio5-sm.jpg
 

2nd Round Usability Test Feedback

Product score: 4.4 (5 is the easiest to use, 1 is the most difficult to use)

Users’ functional requirements:

  • If you need to contact the creator, can you contact us on WeChat and Weibo,

  • Creatives need copyright protection, and the platform can also be used as a record of the release time of the creative, which is also a way of copyright protection.

  • Can you see the dynamics of people who have worked together or the dynamics of people who have more overlap?

  • Can you increase the function of paid projects? A lot of fields have high demand for paid video production, and it can also stimulate creators' creative motivation (economic subsidies) and bring more creator users

High-fi Prototype

This is the video showing the interactive high fidelity prototype which was tested as above.

 
 

What I have learned from this project?

  • Usability tests show shared problems that are hidden for UX designers.

  • Proper usability test participants give critical feedback to the product.

  • Cooperation with product managers, marketing group and developers contributes to useful comments and trade-offs.

  • 1st Release should consider insufficient users at the moment.


 

420

minutes of usability tests

3.7 - 4.4

the rating increased from 3.7 to 4.4 out of 5

31

interfaces designed and tested