Case Study

Designing Fluenza from Scratch: Building an App and Design System for Gen Z Language Learners

iOSAndroidAi

Overview

I led the end-to-end design of Fluenza, an AI-powered language learning app that helps users practice real-life conversations with expressive 3D tutors.

Starting from a blank page, I defined the product's UX architecture, visual identity, and design system, shaping how users experience every interaction — from onboarding to subscription.

The result was a fully-featured Flutter app for iOS and Android, powered by a robust design system that enables future expansion across languages and markets.

Client: Sueta LLC | Fluenza
Role: Lead Product Designer
Team: Collaborated with mobile developer, PM, and 3D artist
Duration: 6 Weeks | Ongoing Project Support
Tools: Figma, FigJam, Notion, Blender, Lottielab, After Effects

Challenges

No existing brand or Foundation
Designing for Gen Z attention spans
Consistency across platforms and 3D assets

Objective

Build a cohesive design system and brand from scratch
Research competitors and craft a more engaging experience
Create an app that feels intuitive, emotional, and future-ready

The Solution

Develop a flexible design system
Create fun onboarding and interactive chat flows.
Establish a strong, memorable brand and visual style.

Key Results

100+Components, styles, and states built in Figma

46% ↓Reduction in developer implementation time

70%of testers completed onboarding without skipping

Background

Setting the Stage

Designing a New Player in the EdTech Market

Fluenza is a language learning app that combines AI chat technology with an immersive 3D experience. The goal was to help non-native speakers improve their speaking skills through real-life conversations with a friendly, emotionally intelligent tutor.

The product brings together the best of platforms like Loora, Elsa Speak, and Duolingo — wrapped in a 3D AI avatar that feels approachable and engaging. This positioning required a design system that could support both the conversational UX and the visual richness of the 3D experience.

The Process

The project was broken down into four main phases:

User Research
Defining goals, personas, and opportunities
Wireframing & Prototyping
Shaping user flows and testing structure
Visual & Interaction
Building a bold visual identity and design system
Deliver
Preparing final assets, marketing visuals, and app store materials

Researching the Foundations

The process began with discovery workshops to align on business goals, challenges, and constraints. We analyzed the language-learning market, identified gaps, and defined what would make Fluenza stand out.

Researching Focus Areas:

Key Competitors
Goals, Challenges, Constraints
User Research & Personas

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 limited team
AI latency and rendering limits on mobile

Challenges

Crowded market of look-alike apps
Designing a modern yet friendly identity
Finding the right tone between entertainment and education

User Research

Understanding Core Users

By understanding these personas, we could tailor onboarding, gamification, and tone to both learning mindsets from goal-oriented to curiosity-driven.

Hesitant SpeakerNeeds: Safe space to speak without fearPain Points: Fear of making mistakes

Curious PasserbyNeeds: Casual, low-effort conversationsPain Points: Quickly loses motivation

User Personas for primary & secondary users

Competitor app screens: Loora, TalkMe, Praktika, and others

User Research

Researching Competitors

We conducted a deep competitive analysis across AI-driven learning and conversational tools. We identified key players: Learna AI, Loora, Elsa Speak, Fluentika, Praktika, and TalkMe.

User Research

For each, we tracked estimated monthly revenue, user growth, retention, and market share trends. Our goal was to design something casual, emotional, and immersive, emphasizing free dialogue with an AI tutor rather than repetitive drills.

Wireframing & Prototyping

We structured the Fluenza experience through iterative wireframes and prototypes, testing flows and validating structure before moving to visual design.

Focus Areas:

Onboarding flow personalization
Conversational AI experience
Gamified energy and reward system

Wireframing & Prototyping

Designing an Engaging Onboarding

The onboarding flow was designed to feel welcoming and low-friction. We iterated on wireframes to balance information gathering with quick time-to-value, resulting in a flow that helped drive strong early subscription rates.

Key user scenarios

Free chat with AI tutors
Custom course generation based on user goals
Personal progress tracking and stats

Onboarding and key user flow wireframes

User Research

Testing and Iterating

The first prototypes tested layout, conversational tone, and pacing. We also introduced a "chat list" concept — each AI tutor represented a topic or personality, making learning more personal.

To balance costs and motivation, we added a gamification system: users spend "energy tokens" on conversations but can earn them via progress, sharing, or short ads — turning learning into a soft-reward loop.

Prototypes, chat list concept, and gamification system

Visual & Interaction

Fluenza's visual identity needed to feel bold and modern

Focus Areas:

Establishing a unique design language
Building a scalable design system
Crafting an expressive visual world around AI tutors

First iterations of UI visuals. The team chose between classic clean UI and bold and loud neobrutalism

Visual & Interaction

Overall Style

We explored multiple directions — from safe minimalist UIs to Y2K and neobrutalist hybrids. At one point, I even proposed designing it like a dating sim for languages — a fun metaphor for getting to "know" your AI mentor (I still think it's a great idea, but maybe it suits better for a separate app).

Ultimately, we landed on a soft neobrutalist aesthetic: vibrant colors, strong geometry, and shadows balanced with smooth gradients and detailed illustrations. It felt fresh yet approachable.

And we finally came up with a new name: Fluenza

Fluenza final UI — soft neobrutalist aesthetic

Visual & Interaction

The final design system included

100+ components, color styles, typography tokens, and variants

Nunito Sans as a main font for readability and warmth

Detailed illustrations and micro-animations designed and animated in After Effects and Lottielab

Fluenza design system overview

Visual & Interaction

We also oversaw the creation of 3D tutor models for English and Spanish.

Although the models were built externally, I animated their introduction sequences and idle motions in Blender, adding dynamic lighting and smooth transitions for in-app integration.