Ewally · Case Study
Digital wallet
with Pix.
A Material 3-based wallet experience designed for everyday financial actions, with Pix at the center of the journey.
Fintech
Mobile UI
Pix
Material 3
01 — The Challenge
A wallet without a clear interaction model.
Ewally needed a mobile wallet that made Pix feel native, not an afterthought added to a banking interface. The challenge was designing a financial app where everyday actions (send, receive, pay) are fast and always one tap away.
⊘
No interaction hierarchy
Key flows like Pix were buried under generic navigation patterns.
⊡
Inconsistent visual language
Screens lacked cohesion — each felt disconnected from the next.
⊛
First-use friction
New users struggled to find the most important actions without onboarding.
02 — What I Designed
Four connected flows, one coherent experience.
The design focused on four core areas: a balance-first home, a dedicated Área Pix, card management, and a clear transaction extract.
01
Home · Balance & Services
Balance visibility + quick-action row gives instant access to Pix, payments, and transfers. Dark navy header creates visual hierarchy over light content.
02
Área Pix · Action Hub
A dedicated Pix section with 6 actions: Transfer, Receive, Charge, Extract, Keys, and Schedule. Dark-themed for immediate tonal differentiation.
03
Cards · Físico + Virtual
Two cards (Físico and Virtual) sharing the **** 8542 suffix — a real product decision showing multiple card states under one account.
04
Extrato · Transaction History
Filtered extract with Pix, Card, and Boleto chips. Clean list with semantic color coding and real transaction metadata.
03 — Pix-First Design
Pix is not a feature. It is the default.
Every entry point in the app leads to Pix. The Área Pix shortcut sits at the first position in the home services row. The center nav tab is permanently reserved for Pix. And the confirmation flow completes in two taps.
Área Pix first in the home services row
Center bottom nav tab reserved for Pix
2-step confirm (recipient → amount → confirm)
QR scan reachable from Área Pix at any screen
04 — Navigation
A 5-tab nav where Pix always floats above.
The bottom navigation uses the M3 floating indicator pattern for the center Pix tab a raised circular button that breaks the nav bar baseline, commanding attention without disrupting flow.
M3 Floating Indicator
Center tab breaks the nav baseline with a raised circle — M3's active indicator adapted as a persistent Pix shortcut.
Muted inactive tabs
Four standard tabs use the M3 indicator pill for the active state. Inactive tabs at low contrast reduce visual noise.
05 — Material 3 in Product
M3 as a practical foundation, not a template.
Material 3 provided the structural grammar, tonal surfaces, type scale, component patterns, and elevation, while Ewally's visual identity (navy header, blue accent, Rubik) made every screen distinctly product-native.
Headline
Body text
Label
Rubik Type Scale
M3 type scale mapped to Rubik for product hierarchy.
•••• •••• •••• 8542
Filled Cards
M3 filled card for wallet cards and transaction rows.
Todos
Pix
Cartão
Filter Chips
M3 filter chips for extract and Pix action selection.
06 — Key UI Patterns
Patterns that make the app feel cohesive.
Olá, João
R$ 10.980,00
Seus cartões
Dark header · Light content split
M3 tonal surface hierarchy: dark navy for primary financial context, transitioning to a white body for cards and content.
Transferir
Receber
Cobrar
Extrato
Chaves
Agendar
Pix action grid
6-action 3×2 grid in the Área Pix dark sheet. Each cell uses a tinted icon over an M3 tonal container background.
Todos
Pix
Cartão
João Silva
+R$ 500,00
Netflix
-R$ 44,90
Conta de luz
-R$ 187,50
Transaction chips + list
M3 filter chips with active fill. Transaction rows use semantic color coding — green for incoming, neutral for outgoing.
Destinatário
Ana Clara Santos
R$ 250,00
Confirmar Pix
Pix confirmation flow
Two-step payment: recipient summary → amount + details → blue CTA. Explicit confirmation reduces payment errors.
07 — Why It Works
Financial clarity at every step.
The design decisions compound: Pix centrality reduces steps, tonal surface hierarchy reduces cognitive load, and the M3 system ensures every state stays consistent.
⚡
Pix in 2 taps
From home to confirmed payment without going through deep menus.
◈
Always-on Pix tab
Center nav reserved for Pix means it is reachable from any screen state.
⊞
Clear card state
Two cards, clear labels — Físico vs Virtual is immediately readable.
✓
Trust through clarity
Explicit confirmation screen with recipient + amount prevents errors.
08 — Blu Design System
Built on a shared system foundation.
Every component, color token, and typographic decision in this wallet was drawn from the Ewally Blu Design System — a Material 3-based system built to support the entire fintech product family.
View Blu Design System →
Color tokens
Typography scale
Component library
Usage documentation
09 — Broader Ecosystem
One product in a growing fintech ecosystem.
The Digital Wallet with Pix is one part of the Ewally product family. The same design system foundations power multiple financial experiences.
Case Study
Blu Design System
The M3-based design system that powers this wallet and every other Ewally product surface.
View case →
In Progress
Financial Platform
An internal financial platform built on the same system foundations — for operational and back-office use cases.
Coming →
In Development
Microcredit Experience
A new financial flow being designed for Ewally's microcredit product, extending the system into a new user segment.
In dev →
Tom Oliva
Product Designer UX/UI · Buenos Aires, Argentina