Mova - aplikacja do nauki języków
- UX / UI Design
- Web & Mobile
- Language app
Project overview
Kontekst projektu
Mova to projekt konceptualny oparty na realnym projekcie komercyjnym. W zespole odpowiadałam za makiety, interaktywny prototyp i design system zapewniający spójność produktu. Wersję portfolio przygotowałam samodzielnie, pokazując kluczowe decyzje projektowe i podejście do projektowania aplikacji edukacyjnych.
Problem
Nauka języków obcych wymaga regularności i poczucia postępu. W aplikacjach rynkowych często pojawiają się dwa skrajne problemy: nadmierna gamifikacja lub przytłoczenie ogromem treści na starcie.
Nadmierna gamifikacja: użytkownik wraca dla streaka i rankingu, zamiast realnie uczyć się języka.
Przytłoczenie treścią: zbyt duża ilość materiału na wejściu zniechęca jeszcze przed rozpoczęciem nauki.
Cel
Celem było zaprojektowanie aplikacji, która prowadzi użytkownika przez naukę spokojnie i konsekwentnie. Narzędzie ma pokazywać, co zostało zrobione, co jest w toku i co jest kolejnym krokiem, bez walki o uwagę użytkownika.
Design process
Research i analiza konkurencji
W researchu przeanalizowałam Duolingo, Babbel i Busuu pod kątem budowania nawyku, prezentacji progresu i prowadzenia użytkownika 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
Na podstawie analizy zdefiniowałam główne zasady, którymi kierowałam się podczas projektowania.
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.
Information architecture
Architektura informacji
Struktura aplikacji została zaprojektowana tak, aby użytkownik zawsze miał pewność, w jakim miejscu całego procesu się znajduje. Lekcje uporządkowane są tematycznie w ramach modułów, a każda lekcja jest podzielona na trzy logiczne etapy: poznanie materiału, gdzie wprowadzane są nowe treści; ćwiczenia, czyli interaktywna praktyka; podsumowanie, które dostarcza feedback i wskazówki do dalszej pracy.
Dodatkowo użytkownik może tworzyć własną bazę słówek w słowniku i powtarzać je za pomocą fiszek dostępnych na stronie głównej. Ta funkcjonalność ma dać poczucie, że aktywnie budują swoją wiedzę, a nie tylko konsumują przygotowany materiał.
Challenges
Wyzwania i rozwiązania
Jednym z głównych wyzwań było pokazanie progresu bez przytłaczania użytkownika. Rozwiązałam to, koncentrując uwagę na bieżącym module i subtelnym wskaźniku pozycji w kursie.
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) wykorzystałam oszczędnie jako akcent dla głównych akcji, nawigacji i progresu. Dzięki temu użytkownik szybko skanuje ekran i skupia się na nauce zamiast na bodźcach wizualnych.
Ekrany lekcji i podsumowań
Najwięcej uwagi poświęciłam lekcjom i ekranom podsumowań. Feedback jest konkretny: użytkownik widzi co zrobił dobrze, gdzie popełnił błąd i co poprawić, zamiast ogólnych komunikatów.
Podejście do wersji mobilnej i webowej
Mobile i web projektowałam równolegle jako równorzędne narzędzia. Mobile wspiera krótkie sesje i powtórki, a web dłuższą pracę z materiałem. Spójność między platformami ułatwia płynne przechodzenie między urządzeniami.
System projektowy
Stworzyłam skalowalny UI Kit z komponentami, stanami interakcji, tagami, kartami lekcji i systemem kolorów opartym o Figma Variables. To pozwoliło zachować spójność i łatwo rozwijać kolejne widoki.
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
Gdyby projekt był kontynuowany, kolejnym etapem byłyby testy użyteczności prototypu z grupą docelową.
Ważnym elementem byłoby też zaprojektowanie pełnej ścieżki onboardingowej, która wprowadza użytkowników w możliwości aplikacji bez przytłaczania informacjami.
