Loading...

Back to home

Guarda Wallet

Redesign of popular non-custodial crypto wallet.

Context & Problem

Guarda Wallet is a popular non-custodial cryptocurrency wallet supporting multiple platforms (Web, Desktop, Mobile). Over time, the product had accumulated significant technical debt in its design. The interface became cluttered, the user flow for executing transactions felt confusing, and the overall look and feel no longer matched the standards of modern crypto applications.

Furthermore, the existing design files were stored in Sketch without a proper, unified design system, which slowed down the development process and led to inconsistencies across different platforms.

The Process: From Sketch to Figma

One of the foundational steps in this redesign was migrating the entire workspace from Sketch to Figma. This was not just a copy-paste job; it was a complete overhaul of the design system.

  • Component Audit: We audited all existing Sketch components to identify redundancies and inconsistencies.
  • Figma Design System: Created a robust, atomic design system in Figma. We established local variables for colors, typography, and spacing to ensure a single source of truth.
  • Auto Layouts & Variants: All migrated components were rebuilt using Figma's advanced Auto Layout and interactive variants, significantly speeding up the prototyping phase.
  • Synchronization: Aligned the new Figma component library with the developers' React component library to ensure pixel-perfect and fast handoffs.

UX/UI Redesign

With a solid design system in place, we focused on refining the user experience. The primary goal was to make asset management, staking, and exchange processes intuitive for both newcomers and advanced users.

  1. Simplified Dashboard: Redesigned the main dashboard to provide a clear overview of the portfolio balance, recent transactions, and market trends at a glance.
  2. Frictionless Exchange: Optimized the flow for buying and exchanging cryptocurrencies, reducing the number of steps and presenting fees and rates transparently.
  3. Modern Aesthetics: Switched to a cleaner, dark-mode focused aesthetic (with light mode support) featuring subtle gradients, better typography, and polished iconography.

Result

The redesign successfully breathed new life into Guarda Wallet. The new interface is not only visually appealing but also significantly improves user retention by simplifying complex crypto operations.

Internally, the transition to Figma and a structured design system drastically reduced the time-to-market for new features and minimized misunderstandings between the design and engineering teams.

Did you find this case study interesting?

Your feedback helps me improve my work.

Discuss Project