Accelerating product and feature delivery while reducing engineering rework.

Why we need a design system?

When I joined Midas, there was no shared design foundation across products. Each team designed and built UI in isolation, resulting in fragmented experiences and inconsistent interfaces.

Design decisions varied across screens, typography lacked hierarchy, and spacing rules were undefined. Developers frequently recreated the same UI patterns, slowing delivery and increasing engineering rework.

As the product was scaling, these gaps compounded - making launches slower, engineering rework, and every screen had a unique look and feel, leading to a disjointed user experience.

Interviews with stakeholders

Before beginning the project, it's crucial that I should advocate for the design system and how it can be helpful for our upcoming projects and will streamline the process, ultimately accelerating the development of new products.

I worked closely with product and engineering to understand daily friction in the workflow. The same issues kept surfacing: repeated work, unclear UI decisions, and slower releases as products scaled.

By grounding these discussions in real examples from mature design systems, the conversation shifted from how things look to how teams ship better. When execution started, the design system was already a shared decision - not just a design initiative.

Establishing a clear & consistent process

This involves determining our principles, establishing our design language, creating design guidelines, and implementing and maintaining the design system.

I recognized that this project would demand significant resources, planning, and time, but I was confident it was a worthwhile, long-term investment for our company, brand standards, and, most importantly, our customers.

By creating a centralized design system, I aimed to:

• Align our teams by giving them a more structured and guided way to build products.
• Accelerate our design and development process, enabling teams to quickly create and test layouts using a pre-built library of patterns.
• Enhance brand perception and user trust by delivering consistent, cohesive experiences that empower users to achieve their goals.
• Promoting accessibility by embedding inclusive design practices into our component libraries, making our products accessible to all.

Design exploration

I decided to focus first on the foundational elements of our design system, such as color palettes, fonts, grid, spacing, etc. and then move on to more complex blocks and pieces (molecules, organisms, templates). Since it was the first design system, I created components from scratch so we can curate them as per our requirements.

Some of the activities at this stage involved:

• Researching other design systems and interfaces for components common practices and inspiration.
• Analyzing the instances and use cases captured during the interviews and ideating on the solutions that serve our goals best.

Foundations and layouts

I decided to start with the foundational design directives, such as spacing, typography, and colors. It allowed me to create solid foundations with strong emphasis on scalability and semantics.

Typography

Typography is an important aspect of design systems because it helps to establish hierarchy, create visual interest, and improve readability. I carefully selected a variable typeface that can be loaded on any type of platform easily, is responsive and having various font features that can later cater to our needs to make the reading a lot easier for our users.

Vibrant and accessible color system

A custom color palette has been created to support the system. It's a vibrant and accessible palette to enhance the user experience across all of the web products. The colors have also been defined for use in both light and dark themes.

Elevation & Spacings

It is good to use an elevation system to differentiate surface overlap. Maintaining a consistent use of spacing in design helps to create a cohesive visual aesthetic across products. In Midas design system I've used a 8px spatial system.

Design components and patterns

The next part was to extend the visual language to complete the design system, I needed to include a variety of essential elements such as buttons, dropdowns, inputs, and date pickers. I also included more specialized patterns/elements like modals, radio buttons, checkboxes, data tables, pagination options, filters and more.

Components

I started working on the components in the design system. I tried to make our components responsive with the auto-layout Figma feature, so we could reuse those components when designing for different devices or layouts. I designed to cover all states in the system like hover, focus, filled out, error, and disabled state.

I used variants feature of figma to combine components into sets with custom properties and values. Using variants makes components easier to maintain, browse and swap through the sidebar menu.

Documenting guidelines

Documenting components and design decisions behind them was one of my core principles when working on Midas Design System. Every component includes a detailed documentation on the behaviour and it's usage.

Designed with accessibility in mind

I crafted each component in our design system considering accessibility in mind. I tried to comply with WCAG accessibility standards. Below is an example of intentional choice of color on a warning alert to achieve sufficient text contrast used Stark Figma plugin so that designs are accessible to everyone.

Learnings and what's ahead

Within the organization, utilization of the system increased design and development collaboration. It also served to improve efficiency in developing new tools, leading to a more cohesive, higher-quality user experience. The implementation of the Midas Design System has significantly accelerated the process of designing and developing products, made a huge impact on component usability, and potentially cut the time needed by up to 3 times.

One of the most satisfying moments so far and a perfect project for me to hone my skills.

• Design systems are only useful if they are actively maintained and easily consumed by everyone associated in the product's development.
• In early stages, sometimes you just need to ship it. Overthinking oftentimes can kill momentum and delay the timeline.
• Importance of craft: This is the first project where I really delved into the details and craft of designing. And I love it.
• Developing a deep understanding of UI component interrelations and dependencies.
• Getting feedback early is one of the best things to do for a new product.

Next steps

Managing and updating the Midas design system is a never-ending process. It is important to maintain robust and up-to-date documentation for design components in order to ensure that they are easily understood and accessible to everyone. Documenting my every design decision so that it becomes easy to scale designs even if I am not there.