Guarda Wallet

Mobile redesign and Sketch-to-Figma migration for a multi-currency wallet with 400+ assets.

Year 2021
Category Web3
Role Lead Product Designer
Outcome Atomic System & Redesigned Mobile Flows
Contract Project

Это был контрактный проект по комплексному редизайну мобильного приложения (iOS & Android) и миграции дизайн-системы.

Актуальный интерфейс и дизайн-систему можно протестировать непосредственно в реальном приложении: guarda.com ↗

~200 disconnected Sketch files, visual debt, and hybrid-framework discrepancies between iOS and Android.

Core Challenge: Build a unified Figma system and rebuild Swap, Send and Receive flows within hybrid rendering limits.

Atomic system first (styles → tokens → atoms → screens), platform-aware iOS/Android layers, core flows rebuilt on tokens.

Asset overview screens present multi-chain balances, transaction history, and direct send/exchange actions with comprehensive fee previews. Transfer flows offer separate destination tabs for external addresses and owned wallets, supported by quick-amount presets (MIN, HALF, ALL), an undo cancellation window during dispatch, and verifiable transaction receipts with explorer hash actions.

The Problem Space

~200 disconnected Sketch files, visual debt, and hybrid-framework discrepancies between iOS and Android.

Core Challenge: Build a unified Figma system and rebuild Swap, Send and Receive flows within hybrid rendering limits.

Solution & Architecture

Atomic system first (styles → tokens → atoms → screens), platform-aware iOS/Android layers, core flows rebuilt on tokens.

Core Scenarios

Asset overview screens present multi-chain balances, transaction history, and direct send/exchange actions with comprehensive fee previews. Transfer flows offer separate destination tabs for external addresses and owned wallets, supported by quick-amount presets (MIN, HALF, ALL), an undo cancellation window during dispatch, and verifiable transaction receipts with explorer hash actions.

Key Engineering & Design Trade-offs

CHOICE Unified Cross-Platform Tokens

Reduced redundant design maintenance by 50% across two separate engineering teams.

CHOICE Reversible Transaction Window

Significantly decreased customer support tickets caused by mistyped recipient tags.

CHOICE Atomic Component Hierarchy

Allowed fast prototyping of new currency integration views without breaking baseline styles.

Transformation

BEFORE
Legacy chaos imported as-is: conflicting button variants, detached shapes, iOS/Android devs guessing differently.
AFTER
Single token source of truth, strict build order, separate platform pages with shared core styles.

Outcome & Measured Impact

200+ detached elements consolidated into ~40 components — handoff ambiguity gone, feature delivery faster.

FigmaDesign SystemAtomic Design