Reelnotes

Background

Even though most people watch movies on streaming sites these days, typically like Netflix, I still have fond memories of going to the DVD shop just around the corner in my neighborhood to rent DVDs. Sometimes I would find handwritten notes left by other people, and it still remains a fun and memorable experience. I want to recreate this feeling of watching movies with others in a web environment.

Process

Problem & Goal

Brainstorming

Our process began by brainstorming various features. We explored a wide array of potential features, considering how users could interact with films, their records, and each other in novel, immersive ways.

During this phase, various methods for leaving 'traces' on films were proposed.

Design space

To objectively evaluate our brainstormed ideas and identify the core feature that best aligned with our goal, we used a Design Space. This framework allowed us to see all potential features through five critical lenses: Precision of Record, Format of Record, Immediacy of Sharing, Analog Feel Implementation, and Integration with Film Context. By mapping where each idea stood on these dimensions, we could clearly see their strengths and weaknesses.

Design Space Analysis

Our analysis results made it clear that the idea of 'Direct on-screen notes' is the core interaction that most perfectly realizes our project goal. This feature aligned with our goal of reviving the analog experience as a record unconstrained by time and space for movie watching.

This feature also best captured the analog sensibility, like making actual notes, by directly leaving traces on the content itself. Crucially, seamless integration with the movie context allowed annotations to appear directly on screen, making the 'record' a part of the 'experience' unconstrained by time and space.

Persona

After selecting the core idea to develop from our brainstorming sessions, we defined two personas. Each persona highlighted distinct problems they faced with existing movie streaming sites. Through user scenarios, we then showcased how our system effectively solves these challenges for each of them.

Bocchi | Detail-oriented cinephile

Background

Bocchi is a highschool student. Beyond just watching movies, she loves analyzing directorial choices or subtle facial expressions, and keeping her own detailed viewing notes. While she enjoys analog note-taking, she's always found it cumbersome to link her notes directly to specific movie scenes.

Problem

Existing streaming services interrupt her immersion when she pauses to jot down notes in a separate app. Her recorded notes are often disconnected from the actual movie scenes, making them hard to reference later.

Usage scenario

As Bocchi watches a film, she pauses at impactful moments to leave detailed annotations with specific timestamps and screen positions.These annotations are organized within his personal library, making it easy to reference. She can click any annotation to jump directly to the relevant scene, allowing her to efficiently verify details.

Nijika | Social viewer

Background

Nijika is a early-20s university student. Although she often watches movies alone, she places high importance on discussing films and sharing emotions with friends. Since they rarely watch together at the same time, real-time communication about movies is a challenge.

Problem

Discussing movies usually involves sending separate messages or chatting in group apps, which makes it hard to pinpoint exact scenes. Conversations often don't flow well when friends watch the same movie at different times.

Usage scenario

Nijika watches a film and leaves a short comment and emotion as an annotation on a particular scene. This annotation immediately appears on her friends' timelines. When her friends watch the same movie later, they discover her annotation and leave a short reply. Maya sees their reactions in real-time, feeling the joy of a shared viewing experience despite being apart.

Flowchart

We proceeded to map out the precise steps users would take within service, based on our understanding of target users through detailed personas. These user flows translate the scenarios into concrete interactions, illustrating the journey users embark on to achieve their goals.

Hifi Prototype

We made a decision to bypass traditional wireframing and move directly into high-fidelity prototype. This approach was driven by the project's need to rapidly develop core functionalities within a limited timeframe.

The high-fidelity prototype allowed us to minimize concerns about UI design or visual aesthetics, letting us focus solely on implementing the features.

Below are two key screens from our developed high-fidelity prototype, showcasing the main functionalities:

View annotations on the movie screen

Annotation patterns on the timeline

Implementation

Reelnotes was built with a robust tech stack. The frontend is based on HTML, CSS, and JavaScript, with Bootstrap implementing responsive design. d3.js visualizes annotation pattern, and AJAX updates search results.

Operating on an npm-based development environment, the backend handles server logic and application structure using Node.js and Express.js. For data management, a JSON file-based local database was utilized. This will require improvement to a remote database in the future.

Design Deliverables

Challenge and Solution

We chose a custom video player VJS because the built-in bootstrap player included inaccessible padding, making precise note positioning challenging. Relative coordinates, expressed as percentages of the video’s width and height, ensured notes stayed aligned with the video content across different dimensions and devices. By dynamically recalculating pixel positions during resizing or full-screen transitions, the custom player delivered a responsive and user-friendly experience.

It also ensures that notes and timeline bookmarks remain accurately positioned at the same relative coordinates, regardless of screen size or resolution.

Future Direction