i|o at Playa Vista Website

Design Inspiration

Working as a humble three-person team, and with rumors that Google was going to purchase a twelve-acre parcel adjacent to the project, we focused efforts on creating a website experience closer to a larger start-up tech company. The project would come together quickly, Clarion worked feverishly on a press embargo with L.A. Times announcing new leasing efforts in the area.

Creative copy-writing from Penny Benda (i|o defined multi-laterally as inspiration & options, impressive & open, input & output, interactive & optimized, ideas & optimism, indoor & outdoor) gave Looking a platform to create branding that was more fluid. From this came a website concept that could still be traditional with multiple pages, but also fluid with smooth-scrolling sections, redundant navigation to increase browsing-level awareness as was famous by start-ups, and quick interactive maps.

Interviews & Insights

In interviews with the core team, Playa Vista was a relative unknown outside of Silicon Beach natives. A big marketing need was to separate the project from previous owners to the public while educating the brokerage community outside of Los Angeles of the potentials of Playa Vista.

East Building or West Building

From user testing on the Latitude 34 website, a big confusion was to quickly orient the user to which building was which. With two rectangular buildings of similar footprint, and a differentiator of east vs. west, we devised a simple way to explain leasing availabilities.

As the video shows above, we suggested a simple isometric sketch from the architects. Dull in detail, it served as a model. We drew and activated svg layers per floor and building, with javascript loading both a respective floor drawing as well as shifting a simple campus plan view upon click. Reports were that this eleviated confusion from 2D interactive site plans.

Amenities

Addressing the concern of if Playa Vista was suitable to move to. We did comprehensive research on retail, banking, hotel, dining, and gym/recreation amenities in the area. A custom map was created both for the regional amenities, as well as a neighborhood level map. The decision to use simple css-transition hovers to inform the user would keep 200+ point maps lightweight in feel and load time.

When served on a smartphone, each pin is a list item that is sorted alphabetically by amenity type in an accordion with external link to the respective establishment. I give Clay all credit for thinking of this, but at the time it was brilliant. We used the phone’s hardware (Google Map/Apple Maps) to serve up the nearest coffee spot. Here is a sample below of this section.

The i|o at Playa Vista website was launched upon a press embargo with a feature story in the L.A. Times by Roger Vincent regarding the expansion of creative office space in Playa Vista. I remember, I was sweating bullets 5:00 a.m. that morning.

Two tenants were signed before launch, a testiment to the leasing team’s brilliance. However, I would like to think the usability of the website helped snag the third major tenant, The Honest Company.

Most iteration on the site was design-based. We altered colors, redrew maps, and shot for honest clarity. Kudos to Clarion Partners.

Launched Website

Click to see the site

Further marketing included an email campaign. Chernin Group and Samsung would sign leases along with original tenants Fullscreen and GroupM. With tenants like YouTube Space LA just down the street, the east site of Playa Vista is now a media empire in Silicon Beach.