Scaling Microsoft’s brand system across the commercial web experience

Client:
Microsoft

Role:
Senior Designer, Brand System Designer

Results:
~70% faster production
Scale across several in house and agency teams

Tools used:
Figma
Photoshop
Illustrator

Project Summary:

A design single source of truth to scale Microsoft’s global web presence.

At Revel, we are helping migrate hundreds of Microsoft webpages to the new design system. This involves content mapping, component, blade matching, and visual kits for each unique Microsoft brand. A Brand Accelerator is a visual design toolkit that lays the foundation for consistent, high-quality page design for the new Reimagine System.

Why it matters:

  • Consistency
    Visual consistency throughout all pages

  • Speed
    Production accelerated and reduces churn

  • Alignment
    Teams are aligned early in the process to avoid any kind of scope confusion

What makes an accelerator?

A well organized design kit that incorporates everything a production designer will need to accurately create a webpage and ensure that it is on-brand.

  1. Color kit for theming and visuals

  2. Pre-made design layouts and variants for flexibility

  3. Scalable image and graphical treatments

  4. Best practices guide