Tefi
Make finances feel human.
A fintech app designed from zero — with emotional design, a custom mascot, and a complete B2B + B2C design system.
The Challenge
Finance apps feel cold. People don't.
Personal finance is one of the most stressful topics in people's lives. Debt, savings, and budgeting all carry emotional weight that most apps completely ignore.
Tefi was designed from zero with a single conviction: if we want people to actually engage with their finances, the experience has to meet them where they are — emotionally, not just functionally.
Financial anxiety is universal
Most users avoid finance apps because they feel judged or overwhelmed.
Education needs a gentle entry
Sensitive topics like debt require a companion, not a cold dashboard.
Engagement needs motivation
Users abandon finance apps after 3 days. Gamification is key to retention.
The Mascot
Meet Tefi — your financial companion.
Tefi is the emotional core of the product. A round, expressive character designed to accompany users through their financial journey — celebrating wins, gently introducing hard conversations, and making numbers feel less scary.
Designed from scratch: character design, expression system, and integration into every key user moment.
Design Process
From zero to a complete design system.
01
Discovery
User research, competitive analysis, defining the emotional design pillars.
02
Character Design
Concept, iteration, and expression system for Tefi the mascot.
03
Design System
Full token system — color, type, components for B2B and B2C.
04
Flows & Screens
290+ B2B screens and 55+ B2C mobile screens across all flows.
05
Gamification
Level system, quizzes, and progress tracking to build long-term habits.
The Product
Every screen designed with intention.
Onboarding
Home — first visit
Mis finanzas
Chat with Tefi
Tefi doesn't just live in the background — she has her own chat interface where users can ask questions, get personalized financial advice, and receive emotional support when things get tough. This was a key differentiator: a financial companion that actually talks to you.
Emotional Design
Design that feels, not just functions.
A companion, not a judge
Tefi never shows a red number without context — always with a suggestion or message.
Sensitive topics need a soft entrance
Debt and overspending conversations always start with Tefi introducing the topic.
Progress over perfection
The level system celebrates incremental improvement, never compares to a "perfect" profile.
Tone of voice as a design element
Every microcopy was written to sound like Tefi: warm, direct, and non-condescending.
Tools & Methods
How it was built.
Figma
Full product design, component library, prototyping, and dev handoff.
DesignMiro
User journey maps, flows, affinity diagrams, and stakeholder workshops.
ResearchDesign System
Custom token system — colors, type, components for B2B and B2C.
SystemsCharacter Design
Mascot concept, expression library, motion guidelines, and patterns.
IllustrationGamification
Level architecture, quiz mechanics, and reward design for engagement.
UX StrategyPrototyping
Interactive prototypes tested with real users across key flows.
Testing
Tefi
A fintech app designed
with empathy at its core.
Designed by
Florencia García
Product Designer — Montevideo, Uruguay
© 2024 Tefi — Case study by Florencia García.
Built in Figma from zero.