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.
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.
We created a 40-question questionnaire and over 50 people answered it.
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.
Through user research, affinity diagram, and personas, three major pain points emerged.
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.
Then I created our first initial interactive prototype by HTML/CSS/JS.
Check the prototype online.
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.
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 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.
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 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.
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.
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.