Liquid Light

Responsive Web Design · Interaction Design

How can movie lovers get better understanding about the visual experience brought by some of the best movie directors?

Fall 2018 | Programmable User Interface Class Project

Individual Project

Professor Jason Hong

My Role Concept Development, UX/UI Design, Prototyping, Web Development

Overview

LiquidLight is an interactive platform I designed and implemented for a coding exercise, showcasing the distinct styles of different movie directors. It aims to provide visual analysis and facilitate systematic understanding about directors, movies and techniques by offering background information, generating animations and color palettes automatically based on user selections.

User Research

The targeted users of this information platform are the movie fans who have varying degree of knowledge about these directors. They can be royal followers for over 10 years, or the amateurs who have only heard of these names. Yet they share similar passion for movies and are always looking for immersive visual experience.

I conducted surveys and interviews with 10+ students and professionals to better understand the core issues with the existing online platforms. I observed that the majority of these websites serve as compilations of all movies and usually have a focus on critiques and rating, with little synthesis on visual styles and only scattered information about the directors.

Based on the discoveries, I developed two personas to implement a synthesized, director-based visual process.

Nathan

Royal follower of Kaiwai Wang

loves Hong Kong movies from the 80s and 90s
collector of vintage movie and behind the scene stories
actively looking for people who share the same taste for discussion

Dan

New Generation Movie Fan

crazy about Wes Anderson
loves movie scenes with symmetric composition and looks for beautiful color palettes for inspiration in work
streams movies online every week

Ideation

To address the following problems with the existing platforms:

lack synthesized information about the directors
lack visual identity and analysis
too much distractions (like ads) and little interactions

I ideated a set of possible features that can solve the problems identified and make the experience more immersive:

an interactive timeline that showcases the works across the director’s career
short video clips will be embedded in the background to give direct visual cue
AI-enabled color palette analysis on movie scenes of user’s choice

Screen Flows

Prototype

I coded the website with html/css and javascript: https://shanwang3.github.io/

Home Page

The animation and embedded trailer of the movie are designed to capture the user’s attention and allow the user to choose specific directors.

Director Page

The dynamic background trailer and interactive timeline allow users to explore and be immersed in the story.

Movie Detail Page

The detail page for each movie is organized in sections including plot description, casts, color palette analysis and behind the scene.

I keep the basic information about the movie to the left section which is static, and make the right column scrollable so user can always have the basics available.