Kim Tapia St. Amant

Interactive Space & Design, LLC

Project 2 of 6

New documentation platform for Microsoft

image
Docs home page.
Product:
Microsoft Docs
Job title:
UX design, information architect, project management, visual design, illustration
Roles:
Senior UX PM

When I joined Docs as a Sr. UX PM, we had a major launch event, the MS Connect conference, just three months away. My challenge - create a navigation system for the Docs platform, visual design, and page templates. Azure was the only product I had content for, but knew Visual Studio and .NET wanted to on-board for the Connect conference. No time for research or studies, I was going to have to force everyone into a structure but I also wanted to give them options too. Here’s what I did.

I used navigation metaphors I thought would be easily understood by our audience creating a 3-tier hierarchy that could work for docs sets that were complex as well as doc sets that required only a single page.

  • Level 1: top tabs
  • Level 2: left nav menu
  • Level 3: items that link into library TOCs

For the cards, I created a single HTML structure that could be styled many different ways. It was super easy to change between the card types so on-boarding product owners could play with the available options. For the production folks changing from one card style to another was a snap.

I had the opportunity to work with people from all over the company, helping them on-board their products to the new Docs platform, which was very rewarding. After a time the volume of work grew and I was able to hire a designer, an information architect, an illustrator, and a production manager to keep things moving.

image
Page showing all three levels of navigation.
image
A few of the different card styles we created.