Company

Ramp Network

Industry

Crypto fintech

Widget 2.0

Widget 2.0 — Redesigning the Core Revenue Engine

Redesigning the Core Revenue Engine

Ramp's widget is the primary product surface — a white-label checkout flow embedded in 200+ partner products (MetaMask, Ledger, Trust Wallet, Worldcoin) serving millions of users. The original widget was built incrementally by multiple teams (both internally and externally), resulting in a linear, inflexible flow with severe scalability limitations, no design system, and mounting partner complaints about conversion, customization, and error recovery. I initiated and led the complete redesign — from after-hours proof of concept to cross-team production rollout — resulting in a 20% increase in end-to-end conversion, 80% reduction in load times, and 35% decrease in drop-off rates.

Context & Problem

The original widget had a strict linear navigation: screen A → screen B → screen C. Every step was a full page transition. If a user encountered an error on step 4, they had to restart from step 1. There was no shared component library — developers rebuilt UI elements from scratch for each feature. Partners couldn't meaningfully customize the appearance, and the codebase had accumulated enough technical debt that adding new payment methods or compliance checks required disproportionate engineering effort. Partners were vocal: conversion was too low, integration wasn't seamless enough, and when users hit errors, the experience was a dead end. Internally, the widget had become a bottleneck — every team that needed to ship through it was slowed down by its constraints.

Strategy

This wasn't a redesign brief. It was a self-initiated project that started after hours. I saw the structural limitations and began exploring alternatives on my own time. The first step was building a UI kit that proved the concept could work — this unlocked buy-in from the design team, which I then leveraged to get executive and engineering support. The strategic bet was: invest heavily upfront in a new navigation paradigm and component system, accepting short-term cost (maintaining two widget versions simultaneously) for long-term scalability. We sequenced the work carefully — frontend cleanup first, then compliance rules, then backend improvements — to minimize risk while maintaining production stability.

The Navigation Paradigm Shift

The core design decision was introducing depth to a previously flat interface. I introduced drawers and dialogs that allow contextual actions to happen on top of existing screens, so users never lose their place. Instead of navigating away to complete a sub-task (adding a payment method, completing a verification step), the action surfaces in-context.

Additionally, I designed proper routing — every screen is now directly accessible via URL. This seems basic, but it was transformative: partners could deep-link users to specific steps, support could send users directly to the right screen, and error recovery became possible without restarting.

System Complexity

The widget handles a multi-stage flow with compliance gates at multiple points:

  1. Account creation — Email-based signup

  2. KYC verification — Tiered based on risk assessment; the system assigns verification level

  3. Required agreements — Consent screens that must be accepted before proceeding

  4. Asset selection — User chooses which crypto to buy or sell

  5. Wallet address — User provides their destination wallet

  6. Payment method — User selects how to pay (card, bank transfer, Apple Pay, etc.)


    At each stage, anti-fraud systems, compliance rules, and payment provider validations can block, redirect, or require additional information from the user. The widget must handle users from high-risk jurisdictions, failed payment attempts, expired sessions, insufficient liquidity, and blockchain network delays — all while communicating clearly what's happening and what action (if any) the user needs to take.

Shipping process

We intentionally deferred dark mode, several interaction refinements, and a number of components that would have made the experience more complete. The calculus was clear: shipping the new paradigm with 80% of the ideal experience was vastly more valuable than perfecting it while partners continued losing users on Widget 1.0. We also accepted the cost of maintaining both versions during the transition period.\n\nThe most significant compromise was in drawer implementation. I advocated for contextual drawers that preserved the underlying screen state, but engineering argued that full-screen replacements would be faster to build and generate less code duplication. I conceded — the experience suffered slightly in spatial continuity, but it wasn't a dealbreaker, and the tradeoff bought us weeks of development time.

Impact

  • End-to-end conversion increased by ~20% (measured over first 3 months post-launch, before/after comparison — A/B testing was deemed unnecessary since Widget 1.0 was being deprecated)

  • Page load times decreased by 80%

  • User drop-off decreased by 35%

  • Enabled the launch of Ramp's mobile app using reusable components from the new architecture

  • Created a new user acquisition channel (mobile app) that wouldn't have been possible on the old architecture

Tradeoffs & Reflection

Looking back, I'd push harder for the drawer implementation I originally proposed — the spatial context matters more than I gave it credit for at the time. I'd also invest earlier in dark mode, which became a persistent partner request. The biggest lesson: the UI kit I built as a proof of concept was the single most important artifact in the entire project. It wasn't a deliverable — it was a persuasion tool. It made the abstract tangible and gave stakeholders something to react to. I've since adopted this pattern: when you want to drive change, don't write a deck — build the thing.

Testomonial

"Michał takes full ownership of complex initiatives and drives them forward without needing direction. He balances quality with pragmatism, focuses on real product impact, and works closely with both product and engineering. A highly collaborative designer who consistently delivers high-quality work."

Marek Rycerski

Senior Product Manager

Create a free website with Framer, the website builder loved by startups, designers and agencies.