Streamlining the Company Design System

Establishing better processes for component documentation and setting up a structure for component implementation through a gradual, strategic approach.

Overview

This case study explores the MLS Design System (Magic) 's successful enhancement through improved components documentation and structured implementation processes.

Facing a disconnect between the design and development teams, which resulted in two parallel design systems—the old one in code and the new one in Figma—I devised a strategic plan centered on design advocacy.

By showcasing the new system's advantages, addressing UX debt, accessibility, and consistency issues, and establishing clear guidelines and a review structure, I fostered company-wide buy-in. Collaboration with developers ensured a gradual, transparent implementation process, ultimately enhancing team productivity, efficiency, and alignment.

Stakeholders

  • Andres Reyes - Senior Product Owner

  • Mikhail Kaminskii - Frontend Developer

Tools

  • Figma

  • Confluence

My Impact

Provided designers and developers with precise guidelines, improving collaboration and reducing misunderstandings.

Streamlined processes led to enhanced productivity and adherence to timelines, ensuring a smoother implementation of the new design system.

Increased company-wide understanding and support for the new design system, facilitating its adoption and integration.

Summary

By fostering better communication and collaboration between the design and development teams and implementing a structured, strategic approach, the MLS Design System (Magic) saw significant improvements in documentation, implementation, and overall efficiency. This case study underscores the importance of design advocacy and structured processes in achieving successful design system enhancements.