Movie Together
Shared movie experience
Overview
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.
%202.png)
Need to achieve - pleasurable
Being able to generate personalized outcomes, such as recording lines, chapters, scenes and characters they like.
%202.png)
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."