This effort was previously led by two other folks on the Cortana Design team. They worked closely with the voice designers to faithfully represent their guidelines. When I took over the project, the main goals were to get it visually more aligned with the branding efforts happening at that time, make it mobile-responsive, and of course, fix bugs and get it deployed.

The site consisted of two endpoints: the site itself, and the Strapi CMS. The CMS part was working well, and luckily did not need any work. However, there were some foundational bugs that requried significant refactoring. One of these bugs was routing, which was working inconsistently, due to implemented improperly.

I worked closely with the visual designers to help with the redesign. They had limited hours to spend on this project, so we asked them focus on the homepage, as it required the most visual help. They provided a vibrant and refreshing new layout and colors, as well as some wonderful custom illustrations. While building the homepage, I added a parallax scrolling effect to some of the sections, as well as wrote CSS to ensure the SVG illustrations would look good no matter the viewport size.

I applied, and extended, the styles and patterns from the homepage to the documentation pages and skill builder, as well as the tablet and mobile versions. I also set up a cadence of design reviews with the visual designers, to ensure brand alignment.

A big part of these guidelines is a voice skill builder and emulator which allowed users to write a simple dialogue flow for a voice skill and experience it using Cortana's voice. Users were taken through a wizard where they could write the spoken and displayed prompts for each step of the flow. There is also a method to create, reference, and share pre-built skills.