Build a Social Co-watching Experience for TV Viewers

Roovie is a second-screen companion mobile app offering a gathering place without spoilers for TV viewers. It strengthens family tie by private rooms and connects TV fans by public rooms.

A temporal filtering mechanism is applied to generate a co-watching experience and remove the pains of spoilers caused by different time zomes.

My responsibility included wireframe, visual design, web-based prototype, usability testing and motion design.

Design Process

Identifying Need

User Research

We did secondary research including literature research, as well as primary research including user survey, and individual interviews.

The objective was to gain insights of the viewing habits and figure out design opportunities.

  • Literature Research

    We read research papers about second-screen companions and TV-viewing experience from ACM Digital Library: Paper 1, Paper 2, Paper 3

  • Online Survey

    We created a 40-question questionnaire and over 50 people answered it.

  • Individual Interview

    Our group conducted three semi-structured interviews with participants who used second-screen companions for TV. We used open-ended questions so that the participants can share their views. My favorite opener is to simply have users tell me what they are currently doing.


We had 10 minutes to write down any insight about second-screen companion on a sticky note individually. Insights are based on all the information from the early-stage research. The affinity diagram was used to organize and group ideas based on their natural relationships. Then each member was asked to pick one or two groups that interested them the most and finally we selected the most promising ideas to develop.


The main user goals and a list of features were generated in the brainstorming stage. We created a couple of fictional "characters" to organize and to uncover patterns in user goals, behaviors, and pain points. Each of them represented one type of users, which might address on one of problems we could solve.

Problem Space

Through user research, affinity diagram, and personas, three major pain points emerged.

Problem Space

User Task Flow

Based on previous first-stage research, I first built a diagram to help me understand the structure and the user task flow. On the other hand, user flow diagrams help me visualize the complexity of a task and understand how I can simplify it.



Once we finalized the user task flow and had a clear of what we wanted to design, I created wireframes to make the functionality of every section in the application clearer. I then designed the navigation map.

See Full Image


Interactive Prototype

Then I created our first initial interactive prototype by HTML/CSS/JS.

Check the prototype online.


Concept Testing

We presented our interactive prototype on the GVU Demo Day. Over 20 visitors communicated our ideas and walk through it. The goal was to check whether our ideas were useful to solve the defined problems.

Three features were quite popular during the exhibition.

Usability Testing

We invited 8 targeted users to test Roovie. Users are asked to think aloud when they finished our defined tasks. The goal was to check whether Roovie is easy to use.

Roovie was tested and evaluated repeatedly to eliminate usability flaws.


Timeline based on Play Time of TV Shows

Timeline is drawn according to the play time of the show rather than local time. Dots on the timeline represent messages in the chat room to indicate interesting moments.

Additionally, a temporal filtering mechanism is used to avoid spoilers caused by different airtime. In other words, the messages after current playing time will be hidden.

The timeline design has been iterated for several times.

Public Rooms for TV Fans

Rooms are divided into two types: public and private. The public room is designed for TV fans and the private room for families and friends.

Minimal Mode

Minimal mode is designed for people who don't feel very comfortable with smart phone.

How to design for this mode?

  • Make it simple: Keep only the main functions, cut unnecessary fields and minimize the number of pages.

  • Make it clear: Emphasize primary CTAs, replace icons with labels, increase readability by increasing font size and color contrast.

  • Follow design pattern for them: Learn their behaviors and understand the design constraints for them.



To give personality to the app, we created an icon system that reflected the fun, sociable and minimalistic side of Roovie, with round and simple shapes.

Selected UI

Selected UI for Minimal Mode

Gestures & Animations

Gestures add value to the user and we are designing not just what it looks like but how it behaves. The most important criterion for me is that these interactions feel intuitive.

Capturing screenshots is one attractive feature on Roovie.. Subtitles serve as the default text on the screenshots and users are free to edit them.

Made by After Effect

Screenshots in each episode are organized on the room profile page. I also added animations, the little things that push an app from just being usable to being delightful. In most cases, those micro interactions add clever transitions between screens and they also enable user to see what is happening.

Made by FramerJS