EnglishBay Landing Page by Lucas FonsecaEnglishBay Landing Page by Lucas Fonseca

EnglishBay Landing Page

Lucas Fonseca

Lucas Fonseca

English Bay – Language Learning Mobile Experience

English Bay is a comprehensive English language learning mobile application designed to help users achieve fluency through the NANOLEARN method—a dynamic approach featuring quick, card-based exercises, text, audio, and video lessons. The project explores how a thoughtful combination of UX strategy, intuitive gamification, and AI-powered interaction can transform language acquisition into a motivating, everyday digital habit.
Designed in Figma, the English Bay experience focuses on breaking down the barriers to learning, balancing rigorous educational content with a clean, modern interface that makes the user journey feel fast, effective, and accessible.

Objective

🔹 Design an intuitive, high-engagement interface that empowers users to practice English consistently.
🔹 Simplify complex language learning workflows, from placement testing to real-time conversation practice.
🔹 Integrate AI-driven features (like the virtual teacher "Bay") to provide personalized feedback and unlimited speaking practice.
🔹 Develop a scalable design system that supports diverse learning modules—including video lessons, exercises, and live class scheduling.

Process

1️⃣ Discovery & User Research

Conducted research on the language learning landscape, including competitors like Duolingo and HelloTalk, to identify gaps in user engagement and effectiveness. Research focused on common pain points for Brazilian learners, such as lack of confidence in speaking, time constraints, and the "boredom factor" often associated with traditional grammar-heavy courses.

2️⃣ Product Strategy & Information Architecture

Defined the application’s structure by organizing content to support both structured learning and spontaneous practice. The information architecture was mapped to ensure seamless transitions between the NANOLEARN flashcard lessons, AI conversation practice, and live class booking, minimizing friction for busy users.

3️⃣ User Flows & Wireframing

Created low-fidelity wireframes to validate navigation patterns, specifically focusing on the onboarding experience and the personalized placement test. Multiple iterations explored how users move from a diagnostic test to their first tailored lesson, ensuring the path to learning is clear and rewarding.

4️⃣ UI Design & Design System

Designed a cohesive visual language that feels professional yet encouraging. A scalable design system was established with consistent color tokens, typography, and card-based components that support the NANOLEARN methodology. The interface uses clear visual hierarchies and interactive elements to make progress tracking feel tangible and satisfying.

5️⃣ Mobile Experience & Responsive Thinking

Designed with a mobile-first philosophy, ensuring that the app functions perfectly across different device sizes. The interface respects native platform conventions while prioritizing accessibility, ensuring the learning content remains clear and interactive even in short, "on-the-go" study sessions.

6️⃣ Interactive Prototyping

Built high-fidelity interactive prototypes in Figma to simulate the "AI Teacher" conversation flow, the feedback interaction loop, and the navigation between video and exercise modules. These prototypes were crucial for validating the speed and feel of the NANOLEARN experience before development.

7️⃣ Usability Refinement

Iteratively refined interaction feedback, such as micro-animations for correct/incorrect answers, and optimized the layout to reduce cognitive load during lessons. The final design focuses on keeping the user motivated, rewarding milestones, and ensuring the interface supports long-term habit building.

Outcome

✨ The English Bay design demonstrates how UX strategy can transform language learning from a chore into a seamless daily habit. By combining an intuitive, card-based interface with high-tech features like AI voice interaction, the app provides a highly functional, emotionally engaging, and efficient environment for students of all levels.

Results & Impact

📈 Enhanced Learning Retention – The NANOLEARN method and simplified navigation allow students to complete daily sessions quickly, leading to higher completion rates.
🎯 Increased User Engagement – Gamified elements and personalized AI feedback encourage users to build consistent daily study habits.
🌍 Inclusive Design – The interface provides a clear, modern, and accessible learning path for over one million students, from beginners (A1) to proficient learners (C2).
🧩 Scalable Product Foundation – The modular design system allows for the rapid integration of new content types, exercises, and future educational features.
📱 Mobile-First Efficiency – Every screen is optimized for mobile interaction, making English learning accessible anywhere, anytime.
🎨 Modern UI & Interaction Design – High-fidelity prototypes deliver a polished, professional aesthetic that builds user trust and makes the learning process feel more rewarding.
🔗 Check out the company: https://englishbay.com.br/
Like this project

Posted Sep 30, 2025

UX/UI case study for English Bay: an AI-powered language app using the NANOLEARN method to help students build daily English speaking habits.

Likes

0

Views

5

Timeline

Nov 30, 2023 - Dec 30, 2023