Behind the Scenes: Philosophy Section Unfolded

philosphy
When I was first approached to head up creative for the philosophy section of the new AgencyNet.com I was pretty nervous.

Encapsulating a company’s philosophy is a tall order. Sure, there are tons of fancy phrases you can throw out there, but actually putting our values, beliefs and way of life into a visual format is an intimidating task, to say the least.

We wanted to not only tell people about our Philosophy, we wanted to show it as well. Initially, the idea of a pop-up book was thrown around, a clear nod to a very kinetic form of visual storytelling. (The images below are some of my initial concepts from a brainstorm sketch session I had for the pop-up book idea.)

pop-upbook_1

Starting from sketch

Although this was a great starting point, I wanted to delve deeper into the actual meaning of storytelling. I went back to the drawing board and approached the pop-up book from a completely different angle.

When I was little, I absolutely loved pop-up books. Back then, I was fascinated with them because they allowed me to interact with the story itself. I wasn’t just reading the story; I became the story – a force that pushed the characters along their journey.

In physics there is a principle called the conservation of energy.  Among the most spectacular examples of this principle is the Rube Goldberg machine – the energy from an initial event affects everything in its path, usually through increasingly absurd steps before a completely mundane ending.

I set my pencil to paper and began to sketch a world where the viewer would take a journey, triggered by a tiny event – a spark – that unleashed a fantastic story.

sketch_2

Setting the scene

You can flip through my sketchbook from start to finish using this nifty Flickr slideshow.

My story would be comprised of 6 distinct scenes. Each scene would illustrate a part of our creative philosophy and would reflect part of AgencyNet’s culture. I also decided that each scene would be created entirely out of paper.

Why paper?  For centuries, paper has been used to record and tell stories.  Books and paper have become universal symbols of storytelling making it the perfect medium.

The paper world exists on the shelves and bookcases of our CEO’s personal office, which is, in my opinion, the obvious place to store the agency’s Philosophy. I opened up Photoshop and began the creation process. The following images are the result of the first round of comps.

Scene 1

“At AgencyNet we believe in the power of digital to create meaningful dialogue.”

In the dialogue section, I knew from the beginning that I wanted there to be paper doll-like heads emerging from a book, using emoticons to express their ideas to each other.

scene_01

Meaningful dialogue

Scene 2

“We believe a story can only be told if the user experience allows it to be heard.”

In the first round of comps for the story section, I created a fictional “Downtown Fort Lauderdale” complete with a paper AgencyNet building. (Fun Fact… A photograph of the AgencyNet office was used when creating the paper building, so the structure is exactly the same.)

scene_02

How we tell stories

Scene 3

“We believe a story can only be told if the user experience allows it to be heard.”

For the later part of the “story” scene, I wanted the viewer to take a look inside the paper AgencyNet building and get a glimpse of a “day in the life” of an AgencyNetter. I represented this with a paper cutout of a human form watching two different monitors while paper elements appeared from behind the screen.

scene_03

User Experience

Scene 4

“We believe innovation, experimentation and interactivity are core to modern creativity.”

I’ve always been fascinated by the artistry that incorporates kinetic motion, so when I saw first-hand an actual wall mounted kinetic piece, I knew that I wanted to incorporate this into the Philosophy section somehow.

After brainstorming, I figured that since the main AgencyNet building is in Fort Lauderdale, close to the beach, there needed to be an ocean scene represented somehow. Making the sun a kinetic machine was an added bonus for this section.

scene_04

Core to modern creativity

Scene 5

“If we’re successful it all ends with a connection, but it starts with a spark.”

After representing the beach in the previous scene, I wanted to show some love for our New York office as well. I created an “urban” paper scene with a hint of the Statue of Liberty. The connection is made when the blimp passes over Lady Liberty’s lit torch.

scene_05

Ends with a connection

Scene 6

“Above all we believe everything begins with ANidea”

ANidea was a little bit more abstract, so it took some thinking to come up with a scene that made sense. After scratching out a couple of ideas, I thought about the actual meaning behind “an idea”. An AgencyNet idea can come from any one of us at any time. Kind of like little fireflies bouncing around until one lights up and catches fire.

scene_06

It all begins with ANidea

Once I had the different scenes planned out and comped up, I created a storyboard to figure out the user flow and transitions. The storyboarding portion of this project was a crucial exercise for tying up loose ends. With all of the scenes printed out in front of me, it was a huge help to see the project in its entirety. I could switch pages around and add notes to create a more logical path without spending hours in Photoshop recreating and revising different elements.

story_board

Storyboarding to get the right flow

I also created a macro view of what the sections would look like in the office environment, to better understand the movement and direction of each scene. Having this version of the scenes at hand was extremely helpful when it came to animating the scene.

macro_view

The Macro View

Sharing the AgencyNet Philosophy

While going through rounds of revisions to finalize the look of the Philosophy section, I found myself consumed and charmed by the world I was creating. It became an extension of myself and my excitement for AgencyNet. It was the type of project that I had never had the opportunity to lead before. I loved every second of it.

Handing off the project to the talented developers in the office was like watching a child grow into an adult. Although I knew the section was special, seeing each piece of the story come to life before my eyes was an emotional venture.

Turning AgencyNet’s Philosophy into a visual story that engages a user wasn’t an easy task. But it is one that I am proud to say I was a part of. To see the finished product for yourself, visit our Philosophy section at AgencyNet.com.