top of page

25+

Components

20

Glyphs

3

Patterns

130+

Office hours

9F0EAA83-3724-41C3-87EA-F469268C60D6.png

Background

I was a part of the company’s first dedicated design system team. At the time, our “system” was a loosely maintained shared file—open to all, but owned by none.

​

Over the course of this project, I helped define structure, scalability, and standards. This included building and refining components in Figma, creating brand-new iconography, writing token and schema documentation, launching our first design system website, and working cross-functionally with engineers to define sustainable design-dev processes.

1. Designing scalable components

43AF81DF-2584-4737-B719-FBCF324C4FC9.png

Built and optimized foundational components for usability, flexibility and speed.

Collaborated with vertical design teams to identify use cases, reduce overrides, and ensure components were accessible, customizable, and scalable across diverse product needs.

2. Glyph Library

C1A5A237-E663-4AA0-B3C0-CA60167FC93E.png

Designed 13+ Glyphs/Icons in 4 sizes to align with brand tone and accessibility needs.
Created a consistent visual system for product-specific glyphs, ensuring clarity across small UI surfaces like buttons and form elements.

3. Token Schema Guidelines

9AA10607-AA34-4F70-8B32-25772CE4DF1D.png

Defined system-wide schema rules for color, spacing, and typography tokens.

Defined the naming, grouping, and application of design tokens to ensure clarity during handoff and support long-term scalability across platforms.

4. Design System Website Launch

97592405-9545-4D49-87F1-59D18A80E5F5.png

Launched SoFi’s first design system site as a centralized source of truth.
Documented all components, patterns, and guidelines in a searchable, role-based platform serving designers, engineers, and PMs.

5. Design–Dev Process Definition

40A700F9-BF1E-4EB9-A4C4-00B2A6F0A8F7.png

Created a cross-functional workflow for contributing, reviewing, and maintaining components.
Aligned with PMs, designers, and engineers to define what gets added, how it's maintained, and how versions are tracked.

6. Visual QA with Engineers

0CDBD0A1-371A-4C00-B8AC-F76A764266B7.png

Worked closely with engineers to build and QA components to match design specs.
Ran VQA sessions, set up handoff flows, and ensured pixel-perfect implementation from Figma to production.

Outcome

  • 🔼 20–25% faster design-to-development workflows, reducing back-and-forth communication and handoff friction.

  • 🔽 30% decrease in engineering implementation time, enabling quicker and more consistent UI builds.

  • 🔽 15–20% reduction in design redundancies, minimizing repetitive component creation across teams.

  • 🔽 3–4 weeks cut from product launch timelines, accelerating time-to-market through reusable patterns.

  • 🤝 Improved cross-functional alignment, streamlining collaboration between design, product, and engineering.

Reflection 

This work taught me that great systems don’t just support design—they shape how teams work. A strong foundation helps ship faster, maintain consistency, and evolve with confidence.

This was a quick glimpse of what I did while leading design for this project, reach out to know more about scaling, patterns, research insights :) 

Building and scaling SoFi's first design system

Established SoFi’s first centralized design system and launched its official documentation platform.

bottom of page