Case Study

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

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 started when some developers I had worked with before asked me to help create a language learning app from scratch. We wanted to mix AI chat tech with a fun 3D experience, so users felt like they were chatting with a real tutor.

As AI technology progressed, many learning apps struggled with user engagement. Users wanted fun ways to improve their speaking skills. We aimed to innovate by creating a 3D AI avatar that combines the best features of existing platforms like Loora, Elsa Speak, and Duolingo, offering a friendly, emotionally intelligent tutor.

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.

Primary User:

Hesitant Speaker

Needs:

Safe space to speak without fear

Pain Points:

Fear of making mistakes

Secondary User:

Curious Passerby

Needs:

Casual, low-effort conversations

Pain Points:

Quickly loses motivation

User Personas for primary & secondary users

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

Fluenza's structure was built through multiple low-fidelity prototype iterations shared with PMs and developers.

Focus Areas:

Onboarding flow personalization

Conversational AI experience

Gamified energy and reward system

Wireframing & Prototyping

Designing an Engaging Onboarding

Special attention went into the onboarding experience. We created a multi-step, dynamic onboarding with interactive questions to tailor learning paths — while ensuring it remained fast and intuitive. Research showed that ~70% of users decide on subscribing during onboarding, so clarity and engagement were critical.

Key user scenarios

Free chat with AI tutors

Custom course generation based on user goals

Personal progress tracking and stats

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.

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

Yep, we had the other name at the beginning, unfortunate it was already registered. I really liked this one.

First iterations of UI Visuals. The team choose 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's suits better for 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

Juicy!

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

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.