Social TV App UX Design – Roovie
A TV Companion App Providing Connected and Continuous Viewing Experiences
Duration - 3 months Team of 4 Role - Designer
"Roovie" is a second-screen companion mobile application to enhance the social aspect of TV watching. It allows users to share and talk about TV contents within private groups, even when in different physical locations.
Research has shown that individuals are using second-screen devices more than ever before. Additionally, individuals want to communicate with friends and family in different physical locations. However, the existing social media / chatting apps either have spoilers on the platform or don't have features tailored for TV viewing experiences. There is still a need for better design.
The Roovie mobile application allows users to chat and share TV-related contents with friends, no matter their physical location. Roovie's main targets are
- Provide private TV chat groups among close friends
- Connect people in different timezone by asynchronous chatting
- Prevent spoilers by hiding comments ahead
- Keep users on track of shows during and between seasons
The project was completed under attentive design process, where each member contributes their best strengths. I contributed most to topic scoping, competitive analysis, UI design and prototyping, while also collaborated with the team on user research, brainstorming and user testing.
We conducted initial research surveying over 40 people in our social-network with a 28-question questionnaire.
01 Second-Screen Usages
- Finding: 80% of respondents use a second device while watching TV.
98% of them seek out information about a TV show online.
- Insight: Users are very involved in using mobile phones while watching TV.
02 Private Groups
- Finding: All respondents stated they shared information with friends about a TV show.
50% of them only shared with friends.
- Insight: There is a need for individuals to chat privately with close friends and family.
03 Spoilers Prevention
- Finding: The majority of respondents do not use Facebook (63%) or Twitter (72%) during a TV show due to spoilers.
- Insight: Messages should be filtered based on users' watching progress to prevent spoilers.
Based on our user research findings, we developed a persona with scenario to keep us on track throughout the design process.
During the design process, we iteratively refined our design and key features. We developed our first version of workable prototype based on research findings and ideation. Then based on more than 20 users' feedback from Georgia Tech GVU demo day, we improved our design with more specific targeted functions in the second version. In the end, after conducting usability test with 8 targeted users, we finished Roovie's final interactive prototype.
We truly appreciate all the feedback from our guests in industries (Turner Broadcasting, Intel, Comcast, Moxie, Atlanta startups), and academia (GVU research labs, Yahoo! Research).
1. Comments are marked on timeline to realize asynchronous chatting and to prevent spoilers.
2. Instant screenshot function is implemented to engage users in TV show chatting.
3. Chatting history, comments and rating on TV shows are recorded in personal archive.
User Task Flow
After we identified our design features, we created a user task flow to detail out the user interaction and app structure before starting to sketch the app UI.
Mockup & Prototyping
We conducted usability testing with 8 targeted users. They were asked to think aloud while navigating through our app to complete desired tasks. Some example tasks include
1. Join the “Confessions - Breaking Bad” chat room.
2. Create a chat room for True Blood, Season 7 and save it.
3. Go to a chat room. How would you take a screenshot? How would you share a picture with someone?
4. Show participants Timeline in chat, and ask them what they think the circles are, or just ask them to explain to you what it shows. And have them give feedback on it to see if they understand it.
The final design we brought include clear flow chart for different user tasks, using Breaking Bad as a specific example, and a scenario walkthrough based on the persona we created.
01 Create private chat group on "Breaking Bad Season 5"
02 Chat with screenshot, recording, gif and rating functions
03 View chatting history for each episode in personal archive