TipRanks had grown for more than a decade without a centralized design system. In 2022, I initiated the creation of its first system, starting with a product-wide UI audit and a shared component library in Adobe XD.

When the design team later moved to Figma, I led the restructure and rebuild of the system for the way our team worked.

Role: Product designer

Scope: Product audit, component architecture, Figma migration, system adoption, and ongoing maintenance

After years of product growth, similar UI patterns had been designed and built in different ways across the product.

Designers had to search through old files and existing pages to find components they could reuse. Developers did not have one shared design reference, and users encountered inconsistent patterns across the product.

Examples from the product-wide UI audit.

I led the work through three stages: building the foundation, rebuilding the system in Figma, and making it part of the team's daily workflow.

The new Figma library used variants, nested components, Auto Layout, consistent naming, and defined states.

The system was organized from small reusable foundations into larger patterns:

Tokens→Atoms→Molecules→Organisms→Templates→Pages

This structure let us update small foundations once and reuse them across larger components and pages, making the system easier to maintain as the product evolved.

The rebuild also gave us a chance to simplify patterns that had become inconsistent over time. We unified the icon library, standardized table components, and reduced more than 26 different news patterns across the product to 7 reusable components.

System Architecture

The Adobe XD library could not be transferred cleanly into Figma. I explored different options, including exporting components as SVGs, but the layers broke and parts of the components were lost.

Instead of recreating the old library as it was, we rebuilt the system from the ground up. What started as a migration problem became an opportunity to create a cleaner structure that would be easier to maintain and expand in Figma.

The design system became the default starting point for all four designers and a shared reference for developers during handoff.

Our weekly Trello reviews showed a clear increase in delivery speed, with roughly twice as many projects reaching “done” each week. The product also began moving toward a more consistent visual language.

The design team continued to maintain and expand the system as new product needs appeared, while gradually bringing older parts of the website into the system. Building it as a team made adoption feel natural and reinforced the importance of shared ownership in keeping a design system useful over time.

4

Designers

~2×

Projects reaching “done” each week

267

News patterns consolidated

2022–2025

Timeline