Implementing a New Design System Across Multiple Platforms

2023

The Mom Project

Visual Design/UI
Prototyping
User Experience

Background

Our Product Design leader established OKRs for the team, and to meet those goals, the design system initiative was born. Our aim was to create a consistently high-quality bar across the user experience as a team. This includes (1) establishing an MVP TMP UX Pattern Library and (2) supporting the company's rebranding.

My role

I was a product designer for this project.

My responsibilities included:

  • Thought leader and strategic partner to design director and engineering manager

  • Collaboration on framework research, project governance, prioritization, and project management

  • Created, established, and maintained components in the Figma Library

  • Collaborate with engineers to implement components

  • Contributed to stakeholder presentations, team communication, and design system education

Our product had out-of-date code, no central design system, and old branding. As a result, we were designing and building inefficiently and our user experience was suffering.

The Design Process

The design process started by defining project governance and selecting MUI as a our design system framework.

Meeting and reviewing processes

Designers brought components to review with engineering in a weekly meeting, where engineers could give early feedback. Engineers also brought in-progress work and QA so designers could provide feedback.

Design and documentation standards

If a designer was to add another component to our figma library we created relationship standards, rules around constraints and auto-layout and needed to include all states. We also ensured that when it’s ready for engineering to add to the design system the proper documentation must be included such as spacing and variants.

Established federated ownership

We knew we wanted to move quickly and did not want any bottlenecks. Therefore, we chose to have shared ownership of the components being added to the design system. This meant we had a designer working with a dedicated engineer, both of which involved a step of peer review.

As an additional planning phase, we prioritized building components to align with upcoming features established on our product roadmap. We created a rough gant chart in Miro and then moved it to Excel once it was concrete and continued to track the progress in Excel.

We built our foundations for the product brand as an extension of the new marketing brand. This included typography, color, iconography, spacing and a grid system.

We designed and created documentation for more complex components before handing to engineers. Once a component was considered complete and ready for handoff, it was usable by our design standards in the figma library and had documentation that included usage standards, interactions states, and possible variants.

Learnings and success metrics

I learned two things related to building out design systems (1)the power of figma auto layouts, variants and booleans can elevate a design team to work faster and (2) the importance of a consistent language between designers and engineers to streamline communication.

Over two quarters, we added 40+ components to the design system. A majority of the components were used across 2 products and implemented across multiple features. Creating the design system enabled the design team to create designs more quickly and the engineering team to build more quickly.

Previous

Building a New Content Management System for MobileIron’s Website
Next

Restoring an Integrated Training Platform