The Microsoft consumer website was the primary entry point into Microsoft's commercial pages, but the commercial experience hadn't kept pace. Consumer had adopted Microsoft's newer, more modern design language; commercial was still running on the old visual system. Brand hadn't defined a commercial-specific look, and our CMO wanted commercial to feel distinct from consumer while staying within the Microsoft brand family.
Rather than wait on brand guidance that didn't exist yet, my team built our own commercial design style guide, pulling selectively from the new consumer language and adapting it for a business audience. Alongside it, we built a companion copy style guide to help writers shift their voice for commercial buyers and business partners, a very different audience than the consumer shopper.
I worked directly with product marketing, brand, and legal stakeholders to define our commercial audience personas and vet color themes that would resonate with business decision-makers while still reading as unmistakably Microsoft. Brand signed off on how far we could diverge from consumer, legal weighed in on usage and compliance, and product marketing kept the personas grounded in who we were actually selling to.
We also built a full component library with linked Figma files, so designers could pull ready-made, on-brand components into new pages instead of building from scratch, and partnered closely with our web development team for flawless execution once components hit production.
The project ran five months from kickoff to launch. With the component library in place, design time dropped by 30 to 50% on a single page, a meaningful efficiency gain for a team balancing this work against everything else on the roadmap.
The result was a defined, distinct commercial visual and verbal identity, backed by a reusable component library, that gave writers and designers a clear, consistent standard to build from, closing the gap with consumer without losing the Microsoft brand thread that ties them together.
Team:
Team:
Creative Director: Lisa Torrence
Creative Lead: David Edwards
UX Design: John Hultman
UX Design: Gabrielle Shallahamer
Copy Writer: Emmett Masters
Copy Writer: Gennefer Gross
Creative Lead: David Edwards
UX Design: John Hultman
UX Design: Gabrielle Shallahamer
Copy Writer: Emmett Masters
Copy Writer: Gennefer Gross
