Oscar Lozano

Design Leadership

Oscar Lozano

Design Leadership

Oscar Lozano

Design Leadership

Work

Gnosis

Metri – Bringing a Neobank Experience to Web3

Role

Product Design
Brand Design

Year

2024

Metri is a blockchain-based consumer wallet built on Gnosis Chain, designed with the ambition to serve as the de-facto interface for interacting with the Gnosis ecosystem, including GnosisPay and Circles. As the central touchpoint for these two systems, Metri allows users to manage multi-currency stablecoins, handle real-world payments, and participate in the Circles decentralised social currency system, all within a seamless, user-friendly experience.

Currently in closed beta, Metri’s user-first design bridges the gap between traditional banking and decentralised networks, opening the door for accessible and permisionless financial services.

01

The problem

Many users, especially in emerging markets, face challenges when trying to access reliable, affordable financial services. These issues include:

  • Traditional banking systems, especially in high-inflation economies, are unable to provide stable savings options.

  • Blockchain technology, while offering solutions like stablecoins and decentralised finance, has historically been too complex for mainstream users to adopt.

  • Users needed a single platform to manage multiple features, like crypto savings and real-world spending.

Metri was designed to tackle these challenges by providing:

  • A stable, inflation-resistant savings tool through multi-currency stablecoins.

  • Simplified access to blockchain’s capabilities, removing the technical barriers that have limited mainstream adoption.

  • A unified interface that serves as the primary touchpoint for both GnosisPay (for real-world payments) and Circles (for trust-based social currency and universal basic income).

✦ Key Insight ✦

Users in volatile economies are looking for stability and familiarity in their financial tools. Metri’s role as the central interface for GnosisPay and Circles positions it as a powerful alternative to traditional banking, making it easier for users to spend, save, and participate in permissionless economies without needing to navigate multiple platforms or interfaces.

✦ Key Insight ✦

Users in volatile economies are looking for stability and familiarity in their financial tools. Metri’s role as the central interface for GnosisPay and Circles positions it as a powerful alternative to traditional banking, making it easier for users to spend, save, and participate in permissionless economies without needing to navigate multiple platforms or interfaces.

✦ Key Insight ✦

Users in volatile economies are looking for stability and familiarity in their financial tools. Metri’s role as the central interface for GnosisPay and Circles positions it as a powerful alternative to traditional banking, making it easier for users to spend, save, and participate in permissionless economies without needing to navigate multiple platforms or interfaces.

02

Design approach

As a central interface for the Gnosis ecosystem, Metri required a user-centric design that simplified advanced blockchain features into a neobank-like experience. Since the app is currently in closed beta, our approach focused on creating a solid foundation for future growth while keeping key features flexible for further development and user feedback. Additionally, Metri was developed as a PWA, prioritising accessibility, performance, and scalability while delivering a native app-like experience.

1. Ideation and Wireframing
In the early design stages, we sketched wireframes that emphasised:

  • Multi-Stablecoin Management
    A clean dashboard where users could view balances in USDC.e, xDAI, EURe, and GBPe. This made it easy to manage and switch between different tokens, even those pegged to the same currency.

  • Seamless Interaction with GnosisPay and Circles
    Since Metri was the main interface, the design needed to effortlessly guide users through tasks like topping up their GnosisPay Card, making payments, and interacting with Circles trust networks.

  • Moving Money
    The design featured intuitive flows for sending funds to contacts, receiving payments, and withdrawing funds via GnosisPay. We prioritised simplifying the transaction process by reducing the steps required for each action, with easy-to-understand prompts and confirmations.

Given that the app is still in its closed beta phase, these features continue to evolve based on user feedback and usability testing, ensuring Metri remains adaptable and responsive to user needs.

As a central interface for the Gnosis ecosystem, Metri required a user-centric design that simplified advanced blockchain features into a neobank-like experience. Since the app is currently in closed beta, our approach focused on creating a solid foundation for future growth while keeping key features flexible for further development and user feedback. Additionally, Metri was developed as a PWA, prioritising accessibility, performance, and scalability while delivering a native app-like experience.

1. Ideation and Wireframing
In the early design stages, we sketched wireframes that emphasised:

  • Multi-Stablecoin Management
    A clean dashboard where users could view balances in USDC.e, xDAI, EURe, and GBPe. This made it easy to manage and switch between different tokens, even those pegged to the same currency.

  • Seamless Interaction with GnosisPay and Circles
    Since Metri was the main interface, the design needed to effortlessly guide users through tasks like topping up their GnosisPay Card, making payments, and interacting with Circles trust networks.

  • Moving Money
    The design featured intuitive flows for sending funds to contacts, receiving payments, and withdrawing funds via GnosisPay. We prioritised simplifying the transaction process by reducing the steps required for each action, with easy-to-understand prompts and confirmations.

Given that the app is still in its closed beta phase, these features continue to evolve based on user feedback and usability testing, ensuring Metri remains adaptable and responsive to user needs.

As a central interface for the Gnosis ecosystem, Metri required a user-centric design that simplified advanced blockchain features into a neobank-like experience. Since the app is currently in closed beta, our approach focused on creating a solid foundation for future growth while keeping key features flexible for further development and user feedback. Additionally, Metri was developed as a PWA, prioritising accessibility, performance, and scalability while delivering a native app-like experience.

1. Ideation and Wireframing
In the early design stages, we sketched wireframes that emphasised:

  • Multi-Stablecoin Management
    A clean dashboard where users could view balances in USDC.e, xDAI, EURe, and GBPe. This made it easy to manage and switch between different tokens, even those pegged to the same currency.

  • Seamless Interaction with GnosisPay and Circles
    Since Metri was the main interface, the design needed to effortlessly guide users through tasks like topping up their GnosisPay Card, making payments, and interacting with Circles trust networks.

  • Moving Money
    The design featured intuitive flows for sending funds to contacts, receiving payments, and withdrawing funds via GnosisPay. We prioritised simplifying the transaction process by reducing the steps required for each action, with easy-to-understand prompts and confirmations.

Given that the app is still in its closed beta phase, these features continue to evolve based on user feedback and usability testing, ensuring Metri remains adaptable and responsive to user needs.

2. Challenges of Circles Integration
The integration of Circles into Metri’s interface was one of the most complex elements. Circles operates on a trust-based currency model where users receive CRC (Circles tokens) as part of a universal basic income system. This required:

  • Explaining Trust Networks
    Circles relies on trust relationships for currency transfers. We had to design a flow that visually demonstrated how trust connections enabled transactions while avoiding overwhelming the user with jargon.

  • Demurrage Mechanism
    Circles’ built-in demurrage discourages hoarding by reducing balances over time. We added clear visual indicators and prompts to explain why users’ CRC balances were shrinking and encourage them to spend within the network.

  • Unified User Journey
    Since Metri serves as the primary touchpoint, users needed to be able to seamlessly interact with Circles without feeling they were using a separate system. The challenge was to unify Circles and GnosisPay interactions under one cohesive interface​​.

3. Challenges and Limitations of Designing a PWA

I could write an entire blog post around this, but designing Metri as a PWA presented specific challenges that impacted both UI and UX. PWAs offer flexibility and accessibility but lack some capabilities of native apps, necessitating careful design to maintain a high-quality experience. Needless to say, much of the credit here goes to the frontend team. The primary challenges and solutions were:

  • Cross-Platform Consistency
    PWAs must work seamlessly across various browsers and devices, each with distinct rendering engines and performance profiles. Unlike native apps, PWAs can’t rely on OS-level integration.
    Solution: We applied responsive design principles, creating flexible layouts that adapt to different screen sizes and resolutions. Optimising lightweight assets and prioritising performance ensured fast load times, especially for mobile browsers with lower processing power.

  • UI Fluidity and Native-Like Feel
    PWAs do not inherently support the same fluid transitions, animations, or native gestures that mobile users expect, which can reduce the perceived quality of the experience.
    Solution: We used modern browser APIs for animations (eg, requestAnimationFrame(), will-change), web assembly for performance-critical tasks, and designing subtle visual cues and feedback (eg, animations, microinteractions) to simulate native-like behaviour.

  • Performance in Low Bandwidth Conditions
    Slow internet connections can significantly impact performance, especially in critical financial operations like money transfers.
    Solution: By optimising asset sizes, employing lazy loading for non-essential components, and using service workers for offline caching, we reduced load times. Service workers ensured that essential content (eg, transaction history, balances) was cached locally, improving the app's usability even in low-connectivity environments.

  • Browser-Specific Inconsistencies
    Browser support for PWA features (e.g., push notifications, offline storage) varies, with some browsers lacking full PWA functionality.
    Solution: We conducted thorough cross-browser testing and applied progressive enhancement techniques. This ensured the app delivered the best possible experience regardless of the browser's limitations. For instance, push notifications and offline functionality were tailored to take advantage of features supported by each browser.

GnosisPay Integration

The GnosisPay Card allows users to spend their stablecoin balances in real-world transactions. As the central interface for GnosisPay, Metri ensured a seamless payment experience:

  • Topping Up and Conversion
    Users could easily top up their GnosisPay Card from Metri, which automatically handled the conversion of stablecoins to fiat at the point of sale.

  • 1% Cashback Mechanism
    The Circles system offers users a 1% cashback-like mechanism when they transact with CRC (Circles tokens). This cashback isn’t automatically applied but can be claimed by users as part of their rewards for network activity, giving them an incentive to spend CRC on their daily purchases .

  • Unified Interface
    Whether users were paying with stablecoins, topping up their card, or viewing transaction history, the experience was seamless and unified under Metri’s interface.

The initial goal of this project was to redesign the web checkout. To gain insight into the issues and pain points of our current checkout, we conducted 4 months of user research. Our research findings supported the insights we had previously gathered from data analysis. This provided us with a unique opportunity to completely revamp the checkout experience for our users. However, after this research, it was decided that we would shift our focus to building an iOS app. This change in direction allowed us to apply our research findings and utilise native features to deliver a modern checkout experience for our users.

Visual Design and High-Fidelity Prototyping

The final design moved into high-fidelity prototyping, with an emphasis on:

  • Clean, Modern UI
    We used a clean design language with a focus on simplicity and accessibility. Visuals were designed to reinforce trust and ease of use.

  • Seamless User Flows
    Every interaction, from making payments with GnosisPay to using Circles, had smooth transitions and clear feedback loops, ensuring that users felt confident using advanced blockchain features without technical knowledge.

  • Microinteractions
    Feedback animations for key actions, such as adding funds to the GnosisPay Card or making Circles transactions, reassured users and enhanced the overall experience​.

Metri’s design process showcased how a unified interface can simplify the complexities of blockchain while making advanced financial tools accessible to everyday users. As the main touchpoint for both GnosisPay and Circles, Metri provides a seamless experience that bridges traditional finance and decentralised networks. By focusing on usability, visual clarity, and strong user research, we delivered a product that empowers users in both developed and emerging markets.

Oscar Lozano

©2023

Oscar Lozano

©2023

Oscar Lozano

©2023