Fluency Content App

01 · Context

Free content as a growth engine

Fluency Academy is one of Brazil's largest online language schools. Founded with a focus on English and expanded to other languages over the years, the school became a reference in digital education. The central differentiator lies not just in the lesson content, but in how the school freely distributes knowledge: podcasts, videos, live sessions, ebooks and short videos reaching millions of people who are not yet paying students.

Free content is not a complement to the offering. It is the main relationship channel with future students, the channel through which the school builds familiarity and trust before any purchase decision. Whoever arrives via podcast or YouTube already knows the teachers, already trusts the approach. Conversion becomes a consequence of a relationship that begins long before enrollment.

↑

High access recurrence

Non-paying users regularly returning to the school's free content on the website

→

Own direct channel

Mobile app as a contact point with notifications and personalization, which the website didn't allow

◎

New conversion front

Content distribution integrated with the school's campaign and launch communications

02 · Problem

Categorizing wasn't enough. A system needed to be built.

The content already existed on Fluency's website. But the discovery and consumption experience was fragmented. Podcasts, videos, lessons and ebooks coexisted in sections with distinct visual identities, no unified language, no clear hierarchy for what to consume first, and no personalization layer whatsoever.

From the user's perspective, the website functioned like an archive, not a curated collection. For those arriving without knowing where to start, the abundance became an obstacle.

The app needed to serve two profiles simultaneously: paying students seeking deeper content and non-customers in an early stage of their relationship with the brand, with no context about the school and no familiarity with the teachers. The central challenge was creating, from scratch, a visual and navigation system the web platform had never had.

Before

Distinct visual identities across content types, without cohesion

No personalization: same content for all profiles

Archive-style navigation: users needed to know what to look for

No clear entry hierarchy for new users

No direct channel to communicate news and campaigns

After

System of four categories each with their own color, icon and name

Onboarding that captures language, level and preferred learning mode

Home curated by editorial criteria, not just by content type

Dedicated flow for first-time users with contextual recommendations

App as a direct and personalized contact point with the brand

03 · Screens

Built in Figma with AI as part of the process

The screens were developed entirely in Figma. Artificial intelligence was part of the process from the start, contributing to image and visual asset generation, interface copy writing, token creation and naming, flow mapping and layout exploration. The goal was to move fast without compromising the reasoning behind each decision.

Claude

Reasoning and structure

Flow logic, token naming, interface copy and decision documentation

ChatGPT

Text generation

Copy drafts, labels and content variations for onboarding screens

Gemini

Research and validation

Benchmarks of similar apps, market patterns and navigation concept validation

Firefly

Visual assets

Image generation for content cards, banners and visual app elements

The screens below represent initial decisions in building the journey. The complete project flow contains a larger volume of screens and components. The rest, including handoff specifications and complete flows, is the company's intellectual property. Click any screen to expand.

Drag to see the initial screens →

Splash

Onboarding 1

Onboarding 2

Onboarding 3

Sign Up

Language

Level

How to learn

Home

04 · Experience choices

The decisions that shape the journey

Teacher stories at the top of home

Navigation · Retention

The teachers are a real asset at Fluency: they have personality, audience and recognition. Placing them at the top of the home as stories creates a familiar entry point, links the content to who produces it and encourages daily return. The dot pattern with a highlight border for new content is universally understood; users don't need to learn anything new.

Horizontal scrolls by category

Architecture · Discovery

Podcasts, lessons and ebooks are formats with completely different consumption intentions. Mixing them in a single vertical list would erase those differences. Horizontal rows by category — a pattern consolidated by Spotify and Netflix — allows the catalog to scale without visual overload and creates separate entry points for each usage profile.

Personalization before home

First access · Relevance

Instead of delivering the same home to everyone, the app captures language, level and preferred learning mode right after sign-up. These choices feed the curation and signal to users that the content was selected for them. The "Skip" option is available at every step, without forcing personalization but encouraging it.

Four categories with their own visual identity

Visual system · Consistency

Listen, Watch, Read and Quick: each category has its own color, icon and name, applied consistently across onboarding cards, badges and the home screen. Users learn the system once and recognize it at any point in the app. This directly solves the central problem of the web version, where each content type had a different visual identity with no cohesion between them.

Registration without password confirmation

Friction · Conversion

Password confirmation is a desktop-inherited pattern that adds friction without real benefit on mobile, where the visibility toggle already serves as verification. Removing the field reduces the form to two fields, speeds up first access and is consistent with the standard of content consumption apps.

05 · Visual system

Tokens built to scale

Fluency Academy's visual identity — purple with pink as an accent — was preserved and translated to mobile with a documented token system. The build started from scratch: the website had no formalized nomenclature, scale or reusable components.

Colors

bg-primary#1A0B2E

bg-card#2A1A45

accent-pink#FF2D78

accent-purple#7B2FBE

text-primary#FFFFFF

text-secondary#B8A8D0

text-muted#7A6A94

text-link#C084FC

Corner radius

Badge
6px

Input
10px

Card
12px

Hero
16px

Avatar
50%

Content categories

Listen

category/listen

Watch

category/watch

Read

category/read

Quick

category/quick

Typography · IBM Plex Sans

28 · 700 Start here title-page

18 · 700 First sentences in English hero-title

16 · 600 Keep evolving from here section-title

13 · 600 Thinking in English card-title

13 · 400 Teacher Gabriel card-teacher

11 · 400 Podcast · 12 min · 🇧🇷 card-meta

10 · 500 HOME · EXPLORE · FAVORITES nav-label

Icons · examples from the navigation library

A few examples only. The full set follows a single standard of stroke weight and grid proportion.

home

explore

favorites

profile

save

featured

language

rewind

menu

Languages · flags

English

Spanish

Italian

French

German

Japanese

Other

06 · Reflection

Creating what the website never had

Fluency Content was not an adaptation project. It was a creation project: of visual identity for content formats, of navigation architecture, of a system the web platform had never had and that the app needed to have from the very first access.

The biggest lesson

Categorizing doesn't solve it. The content was already organized by type on the website. What was missing was a system that made each category recognizable and consistent at any point in the journey: from onboarding to the badge, from the card to the home screen.

The core exercise

Building for two very different profiles — the student who already knows the school and the lead with no context whatsoever — was the biggest challenge. Personalization at the start of the journey was the most direct and defensible answer to that problem.

Fluency Academy's visual identity was a starting point, not a constraint. The school's colors and language arrived on mobile with more structure and with components that scale — something that didn't exist before and that the team can build on from here.