Summary

I was tasked with building a design system library to unify all digital touchpoints at Medenterprises. When I stepped in as Product Lead, no design system existed, creating challenges not only for designers but for the entire delivery team. Drawing on my experience from previous roles, I developed a design system that not only ensured consistency across the product but also streamlined the delivery process, significantly improving efficiency and collaboration.

Solution

Curated a modern design system that follows best practices, beginning with Primitives and core elements, and extending to semantic and semantic-based components. The system includes a comprehensive color scheme, typography, spacing, grid, rulers, and responsive guidelines for screen sizes, providing clarity on component functionality.

While offering structure, the system also encourages designers to explore new ideas, supporting creativity and scalability as the design system evolves.

As everything here shows results, all of these happens by starting a product design kickoff involving engineers. We started at aligning design-developers insights and understanding on our nomenclatures, words we use and how we want to call each primitives that aligns with our principles

As we progress, we curated iconographies and scaling of each usage making sure that design adhere to how it will be develop within our platform too. this gives not only a good alignment but better collaboration within the product and delivery team.

Typography had gone through numerous workshops as well to make sure that we know what typeset and variants are we using.

At the end of the project, what I achieve is really a valuable asset to the design and delivery team. I even expanded this design to make a clean brand and identity documentation, usage of logos, polishing the identity system and created a scalable design system that can stand the test of time. Design system is a living and breathing work – it should be treated as a separate product that works as a pillar on product delivery. The next piece of work after this is to align the library of the web component using semantics from our core components to scale.