Pico Video, ByteDance
HCI/UX Design Intern | Beijing
Status
Already launched
My Role
HCI/UX Designer
Tool
Unity, C#, Figma
Duration
Jun, 2022 - Oct, 2022
My contribution
Participated in the redesign of Pico Video 3.0 UI/UX, adapting to the strategic shift in the product's direction.
Improved algorithms to address the human-computer interaction issue of controller jitter.
With the product's strategic direction shifting from a focus on social aspects to content, I redesigned version 2.0. From UI to user flow to usability testing.
From both design and coding perspectives, I addressed the human-computer interaction issues with the video playback controls, improving the user experience.
PICO is the second-largest VR company in the world by market share and is a subsidiary of ByteDance.
Solution ->
Solution ->
Project Overview
HCI Design
Video Controls
UI/UX Design
Pico Video 3.0
PICO Video
UIUX Design
Pico Video 3.0
From Pico Video 2.0 to 3.0, the product direction has changed based on market performance and user growth. The focus has shifted from social interaction to content, leading to a redesign and exploration of UIUX.
Core Features
Homepage
Extract the tab bar and turn it into a separate horizontal navigation bar, and redesign the layout. Make the homepage more concise and allow users to focus more on the content.
Stronger Visual Impact
Redesigned the user flow for switching between tabs, eliminating the process of users selecting on the main page. This makes the switching between tabs smooth and visually impactful.
Watch Together
Incorporate PGC content, ensuring consistency and clarity between UGC and PGC content. Redesign the friends panel to highlight acquaintances' social interactions.
Now that you’re acquainted...
Let’s take a few steps back
Context
What’s the problem?
Two key data points
Previously, due to the popularity of the metaverse concept, we had overly high expectations for the product's user growth rate. And the current users mostly just watch content and do not engage in social interactions
User growth is slower than expected.
Actual User Growth
Expected User Growth
Current users mostly just watch content
82%
Users who only watch conten
Perhaps we moved too fast
We have reanalyzed the development direction of the product.The current DAU is insufficient to support the social experience of the product.
Features
Content
Social
Emphasize the social aspect to create a multi-person movie-watching experience in the metaverse.
Foster the habit in users of watching movies in VR. Focus on the quantity and quality of content.
DAU 1W
DAU 10W
Pico Video 1.0
Current Pico Video 2.0
Current
DAU 100W
Highlight content and formats that showcase VR's unique features to attract new users.
How should we design Pico Video 3.0?
We have decided to leverage the current advantages of VR content, shifting the product's focus from a social experience to a content viewing experience.
Sociability
Social Experience
Interactivity
Interaction between users
UGC
Users create and share content
Content
Watching Experience
Visual impact
Attract user interest
PGC
High-quality content
Feature #1
Let's start from the homepage
Painpoint #1
The information is somewhat disorganized
The current homepage is divided into four sections, which can cause information overload for new users. The UI is not concise enough, occupying too much space for displaying content.
Special Features
4
First-level Tags
2
Second-level Tags
3
Content
1
Painpoint #2
The sidebar information is unclear
The sidebar UI occupies a large space, but the information conveyed to users is not clear enough. Users can’t understand the specific function of this UI, hence its low penetration rate.
Iteration
Organize the information hierarchy
I reorganized the information hierarchy of the homepage tabs and would like to redesign the layout to make the page cleaner, leaving more space for the content itself.
TikTok
Special Features
TikTok
First-level Tags
Category
Second-level Tags
Content
Movies
Social
Special Features
Social
Second-level Tags
Home
First-level Tags
Live
First-level Tags
VR Video
First-level Tags
Search
First-level Tags
Special Features
First-level Tags
Second-level Tags
Special Features
I moved 'Special Features' into the first and second-level menus. Additionally, I separated the first-level tabs and placed them below the main panel. This will make the main panel UI cleaner and provide more space to showcase video content.
Pico Video 3.0
First-level Tags
2
Second-level Tags
3
Content
1
Design
Horizontal navigation or vertical navigation?
After completing the interactive prototype, we found that the expandable sidebar is much less efficient than horizontal navigation. While smooth animations can be more appealing, they can also lead to interaction issues. Therefore, considering the pros and cons of both navigation styles, we ultimately chose horizontal navigation.
Vertical Navigation
Horizontal Navigation
Avoid obstruction of view
Smaller area and not in the center of the view
Smooth expansion animation
Attractive, but not smooth in interaction
Clear information
Text tabs are clearer
Faster switching speed
Smoother interaction
Design
Entrance for group watching feature
At first, I wanted to maintain UI consistency, so I integrated group watching within the left-side tabs. However, this design failed to capture people's attention, resulting in a low click-through rate for the group watching. Therefore, I underwent multiple iterations.
Attempt #1
Attempt #2
Final
More logical segmentation
Group watching is an independent feature and should not be grouped with other content tabs.
More consistent
Avoid inconsistency in visual appearance due to varying lengths of text when using center alignment.
More balanced
Compared to placing 'together' in second column, the final design keeps a balance between priority and visual harmony.
Feature #2
Let's add some visual impact
VR videos and live streaming are the distinctive content of Pico Video. These are 360-degree videos that can provide a different visual impact. However, in version 2.0, the interaction flow is too lengthy, resulting in insufficient visual impact during the first viewing, and subsequent viewings are challenging to maintain due to the lack of continuity.
Version 2.0 VR video interaction flow
Find out where we need to intervene
Through the emotional journey, we discovered that the appearance of the main panel while browsing VR content leads to too many early decisions for users. Similarly, it also disrupts the subsequent continuous viewing experience.
Discover VR Video
Browser VR Video
Expectation
Expectation
Watch 360° Video
Back to VR Video
Emotion
Page
Action
Experience
Discover the tags of VR Video and found it very novel.
Seeing rows of videos, I'm not sure which one to choose.
Amazed by the 360° VR videos.
Interrupted the panoramic video experience. Users don't have the desire to continue watching.
Find out where we need to intervene
Through the emotional journey, we discovered that the appearance of the main panel while browsing VR content leads to too many early decisions for users. Similarly, it also disrupts the subsequent continuous viewing experience.
Let's WOW!
Version 3.0 VR video interaction flow
Design
Content
Publish
Feature #3
Group Watching
Let's start with what we have
The current group watching focuses on creating a sense of community, emphasizing the ambiance of the rooms, and encouraging users to communicate within the rooms to generate UGC.
Version 2.0
Painpoint #1
The card information is insufficient
Users cannot anticipate the content within the room through the cards.
Painpoint #2
Lack of quality content
The user base cannot sustain hight quality UGC, leading to a shortage of high-quality content.
Include PGC content
We have introduced officially operated PGC content to enrich the multi-user viewing experience. Organized by the platform, every 12 people form a small room to watch together.
Current Content
UGC
PGC
New Social Features
Consistency
Clarity
Sociability
Users create rooms for socializing, chatting, or watching movies.
The platform selects content and creates rooms for users to watch and communicate.
Added Content
Pico Video 3.0
Design
Card design - every information has a meaning
Every piece of information on the card serves a purpose. It either conveys the content and status of the room, assisting users in making decisions, or reflects the community aspect, enhancing the social experience.
Capture the content being shown every few seconds to better display the viewing content.
Cover
Profile picture help convey the feeling that the rooms are created by users, enhancing the social aspect.
Profile Picture
Watching rooms display the film title, while other rooms have different statuses like screen sharing, gaming, etc.
Room Status
PGC
UGC
Design
Acquaintance Socialization
In Version 2.0, the friend page and room page were separated. This resulted in a weaker sense of social networking among acquaintances. Therefore, we have redesigned the friend page to appear as a sidebar next to the rooms, displaying more friend statuses and enhancing the sense of connection during social networking with acquaintances.
Pico Video 2.0
Pico Video 2.0
Pico Video 3.0
HCI Design
There are some problems that UIUX can't solve.
Some issues in VR cannot be solved by traditional UI/UX alone and require a multi-faceted approach involving programming and design. Therefore, we need to address system-level problems from a human-computer interaction perspective
Video Controls Optimization
In response to complaints about video controls, I identified the root causes through data analysis, introduced new algorithms, and designed a new video controls panel.
Here is what we know.
We have continually received a lot of user feedback regarding the broadcast control panel.
The most frequent feedback is about dragging the progress bar. When users drag the progress bar to a selected time point and then release it, it changes to a different time point. This greatly affects the viewing experience.
Interaction accuracy
Dragging the progress bar results in inaccurate time tracking
Interaction energy
Panels that are too far away are tiring to interact with
Sense of security in interaction
Sliding progress bar is too jittery
So why is this happening?
I used the tell-tale camera to capture the action when releasing the trigger, and combined with data analysis, I analyzed the reason for the inaccuracy in dragging the progress bar.
There is a slight jitter in the hand when the user releases the trigger. the trigger has a subtle fudge, which causes the subtle jitter to be recorded in the data.
Jitter problem
Hands, controller and panels are a leverage relationship. Panels that are too far away make the interaction more tiring and lack a safe look.
The control panel is too far away
Anti-shake algorithm
Coding perspective
Nearby control board
Design perspective
Data when the trigger is released
I recorded the change in the value of the progress bar versus the value of the trigger key when the trigger was released to get an idea of how it should be optimized on an algorithmic level.
0.6
0.7
0.8
0.9
1.0
1.0
0.9999
1.0
Value when trigger is released
Data
Trigger Value
Progress Bar Value
Start to release
Release
Shaking
Two new algorithms
Cutting off interfering frames
By recording the value of the progress bar every few frames, the jitter is backtracked after it occurs to the exact value at the beginning of the release.
Algorithm #1
Kalman filter
Add a new filtering algorithm to filter out the jittery data, making the data more accurate.
Algorithm #2
Effect demonstration
Control Board Design
Take Away
Visuals require multiple attempts.
During this internship, I began systematic learning of UI. Gradually, I realized that visual comfort requires multiple attempts. In iteration after iteration, I found better visual expressions.
Solve problems from multiple perspectives.
As a designer in the new era, I find that many problems in the work require multi-angle solutions involving both coding and design. I have found that in discussions with project managers, my diverse experience always helps the team solve problems more quickly.