An award winning website that captures the innovation, culture and energy of the state of the art Microsoft Vancouver space.
Microsoft approached us to create a website that could express the abstract shapes and bold asymmetry of their new, state of the art, 143,000 sq. ft. Vancouver facility, the Microsoft Canada Excellence Centre (MCEC).
The Challenge
When Microsoft opened its massive, 2-floor MCEC innovation hub in the heart of downtown Vancouver, they knew the accompanying website needed to capture the spirit of the bright, open, collaborative space.
Translating all that bold, asymmetrical architecture into a flat, 2-D website posed a formidable design challenge. In addition to being a responsive, accessible resource for information about Microsoft Vancouver projects, events and careers, the website needed to express the culture, delight and energy of the physical MCEC space.
We’re making a great investment in the physical space, the attitude, the way we engage with the community right here in Vancouver.
T.K. Rengarajan, Corporate Vice President of Microsoft
Design Inspired by Nature
As an homage to the west coast, MCEC’s two expansive floors mimic many of the lines and natural shapes of the local topography. The design of the top floor borrows the angled lines of old growth trees, while the lower floor is grounded in a motif of roots, rocks, and earth.
For the design of the MCEC website, we embraced the same oblique, slanted lines. As an echo to the endless versatility of west coast nature, we also created reusable components for a playful, adaptable design.
Looking back on the design plan for MCEC, Regional Workplace Strategist for Microsoft Brenda Ball said she wanted people to “enjoy [MCEC] without feeling they were in a maze-like corridor of spaces.” We followed the same principle in designing the MCEC website. By using the existing aesthetic as our guide, we were able to replicate familiar shapes in nature, while still maintaining an open, navigable path for users.
To get a feel for its natural shapes and angular lines, we toured the MCEC facility during its construction. We later incorporated many of the same visual elements into the MCEC website.
Startup Vibes Attract Top Talent
By leveraging the natural shapes and bold asymmetry of west coast topography, we were able to design a clean, eye-catching website that captures the enterprising spirit of the MCEC facility. To attract the kind of top-tier talent that’s often drawn to startup culture, Microsoft also needed the site to convey a playful, innovative energy. To capture the space’s open and adaptive feel, we eschewed right angles—instead opting for asymetry and subtle motion animations. Hover over a button, and watch as its shape shifts and expands. Linger on an image and you’ll see a barely perceptible zoom effect. These subtle animations create an effect of welcoming—the movement beckons you closer.
Since opening in June 2016, the MCEC facility is well on its way to becoming a favoured hub for local technology entrepreneurs. The space plays host to a variety of hackathons and recurring events.
"Huge congrats to @workatplay for taking 'Best in Show - Corporate Communications' for our web site at the W3 Awards.”
@MicrosoftVan