Cloud + AI Marketing Cloud + AI Marketing

Cloud+AI Marketing

Microsoft

As part of the Cloud + AI Marketing team, we were responsible for the redesign of all Power Platform pages. Over the course of two years, we rehauled all Dynamics 365, PowerApps, Power BI, and Power Automate marketing pages to unify them in language and design into a family of products instead of being siloed into their own brand. We closely worked with engineers to develop a design system to help us streamline this process.

Role: Designer

Team Roles:

Studio Lead

Producers

Designers

Engineering

Made with Mooncat

All pages were developed using our design system, Mooncat.

View the system

Problem

Before we took over the marketing pages, all the previously designed pages were on an old Microsoft web framework (MWF) that was outdated and difficult to customize. Every module was fixed in customization and only supported a couple lines of copy. In order to override and customize these modules, our engineers had to add extra discovery time for testing and implementation which became a nightmare for hard product release dates (and stakeholders).

In addition to engineering problems, all existing pages were outdated in their design language and inconsistent with one another. We knew we had to update these pages to Fluent, the current Microsoft design language, and to reunify the products as a family. Power Platform’s products are an ecosystem and it didn’t show in design and content.

Solution

In order to establish consistency throughout the Power Platform sites, we defined the foundation of shared typography, grid, breakpoints, and themes for each product.

We then built these components and styles in a Figma library for designers and devs to use as a reference. This allowed us to update, add components and reiterate in real time if we found something that wasn’t working within our system.

We also reviewed our library and components with Microsoft’s accessibility team in order to make sure our sites were meeting standards.

Let's Connect

  • Email
  • Linkedin
  • Instagram