Client: Mask Network Project Type: DeFi Savings Protocol Integration - UI/UX Design Platform: Browser Extension (Twitter/Facebook Integration) Timeline: June 2022 Role: UI/UX Designer Status: Successfully Completed & Paid Design Tools: Figma (mockups, prototypes, design system)

Mask Network Browser Extension - mStable (mUSD, Save) - Ethereum - Polygon - Web3 Wallet Integration - Figma - Design Systems

Integrated mStable under the Savings section on the entry page.

This case study documents the design of a mStable savings protocol integration for Mask Network’s browser extension. The project focused on creating a clean, intuitive interface for users to interact with mStable’s stablecoin AMM (Automated Market Maker) directly within Twitter and Facebook.

The design challenge was to simplify complex DeFi savings mechanics for mainstream social media users while maintaining the sophistication expected by experienced crypto investors. By designing a multi-tiered interface architecture—including an entry page and protocol-specific supply views—the project made mStable’s yield opportunities accessible and easy to use.

Working within Mask Network’s design system and incorporating mStable’s unique mechanics, the design delivered an intuitive, user-friendly experience that fully met all project requirements.

Integrating mStable—one of the leading stablecoin yield protocols with a TVL of over $140M (as of December 2021)—significantly expanded Mask Network’s DeFi ecosystem. The addition introduced a proven, trusted yield source directly within social platforms like Twitter and Facebook, attracting both new users and existing DeFi participants seeking safer, stablecoin-based returns. By embedding mStable’s functionality into Mask’s interface, the project not only increased user engagement and transaction volume but also strengthened Mask’s positioning as a credible SocialFi gateway—bridging mainstream users to decentralized finance without leaving their familiar environments.

Mask Network aimed to expand its DeFi offerings by integrating mStable, enabling users to earn yield on mUSD directly within social media platforms like Twitter and Facebook.

The challenge was to simplify complex DeFi mechanics—such as stablecoin AMM operations, yield calculations, and risk factors—into a clear, intuitive interface that could be easily understood and used by mainstream social media users without prior DeFi experience.

December 2021 represented a critical moment in DeFi evolution. The Total Value Locked (TVL) across DeFi protocols had reached approximately $100+ billion, approaching the ecosystem's all-time high from earlier in 2021. However, user experience remained a significant barrier to mainstream adoption.

DeFi Maturity vs. UX Gap: While DeFi protocols had proven their technical viability, the average DeFi application had UX maturity somewhere between "developer-centered" and "user-hostile," rarely achieving true user-centered design.

Yield Aggregator Competition: Platforms like Yearn Finance and Harvest Finance had demonstrated demand for automated yield optimization, but most required users to navigate complex standalone interfaces separate from their daily online activities.

Stablecoin Fragmentation: Multiple USD stablecoins (USDC, USDT, DAI, sUSD) created fragmented liquidity and yield opportunities. mStable's solution—pooling stablecoins into mUSD—addressed this fragmentation but required user education.

Regulatory Scrutiny: November 2021 brought increased regulatory attention to DeFi, making trust signals and clear risk communication essential design elements.

Social DeFi Emergence: Mask Network's vision of "SocialFi"—integrating DeFi directly into social platforms—was gaining traction as a path to mainstream adoption.

The design needed to serve multiple user personas with divergent needs:

Intimidated by standalone DeFi platforms requiring wallet setup, gas fees, and protocol navigation

Needed simple explanations of yield sources and risk levels

Wanted to explore DeFi without leaving familiar social media environments

Required trust signals to overcome skepticism about "too good to be true" yields

Sought efficient access to multiple yield opportunities from a single interface

Needed detailed APY comparisons, TVL data, and risk metrics

Valued time savings from aggregated protocol access

Required transparency about protocol mechanics and smart contract interactions

Constantly monitored APY fluctuations across protocols

Needed quick reallocation capabilities to capture highest yields

Valued data visualization for historical yield trends

Required mobile-friendly interfaces for on-the-go portfolio management

Design System Adherence: The interface needed to maintain visual and interaction consistency with Mask Network's existing plugins while creating a new category—savings aggregation—that didn't previously exist in their ecosystem.

Multi-Protocol Architecture: Unlike single-protocol integrations (SuperRare, OpenSea), this design needed to accommodate multiple protocols with different:

Token structures (mUSD, aTokens, cTokens, yTokens)

Yield mechanisms (lending, liquidity provision, meta-stablecoin interest)

Risk profiles (smart contract risk, impermanent loss, protocol-specific risks)

User flows (deposit, withdraw, claim, stake)

Progressive Disclosure Challenge: The interface needed to serve both beginners and experts without overwhelming the former or frustrating the latter—a classic progressive disclosure problem intensified by DeFi's inherent complexity.

Social Proof Integration: Following Mask Network's philosophy of social finance, the design required integrated sharing features with messaging that encouraged viral spread without triggering regulatory concerns.

Figma Reference Constraint: Mask Network provided Figma mockups as reference, specifying that designs "does not need to be 1 to 1 but should follow the flow"—requiring interpretation and adaptation rather than pixel-perfect replication.

Based on Figma references and research insights, I created a three-tier information architecture for the mStable integration.

The entry page served as Mask Network’s hub for all DeFi actions, with “Savings” as a key feature.

Clear navigation with Swap, Trade, Bridge, and Savings options

Visual hierarchy emphasizing stability and trust

Subtle educational hints for DeFi newcomers

Wallet status (network and balance) always visible

This aligned with Mask’s goal of making Web3 accessible directly within Twitter and Facebook.

The Savings page highlighted mStable’s “Save” product within a familiar DeFi interface.

Showed protocol name, APY, TVL, and risk level

Clear distinction between stablecoin and volatile assets

Quick “Supply” action for deposits

Optional filters: by APY, risk, or asset type

Contextual learning: “Earn passive income by supplying crypto assets”

A focused interface for depositing into mStable Save:

Select Asset: Choose USDC, DAI, USDT, or sUSD

Convert to mUSD: Abstracted minting process for simplicity

Deposit & Yield Preview: Show current APY and projected returns

Confirm Transaction: Summarize flow with gas estimate and yield breakdown

Additional expandable sections revealed:

Stablecoin composition of mUSD

Pool metrics: TVL, rebalancing, and yield sources

The visual design aimed to balance DeFi sophistication with social media accessibility, making financial data approachable yet credible.

Protocol cards: Rounded corners, soft shadows, consistent height, hover elevation.

Whitespace: Generous spacing for reduced cognitive load.

Focused on clarity, trust, and flow for DeFi transactions within social platforms.

From Twitter/Facebook → Mask Icon → “Savings” → Overview → Protocol Page Breadcrumbs enabled easy backtracking (Entry › Savings › mStable).

Dropdown for APY/TVL/Risk + tappable chips (Stablecoin, Volatile, High APY). Active filters shown as removable pills.

Prominent input field with Max option

Real-time yield, gas, and conversion preview

Review step: 1000 USDC → mUSD → Save → 8.5% APY

Smooth transaction feedback, success animation, instant balance update

“I just deposited [amount] into [protocol]. Will I make money this week?” Triggered post-deposit, milestones, or yield summaries. Editable, emoji-supported, shareable to Twitter or clipboard.

Real-time balance checks

High gas fee alerts (>2% of deposit)

Network mismatch prompts

Clear retry paths on failure

Mockups: Entry, overview, and supply pages (mStable)

Prototype: Full Figma flow with all states and interactions

Components: Cards, APY blocks, filters, tooltips, modals

Flows: Journey maps, decision trees, and error paths

Specs: API data points, wallet integration, contract refs

Copy: Tooltips, errors, disclosures, and sharing text

The mStable savings integration met all requirements: ✓ Interactive prototype demonstrating full DeFi aggregation ✓ Complete design system ready for development ✓ Clean, accessible UX praised for clarity and structure

✅ Project completed and payment received from Mask Network

DeFi Aggregation Framework Established Mask Network’s first multi-protocol savings interface—introducing reusable card layouts, filtering logic, and progressive disclosure patterns later adopted across products.

Simplified DeFi Accessibility Translated complex yield mechanisms (mUSD, AMMs, multi-yield sources) into clear, social-friendly interactions, helping users explore DeFi without leaving Twitter or Facebook.

Trust & Transparency Integrated TVL, audit links, and risk badges to counter skepticism—prioritizing education and safety over hype.

Scalable Architecture Built adaptable design logic that fit mStable’s unique AMM while staying consistent with Aave and Compound, easing future protocol additions.

SocialFi Integration Introduced shareable post-deposit messages and subtle social proof, aligning with Mask Network’s SocialFi mission and fostering organic community engagement.

Progressive Disclosure: Balanced beginner simplicity with expert depth.

Web2 UX in Web3: Applied fintech clarity (cards, numbers, trust cues) to DeFi.

Embedded Education: Replaced docs with contextual tooltips and help layers.

Strengthened portfolio with complex financial UX design

Validated technical collaboration through successful bounty completion

Built long-term ties with Mask Network and DeFi community

Refined expertise in multi-protocol system design and architecture

The mStable savings integration marked Mask Network’s first multi-protocol DeFi aggregation interface—laying the groundwork for future yield expansion. By implementing a three-tier information architecture (entry page, aggregated overview, and protocol-specific flows), the design made DeFi yield farming approachable for social media users while preserving the depth expected by experienced investors.

The interface proved that DeFi complexity can be simplified through progressive disclosure, bold data visualization, transparent communication, and contextual learning. Prioritizing APY clarity, risk awareness, and trust over hype helped build user confidence during a skeptical DeFi phase.

Ultimately, the project advanced Mask Network’s “SocialFi” vision—embedding Web3 finance directly into social platforms. Users could compare yields, explore stablecoin products, and deposit into protocols like Aave or Yearn without leaving Twitter or Facebook.

By meeting users where they already are, this integration validated a key principle: the future of DeFi lies not in migration, but in seamless coexistence—where earning yield feels as natural as engaging with a post.