Rethinking the Content Strategy & UX of Microsoft Azure’s AI Platform

A Case Study

Kobee King
Microsoft AI Services Case Study
5 min readAug 23, 2018

--

The Microsoft Cognitive Services are a suite of machine learning APIs, SDKs, and services available to help developers build intelligent applications by easily adding cognitive features — such as emotion detection, speech recognition, and language understanding.

Projects

  • Landing pages for Microsoft Azure Cognitive Services & Labs
  • Developer tool & landing page for Azure Bot Service
  • Developer tool for Language Understanding Intelligence Service (LUIS)

The Challenge

The developer tools and customer-facing landing pages had not been redesigned since Microsoft first launched the Cognitive Services in 2015. With the sprint to go public and the evolution since, there were a few issues that caused a very inconsistent user experience, and were in a desperate need of repair and design updates, such as:

  • The architecture across these services had become a patchwork of conflicting navigation which crippled the SEO.
  • The content rambled with an overuse of trendy jargon and confusing terminology, making it difficult users to make informed decisions.
  • The UI was built using different or older pattern libraries, and were inconsistent across services.
  • Icons & Illustrations were not visually consistent in style, and often poorly communicated any message.

Our team was hired to supplement the Microsoft Cognitive Services lab as UX research and design consultants on many projects within the Azure AI platform, and address these main design challenges.

As Senior UX Visual Designer, I was involved in every stage of the product development cycle.

UX Research

I began evaluating Microsoft’s API services by immersing myself in the content. I read the marketing pitches and tutorials, signed up for Azure AI services and those of their competitors, test-drove developer tools, and built a handful of bots and language models to gain deep industry insights on best practices, trends and offerings.

I helped create a comprehensive competitive analysis and defined personas to ask key questions from varying perspectives. Then, I leveraged the personas to draw up user profiles and journey maps to best find and explain pain points, and then reframed them as opportunities for solutions.

UX Design

Rethinking The Content Strategy

I helped to thoughtfully and logically organize and edit content, empathetic to a diverse demographic of users and their needs. We even found opportunities to supplement the content with helpful links and useful information, which greatly improved the user experience while inherently repairing the SEO.

Information Architecture & User Flow

In our early exploration, it was apparent there were navigation problems. We audited the user flow and found many opportunities to resolve dark patterns. In many instances, we reworded navigation points and CTA’s to better inform the user.

Wireframes & Prototypes | UI / layout

Instead of a long list of products, as previously existed, we built a concise story of exciting features and Microsoft’s unique benefits. We framed features as business solutions using case studies, and incorporated pacing elements such as pull quotes to keep the human element. Additionally, we employed helpful cross-linking between other areas of the site for further documentation and reference material.

A sample wireframes for the Cognitive Services landing pages
A sample of wireframes for the LUIS developer tool

Visual Design

Aesthetic Cleanup of Layout & User Interface

  • Aligned UI with pattern library & style guide
  • Added visual pacing elements such as case study pull quotes, promo sections and helpful links

Improving The Visual Language of Icons

I found that many of the original icons did not communicate well, had inconsistencies in design, or were too similar to each other. I took the initiative to improve the visual language of the icons, proposing a redesign and refinement of the entire Cognitive Services API services icon family. Stakeholders were pleased with the upgrade.

Conceptual Illustrations

  • Created original illustrations to help communicate features

Impact

Always focused on a user-centered design process, we were able to make measurable improvements to the user experience of the developer tools, with longer developer engagements and nigher volume of app launches. In addition, we witnessed an immediate improvement of SEO rankings.

--

--