A Shared Viewing Experience.

wewatch

I designed a web and tablet platform where users on separate devices can watch videos together in perfect sync.

Everyday occurrences, like simply watching tv, are difficult for those with partners, family, and friends in different locations. It’s easy to pull up a video on a personal device and watch it with someone when they are in close proximity, but distance makes tasks like this hard to do. To resolve this issue, I designed an application that allows two users on two separate devices to share a video viewing experience simultaneously.

Timeline 2 months

Tools Sketch

Role Product Designer

DESIGN QUESTION

How might we design a platform that allows users on separate devices to share a simultaneous content viewing experience, while engaging in real-time conversation?

RESEARCH

Identifying the target audience

I started this project by narrowing down what kinds of users are being targeted. This product is aimed towards people who:

• Watch video content with other people

• Share video content with other people

• Have loved ones who are not physically nearby at all times

• Use electronic devices (computers, tablets, phones)

Gathering information about users

I questioned a range of potential users about what they look for or need when watching video content with someone else, what methods they use to share videos, and if they had any other feedback or opinions regarding this topic.

They expressed that they want everyone watching to be able to view the display, and to have easy access to controls, like subtitles, volume, and play/pause buttons. It was important that everyone participating in the viewing experience felt comfortable and in control. Regarding current methods for watching and sharing videos with others– everyone answered that they will message a link to the video to their desired recipient, and wait for some kind of confirmation or commentary afterwards.

The main takeaway from my interviews was that no one seemed to be satisfied with their current process. No methods are as easy and enjoyable as simply sitting next to someone in real life and watching something together on a TV, laptop, or phone. Whether it is because of the difficulty of communicating reactions over text, or the frustration of handling multiple devices at once, there is a clear need for a new solution.

Analyzing what is already out there

After completing my user interviews, I began researching my potential competitors. I learned that no one on the market had a very successful solution to this problem.

Netflix Party supports instant messages, but not video calls, and requires all users to purchase a Netflix subscription.

Scener requires users to download a separate application in order to use the platform.

Watch2gether does not have an intuitive user interface and experience– it is very confusing to navigate.

Gaze only supports YouTube and locally stored video files, but is very simple and easy to navigate.

DESIGNING WEWATCH

Mapping the app flow

By creating a sitemap based on my research, I planned out my ideal app flow. From the home page, the app split into two directions– one where the user could immediately start watching content, and another where the user could browse for content to watch. Browsing would allow people to continuously to stream videos together without having to leave the app. I also incorporates features like instant messaging, reacting with emojis, and adjusting settings.

Building the wireframes

Next, I began designing the screens for web. Because people are already so accustomed to sharing videos by messaging a link, I made the process to accessing my app similar. First, users load their desired video content, whether they paste the link onto the home screen, or browse in-app for something to watch. They are then provided with a link to share with their desired recipient. Once the recipient clicks the link, the web app will launch in their browser, and both users can see each other, the video, and the controls.

The home screen, where users can either paste a link to the video they would like to watch, or browse for content.

Once the user has decided what to watch, they are prompted to invite someone by sharing the link.

When two users are using the app, they both have the ability to control the video playback, to send messages, to browse for content to watch next, and to send different emoji reactions, and to video chat.

Users can browse for more videos to watch within the app itself. By creating a queue, the videos will autoplay consecutively.

Styling the screens

I put together a handful of color schemes, and after receiving feedback from my classmates, decided to move forward with dark blue and bright orange. This high contrast, vibrant palette in combination with the round and friendly typeface Montserrat achieves the distinctive look I was going for. There are no sharp edges throughout the app’s elements; all buttons, thumbnails, etc. have rounded edges, illustrating the brand’s playfulness.

Creating a prototype

After finalizing the app flow and visual design, I created a prototype for web. I also put together a lighthearted video to add more context to the project– it demonstrates how two people in separate locations can come together and interact with the app.

Watch

Users can directly paste a link to a video and start playing from the homepage, or can choose to browse for content to watch by scrolling down.

Invite

Once a video is chosen, users are prompted to invite someone to join them by sharing the link.

Communicate

Users can stay in constant communication with each other while the video is playing. They talk via video chat or direct messaging, and can even send emoji reactions.

Browse

wewatch provides users with a variety of video content to choose from. Creating a queue will let the app autoplay videos, so the viewers can sit back and enjoy.

Using wewatch on a tablet

Once I had finished working on my screens for web, I started thinking about how the app would look on a tablet.

Learning Takeaways

Working on wewatch strengthened my ability to create versatile designs. Because I knew I would be creating both a web and tablet version of the app, my design decisions were based on what could adapt the most efficiently. I also feel more comfortable preparing questions and gathering information during the user research stage of my design process. I created a table to organize the data I collected, which helped make analyzing the results more straightforward.

In the future

This project is currently lacking user testing. In the future, I would like to observe how users respond to my designs, so I can continue to improve the app. I would also like to explore other features that could enhance wewatch, such as allowing more than two users to watch together, or adding the ability to create an account and save information.

Feedback on my designs? Want to chat about designing for multiple platforms? Find me on LinkedIn!