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).
02
Design approach
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.
Visual exploration of the card module
GnosisPay Integration
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.