Overview

Shared Movie Experience

This project was finished in a 3-day design jam held by Adobe XD with 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.

MY ROLE

UX designer, worked with other two team members. Collaborated with ideation and prioritization. Responsible for visual design of discussion while watching and clip features.

DURATION

22 Jun 2020 - 24 Jun 2020

IMPACT

Top 10% in 600+ teams

Full marks in defining users and visual design.

PROJECT IN A NUTSHELL

Designed a third-party desktop app that
enable users to share insights during film watching.

Generate personalized movie clips and create shared movie memory within the community.

Challenge Brief

Help the community to celebrate meaningful watching experiences with shared stories.

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

Meet Nancy

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.

Problem Statement

How might we create a collaborative and thought-provoking platform to craft meaningful watching experience for users like Nancy?

Design walkthrough

We want to bridge the gaps of geographic distance and make the platform collaborative, thought-provoking, and educational to 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 at Nancy's experience:

1. 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.

2. Evoke discussion

Nancy joins the group watching films of Wes Anderson, who is her 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.

3. Mark moments to make customized clips

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.

4. 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.

5. Discuss friends' 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.

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. We came up with a few of underserved needs by competitor analysis and light-weight research and made a hierarchy of user needs.

The design will first consider the Functional Need and Usable Need. If time permits, we will think about the pleasurable needs.

Need to connect - functional

Watch movies and TV shows with people who share the same interest.
Feel connected in a bigger community.

Need to learn - usable

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

Need to achieve - pleasurable

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

Ideation and Prioritization

During the ideation process, we came up with many potential ideas for each need.

To rank the ideas, each of us has 4 points (12 points in total) to mark the ideas that have the top value. We used the same method to identify the possible downsides for ideas. We also add innovation in the matrix because it is in the project scoring rubric.

Features

Before watching: watch parties

Watching content with people remotely and privately.

During watching: real-time chat/voice call & mark moments

Engage in conversation before, during and afterwards.
Highlight and mark the favorite scenes.

After watching: personalized clip & reviews

Encourage reviews and share comments within the watch group.

Design exploration of
Mark Moments

We brainstormed and sketched out various versions of wireframe to craft user experience and I was responsible for designing two features during watching.

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

Here are two principle of designing this feature:

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

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

First version - Using shortcut [Command ⌘] and Popup modal to mark moments

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.


Usability problems:

Problems and cons: the shortcut is that it is not universal enough. Moreover, the popup may be a little bit annoying and it may disappear when users need it.

Iteration - Clickable icon on the timeline (hover status) and text instruction to educate users

The second design tried to fix the problem in the previous version.

I added a text label to instruct user how to mark the moment and instead of the shortcut, I 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 Treatments

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