Tradeteq

Highlights

• Design system: Built tokens (color, type, spacing) and core components used across products.
• Rollout plan: Introduced components sprint-by-sprint with Storybook entries and deprecation notes.
• Critical flows: Redesigned the due diligince form to be clearer and faster.
• Collaboration: Worked with the lead FE to align naming, states, and usage guidelines.

The Challenge

Products were built in isolation over time. The same “primary blue” appeared in five shades. Buttons were recreated per app. Screens were sometimes “designed over” screenshots and handed to devs. There was no shared source of truth and no way to keep things consistent across client-branded versions. My job: create a usable system and improve the flows that matter most.

• Fragmented UI: each product looked and behaved differently.
• Duplicate components: multiple versions of the “same” button/input.
• Slow, confusing flows: especially the long, single-page due diligince setup.

Mismatched buttons/colors from different parts of the product.

Existing UI — branding inconsistent with website and marketing.

Existing UI - CTA's not aligned with form

The Approach

• Audit → Roadmap: Ran a quick audit, then shaped a design roadmap from the findings.
• Start with tokens: set color ramps, typography scale, spacing, radii - the basics everyone shares.
• Ship core, then layer: shipped buttons/inputs first; added more complex patterns in later sprints.
• Storybook as the source: each new component added with notes; old variants marked for deprecation.
• Hands-on pairing: worked with the lead FE on names, states, and do/don’t examples.
• Improve a critical flow: used the due diligince setup form as a proving ground for the system.

Examples: Token page with color ramps, type scale, spacing grid.

Examples: buttons/inputs, icons, tags

Constraints

Direct customer feedback wasn’t available. Most input came via BAs. Developers had limited product context, so edge cases surfaced late. I leaned on prior fintech experience and quick prototypes to keep changes sensible, and kept components flexible so the team could refine them over time.

Critical Flow - Due Diligince Setup

The original form copied a paper version: everything on one page, no conditional fields, no sections. I split it into clear steps, showed document requirements upfront, and used inline validation.

Before: dense, single page with no guidance or conditional logic.

After: sectioned flow, document checklist upfront, visual drag-and-drop upload area

Outcome

• Adoption began: tokens and early components landed in Storybook and started replacing legacy UI.
• Faster completion: due diligince time dropped from ~55 mins to ~25 mins.
• Less duplication: a simple review + deprecation path stopped one-off component copies.
• Set up to scale: as new front ends were built, the system became the default starting point.

New sreen applied with new tokens and components.