EngLisa makes learning English easier and more enjoyable. You can follow clear offline courses created by real teachers, practice speaking with AI feedback, and see your progress through simple study insights. Plus, you’ll get free placement tests, live seminars, useful articles, and a friendly community where learners help each other. It’s the perfect mix of smart tools, expert guidance, and peer support.
01. Affordable Offline Courses.
02. Accessible, effective, and engaging designed to fit every learner’s needs and lifestyle.
A language teacher who designs offline courses and sells them to users.
AI-powered pronunciation feedback
Helpful articles
Live seminars
Study insights tracker
Learning community forums
Free placement test
Website & App, Designed from Scratch to Final Prototype
I served as the UX/UI designer for this project, actively participating in all stages of the design process from research and wireframing to prototyping. I collaborated within a team of five, and this project was part of our UX school coursework, running from March to May 2025.
The main challenge was to create a streamlined and cohesive platform that allows high-quality English learning while keeping the user experience simple and intuitive. Although our stakeholder, Ms. Lisa, already has a loyal audience and sells courses via social media, she needed a unified system to manage and sell her courses efficiently. The platform had to combine seamless course management, effective learning tools, and an enjoyable user experience to meet both business and learner needs.
Create a unified platform to manage and sell courses efficiently.
Provide a high-quality learning experience for users through structured courses.
Ensure the platform is intuitive and easy to use, minimizing friction for learners.
Build a cohesive system that replaces scattered course sales on social media.
Phase 1: Define – Uncovering the Core Challenges
Before jumping into pixels, we needed to understand why the current system (social media sales) was failing.
The core friction poitns were:
Manual Managmement: Managing hundreds of students via direct messages was not scalable.
Lack of Progress Tracking: Learning materials were scattered across different platforms, leading to high drop-off rate.
Phase 2: Research - Diving into Data
To validate our assumptions and understand the market landscape, we conducted a multi-layered research process:
User Interviews: We conducted in-depth interviews with a diverse group of target language learners - not limited to existing students. This allowed us to gain a broader perspective on general learning frustrations, expectations from an educational app, and the key factors that influence a user's decision to join a new platform
Affinity Diagramming: To make sense of the qualitative data, we used affinity mapping to catogorize user pain points.
Competitive Analysis: We benchmarked direct and indirect competitors (such as Duolingo and local Learning Management Systems platforms) to analyze their onboarding flows and course structures, identifying gaps we could fill.
Heuristic Evaluation: We audited the current "scattered" learning journey against usability principles to pinpoint exactly where users were experiencing the most friction.
Phase 3: Design - From Structure to Solution
Before diving into high-fidelity visuals, my team focused on the structural integrity of the platform. This phase was highly iterative, as we prioritized finding the most efficient way to organize educational content and levels.
Information Architecture & Sitemap: We mapped out a centralized system to unify the previously scattered learning materials. Our goal was to create a "shallow" hierarchy where users could access any core feature within 2-3 taps.
The Problem: Our first draft of the Mega Menu suffered from "Cognitive Overload." Users had too many nested options, making it difficult to find specific courses quickly.
The Iteration Process: We went through several rounds of redesigning the menu's hierarchy. We focused on grouping logic—stripping away unnecessary sub-levels and prioritizing the most-searched categories.
The Solution: By simplifying the taxonomy and using a cleaner visual hierarchy, we transformed a cluttered navigation bar into a streamlined roadmap that allows users to reach their destination in seconds.
Evolution of the Mega Menu
User Persona: Marta
To keep our design user-centric, we focused on Marta. She represents our learners who need a structured, self-paced environment that feels encouraging and easy to navigate during their busy daily routines.
After our research phase, we curated a Moodboard to define the project's emotional tone. We aimed for an atmosphere that feels both academic and aspirational. The visual language combines organized, modern study environments with classic educational symbols to create a sense of structure and progress. This helped us align the "Vibe" of EngLisa with Marta’s need for a professional yet motivating learning space.
UI-KIT & Typography
Typography (Lexend Deca): We selected Lexend Deca as our primary typeface. Designed specifically to reduce cognitive noise and improve reading speed, it perfectly serves our mission of making language learning frictionless for busy users.
Color Strategy:
Instead of overwhelming the user with loud colors, we opted for a sophisticated and "trust-based" palette:
Primary Identity (Navy & Blues): The core of EngLisa’s visual identity relies on deep navies (#0D2D6B, #071F4D). We used these for Primary Actions and headers to evoke a sense of professional authority and reliability.
The Accent Palette: The Red (#D0232C) and Gold (#D1983D) were used sparingly as accent colors—likely for notifications, error states, or highlighting specific achievement badges—ensuring they don't distract from the main learning flow.
Visual Balance: We balanced these strong tones with a range of "Ice Blues" and "Off-Whites" (#F0F8FC, #E8ECF3) to create a calm, breathable interface that supports long-term focus.
From Sketches to Wireframes
In this phase, we moved from abstract ideas to concrete layouts through a layered design process:
Hand-Drawn Sketches: We began with rapid sketching. This allowed us to explore various layouts for the course dashboard and mobile views, filtering out complex ideas before committing to digital tools.
Low-Fidelity Wireframes (Figma): Following the sketches, we developed low-fidelity wireframes in Figma. We iterated on these wireframes multiple times to refine the Information Hierarchy, ensuring that the navigation stayed intuitive across both Desktop and Mobile.
Before finalizing the product, we needed to see how real users would interact with the EngLisa platform. We conducted usability tests with target learners, asking them to complete two core tasks:
Enrolling in a specific course through the Mega Menu.
Navigating to a lesson and checking their progress.
The testing phase provided us with invaluable feedback. While the overall experience was positive, we discovered that users needed even clearer visual cues for their daily goals.
Final Iteration: Based on these findings, we performed a final round of refinements. We enhanced the contrast of the Progress Tracker and simplified the mobile navigation even further to ensure Marta could jump back into her studies without any friction.
The Result: A validated, user-centered platform that bridges the gap between scattered social media learning and a professional educational experience.
Final Prototypes
Experience how EngLisa adapts to different learning environments:
[ 📱 Mobile Prototype ] [ 💻 Desktop Prototype ]
