Cover image with two Hi-fidelity screens

Case study: Elevating TikTok’s social value through co-watching

A UX design project for Intro to Digital Product Design at Cornell University

Zixian Jia
Bootcamp
Published in
7 min readMay 4, 2021

--

Duration:

8 weeks

Team:

individual project

Introduction:

Co-watch is a feature that allows users to watch TikTok videos in “Co-watch rooms” with others synchronously. Users can join co-watch rooms or create their own to turn video-watching into a group activity. This feature aims to elevate TikTok’s social value and make TikTok-watching more meaningful and memorable for users.

Context

“I spent too much unmeaningful time on TikTok, so I decided to uninstall it”. Said Jess, one of my interviewees for this project.

Just like many young adults, I am a big fan of TikTok and got a ton of fun out of it. But I’m also one of those who suffered from the “guilty” feelings after watching TikTok. Therefore, I decided to find a way to fix this.

TikTok as a “waste of time”

From 7 user interviews, I found out that TikTok users generally think “TikToking” was relaxing and entertaining. But at the same time, they almost all reflected that the process was unmeaningful and time-wasting. 5 of the interviewees said that they have thought about uninstalling TikTok for this reason.

TikTok comparing to other entertainment methods diagram
Comparing TikTok to other ways of having fun

The People Problem

TikTok allows users to create and consume short video content, but many users feel “empty” and “guilty” after using it because…

  1. they get disconnected to real-world when focusing on TikTok
  2. they feel wasting time on unmeaningful things

Fun is a 10/10, but users need more

Right now, users can almost find any type of content on TikTok, which explains why TikTok is so popular. But despite the fun they get, many users would still describe the experience as “unmeaningful”.

Friends are important

When observing interviewees use TikTok, I noticed that:

  • users tend to watch videos their friends sent to them before browsing the “For You” page.
  • users have sent videos they liked to friends.

Business vs. Users?

Before brainstorming for solution features, I identified a conflict between user needs and TikTok’s business interest: TikTok wants to keep users engaged with its content, while users try to waste less time on TikTok. How can I take care of both needs to make my solution feasible and impactful?

Business vs. User diagram

After discussing with Maggie Ying and Zain Khoja (2 designers on Cornell AppDev), I figured out a balance: design a feature that is both meaningful and engaging. This way, TikTok would keep users engaged, and users could get more out of TikTok.

Finding Solution Spaces

Brainstorming session

Brainstorming with two friends
Brainstorming session with Ian and Amber

After brainstorming and voting with 2 of my friends, Ian and Amber, we decided on an opportunity that is both feasible and impactful:

Elevating social connections: How might we keep users engaged with TikTok while embedding more social values in the experience?

Co-watch Feature

From the user observations, I learned that users care about social connections in TikTok, but it isn’t the focus of TikTok right now. TikTok currently only allows minimum interactions between users: sending messages and videos.

With this new feature, I want to elevate the social value of TikTok to encourage more meaningful interaction between users to help them build and strengthen relationships.

Information hierarchy

I organized the information hierarchy of TikTok to decide on the appropriate entry points of this feature.

Information hierarchy
The information architecture of TikTok

Eventually, I decided to place the entry point on the home feed with the same hierarchy as the “For You” and “Following” sections. This way, users can easily find it and navigate to it, and the feature’s importance would be emphasized.

Getting inspiration from other social apps

inspirational screens
Learning from features of Clubhouse and Instagram

By analyzing the features of Clubhouse and Instagram, I learned:

  • Clubhouse shows room options on the home feed to encourage users to join rooms
  • Instagram features quick emojis to make it easier for users to vividly react to posts and stories

Concept Sketch

Feature initial sketch

My initial concept was to simulate how a group of friends would watch TikTok together on one screen. Users can invite friends to watch the same content and to make real-time emoji reactions.

Co-watch: public rooms and creating rooms

During usability testings, a user brought up: “what if users just want to co-watch with people they don’t know?” considering that, to give users more flexibility, I decided to show users public rooms on the starting screen. The screen would also allow users to create their own public/private rooms.

Reaction iterations
Reaction iterations

After trying several element arrangements, I settled on screen 6 because:

  1. horizontal room cards allow users to focus on individual rooms
  2. having the “create room” button on the bottom of the page makes it easier to click on
  3. the “join room” button isn’t necessary since users can search to find rooms

Co-watch: greetings before Co-watching

When I brought the sketches to my critique group, a peer student said she would love to chat with friends before starting to co-watch. Therefore, in my mid-fidelity screens, I decided to add a “room” screen for users to chat before entering the co-watching final screen.

Co-watch room iterations
Co-watch room iterations

From several iterations, I chose screen 6 because it focuses the most on the in-room conversation and has the least visual distraction.

Co-watch: reactions to videos

Currently, TikTok allows users to “like” videos or make comments, but these reactions are not interactive. In my Co-watch feature, users can send real-time comments or emojis to be seen by other people in the room.

Reaction iterations
Reaction iterations

After exploring ways to show the emoji and text bar elements, I decided to make a retractable emoji bar (screen 6). Even though this feature would require an extra step from the users, it could greatly reduce the visual distraction from the colorful emojis and the possibility of false triggering.

Screen presentation

High-Fidelity Flow

The final interaction includes an experience that allows users to watch TikTok with friends or family. Users can create or join rooms to enjoy videos with others and easily make live comments and reactions to the content.

High fidelity flow

Impact

No more feeling of emptiness

Co-watch elevates the social value of TikTok by turning video watching into a more meaningful group event. Users can now have fun watching videos with friends and family without feeling any isolation.

More users on TikTok

With Co-watch, TikTok can attract more users. It also makes TikTok suitable for more scenarios, such as virtual friend and family gatherings.

Video Demo

Figma Prototype

Design System

The Design system

Reflection

Gains

  • Design solutions have tradeoffs. Sometimes the business interests conflict with user needs, and what designers need to do is to find a “sweet spot” where both needs are balanced.
  • Designing a feature is challenging. Designers not only need to design the feature itself but also need to consider where the feature fits in the existing product.
  • Design is not an assignment. There are really no correct answers or grades for design work. All that matters is how much users are benefitting from the design.
  • Feedback is important. To succeed, designers need feedback from users, stakeholders, and peers. They should carry the feedback along the design journey and constantly iterate based on it.

Future works

This is my first semester-long digital product design project. I learned and practiced the user-centered design methods, and I also made mistakes.

  • In the early ideation phase, I overlooked the importance of analyzing and researching the existing app, so I wasted a lot of time brainstorming features that already existed. I will pay more attention to early-stage research in my future works, so I know what is worthy to work on.
  • One thing I did very well in this project was asking for feedback and advice. Discussing concerns with experienced designers and stakeholders is crucial as it helps me jump out of the box and think from a different perspective. In the future, I will keep asking when I get stuck, and I will help others when they need my advice.

--

--

Zixian Jia
Bootcamp
Writer for

UX Designer, Information Science Major student @ Cornell University.