// Adobe XD + Netflix

This project was finished in a 3-day design jam held by Adobe XD with its cooperator Netflix. Netflix invests in creating a platform that connect people and cultures from around the world. How might we help families and friends utilize it and share their experience with content they love? Our group came up with a product that allows synchronous film-watching and discussion among film lovers and encourages users to share insights collaboratively with the bigger community.

2020.6.22 - 2020.6.24

// Nancy: User Story

Nancy is a Film Studies student in Los Angles. She loves watching movies with her classmates and discussing the important scenes, which would help Nancy write her weekly film review.

Under the pandemic, Nancy hope to find a way that enable her to watch films with friends remotely and she can continuously produce and share meaningful insights.

// Challenge Brief

The Challenge.

Design a third-party desktop web site or desktop app where the community can celebrate shared stories together through communal and authentic experiences.

For users like Nancy,
we want our solution to be collaborative, thought-provoking and educational.

// Our Solution

We want to bridge the gaps of geographic distance and make the platform collaborative, and educational to all the film lovers.

Users can not only enjoy shows synchronously online, but also engage in realtime conversation and share watching stories and insights collaboratively in the bigger community.


Take a look to Nancy's experience:

Watch parties

Nancy can enjoy the film with friends remotely and privately by creating a watch party.

She can also browse and join an online watch parties who share the same interest with her.

Evoke discussion

Nancy joins the group watching films of Wes Anderson, who is Nancy's favorite director!

Nancy says "hello" at the ChatBox and decides to start a voice call to discuss the topic further.

She can join the conversation freely before and during the event.

Mark moments

As a film student, Nancy definitely doesn't want to miss the remarkable moments and scenes.

Nancy can mark the moment by hovering over the timeline and clicking the bookmark icon. Then this clip is auto-saved in her library.

Add comments on customized clips

Nancy can revisit the saved clip and do editing. She can add her reviews and comments to it.

Nancy can also decide whether to share the moment within the group and create post from it.

Discuss friend's clips

Nancy finishes her watching and she wants to know how is her friend's watching experience.

She can go and see her friends' movie clips and she is also able to join in the discussion board by sharing her comments.

// How We Did It

To solve the problem, we used the double diamond process to explore opportunities and generate solutions.

Understanding and Needfinding

We spent the first day in analyzing and understanding the problem. The first step was to think about the target audience and their needs.

In order to have a feasible scope, we narrowed down the target users as film lovers and film specialists,  then to came up with a few of underserved needs by competitor analysis and light-weight research.

Need to connect

Watch movies and TV shows with people who share the same interest.

Feel connected in a bigger community.

Need to learn

Share feelings and exchange knowledge.
Doing analysis based on film scenes.

Need to achieve

Being able to generate personalized outcomes, such as recording lines, chapters, scenes and characters they like.

Prioritized Features

Before watching
Watching content with people remotely and privately.

During watching
Engage in conversation before, during and afterwards.
Highlight and make notes of favorite lines, chapter and characters.

After watching
Encourage reviews and share comments within the watch group.

Design User Experience

We brainstormed and sketched out various versions of wireframe to craft user experience.

Here is how we design the Mark Moments interaction and how we made the design decision based on being intuitive and considerable.

Two principle in designing this feature:

Provide understandable and feasible signposts or cues
We want to give instruction to users because two reasons. Firstly, it is not a very common interaction and secondly, we don't want users to miss this feature.

Stay out of people’s way
The feature should not interrupt watching experience. Our design should allow people to complete tasks quickly and freely.

Version 1 - Using shortcut Command ⌘ and Popup modal

The first design is to use shortcut as the trigger of marking moments, and use popup modal to instruct users when they start watching and switch to the fullscreen.

But one drawback is that the shortcut is not universal enough. Moreover, the popup may be a little bit annoying and it may disappear when users need it.

Version 2 - Clickable icon on the timeline (hover status) and text instruction

The second design tried to fix the problem in the previous version. We added a text label to instruct user how to mark the moment and instead of the shortcut, we designed a clickable icon to do the job. When user hovering over the timeline, the bookmark icon would pop up to help user mark the particular moment easily. User's watching experience would not be interrupted.

Visual Treatment

We used the mood board to explore the visual possibilities. The visual effect we want is to be immersive and energetic.

// Evaluation

Our project got two full scores in the evaluation rubric.

DOES THE SOLUTION ADDRESS A TARGET AUDIENCE & THEIR NEEDS? 25/25

"A clear understanding of an appropriate target audience and their needs. It is  designed with navigation, visuals, and language to communicate clearly to a specific persona and their needs."

IS VISUAL DESIGN USED IN A THOUGHTFUL AND MEANINGFUL WAY? 25/25

"Visuals form a consistent, clear, systemized design that speaks to target audience, appropriate to the solution. Form follows function with a strong and meaningful system of grids, typography, color, and design principles. Supplemental assets or UI kits may complement the design."

See More Projects

Safe Journey

T3 Client Project | UX/UI

App Discoverer

Niudun100 Client Project | UX/UI

Movie Fans

Design Jam | UX/UI

Smart Podcasts

Case Study | UX/UI

Contact Me