Introduction
IG, a global trading platform, took a major step by launching its first fully licensed crypto offering. Previously, crypto trading was enabled only through a partnership with Uphold, but with regulatory licensing secured, the goal shifted to delivering a deeply integrated solution powered by a white-label backend from Coinbase.
The challenge was to move quickly, design smartly, and build a smooth user experience despite tight technical constraints and a product still evolving rapidly. I had to adapt designs to Coinbase’s limitations, align with IG’s ongoing rebrand, and seamlessly blend native app screens with embedded webviews—creating a cohesive journey users could trust and enjoy.
My focus areas included designing the staking feature, the activity tab for transparent transaction tracking, and the Explore page, allowing users to discover assets categorized by themes like AI and Layer 1 blockchains. This case study shares the design thinking, collaboration, and competitive insights that shaped a trusted, user-centric crypto product at IG Group.
I followed Double Diamond method.
Crypto Staking Feature
Discover: Understanding the Stakeholders’ Needs
Joining IG Group’s ambitious initiative to build a licensed crypto offering from scratch, my focus was on creating a staking solution that would resonate with both beginners and seasoned crypto users. Through stakeholder workshops, user interviews, and market research, I uncovered critical pain points around staking complexity - users were often confused by reward calculations, unclear fees, and locking periods. I also studied leading platforms like Coinbase and Binance not just for features but for UX insights - how they display APYs, communicate bonding periods, and handle unstaking flows. This phase was about deeply understanding what would build trust and clarity for our users.
Define: Framing the Challenge
With extensive insights, the problem became clear: how to design a staking experience that is simultaneously intuitive, transparent, and trustworthy? The stakes were high because users entrust us with assets for locked periods. My goal was to simplify staking increments, demystify rewards via clear APY displays, and introduce a seamless, guided stake/unstake journey that educates users without overwhelming them.
Develop: Designing a Clear and Engaging Staking Flow Within Constraints
Working within the Coinbase white-label backend constraints, the staking flow was designed to translate complex blockchain processes into an intuitive user experience:
Asset Discovery & Engagement
Users see live asset prices, trends, and staking APY info on asset pages.
Clear CTAs like “Buy and stake now” encourage seamless transition to staking.
Buying Flow
Simple input with quick-select amount buttons and Apple Pay integration.
Confirmation screen immediately offers to stake purchased tokens, maintaining engagement.
Staking/Unstaking Interface
Dual-tab design for staking and unstaking.
Numeric input and slider control for partial staking/unstaking, respecting backend rules
Real-time display of available balances, staking rates, earnings, and network wait times.
Preview screens summarize key details before confirmation.
Success and Feedback
Bold success screens with clear confirmation and next steps.
Integrated progress bars and lifetime earnings shown on asset detail pages.
Throughout development, close collaboration with engineering ensured UI reliability and graceful handling of backend pending states and locked balances.
Deliver: Launching a Cohesive and Transparent Staking Experience
The feature is currently in development. It offers a frictionless and transparent staking experience:
Clear User Guidance
Validation prevents invalid inputs (e.g., non-supported increments).
Informative tooltips clarify earnings, fees, and wait times.
Real-Time Status and Notifications
Live updates reflect bonding/unbonding states.
Email and push notifications keep users informed during key stages.
Positive Early Feedback
Users appreciated clarity around staking mechanics and transparent reward calculations.
The UI reduced anxiety around locked periods.
Scalability and Future-Proofing
Modular design supports adding assets and adapting to Coinbase API improvements.
Strong foundation for continuous feature enhancements.
Explore Page in Crypto Account
Discover: Uncovering User Goals and Market Gaps
As part of IG Group’s pioneering crypto offering, it became apparent early on that staking alone wouldn’t meet user needs without an engaging discovery experience. I led research into how users explore crypto assets before staking or trading. Users wanted a simple yet powerful Explore page where they could:
Browse assets grouped by familiar categories like AI, Layer 1 blockchains, DeFi, NFTs, etc.
Identify trending or "top mover" tokens easily to make informed staking decisions.
Quickly understand which assets are stakeable and see live APYs without digging deep.
Mapping out competitor approaches (Binance’s Discover tab, Coinbase’s Asset Lists, Crypto.com’s Market Movers) revealed that clear categorization and real-time performance indicators are essential to reduce decision fatigue. This phase was about creating a product entry-point that fuels exploration and confidence.
Define: Framing the Explore Page Challenge
The problem was clear: Without an intuitive Explore page, users risked missing valuable staking opportunities or becoming overwhelmed by raw market data. The goal was to design a user-friendly dashboard:
That neatly categorizes assets into thematic buckets for quicker navigation.
Highlights top movers with clear indicators of price movement and staking availability.
Seamlessly links to staking flows from each asset row, minimizing friction.
Develop: Crafting an Intuitive Explore Experience
Collaborating with product and data teams, I designed an Explore page UI with:
Categorized asset rows by theme, showing staking eligibility badges.
A “Top Movers” section to spotlight recent gainers/losers with percentage change and price.
Clear APY % displayed inline for stakeable assets.
Interaction design allowing users to click any asset to open detailed token pages with staking options or trading flows.
Filter tools enabling sorting by category, market cap, and staking yield.
Prototyping and usability tests led to adjustments in badge visibility and category grouping to align with mental models and user expectations.
Deliver: Integrated Explore Page Driving Engagement
The Explore page now serves as the gateway for IG Group’s crypto product users to discover, evaluate, and act on staking opportunities swiftly. Its clean, category-centric layout and live data promote exploration while supporting staking decisions seamlessly. Early engagement metrics indicate improved user sessions length and staking conversion rates, validating the design approach.
Explore Page in Crypto Account
Discover: Uncovering User Goals and Market Gaps
As part of IG Group’s pioneering crypto offering, it became apparent early on that staking alone wouldn’t meet user needs without an engaging discovery experience. I led research into how users explore crypto assets before staking or trading. Users wanted a simple yet powerful Explore page where they could:
Browse assets grouped by familiar categories like AI, Layer 1 blockchains, DeFi, NFTs, etc.
Identify trending or "top mover" tokens easily to make informed staking decisions.
Quickly understand which assets are stakeable and see live APYs without digging deep.
Mapping out competitor approaches (Binance’s Discover tab, Coinbase’s Asset Lists, Crypto.com’s Market Movers) revealed that clear categorization and real-time performance indicators are essential to reduce decision fatigue. This phase was about creating a product entry-point that fuels exploration and confidence.
Define: Framing the Explore Page Challenge
The problem was clear: Without an intuitive Explore page, users risked missing valuable staking opportunities or becoming overwhelmed by raw market data. The goal was to design a user-friendly dashboard:
That neatly categorizes assets into thematic buckets for quicker navigation.
Highlights top movers with clear indicators of price movement and staking availability.
Seamlessly links to staking flows from each asset row, minimizing friction.
Develop: Crafting an Intuitive Explore Experience
Collaborating with product and data teams, I designed an Explore page UI with:
Categorized asset rows by theme, showing staking eligibility badges.
A “Top Movers” section to spotlight recent gainers/losers with percentage change and price.
Clear APY % displayed inline for stakeable assets.
Interaction design allowing users to click any asset to open detailed token pages with staking options or trading flows.
Filter tools enabling sorting by category, market cap, and staking yield.
Prototyping and usability tests led to adjustments in badge visibility and category grouping to align with mental models and user expectations.
Deliver: Integrated Explore Page Driving Engagement
The Explore page now serves as the gateway for IG Group’s crypto product users to discover, evaluate, and act on staking opportunities swiftly. Its clean, category-centric layout and live data promote exploration while supporting staking decisions seamlessly. Early engagement metrics indicate improved user sessions length and staking conversion rates, validating the design approach.
Explore Page in Crypto Account
Discover: Uncovering User Goals and Market Gaps
As part of IG Group’s pioneering crypto offering, it became apparent early on that staking alone wouldn’t meet user needs without an engaging discovery experience. I led research into how users explore crypto assets before staking or trading. Users wanted a simple yet powerful Explore page where they could:
Browse assets grouped by familiar categories like AI, Layer 1 blockchains, DeFi, NFTs, etc.
Identify trending or "top mover" tokens easily to make informed staking decisions.
Quickly understand which assets are stakeable and see live APYs without digging deep.
Mapping out competitor approaches (Binance’s Discover tab, Coinbase’s Asset Lists, Crypto.com’s Market Movers) revealed that clear categorization and real-time performance indicators are essential to reduce decision fatigue. This phase was about creating a product entry-point that fuels exploration and confidence.
Define: Framing the Explore Page Challenge
The problem was clear: Without an intuitive Explore page, users risked missing valuable staking opportunities or becoming overwhelmed by raw market data. The goal was to design a user-friendly dashboard:
That neatly categorizes assets into thematic buckets for quicker navigation.
Highlights top movers with clear indicators of price movement and staking availability.
Seamlessly links to staking flows from each asset row, minimizing friction.
Develop: Crafting an Intuitive Explore Experience
Collaborating with product and data teams, I designed an Explore page UI with:
Categorized asset rows by theme, showing staking eligibility badges.
A “Top Movers” section to spotlight recent gainers/losers with percentage change and price.
Clear APY % displayed inline for stakeable assets.
Interaction design allowing users to click any asset to open detailed token pages with staking options or trading flows.
Filter tools enabling sorting by category, market cap, and staking yield.
Prototyping and usability tests led to adjustments in badge visibility and category grouping to align with mental models and user expectations.
Deliver: Integrated Explore Page Driving Engagement
The Explore page now serves as the gateway for IG Group’s crypto product users to discover, evaluate, and act on staking opportunities swiftly. Its clean, category-centric layout and live data promote exploration while supporting staking decisions seamlessly. Early engagement metrics indicate improved user sessions length and staking conversion rates, validating the design approach.
