Behind The Scenes: AgencyNet V2.0

BehindTheScenes_Main
After nearly a year of development AgencyNet V2.0 is alive and online.

In the open spirit of the internet, we would like to share some behind the scenes goodness with everyone out there. In this article, we wanted to focus on the homepage building and the creative process behind it.

The challenge of showing two office locations in one interface was tricky. With one office in sunny Florida and the other in downtown New York City it was a challenge to blend the unique environments into one world. Our solution was to create a tower that allows the user to travel vertically between the two locations. We used the background behind the tower to communicate the environment and atmosphere of both locations. As a bonus, we felt that combining our offices is symbolic of how close knit our agency is, regardless of location. Even though our real offices are states away, our streamlined process and constant communication makes it feel like we are all working under one roof all the time.

Our team discussed a variety of executions for creating the building. We compared the pros and cons of constructing a physical miniature model, creating it in 3D, or stitching together stop-motion photography of our real offices. In the end, we chose to create the building in 3D.  Not only would it give us the greatest control over style and quality, but it would be the most flexible to update in the future.

In order to build it right we needed to create a plan that broke-down the construction into stages.

Process_Timeline

STAGE ONE: Sketch

We began with a sketch. We based the layout on the actual blueprints of both offices. Sketching the building layout allowed us to quickly determine where people, animations, and interactive areas would live.

Sketch

STAGE TWO: Draft

Once we had our rough blueprint, we translated the sketch into 3D space and began building our world. The foundation and building walls were first modeled low-res to give a better idea of scale and placement. We could use this mockup to plan additional details and elements (including imagery, video, interactivity and personality) that would eventually bring the office to life.

Draft

STAGE THREE: Prototype

Next we planned the interior design of both offices and began modeling the furniture and other objects. Higher res renders with lighting allowed us to get a better idea of how it would look in the final render. This step allowed us to start planning how various objects would help bring the otherwise flat rooms to life.

Prototype

STAGE FOUR: Render

After weeks of texturing and lighting we had a photorealistic render. Small details and textures were touched up in Photoshop. We passed around the layered building to different designers in both offices, so they could each add their own style and love to the building – dropping in posters, instruments, designer toys, and all kinds of fun stuff that’s in our real offices.

Final_Render

STAGE FIVE: Video Shoot

Once the final render was complete, we scripted out “micro” storylines for our staff to act out. We developed a shot list that outlined every action we needed to capture on set.

Next we constructed a 40’ x 12’ green screen stage and set up our HD cam and lighting. We used a sophisticated system for keying the live green screen video on the fly, so as we looked through the camera we could see the people as if they were in our 3D building. This allowed us to plan out complex walking paths and interactions. After three days of intense shooting and choreography, we had everything we needed to move on to compositing.

Video_Shoot_2

Video_Shoot_1

AE_Screenshot

Mel_Betsy_Composite

STAGE SIX: Flash Dev

In this stage we blended together all the elements into the master scene (3D building, video people, and background). We keyed all the videos and encoded them as FLVs, then brought the elements into Flash to prepare the scene for programming. Our developers spent the remaining months programming the interactions and ultimately bringing the site to life.

Final_Site

IN CLOSING

Working on this redesign has been an emotional roller coaster for everyone involved. At times we hit serious obstacles in design and technology, but we all knew how special this project was going to be so we kept pushing forward relentlessly. It took a lot of late nights and out-of-the-box thinking to pull it off. The final product is more than a website, it’s an immersive world that communicates the culture and strategic thinking at the forefront of AgencyNet.

We welcome you inside and hope you enjoy your stay.

For more Behind The Scenes content check out:
Mouse Gestures in a Usable Way