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.
UX designer, worked with other two team members. Collaborated with ideation and prioritization. Responsible for visual design of discussion while watching and clip features.
22 Jun 2020 - 24 Jun 2020
Top 15% in 600+ teams
Full marks in defining users and visual design.
Share knowledge during film watching.
Generate personalized movie clips and create shared movie memory within the community.
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.
Design a third-party desktop web site or desktop app where the community can celebrate shared stories together through communal and authentic experiences.
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:
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.
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.
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.
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.
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.
To solve the problem, we used the double diamond process to explore opportunities and generate solutions.
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.
Watch movies and TV shows with people who share the same interest.
Feel connected in a bigger community.
Share feelings and exchange knowledge.
Doing analysis based on film scenes.
Being able to generate personalized outcomes, such as recording lines, chapters, scenes and characters they like.
Watching content with people remotely and privately.
Engage in conversation before, during and afterwards.
Highlight and mark the favorite scenes.
Encourage reviews and share comments within the watch group.
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 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.
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 to educate users
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.
We used the mood board to explore the visual possibilities. The visual effect we want is to be immersive and energetic.
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."