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.

 
avatar-01-01-01.jpg
avatar-01-01.jpg

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

 
sketch.jpg
 

Screen Flows

 
 
 

Prototype

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

seg1.gif
 

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.

 
seg2.gif
 

Director Page

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

 
seg3.gif
 

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.

 
seg2.gif
 

Cast Section in Movie Detail Page

The draggable cast section allows user to discover different actors and actresses.

 
 
 

High-fidelity Screens