S.E.E.D.S. Scalable, efficient, elegant, design system for PayMongo

🔬 Discovery

The first step was to audit everything that is already used by going through all pages. Understanding the purpose and usage of each component, why, how and where it was used, taking note of what needs to be fixed, replaced, merged, & archived, creating a backlog of list for prioritization.

🔎 Key findings

• Components are more consistent as UI library / framework for React (ANT Design) was used.
• Storybook doesn't support design and guide principles, but more like a component library and a sandbox.

💡 Strategy & ideation

Upon completing the UI audit, it became apparent that what we really need was to have a consistent collaboration with engineers as the priority leans toward shipping features than making everything consistent. Thankfully, as we are using ANT, it's a lot easier to manage inconsistency (if/as needed).

Strategy

• Share the design system backlog with PMs and engineers.
• Create priorities in alignment with planned features to be shipped.
• Weekly sync with UI designers and engineers.
• Monthly retro and planning.

Eventually, as I became the product design lead (team manager), I decided to hire someone who will champion and focus on the development of the design system.

🚀 Execution & implementation

Unlike building my first design system, I am not involved in any coding so I had to create everything in Figma. We use Basecamp and Notion for tracking the progress and backlogs.

Pros in creating a design system in Figma

• Easier to hire UI designers as most designers don't/can't code.
• Easier to scale and faster optimization with little to zero learning curve.

Cons in creating a design system in Figma

• Hard to keep code and Figma in sync.
• Always requires an engineer for implementation, which if without capacity and are prioritizing features will delay the progress of the development of the design system.

Business outcomes

Upon completing, implementing and usage of the stable, "1.0.0" build, we started benefitting from the perks of having one.

• The design system made it easier not only to scale and maintain consistency design for all PayMongo products but also in scaling the team and onboarding UI designers and frontend engineers. As one of the biggest startup design teams who uses a design system in the Philippines, PayMongo hosted the World Design Systems Week last September 2022.
• It improved the visual consistency, language and interaction patterns helping to continuously create a cohesive user experience across all products.
• Proactive component creation and clear guidelines prevent inconsistencies that can accumulate over time which reduces design and tech debt.
• It improved collaboration between designers and engineers as both understood the needs and uses a shared vocabulary, workflow and set of tools.
• Standardized components and clear documentation had minimize design and development errors.
• Lower development costs, increased design and development speed, faster time to market ultimately leading to a more productive team by maximizing the reusability of components, pre-built and tested components, streamlined workflows.

Learnings and takeaways

Here are some of my key takeaways building one:

• A design system is a product, not just a project. It requires ongoing maintenance, governance, and evolution, just like any other product.
• Abandoning the design system will also affect all other product as it is a part of infrastructure.
• Don't strive for perfection initially, focus on getting a usable version out and refine it as needed.
• Collaboration between designers and engineers is mandatory, without it, no design system can be built, used, scaled and maintained.
• The design system needs to be evangelized to be adopted.
• Data or the lack of it will either help or hinder the development of design systems.
• No matter how good the benefits sound, if you don't fight for it, it will be deprioritized.
• Without involvement in code, you will 100% rely on the availability and collaboration of the engineers.