Topper by Uphold: scaling a crypto on-ramp to $1M revenue
Client
Uphold
Year
2022 - 2024
Project type
B2B/B2B2C Product
Industry
Fintech, Web3, Cryptocurrencies
Website
Tools
Who's Uphold?
Uphold is a multi-asset digital money platform offering financial services to a global market. Uphold's unique ‘Anything-to-Anything’ trading experience enables customers to trade directly between asset classes with embedded payments facilitating a future where everyone has access to financial services.
Serving 180+ countries, across 200+ currencies (traditional and crypto) and commodities with frictionless foreign exchange and cross-border remittance for members around the world. Since its launch in 2015, Uphold has powered more than US$4+ billion in transactions.
The Challenge
Uphold needed to capture a larger share of the B2B and B2B2C market by allowing users to buy crypto without the friction of creating a custodial wallet. The goal was to build a high-conversion, non-custodial on-ramp to compete with giants like MoonPay and Ramp, while navigating some of the strictest compliance requirements in the financial world.
The Impact
Revenue
Generated $1M in revenue within the first 9 months.
Growth
Scaled transaction volume by 100% month-over-month in the first year.
High yeld
Card acceptance rates above 60%, higher than market average.
Market Expansion
Successfully integrated with major partners, moving Uphold firmly into the B2B space.
Technical Resilience
Built a flexible, variable-based design system that survived a full brand overhaul with zero launch delays.
My Role
As the Product Designer, I was responsible for the end-to-end user experience—from defining the initial "white-label" framework to navigating the high-friction compliance landscape and shipping the final branded product.
The Strategy
Designing for "The Resistance"
Unlike standard E-commerce, the "Topper" experience had two major hurdles:
Compliance vs. UX
The Legal team required heavy data collection; I had to find a way to ask for it without losing the user.
Jurisdictions
Different economic and geopolitical areas required different levels of data.
Identity Shifting
We transitioned from a brand-less utility to a distinct B2B and B2B2C product mid-development.
The Friction Paradox
In Fintech, compliance is the enemy of conversion. Our Legal and Compliance teams required deep data points to mitigate risk, but every extra field we added was a potential exit point for the user.
To bridge this gap, I moved away from a "one-size-fits-all" onboarding and developed a Tiered Friction Strategy
The Solution: Progressive Disclosure of Identity
Instead of demanding a passport and a selfie for a $20 transaction, we mapped the UX to the level of risk. This allowed users to "get their feet wet" before committing to a full KYC (Know Your Customer) process.
Tier 1: Low-Volume Entry (The Hook)
For small, one-time purchases, we utilized e-IDV (electronic identity verification). We only requested basic info that could be verified in the background. Result: User reached the "Success" screen in under 2 minutes.
Tier 2: High-Volume Growth (The Commitment)
Once a user crossed a specific lifetime volume threshold, we triggered a Hard IDV. We asked for a physical ID and a live photo. Because the user already had a successful history with Topper, the "Trust Gap" was bridged, and they were more likely to comply.
Tier 3: Professional Trading (The Relationship)
For power users, we introduced a tailored questionnaire to understand their trading background. This wasn't a "form"—it was a conversation about their financial goals.
I focused the UI on "The Why." Instead of just asking for an ID, the interface clearly explained: "To keep your account secure and comply with global regulations, we need a quick photo of your ID."
Building Trust Through Transparency
Money triggers anxiety. To combat this, I implemented three specific "Trust Anchors" throughout the flow:
The Price Lock
A real-time countdown showing exactly how long the quoted crypto price was guaranteed.
Clear Fee Breakdown
No hidden "gas fees" at the end. What you see on screen one is what you pay on the final screen.
Status Feedback
Real-time progress bars during the "Verifying" stage so the user never felt "stuck" in a loading loop.
Engineering a Resilient System
The "Brandless" Beginning
When development on Topper began, the brand didn't exist. There were no colors, no logo, and no established tone of voice. We were building a "utility" that needed to function perfectly before it looked pretty.
I made a strategic architectural decision early on: Build with Variables first, Aesthetics second.
The Technical Strategy: Logic-First Design
Instead of hard-coding hex values into my components, I built the entire UI using a Semantic Token System, using Figma Variables.
Brand-Primary
Referenced the main action color.
Surface-Background
Defined the card and page layers.
Text-Success / Text-Error
Defined the functional feedback colors.
The Great Overhaul
Halfway through the project, the brand identity was finalized. It was a complete departure from our initial "white-label" look. Because of the token-based architecture:
Zero Redesign Time
I didn't have to manually update 100+ screens. I updated the value of the variable in the library.
Consistency
Every button, input field, and status indicator updated instantly across the entire flows.
Developer Alignment
Since the Engineering team was using Uphold’s robust infrastructure, our hand-off was seamless. I had already provided a JSON file with all the variables, making this overhaul seamless by merely updating it.
By leading with a System-first mindset, I ensured that a 100% visual change resulted in minimal delay to the engineering roadmap. This is how we shipped a $1M revenue product on schedule.
Launch, Growth, and The Road Ahead
The "Day 1" Result
Topper launched not just as a standalone tool, but as a critical infrastructure piece for the Web3 ecosystem. By focusing on a "Zero-Friction" redirect model, we ensured that partners could integrate a high-trust payment gateway without the security overhead of a deep widget integration.
Partnership Success
The "Topper" brand was strong enough to stand on its own while being "neutral" enough to live inside diverse gaming and exchange environments.
Scale
Within 9 months, transaction volume was doubling month-over-month, proving that our "Tiered Friction" strategy was successfully converting "Window Shoppers" into "Verified Buyers."
The Reflection: What I Learned
Building a $1M revenue product in a high-stakes environment taught me that Design is a negotiation.
Compliance is a feature. I learned to treat legal requirements not as "roadblocks" but as UX challenges. Designing for trust is just as important as designing for speed.
And that systems save sanity: Our variable-based system wasn't just "clean design". It was a business insurance policy. It allowed us to rebrand mid-flight without moving the launch date.
