Design Challenge · Ontop · Sr. Product Designer

Introducing

Nura

Your global wallet. Three accounts. One clear system.

"The answer isn't the interesting part. The question is."

Payroll USDc Growth

Link to Figma prototype ↗ See the case study ↓

The Brief

Design a multi-currency wallet and a money flow system.

Ontop asked for a Home Page showing 3 accounts with their balances and available actions, plus a complete flow for moving money between accounts — including what happens when a user tries to send money back to Payroll. Which is blocked.

Receives from employer only · Can send to USDc and Growth

Receives from Payroll, crypto, ACH · Can send to Growth · Cannot send to Payroll

Earns 4.2% APY yield · Withdrawals subject to lock-up · Cannot send to Payroll

Design Thinking

This isn't a navigation problem. It's a trust problem.

A wallet with asymmetric rules generates anxiety. Users don't know why some transfers are blocked. In fintech, anxiety kills trust, and trust is the product.

The real design question wasn't "how do I show 3 accounts?" It was: "how do I make users understand the system before they hit a wall?"

Clarity over elegance

If something must choose between looking good and being understood, understanding wins.

Prevention over correction

Better to never reach the error than to show a great error message.

Trust through transparency

Never hide system constraints. Showing the rules builds more trust than pretending they don't exist.

Account identity system

Each account has a unique icon — 💼 ⚡ 🌱 — used consistently across every screen. Users learn the visual language once and navigate without reading.

Progressive disclosure

Rules are shown at the moment they matter — lock-up warnings appear in the send flow, not in settings buried three levels deep.

Zero ambiguity

Users see exactly what they can do — and when something's blocked, they see why. No dead ends. No confusion. No lost trust.

🏠

Home Dashboard

📋

Home Sheet

📤

Send From

🔒

Send To (Blocked)

💰

Send Amount

⏱

Amount (Lock-up)

📄

Review Transfer

🚫

Transfer Blocked

✅

Success

🗂️

Transaction History

Screens designed in Figma.
Figma prototype link coming soon.

Naming

Nura

From Latin nutrire — to nourish. Works in Spanish, English and Portuguese. No existing fintech trademark.

Account Names

Payroll / USDc / Growth

Ontop already uses these names. Matching them shows system thinking, not ego.

Visual Mode

White dominant

Ontop's product is light mode. Ignoring that context would be a judgment error.

Accent Color

#C8F53B

Standard green #22C55E lost differentiation. Lime keeps the meaning, adds identity. Used only for primary CTAs.

Icon System

Icons as language

⚡ means USDc. 🌱 means Growth. The icon is the destination. Learned once, used forever.

Blocked States

Show, don't hide

Payroll appears grayed out in selectors — not hidden. Hiding it creates confusion. Showing it creates understanding.

The Process

Every decision had at least two serious alternatives.

Here's what I considered — and why I didn't go there.

01 · Naming

I explored a lot of names before landing on the obvious ones.

✕ Rejected

OnWall

"Wall" means barrier. Wrong for a product about money flow.

✕ Rejected

Velo

Speed without growth. Doesn't serve the savings narrative.

~ Considered

Onra

Fits the Ontop ecosystem. Dropped — didn't want to look like a sub-product.

✓ Chosen

Nura

Latin nutrire. 3 languages. No fintech trademark.

The same happened with account names.

First proposal

Salary ✗

Wallet ✗

Savings ✗

Savings sounds passive. Wallet is too generic.

Second proposal

Salary ✗

Liquid ✗

Earn ✗

Too far from Ontop's existing language.

Final ✓

Payroll ✓

USDc ✓

Growth ✓

These are the names Ontop already uses in production. Matching their language is smarter than inventing new ones.

02 · Architecture

Three forks that shaped everything.

✕ Dropped

Primary CTA below balance

Allocate Move Send Rebalance

Tested all four labels. None felt right. Allocate was too corporate. Move suggested external. Rebalance was too financial-advisor.

✓ Chosen

Earnings badge below balance

+$240.00 this month

The most important thing below the total isn't an action — it's what the money is doing. The Send tab in the nav is there to explore.

✕ Dropped

All yield data inside Growth card

Growth

$4,500.00

4.2% APY · +$15.75 this month

Buries the most motivating data point. User has to look for it inside one card.

✓ Chosen

Earnings at top level, APY on card

+$240.00 this month ↑ home

4.2% APY ↑ Growth card

What I earned this month belongs at the top level — it's the metric that makes users come back.

✕ Dropped

Order by balance size

Growth › Payroll › USDc

Correct for investment portfolios. Wrong here. Balance size is less important than account role.

✓ Chosen

Order by money flow

Payroll → USDc → Growth

The order follows the money. Enter via Payroll. Operate via USDc. Grow via Growth.

02.5 · Color

Every color earns its place.

Lime, not Green

Standard #22C55E is the default of every fintech app. It signals nothing. Lime keeps the cultural meaning — money, growth, go — while creating identity. Used only for primary CTAs. Never decorative.

Color as account identity

Blue for Payroll — institutional, regulated, employer-issued. Lime for USDc — operational, the daily-use account. Amber for Growth — the universal color of accumulated value. Bloomberg uses gold for returns. I followed that convention intentionally.

Semantic, not decorative

Green only for positive values — income, Free, Instant. Red with a pink tint, not pure #FF0000 — "this can't be done" not "you made a critical error".

03 · Clarity

Everything was stripped back. But every interaction still leads somewhere expected.

Removed

Allocate button on home

Redundant with nav bar Send.

Yield chart in Growth card

A number tells the same story faster.

Confirm Destination in sheet

Selection itself is the confirmation. One less tap.

Full transaction history with retail

This is a payroll wallet. Not an expense tracker.

Onboarding screens

Brief asked for Home + Convert. Adding onboarding answers a question nobody asked.

Kept

✓

Lock icon hint on Payroll card

One line. Prevents infinite confusion.

✓

Earnings badge below total balance

The number that makes users open the app.

✓

Account icons as identity system

Learn once. Recognize everywhere.

✓

Potential new balance in Review

The one number that prevents regret.

✓

Instant vs Pending in Success

Honest > celebratory.

04 · Iconography

The icon is the destination.

💼

Payroll

Institutional Employer-issued

⚡

USDc

Operational Daily-use

🌱

Growth

4.2% APY Accumulating

How this shows up on each card

💼

Payroll

$4,200.00

🌱

⚡

The buttons don't say "Send". They show the destination.
Learned once. No label needed.

The action buttons on the home cards were a deliberate decision outside the challenge scope. For the prototype they're not fully wired — but the intent is direct and unambiguous: tap the destination, money moves there.

05 · Prevention

I never let users reach a dead end they didn't see coming.

Step 1 · At the selector

TO · Choose destination

🌱 Growth

💼 Payroll Blocked

Payroll is visible but grayed at 40%. Not hidden. The user understands before tapping.

→

Step 2 · If they get there anyway

🔒

Can't send to Payroll

Payroll → USDc ✅

USDc → Payroll 🚫

Growth → Payroll 🚫

All 6 rules visible at once. The moment of maximum attention is the best moment to teach.

→

Step 3 · The exit

Not a hardcoded alternative. The right redirect depends on where the user came from.

I also thought carefully about the swap button between accounts. If you're sending Growth → USDc you can flip the direction. But if FROM is Payroll, the swap is disabled — tapping it takes you to the logical selection screen instead of trying to reverse an impossible route.

The three paths a user can take

Happy Path

Payroll → Growth

Allowed · Instant · Free

FROM → Amount → Review → ✓ Instant

Blocked

USDc → Payroll

Blocked · System explains why

TO selector → Grayed → Blocked → Rules table

Conditional

Growth → USDc

Allowed · Lock-up applies

⏱ Warning → Amount → Review → ⏱ Pending

06 · Lock-up

Told only when it matters. Exactly as much as needed.

⏱

TO Selector

⏱ icon next to USDc option when FROM is Growth. One icon. No words.

⏱ Lock-up applies · 1–7 business days

Amount Screen

Before the user types a number.

Review

⏱ Lock-up applies

Review Screen

Still visible at the last confirmation step.

⏱ Pending

Success Screen

Not ✓ Instant. Honest about what happened.

The one thing missing: a bottom sheet explaining why the lock-up exists. My assumption — funds are locked because they're actively generating yield inside a fund and need to exit that position before being transferred. That explanation deserves its own moment in the flow. Noted for v2.

07 · Confirmation

Simple. Honest. Complete.

Review Details

Sending Amount

$500 USD

FROM

💼

Payroll

Potential new balance · $3,700.00

🌱

Growth

Potential new balance · $5,000.00

Confirm & Send →

· Balance after transfer shown — not just the amount
· Lock-up warning here too when Growth → USDc
· One action. No ambiguity.

✓

$500

PAYROLL → GROWTH · SENT

FROM

Payroll

Growth

AMOUNT

$500.00

FEE

Free

STATUS

✓Instant

#NUR-9204

Done!

✓ Instant for normal flows
⏱ Pending for Growth → USDc
· Transaction ID included — trust through traceability

The Critical Screen

The best error screen is an education moment.

Restriction framed as a security feature — not a system limitation
6-rule table visible when attention is highest — right after hitting a wall
"Go back" instead of a hardcoded alternative — because the right alternative depends on context

🔒

Can't send to Payroll

Payroll only receives from your employer. This keeps your income organized and your account secure.

Payroll → USDc	✅
Payroll → Growth	✅
USDc → Growth	✅
Growth → USDc	⏱
USDc → Payroll	🚫
Growth → Payroll	🚫

Trade-offs

What I chose not to do — and why.

Kept Payroll visible but blocked

Sacrificed

Cleaner selector UI

Why

Hiding it prevents system understanding. Users need to see Payroll to learn the rule — even if they can't choose it.

Go back only on blocked state

Sacrificed

One-tap redirect to alternative

Why

The right alternative depends on origin. Hardcoding it would be wrong 50% of the time.

Light mode over dark

Sacrificed

Premium dark aesthetic

Why

Ontop's product is light mode. Context matters more than personal preference.

No onboarding screen

Sacrificed

Guided first-time experience

Why

The brief asked for Home + Convert flow. Answering unasked questions is noise.

External receive flow

How crypto, ACH and card deposits enter USDc — the next critical flow after sends. Equally complex, equally important.

Lock-up countdown

A timer showing days remaining directly on the Growth card when funds are locked. Transparency built into the home state — not just the send flow.

Transfer animation

A particle traveling from source card to destination card on confirm. Makes the mental model physical — money literally moves.

Comprehension test

5 users asked to send USDc → Payroll without explaining the rules. If none reach the error screen, prevention worked. That's the real metric.

Nura

Design a multi-currency wallet and a money flow system.

This isn't a navigation problem. It's a trust problem.

Nura

10 screens. Every state covered.

Every pixel has a reason.

Every decision had at least two serious alternatives.

I explored a lot of names before landing on the obvious ones.

Three forks that shaped everything.

Every color earns its place.

Everything was stripped back. But every interaction still leads somewhere expected.

The icon is the destination.

I never let users reach a dead end they didn't see coming.

Told only when it matters. Exactly as much as needed.

Simple. Honest. Complete.

The best error screen is an education moment.

What I chose not to do — and why.

If I had more time.