Microsoft // Inside B87

Innovation deserves innovation. Microsoft News wanted to tell the story of Building 87, their unassuming yet magical hardware research facility. Inside Building 87 was a look into the future of telepresence, the quietest place on earth, and a look as to how Microsoft accommodates for users of all shapes and sizes. We crafted some very nice unscripted documentary videos to tell the story but the client wanted them to have a more special home online.

I lead a team of designers through blue sky concepting, to come up with idea of using a 3D space online where the walls themselves would tell the story. We then worked through each unique UI element, from the site menu, to the way the space could be turned and manipulated and then how the elements on the walls themselves could be interacted with (and how all of those elements interacted with each other without breaking the whole experience.

On the development side I worked with our development team to explore multiple avenues for creating the site. Ultimately we settled on 3.js. The site itself leveraged WebGL, so the "room" the user lands in can be turned with the mouse and allows the user to click on walls and transport them into other rooms.

The project earned multiple awards including TheFWA SOTD, AWWWARD, as well as thousands of social media call outs and even a short mention on Saturday Night Live.

Visit B87

 

Audio - about.png
b87_0002_Screen Shot 2016-08-08 at 9.38.44 PM.png.jpg
b87_0007_Screen Shot 2016-08-08 at 9.39.47 PM.png.jpg
b87_0008_Screen Shot 2016-08-08 at 9.40.19 PM.png.jpg
 

Wireframes

Even with, and maybe even more so because of, an unconventional navigation the project followed a rigorous wireframe and prototyping process complete with exploratory coding.

b87_wire_01.png
b87_wire_02.png
b87_wire_03.png
b87_wire_04.png