Mova - aplikacja do nauki języków
- UX/UI Design
- Web & Mobile
- EduTech
Podsumowanie projektu
Kontekst projektu
Mova to koncept aplikacji do nauki języków oparty na realnym projekcie komercyjnym. Skupiłam się na strukturze lekcji, czytelnym progresie i systemie UI, który wspiera naukę zamiast konkurować z treścią.
Najważniejsze
Projekt w skrócie
Problem
Aplikacje do nauki języków często wpadają w nadmierną gamifikację albo przytłaczają użytkownika zbyt dużą ilością treści.
Cel
Zaprojektować spokojną, czytelną aplikację, która prowadzi przez naukę krok po kroku i jasno pokazuje progres.
Efekt
Powstał koncept aplikacji mobile i web z logiczną strukturą lekcji, ekranami feedbacku i skalowalnym UI Kitem.
Proces projektowy
Research i analiza konkurencji
W researchu porównałam Duolingo, Babbel i Busuu pod kątem trzech rzeczy: nawyku, progresu i sposobu prowadzenia przez materiał.
Najważniejsze obserwacje z analizy:
- Gamifikacja skutecznie buduje nawyk, ale często kosztem jakości nauki.
- Brak jasnej struktury lekcji powoduje dezorientację i frustrację.
- Użytkownik potrzebuje czytelnego progresu i logicznej ścieżki materiału.
Definiowanie założeń projektowych
Z analizy wyciągnęłam zasady projektowe, które miały chronić aplikację przed dwoma skrajnościami: chaosem gamifikacji i zbyt ciężką strukturą kursu.
Jasność progresu
Użytkownik zawsze powinien wiedzieć, gdzie jest w strukturze kursu.
Stopniowe wprowadzanie materiału
Materiał podzielony na krótkie, logiczne etapy zamiast przytłaczających bloków.
Skupienie na treści
Design ma wspierać naukę i nie konkurować z materiałem edukacyjnym.
Elastyczność platform
Spójne doświadczenie na mobile i desktop, dopasowane do kontekstu użycia.
Architektura informacji
Architektura informacji
Strukturę oparłam na modułach i trzech etapach lekcji: materiał, ćwiczenia, podsumowanie. Dzięki temu użytkownik wie, gdzie jest w kursie i czego spodziewać się po kolejnym kroku.
Słownik i fiszki dają użytkownikowi własną bazę materiału do powtórek. To przesuwa doświadczenie z biernego przechodzenia lekcji w aktywne budowanie wiedzy.
Wyzwania
Wyzwania i rozwiązania
Największym wyzwaniem było pokazanie progresu bez presji i hałasu. Dlatego centrum widoku stanowi bieżący moduł, a wskaźniki postępu są pomocne, ale nie dominują ekranu.
Progres
- Lekcje są uporządkowane tematycznie w ramach modułów, co porządkuje cały proces nauki.
- Każda lekcja ma trzy etapy: poznanie materiału, ćwiczenia i podsumowanie.
- Użytkownik może budować własną bazę słówek i wracać do nich przez fiszki na stronie głównej.
Motywacja
- Wersja mobilna wspiera krótkie, regularne sesje oraz szybkie powtórki.
- Wersja webowa wspiera dłuższą pracę z materiałem i wygodę nauki przy biurku.
- Spójny design między platformami ułatwia płynne przechodzenie między urządzeniami.
Design
Decyzje projektowe i ekrany
Kolorystyka i hierarchia wizualna
Kolor brandowy (#FF6B35) ograniczyłam do akcji, nawigacji i progresu. Dzięki temu ekran prowadzi użytkownika, ale nie konkuruje z materiałem edukacyjnym.
Ekrany lekcji i podsumowań
Najwięcej uwagi poświęciłam lekcjom i podsumowaniom. Feedback pokazuje, co poszło dobrze, gdzie pojawił się błąd i co poprawić dalej, zamiast kończyć się ogólnym komunikatem.
Podejście do wersji mobilnej i webowej
Mobile i web potraktowałam jako dwa różne konteksty nauki. Telefon wspiera krótkie sesje i powtórki, a web spokojniejszą pracę z materiałem.
System projektowy
UI Kit zbudowałam wokół komponentów lekcji, stanów interakcji, tagów i Figma Variables. Dzięki temu kolejne widoki można rozwijać bez rozbijania spójności produktu.
Wnioski i nauka
- 1. Uświadomiłam sobie, jak kluczowa jest hierarchia informacji w aplikacjach edukacyjnych.
- 2. Przekonałam się, że prostota wymaga dyscypliny i skupienia na tym, co najważniejsze.
- 3. Design responsywny to więcej niż skalowanie elementów. Każda platforma ma inny kontekst użycia.
- 4. Inwestycja w system projektowy na starcie przyspiesza późniejsze iteracje i utrzymanie spójności.
Dalsze kroki
Kolejnym krokiem byłyby testy prototypu z osobami uczącymi się języków oraz onboarding, który pokazuje możliwości aplikacji bez zalewania użytkownika informacjami.
