Microsoft Open Prototyping Website

Big or small, paper or coded, prototypes are how we envision the future of Microsoft. They unlock deeper insights and create better experiences for our customers. These experiences are becoming more interconnected. So, our company and culture need to become more integrated. Open prototyping is making this possible at Microsoft and I was part of the team that was responsible for building prototypes with React, Typescript and MobX. During my time on the team, I’ve worked on a myriad of exciting projects and my team was even featured in an article by The Verge which can be read here.

Among my delegations at Microsoft was maintaining and building out React based web sites. One of these websites was an internal website for Microsoft employees that outlined the mission of our team and the benefits that could be obtained from Open Prototyping. The website would be featured during Microsoft’s annual Design Day, so my team was instructed to have fun with portions of the page. One of the main components of this site that did this was the header for the home page of the site. As can be seen in the animation, when the user hover overs the header the shapes in the foreground begin to transition along the page. We also implemented an easter egg where the user would actually be able to control the animation and transitions of the shapes through a toolbox.

Currently, the Open Prototyping website is only available to Microsoft employees but upon request, more of my work for the development and design of this website can be shown. Below, is a small snippet of the homepage and the implementation of the design I created. If you are a Microsoft employee, the website can be found here.