Microsoft Web Framework, or MWF, is a design system based on the Atomic Design model that’s used to build all Marketing & Consumer Business websites for Microsoft currently supporting around 300k live pages. Moray is the latest iteration of the system.
In the contemporary landscape, motion stands as an essential element within top-tier design systems and products. It enhances usability by aligning with perceptual expectations, ensuring continuity, weaving narratives, and establishing meaningful connections between elements.
This, in turn, aids users in their decision-making journey. Simultaneously, motion also imparts a distinct personality that harmonizes seamlessly with branding endeavors.
Given the complexity of what it meant to deliver motion for an already working design system, plus catering to our tenant’s customization needs, I decided to assess what a deliverable should look like. After my research period, it was very clear that I needed to tackle this from four different fronts:
-Apply motion to current components.
-Systemize and tokenizing motion for tenants, designers and engineering.
-Documenting and guiding.
-Make visual enhancements to the system by animating icons and illustration.
In an effort to achieve the development of motion design, we followed a simple mission statement:
Creating a motion language flexible enough to cater to all of our tenants required a lot of partnering with engineering as well as accessibility and most of all, listening to what our tenants needed motion to be.
The end result was a set of 3 motion buckets, Functional for informative motion like micro interactions. Moderate, for agile, yet enjoyable interactions. And lastly Captivating, meant for large, expressive pieces that enhance the immersion of marketing material pages.
cubic-bezier(0.30, 0.00, 0.70, 1.00)
outgoing 30% incoming 30%
cubic-bezier(0.60, 0.00, 0.80, 1.00)
outgoing 20% incoming 60%
cubic-bezier(0.60, 0.00, 0.40, 1.00)
outgoing 20% incoming 60%
cubic-bezier(0.30, 0.00, 0.70, 1.00)
outgoing 30% incoming 30%
cubic-bezier(0.60, 0.00, 0.80, 1.00)
outgoing 20% incoming 60%
cubic-bezier(0.60, 0.00, 0.40, 1.00)
outgoing 20% incoming 60%
cubic-bezier(0.30, 0.00, 0.70, 1.00)
outgoing 30% incoming 30%
cubic-bezier(0.60, 0.00, 0.80, 1.00)
outgoing 20% incoming 60%
cubic-bezier(0.60, 0.00, 0.40, 1.00)
outgoing 20% incoming 60%
With the goal of building better working relationships with engineering, I framed the creation of the handoff documentation as a product crafted specifically for them as users and their needs.
To combat these issues, I strategize a set of goals in order to not only apply motion, but to streamline how it is consumed:
Provide guidance so motion is owned and designed by the MWF team, preventing one-off experiences lacking cohesiveness.
Voice progress and achievements.
Focus on transitioning to a 2 week sprint, eliminating duplicate efforts by establishing a motion system.
Create a channel for communication that is clear, consistent and simple that allows stakeholders to share their needs, and allows me to share progress.
Emphasis on listening to the needs of tenants, designers and engineers to craft a better tailored communication.
I partnered with the engineering team to design a set of motion utilities with neutral, entering and exiting easing values, durations, delays and CSS properties.
The next step was to create motion patterns. Borrowing from the atomic design model, I designed combinations of motion utilities that users can pick and choose from a library.
This helped us not only own the motion applied to custom experiences, but also bring cohesiveness to an otherwise scattered experience.
