MooncatDesign System
Microsoft
As part of the Cloud + AI web marketing team, we moved from Microsoft’s web framework (MWF) to our own custom design system based on Microsoft Azure’s Sundog library, which we named as “Mooncat”.
We worked closely with our engineers to develop components, modules, and a style guide for the current and future designers to use when designing a Power Platform marketing page.
Role: Designer
Team Roles:
Studio Lead
Producers
Designers
Engineering
Color Overrides in MWF
Theming in Mooncat
Problem
When we inherited the Cloud + AI marketing sites from a previous team, the sites were built on MWF, a design system that was intended for big, beautiful imagery and low copy content, such as Xbox and Surface.
Power Platform consists of Dynamics 365, Power BI, Power Apps. Power Automate, Power Virtual Agent and Power Query. Each product had at least 5 pages, which quickly added up. Dynamics 365 alone had 12 other apps within the page. Version control and updating content across all the pages was almost impossible to keep up and turnaround time for designers and devs was at a snail’s pace.
Each product page was inconsistent in hero treatment, nav, type ramp, grid breakpoints, and CTA styles
One asset had to be cut into 5 different sizes
We discovered that the out of the box MWF components had no flexibility, were difficult for devs to customize, and had long implementation time for new components and massive production time for designers.
We also discovered each of the Power Platform sites were inconsistent in type, grid, and layout because it was based on which dev or designer worked on the page.
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.
Each module we created was reviewed by our devs to ensure that production time was streamlined and accessibility requirements were met. Efficiency increased and bugs were reported 10 times less.
