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
