Przejdź do treści
Mova - okładka projektu

Mova

Czytelna ścieżka nauki języków

Mova to koncepcja aplikacji do nauki języków, oparta na projekcie komercyjnym. Skupiłam się na strukturze lekcji, prezentacji postępów i spójnym interfejsie mobile i web, który wspiera naukę zamiast konkurować z materiałem.

Problem
Znalezienie równowagi między motywującym interfejsem a spokojną przestrzenią do nauki, bez nadmiaru elementów grywalizacji i przytłaczającej ilości treści.
Cel
Zaprojektowanie aplikacji, która prowadzi przez materiał krok po kroku i jasno pokazuje postęp.
Efekt
Projekt widoków mobile i web ze strukturą lekcji, informacją zwrotną oraz UI Kitem przygotowanym do rozwijania kolejnych ekranów.

Badania

Porównałam Duolingo, Babbel i Busuu, przyglądając się budowaniu nawyku, prezentacji postępów i prowadzeniu użytkownika przez materiał. Analiza pomogła mi określić kierunek Mova - krótkie etapy nauki, wyraźne miejsce w strukturze kursu i ograniczenie elementów odciągających uwagę od treści.

Te założenia przełożyłam na architekturę aplikacji. Lekcje pogrupowałam w moduły tematyczne, a każdą oparłam na sekwencji materiał, ćwiczenia i podsumowanie. Słownik i fiszki uzupełniają tę ścieżkę o możliwość samodzielnych powtórek, głównie skupiając się na szybkich powtórkach na urządzeniach mobilnych.

Mova - mobilny kontekst nauki

Rozwiązanie i kluczowe decyzje

Bieżący moduł stanowi centrum widoku, a wskaźniki postępu pełnią rolę pomocniczą. Użytkownik ma widzieć, na jakim etapie kursu jest i co może zrobić dalej, bez dominujących rankingów czy dodatkowych bodźców. Pomarańczowy kolor brandowy wykorzystałam przede wszystkim w akcjach, nawigacji i oznaczeniach postępu.

Dużo uwagi poświęciłam informacji zwrotnej w ćwiczeniach i podsumowaniach. Zaprojektowane komunikaty wskazują, co poszło dobrze, gdzie pojawił się błąd i co warto poprawić. Słownik oraz fiszki pozwalają wrócić do wybranego słownictwa poza głównym przebiegiem lekcji.

Mobile i web potraktowałam jako dwa konteksty nauki. Wersję mobilną zaprojektowałam z myślą o krótkich sesjach i szybkich powtórkach, a webową o dłuższej pracy z materiałem. Zachowałam wspólną logikę i język wizualny, dostosowując układ do dostępnej przestrzeni.

Mova - zadania i powtórki w wersji web

Design

Warstwę wizualną Mova oparłam na jasnych powierzchniach, neutralnych odcieniach i pomarańczowym akcencie wyróżniającym główne działania, nawigację oraz postęp nauki. Nunito Sans nadaje aplikacji przyjazny charakter, a różne grubości kroju porządkują hierarchię treści bez nadmiaru dekoracji.

Te zasady przełożyłam na UI Kit obejmujący komponenty lekcji, tagi i stany interakcji. Style typograficzne oraz Figma Variables porządkują wspólne wartości, ułatwiając zachowanie spójności między mobile i web oraz rozwijanie kolejnych ekranów.

Mova - paleta kolorów, typografia i UI Kit

Rezultat i wnioski

Powstała koncepcja aplikacji łączącej uporządkowaną ścieżkę kursu z samodzielnymi powtórkami. Projekt pozwolił mi przepracować hierarchię informacji w produkcie edukacyjnym oraz różnice między projektowaniem na telefon i komputer.

Kolejnym krokiem byłyby testy prototypu z osobami uczącymi się języków. Sprawdziłabym zrozumiałość struktury lekcji, prezentacji postępu i informacji zwrotnej. Rozwinęłabym również onboarding, który stopniowo przedstawia możliwości aplikacji.

Podgląd obrazu

100%

Wczytywanie obrazu…

Powiększ przyciskami, kółkiem myszy lub dwoma palcami. Przesuń obraz, aby zobaczyć szczegóły. Kliknij obraz, aby przybliżyć lub wrócić do widoku początkowego.