Julie & Julia: Film script search and text visualization

In this post is about the ideation and design decision of my side projects Julie & Julia.

I personally consider this project an ideal example of side project for designers (and “creative” engineers). Before I jump into the notes of the project, I’d like to use this space to talk more about my approach to side project.

Ideal side project

I do side projects for various reasons although. Spending evenings and weekends doing pretty much the same thing as your day job could be tiring sometimes. But still I constantly do and love doing it. For me, ideal side projects:

  1. Should take a week or less. Bigger ones take months and they bring bigger joy, but I often lose momentum when other stuff comes up in my life. In fact I have two side projects that never end (sigh).
  2. Allow me to explore new technology and new ways of realizing ideas. If I simply copy-and-paste of my previous code or repeat same visual design ideas, it’s not fun. Side project should be a great learning experience.
  3. Be personal. I often get inspirations from my own interests and environment. Sometimes it can be what other people are also interested then the project gets more attention, which is great. But I personally don’t put the community’s trends as the top priority.

“Julie & Julia” nicely satisfied these three conditions of the ideal side project; it took just a few nights; it was my first time to use React; I started this project as a response to a gift/letter from a friend who’s a big fan of the original movie.

A digital response to an analog gift

Julie & Julia

An artist friend sent me a beautiful object as a kind of seasons’s greetings card last year. While I wanted to keep the same theme (the movie itself and her color choice of dark red and gold), I wanted to respond with my design skills on the other end of the creative world. She also printed out the script and made a book out of it. As a digital twin with her work, I decided to visualize the script. After several ideation, it became a small text search and visualization tool with a secret function.

The inspiration. credit: penpencilbrush

Text visualization of movie script

Cleaning dataset

I cleaned the script a bit (mostly character, line replacement). The final data is a single array of strings. You can think that each line is what you see as a subtitle for a scene. So often one string item in the array can have two dialogues, each of which state with a n-dash , — .

[
"Repeat after me, okay?",
"Oh, Paul, leave me alone.",
"– Bon appétit.  – Bon appétit.",
"Butter.",
"Oh, my goodness.",
"You have to taste this.",
...
]

I used one simple data encoding: the length of each string is represented as the length of a line. Total 1698 lines fill the entire screen from left to right, from top to down.

It was a holiday season when I was working on this project. I felt the red background color and semi-transparent white lines matched well with the season. Then I wanted to use another color, gold, from my friend’s original artwork. I did some experiments with gold color and ended up with randomly blinking lines in gold. This made the holiday theme more vivid. As an accent color, golf was also used for other elements— main title, search result, and searched word or phrase.

Highlighting lines that contains the typed letter

Simple search and highlighting elements

The default view is composed of blinking lines and a text search box. When a user starts to enter the third letter, script lines that include those letters show up. Focusing (mouseover or touch) on each line in the result highlights the matching line.

Secret message

This project wasn’t simply an React app but a very personal gift back to a friend. I wanted to go something more besides reimagining her work. I let her see a secret message by entering a password in the search box. The password is not included in the movie script so it wouldn’t be conflicted with the text search function. She really liked it, the Easter-egg type of addition worked.

Design for phone screen

One of the biggest challenges of data visualization is making a mobile-friendly version of it. The simplest but not the best choice is removing some visualization elements or functions. I did that too for this project. All the blinking lines are gone. If I had decided to spend more time, I could have done differently but that was the choice that time. At least it surprised my friend when she later checked with a big screen.

Side project must go on

I will post notes on my other side projects. Hopefully this could be some inspiration or even comfort (other people may see that I make same mistake that do!) for the creative people out there.