Microsoft Clarity
Our process wasn’t just illustrating, but identifying what, why, and in what tone these illustrations exist to motivate how we craft them and with what rationale that is the most effective for the audience. Our layered process helped us methodically explore together with the Microsoft team.
At the heart of it were a trio of friendly animal characters—a bear, a cat, and a fox—each reflecting different aspects of the product while giving the brand a sense of personality and charm. These characters softened complex dashboards and abstract metrics with approachable, expressive visuals, transforming intimidating information into something intuitive and inviting.
Phase one involved an emotion study. We combined illustration style exploration with a strategic set of emotional and tonal ranges to help give the team a comparison system. This let us together figure out, with real examples to look at and compare to, the sweet spot of too little, too much & just right f
Brand Illustration System
EMOTIONAL TONE & STYLE DEVELOPMENT
CHARACTER REFINEMENTS
FINAL CHARACTER SELECTION
ACTION & POSE DEVELOPMENT
POSE ILLUSTRATION REFINEMENT
Microsoft Clarity is a free, AI-powered analytics tool that helps teams see and understand how people actually use their websites and apps. Through session replays, heatmaps, and intelligent insights, Clarity surfaces friction, confusion, and opportunity—so product, design, and marketing teams can move forward with confidence. Instead of guessing what’s working, brands can act on real behavioral data, powered by machine learning that highlights what matters most.
The Challenge & Outcome
While technically rich, the Microsoft Clarity brand system landed a little bit cold and sterile. So, to bring warmth to this technically rich ecosystem, we developed a flexible illustration system designed to humanize dense AI data and customers’ experience with it.
The result is a distinctive visual language that helps Clarity stand out in a crowded AI landscape, balancing precision with humanity and reinforcing a more approachable face of AI.
BRAND ILLUSTRATION SCENE DEVELOPMENT
BRAND ILLUSTRATION SCENE REFINEMENTS
