Hesitant Speaker
Goal-driven- Needs
- A safe space to speak without fear
- Pain point
- Afraid of making mistakes
- Design response
- Gentle corrections, private practice, visible progress
Case Study · AI · EdTech
Fluenza
An AI language tutor Gen Z actually wants to talk to
I designed Fluenza end to end, from a blank page to App Store: product UX, brand, a 100+ component design system, and animated 3D tutors, all inside a 6-week MVP.
- iOS
- Android
- AI
- Design System
- 3D & Motion
At a glance
The short version
Fluenza is an AI-powered language app where people practice real-life conversations with expressive 3D tutors.
There was no brand, no UX framework and no design system. I defined the product architecture, visual identity and component library, and shaped every interaction from the first onboarding screen to the paywall.
The result: a Flutter app for iOS and Android, built on a system that scales to new languages, tutors and markets.
- Client
- Sueta LLC · Fluenza
- Role
- Lead Product Designer
- Team
- Mobile developer, PM, 3D artist
- Duration
- 6 weeks · ongoing support
- Tools
- Figma, FigJam, Notion, Blender, Lottielab, After Effects
- 100+components, styles and states built in Figma
- ↓46%less developer implementation time
- 70%of testers finished onboarding without skipping
What I owned
- Product strategyTurned business goals and constraints into flows people finish.
- Brand from zeroNaming, logo, visual language and App Store presence.
- Design systems100+ tokenized components that made hand-off 46% faster.
- 3D & motionTutor intros in Blender, micro-animations in AE and Lottie.
01Context
A new player in a crowded EdTech market
Plenty of people can read a language but freeze when they have to speak it. Fluenza set out to give them a friendly, emotionally intelligent partner to practice with.
Fluenza combines AI chat with an immersive 3D experience. Learners improve their speaking by having real conversations with a tutor who reacts, encourages and remembers.
The positioning took the best of the category and added something none of the competitors had: a character you want to come back to. The design system had to carry both conversational UX and the visual richness of 3D.
Framing the problem
- Challenge
- No existing brand or foundation
- Designing for Gen Z attention spans
- Consistency across platforms and 3D assets
- Objective
- Build a cohesive brand and design system from scratch
- Out-engage competitors, not out-feature them
- Feel intuitive, emotional and future-ready
- Approach
- A flexible, tokenized design system
- Playful onboarding and interactive chat flows
- A strong, memorable visual identity
Process
Four phases, one tight MVP window
- 01ResearchGoals, personas, competitors and opportunities
- 02StructureUser flows, wireframes and prototype tests
- 03Visual & interactionIdentity, design system, 3D and motion
- 04DeliverFinal assets, store listing and marketing visuals
02Discover
Researching the foundations
We started with discovery workshops to align on business goals, constraints and risks, then mapped the market to find where Fluenza could stand out.
Business goals
- MVP focused on growth, retention and monetization
- Replace human tutoring costs with smart automation
- Validate early retention to attract investors
Constraints
- No pre-existing brand or UX framework
- 6-week MVP window and a small team
- AI latency and 3D rendering limits on mobile
Risks
- Crowded market of look-alike apps
- Modern yet friendly identity
- Balancing entertainment and education
User research
Two learners, two mindsets
Personas let us tune onboarding, gamification and tone for both ends of the spectrum, from goal-oriented to curiosity-driven.
Curious Passerby
Curiosity-driven- Needs
- Casual, low-effort conversations
- Pain point
- Loses motivation quickly
- Design response
- Instant chat, tutor personality, quick rewards
Competitive analysis
Learning from six competitors
I ran a deep competitive analysis across AI-driven learning and conversation tools, tracking estimated revenue, user growth, retention and market share for each.
The pattern was clear: most apps lean on repetitive drills. We saw an opening for something casual, emotional and immersive, built around free dialogue with a tutor.
- Learna AI
- Loora
- Elsa Speak
- Fluentika
- Praktika
- TalkMe
Key insight
Learners don't need more drills. They need a low-stakes place to talk, and a reason to come back tomorrow.
03Define
Wireframing & prototyping
Before any pixels got pretty, I iterated on wireframes and clickable prototypes to test flows and lock the information architecture.
An onboarding that pays you back
Every question in onboarding had to earn its place. We balanced personalization with a quick time-to-value, so answers visibly shape a custom course and the first tutor chat. The result helped drive strong early subscription rates.
Key user scenarios
- 1Free chat with AI tutors
- 2Custom course generation based on user goals
- 3Personal progress tracking and stats
The full onboarding path, from splash to the first tutor chat · Drag or scroll sideways to follow the flow
04Validate
Testing and iterating
The first prototypes tested layout, conversational tone and pacing. One concept stuck: a chat list where each AI tutor stands for a topic or a personality, which made learning feel personal.
AI conversations cost money, so motivation and unit economics had to work together. I designed a soft-reward loop around energy.
Energy
- SpendEach conversation uses energy
- ProgressLessons and streaks refill it
- ShareInvites and posts earn bonus
- WatchShort ads as an optional top-up
05Visual direction
From safe to soft neobrutalism
Fluenza's identity had to feel bold and modern enough to cut through a sea of look-alike apps.
We explored everything from minimalist UIs to Y2K and neobrutalist hybrids. At one point I pitched it as a dating sim for languages, where you get to know your AI mentor. I still like that idea; it probably deserves its own app.
We landed in the middle: soft neobrutalism. Vibrant color, strong geometry and hard shadows, balanced by smooth gradients and detailed illustration. Fresh, but still approachable.
VerbiFluenza
…and the product got a new name.
06Design system
A system built to scale
The system is what let a tiny team ship fast and stay consistent across platforms and 3D assets. It also cut developer implementation time by 46%.
- 100+Components, color styles, typography tokens and variants
- 12Base hues, each with a 9-step tint and shade scale
- 4Breakpoints on a responsive column grid
Components, states, icons, grids, color scales and spacing rules
Core palette
- Brand
#FF5A6E - Secondary
#1F8BFF - Purple
#A179FF - Orange
#FF8A3D - Green
#16C76A - Ink
#1A1A1A
Typeface
Nunito Sans
Chosen for readability and warmth
Motion
Illustrations and micro-animations in After Effects and Lottielab
073D & motion
Giving the tutors a soul
I oversaw the creation of the 3D tutor models for English and Spanish. The models were built by an external 3D generalist.
I animated their introduction sequences and idle motion in Blender, added dynamic lighting and smooth transitions for in-app use, then carried the characters into illustrations that stay recognizable and keep the 3D feel.
- Blender
- After Effects
- Lottielab
08The product
The experience, end to end
- 01 · Free Talk
Conversation comes first
Chat with Emma or Leo about anything. Hints, instant translation and voice input keep hesitant speakers going when they get stuck.
- 02 · Courses
A course built around your goals
Onboarding answers become a personal course, like Career Growth, split into short chapters with clear progress and a next step.
- 03 · Statistics
Streaks that feel rewarding
Streaks, a calendar heatmap and energy rewards turn practice into a habit without guilt-tripping.
09Deliver
Shipping to the stores
The last mile was brand: logo exploration, a flexible mark for every context, and store screenshots that sell the conversation in one glance.
Logo exploration
Logo variations
Store screenshots
10Impact
What it delivered
Fluenza launched with a strong identity and intuitive UX, with measurable impact for both users and the team building it.
- 100+components, styles and states built in Figma
- ↓46%less developer implementation time
- 70%of testers finished onboarding without skipping
A scalable design system
One design language across components, layouts and micro-interactions. Future design-to-dev time dropped by nearly half.
Onboarding people finish
Personalization that visibly pays off: 70% of testers completed onboarding without skipping a step.
A brand that stands out
Bold visuals, smooth animation and AI-driven characters set Fluenza apart in a crowded EdTech space.
11Reflection
A design challenge and a playground
Building an entire product ecosystem from scratch in six weeks forced sharp decisions, and it was fun.
- 01
Think in modules
Designing a whole ecosystem from zero taught me to treat every component as reusable and adaptable from day one.
- 02
Communication is a multiplier
Working side by side with developers and a 3D artist showed me that good communication speeds up creativity, not just delivery.
Thanks for reading!
Building something ambitious? I'd love to hear about it.