Voice Interaction Guidelines

Building Microsoft's guidelines on voice interaction and design
Microsoft AI
Full-Stack Development, Web Design
There has been a significant growth in digital voice experiences over the past decade, and with that growth comes a slew of different solutions and sometimes messy design patterns. While on the Cortana design team, we saw this as an opportunity--not only to bring some order to the abundance of ideas going around the company, but also to share the experinces and expertise of our voice designers, and make these modern voice experiences truly helpful for all users.
voice-patterns-home.png

Taking the reigns

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.
voice-patterns-strapi.png

Brand alignment

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.
voice-patterns-homepage-detail.png
voice-patterns-interaction-types.png
voice-patterns-home2.png
voice-patterns-pattern.png
voice-patterns-guideline.png
voice-patterns-mobile.png

Voice Skill Builder & Emulator

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.
voice-patterns-skillbuilder.png
voice-patterns-skillbuilder-emulator.png