Overview
TikTok WebApp Design system is supporting central design team which including the LIVE design team (to C), LIVE design team (to B), commercialization design team, Core product UX team etc.
Role
Lead Product Designer
Skills
Design system / Visual design
PLATFORM
Cross platform
BACKGROUND
TikTok Live Stream
Provide a video LIVE streaming service on the desktop which gives an immersive experience for viewers to watch and interact with streamers. Iterate with in-app LIVE features monetization method (e.g. subscription, gifting, ecommerce) to deepen the value of LIVE both for creators and for platform
Immersive Experience
LIVE has longer viewing time, many users tend to watch live on second devices, especially on computers. Horizontal screen better display games, competitions, and media.
LIVE sharing & Finding LIVE
Existing live sharing offsite PV is about 330K, watch live uv in live reflow page is about 50k, and PV is about 70K. This is the expected traffic of live watching page in the first phase. We will add live discovery entries for webapp PC in the future, and since the watching live penetration is about 9.85% in native app, watching live UV in webapp PC is expected to be 300k.
Commercialization
LIVE can not only enrich the existing contents of WebApp, cultivate high-quality relationships, but also bring more income to creators and higher commercial value to the platform.
Users exhibit a higher inclination to consume live streams on the WebApp, particularly gaming live streams.
Ideation Structure Wireframe
Live Homepage 1
IDEATION
Expose the TikTok community and contents to the world via the web could raise the brand awareness; by providing a full product experience and more content to prospective users via web, we can drive improvement in our brand and increase the conversion
Video Page 1
IDEATION
Expose the TikTok community and contents to the world via the web could raise the brand awareness; by providing a full product experience and more content to prospective users via web, we can drive improvement in our brand and increase the conversion
Live Homepage 2
IDEATION
Expose the TikTok community and contents to the world via the web could raise the brand awareness; by providing a full product experience and more content to prospective users via web, we can drive improvement in our brand and increase the conversion
Video Page 2
IDEATION
Expose the TikTok community and contents to the world via the web could raise the brand awareness; by providing a full product experience and more content to prospective users via web, we can drive improvement in our brand and increase the conversion
Live Homepage 3
IDEATION
Expose the TikTok community and contents to the world via the web could raise the brand awareness; by providing a full product experience and more content to prospective users via web, we can drive improvement in our brand and increase the conversion
Video Page 3
IDEATION
Expose the TikTok community and contents to the world via the web could raise the brand awareness; by providing a full product experience and more content to prospective users via web, we can drive improvement in our brand and increase the conversion
RESPONSIVE + AB TEST
Live room
TONY
TONY