Go back

Design system
for scalable product

Product design

Design - Implementation - Management


In August 2022, I joined a leading fintech and super-app platform as their inaugural in-house designer, collaborating directly with the Head of Product on an extensive platform overhaul.

A pivotal aspect of my role involved initiating and overseeing the development of a new Design System, aimed at streamlining processes and fostering a cohesive user experience across the platform.

My contribution

Team Lead

Strategy and research

Lead UI UX design

Critical documentation






Early 2023

Setting the Hierarchy

I organized the Flexon design system to ensure consistency across files for each component and pattern, ensuring that they contain identical pages. The subsequent images provide a detailed breakdown of the content found on each page.

Portfolio image

Inventory, Use Cases, and Requests

This page exhibits various implementations of a component within a company's digital product. For instance, for a text field component, the inventory showcases its appearance on both iPhone and Android devices.

The inventory provides clarity on existing elements and highlights instances where components are being utilized incorrectly, enabling teams to identify alignments and misalignments. Initiating a design system project with an inventory helps guide the creation process and ensures cohesive design implementation.

Portfolio image

Sources, Optimal Methods, and Competitive Research

Incorporate a section within each component file resembling a vision board, showcasing how comparable pieces are designed by other companies. "As with any initiative, performing competitive analysis is crucial to understanding industry standards," Gain insights by observing other products and their approaches.

Portfolio image

Figma Component

The file also includes a page dedicated to the Figma component itself, a readily replicable UI element used across the design system. Designers can modify the component, ensuring consistency across all instances throughout the company. This page is exported to the Figma design system library, allowing any designer to easily incorporate the component into their designs. If adjustments are necessary, the design system team can make them once and implement them across the company.

Portfolio image

Style rules, Anatomy

The handover notes are the instructions for developers on writing the code for the component. The handover document begins with the anatomy of the component, then includes its variations.

Portfolio image

Collaboration is key of success in implementation

Being a design system designer involves many responsibilities. "Leading a design system project means being the glue that holds everything together." Creating a design system requires effort, dedication, and collaboration.

Want to create something awesome?

Or drop me an email