MICROSOFT Ai cognitive services
ux/visual designer
MICROSOFT COGNITIVE SERVICES TEAM
2017
The Microsoft Cognitive Services are a suite of machine learning APIs and tools to help developers build apps with artificial intelligence such as emotion detection, speech recognition, and language understanding.
the problem
The Microsoft Cognitive Services customer-facing landing pages had fallen out of alignment from the updated style guide, Fluent. Our team was hired to redesign and/or make substantial UxUI improvements to these landing pages.
However, this was only the surface level problem. It was brought to our attention that the SEO was a wreck, and they needed suggestions to help fix the issue.
research & exploration
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.
We navigated landing pages, subpages, documentation and demos, taking meticulous audit of the information architecture, user flow, UI patterns, and messaging. In short, we found the pages a tangled mess. One thing was clear though—the following issues led to a muddled user experience.
Architecture had become a patchwork of confusing, conflicting, even moving or disappearing menu items & CTA’s.
Failing SEO ranking for Microsoft AI services routinely dropped behind competitor’s results, often pushed to subsequent pages.
UI referenced outdated, inconsistent style guides & pattern libraries.
Many icons & illustrations were not visually consistent in style, and often poorly communicated their concept.
Messages rambled with an overuse of trendy jargon & confusing terminology, making it difficult for the user to find help and make informed decisions.
Lengthy listed content impaired readability.
USER PROFILES & JOURNEY MAPS
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 user pain points. This enabled me to reframe them as opportunities for solutions.
Solution
Rethinking the Content Strategy
I helped thoughtfully organize and edit content, with empathy for the needs of a diverse demographic of users (i.e. expert developers, directors, product managers, etc.) creating an inspiring and helpful user experience.
Simplified & reworded navigation elements to be intuitive, eliminated contradictions, & resolved dark patterns
Wrote engaging story in conversational voice and clear terminology
Characterized AI service features as inspired business solutions and Microsoft’s unique benefits with case studies
Found opportunities to supplement messages with helpful internal and external cross-linking to relevant content, useful information, documentation and reference material.
Integrated pacing elements such as pull quotes to retain a human element.
WIREFRAME layouts
visual DESIGN & illustration
ICON SYSTEM refinement & expansion
Each API service is branded with a unique icon, and appears throughout Microsoft AI tools, websites and apps. I found the original icons to be visually inconsistent as a family, and more importantly, many did not categorically communicate.
I took the initiative and proposed a refinement of the entire Cognitive Services API icon family. Every icon was crafted to be consistent in weight—and in many instances, replaced with an upgrade.
These icons appeared prominently across Microsoft Azure, and thus required the blessing from the Azure stakeholders.
FEATURE ILLUSTRATIONS
New, original illustrations were needed to convey the many cutting-edge features of Microsoft’s machine-learning APIs.
They must fit visually within the Microsoft Azure brand guides of using geometric simplicity, color palette. I aimed to be original, communicate clearly, playful and witty—yet not cartoonish.
