Avero Bank hero promo: Your money. Finally understandable.
Digital banking concept · UI/UX case study · October 2026
Challenge
People see their money, but not what they can afford
What people do today
Why it hurts
What Avero does
Mentally subtract upcoming bills from the balance
Error-prone, stressful, repeated several times a week
Safe to spend: the disposable amount, with its working shown
Scroll a long list to find one payment
Lists are built to store data, not to find it
Smart search in plain words, turned into visible filters
Notice fraud or a forgotten subscription weeks later
Small and unusual charges stay invisible
Alerts within minutes, with the fix next to the problem
Avero Bank · UI/UX case study
02 / 16
Users
Who we design for
Primary persona
Alex Morgan, 32
Product manager in Berlin
€3,800
salary on the 25th
3
accounts and pockets
7
subscriptions
€8,000
kept as a reserve
Audience: 25–45, several accounts, shops online, uses subscriptions, wants the picture without reports.
“When I open the app, tell me whether I’m okay this month.”
“When I send money, show me what it does to the rest of my month.”
“When something looks wrong, let me fix it in one move.”
“Once a month, show me where the money leaks.”
Avero Bank · UI/UX case study
03 / 16
Research
Two reference bases: UX and visual
UX reference base
Product
Pattern we studied
What Avero changes
Monzo
Bills set aside in pots
Bills detected, formula shown
Revolut
Instant card freeze
Freeze inside the alert
Wise
Fee and ETA up front
Plus the effect on the month
N26
Spaces for goals
Reserve feeds Safe to spend
bunq
Auto-categorisation
One clear sentence per chart
Mercury
Search + side panel
Plain words, editable chips
Visual reference base
Reference: bento layouts with lime accentsReference: presentation slides in black, gray and limeAvero Bank identity board
Taken as a language, not copied: bento modules, oversized numbers, black ↔ off-white contrast, lime as a pointer.
Avero Bank · UI/UX case study
04 / 16
Product principles
Four rules for every screen
Clarity
Answer first, details second.
Test: Can the main question be answered in three seconds?
Context
No number without a comparison, a horizon or a consequence.
Test: €2,340 — compared to what, until when?
Control
Reversible, one-tap actions, next to the problem.
Test: Is the fix one tap away from the alert?
Confidence
Show fee, timing and impact before you commit.
Test: Would anyone be surprised after pressing the button?
Avero Bank · UI/UX case study
05 / 16
User journey
Every path starts from one answer: how much can I safely spend?
Send money
Home
Transfer
Recipient
Amount + impact
Review
Sent
Stay safe
Home
“Was this you?”
Freeze card
Confirmed + Undo
Understand spending
Home
Insights
Category
Filtered activity
Avero Bank · UI/UX case study
06 / 16
Information architecture
Five destinations on every device
Home
Safe to spend
Needs you
Accounts
This pay cycle
Coming up
Recent
Payments
Recipients
Bank details
QR code
Amount & schedule
Review
Receipt
Activity
Smart search
Filters
Day groups
Payment detail
Insights
Month overview
Categories
Income vs spending
Subscription radar
Recurring costs
Card
Freeze & PIN
Limits
Controls
Security centre
Replace
Desktop ≥1200
Sidebar · side panels
Tablet 768–1199
Icon rail · panels as overlays
Mobile ≤767
Bottom nav · bottom sheets
Avero Bank · UI/UX case study
07 / 16
Design system
Lime only where the eye should land
Acid Lime
#C6FF3D
Deep Black
#0A0A0A
Off White
#F5F6F4
Light Gray
#E8E9E6
Stone Gray
#D9DCE0
White
#FFFFFF
Inter · tabular figures for money
€2,340
Display 72 · H1 44 · H2 30
Body 15–16 · Caption 13 · Metrics 40–72
Shape and grid
Radius 32 · 20 · 14 · 999
Desktop 12 col · gap 20 · Mobile 4 col · margin 16
Spacing 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80
Avero Bank · UI/UX case study
08 / 16
01 · Dashboard
Am I okay this month? Answered first.
Avero desktop home dashboard
Safe to spend first
People subtract bills in their heads. We do it for them and show the working as a ribbon: reserve, bills, scheduled, safe.
Needs you, ordered by risk
A suspicious payment beats a duplicate, which beats a price rise. Each alert carries its own fix.
Payments on one line
Thirteen payments before payday on a timeline; bigger dots are bigger bills.
Avero Bank · UI/UX case study
09 / 16
02 · Payments
What’s left after a transfer matters
Avero mobile screenAvero mobile screenAvero mobile screen
Cost before commitment
“Fee €0 · Arrives instantly” is shown before the amount is typed.
Impact while typing
“After this transfer your safe-to-spend balance will be €840.”
Errors that fix themselves
Not enough in Everyday? Move the €379.80 that’s missing from Savings in one tap.
Avero Bank · UI/UX case study
10 / 16
03 · Transactions
Search the way you’d ask a friend
Avero desktop activity with smart searchAvero mobile screen
Plain words in, visible filters out
“coffee last month” becomes two chips: September 2026 and Coffee. Each chip can be removed.
Detail without losing your place
A side panel on desktop, a bottom sheet with drag-to-dismiss on mobile.
Problems surface themselves
Duplicates and unusual payments are flagged in the list, with Dispute or Freeze inside.
Avero Bank · UI/UX case study
11 / 16
04 · Analytics
Where does my money go?
Avero insights screen
€2,840 spent in September
↓12% vs August. Largest category: Food & Dining, €620.
Charts that lead somewhere
Tap a category to open its payments: the totals match to the cent.
Subscription radar
Cancelling 2 unused subscriptions would save approximately €312/year.
Anomalies in context
You usually spend about €77 a day. Today: €184.
Avero Bank · UI/UX case study
12 / 16
05 · Card & security
Your card reacts before you need to
Avero mobile screenAvero mobile screen
Security in context
“Card used in Vienna 14 min ago” appears on Home, in Activity and on the Card screen, each time with It was me / Freeze card.
One tap, one undo
Freezing is instant and reversible from the toast, so people use it early.
Limits as a picture
€273 of €3,000 today, including €89 still pending.
Avero Bank · UI/UX case study
13 / 16
Responsive design
Mobile is re-prioritised, not shrunk
Avero desktop homeAvero mobile screen
Element
Desktop
Mobile
Navigation
Sidebar with labels
Bottom bar, 5 tabs
Hero
Bento: hero + Needs you side by side
Swipeable cards: safe · accounts · cycle
Coming up
List of payments
Horizontal chips
Details
Side panel
Bottom sheet, drag to close
Transfer
Impact panel beside the form
Keypad, sticky CTA
Avero Bank · UI/UX case study
14 / 16
Interaction & prototype
Motion confirms. It never decorates.
Moment
Motion
Duration
Button press
scale 0.98
150 ms
Card hover
translateY −2 px
240 ms
Balance
count-up
700 ms
Charts
progressive reveal
800 ms
Modal
fade + scale
240 ms
Bottom sheet
slide up, drag to dismiss
350 ms
Transfer sent
check draws in, ring pulse
400 ms
States in the prototype
Loading skeleton
Empty search
Insufficient funds
Offline
Suspicious payment
Frozen card
Success
One responsive index.html: transfer flow, search and filters, detail panel and sheet, freeze, toasts. Reduced motion is respected.
Avero Bank · UI/UX case study
15 / 16
Avero Bank: desktop dashboard between two phones, with Safe to spend, security alert and spending insight cards