Scaling Azure growth through system design

Scaling Azure growth through system design

Scaling Azure growth through system design

Scaling Azure growth through system design

Lead Designer & Interim Creative Director, Commerce + Ecosystems Studio

Lead Designer & Interim Creative Director, Commerce + Ecosystems Studio

Lead Designer & Interim Creative Director, Commerce + Ecosystems Studio

Core responsibilities

  • Product design lead

  • Design system architect

  • Content and design strategy

  • Associate creative director

Key accomplishments

  • 0 to 1 cloud pricing calculator design lead

  • Consistent YoY growth for Azure revenue generated from web

  • Navigation design elements adapted across all of Microsoft.com

  • Co-built Microsoft's top web design system

Challenges & growth

  • Shifting an organization into a systems-driven approach

  • Aligning design across engineering, marketing, content, and product

  • Training early-in-career designers

  • Leveling up art direction, isometric, and 3D visual styles

Product Design for Microsoft Cloud

Product Design for Microsoft Cloud

Product Design for Microsoft Cloud

Product Design for Microsoft Cloud

Improving the transparency and accuracy of pricing estimates for Microsoft Cloud customers.

Full case study presentation available

Improving the transparency and accuracy of pricing estimates for Microsoft Cloud customers.

Full case study presentation available

Improving the transparency and accuracy of pricing estimates for Microsoft Cloud customers.

Full case study presentation available

Atomic design approach for tokens, components, and patterns

Atomic design approach for tokens, components, and patterns

Atomic design approach for tokens, components, and patterns

Atomic design approach for tokens, components, and patterns

All 1:1 with Figma to code to documentation

All 1:1 with Figma to code to documentation

All 1:1 with Figma to code to documentation

Art and branding strategy for Microsoft Learn

Art and branding strategy for Microsoft Learn

Art and branding strategy for Microsoft Learn

Art and branding strategy for Microsoft Learn

Art by Julien Tauban and Jake Dickey

Art by Julien Tauban and Jake Dickey

Art by Julien Tauban and Jake Dickey

One central design language for cross-functional teams

One central design language for cross-functional teams

One central design language for cross-functional teams

One central design language for cross-functional teams

Everyone knew the language when it came to talking about how we design and build.

Accessible design system site for all design and engineering partners to reference

Shared taxonomy of templates, modules, imagery, and process

Enabled fast onboarding for new contractors to start designing or building

From page-custom CSS designs that takes took weeks to build

From page-custom CSS designs that takes took weeks to build

From page-custom CSS designs that takes took weeks to build

From page-custom CSS designs that takes took weeks to build

Designers were living in separate files designing how they saw fit, while developers had no central code classes to pull from.

Before

To templates, modules, and components that form in a day

To templates, modules, and components that form in a day

To templates, modules, and components that form in a day

To templates, modules, and components that form in a day

Figma libraries contained templates and pre-made modules aligned to code that could be auto-compiled in VSCode. No redlines needed.

After

Redesigned the navigation, influencing Microsoft's global header and other cloud competitor sites

Azure has hundreds of products and complex navigation requirements for its large inventory of pages. I worked closely with senior developers to spec out every pixel for all viewports.