Sync Vue

Website Prototype

Watch videos in sync with your favorite people, wherever they are, via your private online viewing room.

research & brainstorm

My friends and I live far apart, how can we watch a video together?

People in different locations want to watch something together but are unable to due to physical distance. Some people try using screen share, but difficulties arise due to potential lag of system which makes the experience out of sync. There’s also the option of starting/pausing the video together, but the downside would be the lack of control and precision as compared to if one party at a time can control everyone’s screen.

My goal is to create a personal and convenient viewing experience

I seek to create an intuitive and personal online platform for people located in different places to share the social experience of watching videos together in sync.

Persona

Storyboard

Journey Map

user interface & prototyping

I want SYNC VUE to embody the comfort of watching videos at home.

The visual brand identity should provide an intimate and relaxed impression to the user to establish a sense of personal connection between the user and the virtual experience. The brand image should communicate feelings of comfort, adopting and balancing design aspects of minimalism and vintage styles, and the overall tone will consist of pale pastel and neutral colors.

Styleguide

Wireframe

1. concept structure

SYNC VUE embraces and upholds the idea of controlled privacy. All rooms are privately hosted and can only be shared through URL/room names. By inherently implementing full privacy in the rooms, we ensure that the rooms are shared only within a desired audience without any mysterious users, and there would not be a need to include banning or permission control settings.

2. sketches

3. digital wireframes + user flow

Option 1: Add a “Quick Start” button on the landing page as a third option. However, users may be unsure of the difference between “Create Room” and “Quick Start”. They may also experience confusion as to whether “Quick Start” refers to creating a room or joining a room. 

Option 2: Add a “Quick Start” button to the pop-up page after user clicks on “Create Room” to offer an alternative to building a room with comprehensive details. The “Quick Start” option would allow users to skip the step of entering room name and room code (wording needs to be made more clear). 

For the digital wireframe, I went with Option 2.

I sized down the video screen and right aligned it in order to move the user/guest information to the left of the video, which expands the bottom part of the page to give more room to the chat box. I also removed the voice call feature to simplify the chat process for the MVP.

I removed the “upload from local files” feature to make adding videos more intuitive. I also added a thumbnail preview of the video for the user to confirm the link before adding it to the playlist. 

High Fidelity Mockups

There’s a lot of room for improvement

For future iterations, I would add a Settings feature to include potential features such as changing the passcode, customizing the room URL, switching to different color themes, and different control modes (such as collaboration mode where multiple parties can have full control over the room). For error prevention, I would also include a guidelines portion on the homepage to fully explain the different capabilities of the two roles - host and guest, as well as how to manage the playlist and switching the orders of videos.

Currently the idea is that the order of videos can be rearranged by dragging, which is an intuitive motion but requires more signifiers. Users may also be unsure of how to add the video because they would have to click the same add button at the top, so another add button may be needed. The MVP displays a minimalist video screen design, including only a play/pause button, a scrubber, and a screen size adjustment. To serve as a more comprehensive video player, it would include volume adjustment, video quality, and playback speed. I also hope to add a theater screen size mode to test out different layouts of the guest list and chat box. I would also add user accounts so that rooms may be saved for future usage and allow for a smoother and faster experience.

Through this project, I learned that it’s important to limit the number of features for a MVP prototype

Trying to squeeze in too many features at once may result in the product looking cluttered. I also learned that creating a project from scratch may seem overwhelming at first, but breaking the process down to individual steps and setting deadlines for each step allows for continual and effective progress. By dissecting the process and focusing on one section at a time, I developed a more extensive understanding of concepts such as site map and user journey map. However, due to my limitations on user research, I did not have sufficient interview data to support my design except for minimal feedback regarding the interface design. If I were to do this project again, I would incorporate more of user research and user testing throughout the process to evaluate my design decisions and make better design choices.

Link to full documentation