Under the Empire City is my Master's thesis project and was the culmination of months of ideation, planning, and production. It is a guided tour of little-known facts and figures about the history and present of the New York City subway system.
First I found information and narrowed it to pieces that would be intriguing to an audience that has no prior experience with subways all the way to those working professionally with transportation. Next, I designed background illustrations to match as well as two guides to explain in a conversational manner all in Adobe Illustrator. Lastly, I used Ceros to make my static imagery into an interactive experience by adding interactivity and animations.
My interactive project can be found at http://undertheempirecity.com/. Below you can see my planning and creative process.
Each background image and the guides
Each image was based on a reference image. I then used the pen tool in Illustrator to draw each one.
Subway map
Platform with map
Tracks
191 St. Station entrance
Turnstile
Times Square Station
Old City Hall Station
Subway car
58 Joralemon St. (ventilator facade)
Scott (guide 1)
Grace (guide 2)
Persona of target audience
User flows
My initial plan was to code all the interactivity using a HTML, CSS, and JavaScript. The images themselves would have buttons and the information would appear that way. However, the graphics would suffer due to time constraints, so I ultimately decided to employ Ceros for interactivity. One user flow reflects the first plan, and the other reflects my new decision.
This document connects information to a background. The chronology, title sequence, and ending scene all developed once I brought all of my assets into Ceros.
Original user flow
User flow to reflect new plan
Sketches
Regardless of the technology used to make my graphics into a full interactive piece, my plans for the look of Under the Empire City remained similar.
Ideas for title sequence
How to introduce the topic with opening "intro" facts
How to have the guide explain more information
Tools: Adobe Illustrator, Ceros