Role
Lead Design Developer
Tools
Sketch | Figma | HTML | CSS | Analytics tools
Introduction
Core Services Engineering and Operations (CSEO) builds and manages the critical products and services that Microsoft runs on. As a core founding member of the CSEO design system, I wore many hats at on the Coherence team, but more than anything I’ve been the Engineering Lead for the digital transformation effort. I led a team of engineers creating interaction flows, user interviews, user testing, wireframing, prototyping, and implementation. I’ve also been responsible for evangelizing the importance of design thinking organization-wide and reinforcing the voice of the user as well as the internal field team and customer support engineers. I also worked closely with designers to establish the design system within Figma that can be consumed by designers. The deliverables contributed to includes: color palettes, fonts, a full set of custom icon design, a WIP set of custom components, and a centralized style guide and documentation hosted both on Figma and a documentation website.
Why a Design System?
The CSEO organization as well as other design teams within Microsoft were embarking on digital transformation. The CSEO org has an ecosystem of 1,500 applications and counting, with new applications being iterated on each day. There was lots of opportunity to standardize, reuse, and amplify a design-driven culture of sharing code and designs.
Most importantly, a design system encouraged people who work on the product to look beyond the building blocks and to think of the purpose of their design or code.
Starting with the Basics
A design system to serve 1,500 products across businesses as diverse as HR, Finance, Sales, and Security is no small feat. Naturally, I started with a general audit of all the existing applications and sites in our ecosystem. That involves identifying all the different stylings that exist and the different tones of voice.
What do Engineers get?
Developers get access to a UI toolkit in Figma and NPM packages for them to directly import reusable CSEO components. They also get access to documentation for best practices and how to best utilize the components and an interactive storybook playground to see the components live in action.
CSEO Website
I created a web application using Create React App to give engineering stakeholders quick access documentation and code snippets to directly import and include in their code.
What do Designers get?
Designers get access to a UI toolkit in Figma. They also get access to documentation for best practices on how to best utilize the components and an interactive storybook playground to see the components live in action if they ever need to envision components they are using in their designs.
