# NexTutor — nowa architektura produktu (mockup UX/UI) — brief do oceny > Dokument do przekazania innemu modelowi AI jako materiał do krytyki. > To **prototyp/mockup**, nie kod — oceniamy architekturę informacji, nawigację i kierunek wizualny, nie implementację. --- ## 1. Czym jest NexTutor (kontekst) NexTutor to platforma korepetycji/samouczenia oparta na AI (tutor konwersacyjny + lekcje + ćwiczenia + narzędzia). Obecny stan produkcyjny: - **3000+ stron treści** (lekcje, wzory, kalkulatory, symulacje laboratoryjne, zagadki) — głównie polski program maturalny (CKE). - **Szkoła średnia PL** — dojrzały wertykał (lekcje, matura próbna, powtórki). - **Studia PL** — pion akademicki (matematyka: 15 działów, ~104 lekcje w bogatym formacie: diagnoza → „solver" krok po kroku → przykłady → drabina ćwiczeń → samoocena → transfer). Dziś dostępny tylko dla admina. - **Wersje angielskie** — pilotaż (High School / University), kilka lekcji. - Silnik jest z założenia **domenowo- i krajowo-agnostyczny** (uczy czego-kolwiek wg modelu „wymaganie → dowód opanowania → mapa wiedzy"). ### Problem, który redesign ma rozwiązać 1. **„Trafiamy do wszystkich i do nikogo."** 3000 stron SEO ściąga ruch, ale wejście jest bezładne — brak jasnej *następnej akcji* dla zalogowanego ucznia. 2. **Słaba retencja i aktywacja.** Po premierze nowego tutora realnie ~0 rozpoczętych sesji — UI nie prowadzi za rękę. 3. **Produkt rośnie wszerz.** Docelowo: **3 poziomy szkół × 2 języki** (+ dalsze przedmioty). Potrzebna architektura, która to udźwignie bez chaosu i bez mnożenia osobnych aplikacji. 4. **Mobile.** Grupa docelowa to młodzież — a dotychczasowy UI jest „responsywną stroną", nie aplikacją. --- ## 2. Cele redesignu (co próbujemy osiągnąć) - **Jedna jasna „następna akcja"** na pulpicie — uczeń po wejściu wie, co robić (Kontynuuj lekcję / napraw lukę / przed kolokwium). - **Mobile-first, feel aplikacyjny, pod młodzież** — bez infantylizacji (nastolatek ≠ dziecko; studia/rodzic potrzebują wiarygodności). - **Skalowalna matryca 3×2** — poziom szkoły × język, docelowo z podstawówką, bez przebudowy aplikacji przy dokładaniu kolejnych. - **Jedno konto, wiele izolowanych przestrzeni** — jak workspace'y: jedna tożsamość, wiele kontekstów nauki. - **Stała aplikacja, zmienna treść** — ten sam szkielet (nawigacja, pulpit, reader lekcji) dla wszystkich przestrzeni; różni się treść i *ton*. --- ## 3. Grupy docelowe | Przestrzeń | Odbiorca | Ton | |---|---|---| | Podstawówka (PL MEN / 🌍 International School) | 10–14 lat (+ rodzic) | najbardziej zabawowy, grywalizacja | | Szkoła średnia (PL liceum / ENG High School) | 15–19 lat | energiczny, app-like, grywalizacja | | Studia (PL / ENG University) | 18+ | stonowany, „ile do kolokwium", wiarygodność | Energia wizualna **skaluje się per poziom** — ten sam system komponentów, różne natężenie gamifikacji. --- ## 4. Architektura informacji (przepływ) ``` 1 LOGOWANIE (jedna tożsamość / jedno konto) │ ▼ RESOLVER — matryca 3×2 „Gdzie się dziś uczysz?" poziom szkoły (3) × język (2) │ (wybór = wejście w JEDNĄ izolowaną przestrzeń) ▼ PRZESTRZEŃ (izolowana: tylko jej treści + jej język) │ ▼ PULPIT — „następny krok" (duży hero: Kontynuuj) + skróty + postęp/seria │ ▼ 4 OBSZARY (stała nawigacja — dolny pasek w mobile): • NAUKA — lekcje, ścieżka, mapa wiedzy, Tutor AI (w kontekście lekcji) • ĆWICZ — quizy, fiszki, zbiór zadań, kolokwium/sprawdzian • NARZĘDZIA — kalkulatory, wzory, laboratorium • ODKRYWAJ — zagadki, ciekawostki, treści otwarte Tutor AI należy do NAUKI (trzon produktu), nie do Narzędzi — dostępny z lekcji jako bottom-sheet, nigdy jako „kolejne narzędzie obok kalkulatora". │ ▼ W NAUCE — 3 poziomy zaawansowania tematu: Zrozum (teoria) → Ćwicz (zadania) → Materiały (źródła, pogłębienie) ``` **Zasady skalowania:** - Resolver rośnie **wierszami (poziomy)**; nowy poziom = nowy wiersz, nie nowy produkt. - Podstawówka jest już w resolverze jako **„Wkrótce"** (miejsce zarezerwowane) — PL = podstawa MEN, ENG = International School (program międzynarodowy, łapie wiele krajów). - Przełączanie przestrzeni odbywa się przez **chip w nagłówku** (`Liceum · PL ▾`), bez wylogowania. - Izolacja języka: w przestrzeni ENG **zero polskich etykiet**. **Domyślny język interfejsu (auto‑detekcja, DEFAULT nie blokada):** - **Sygnał główny = język przeglądarki** (`Accept-Language` / `navigator.language`): zaczyna się od `pl` → interfejs polski; w przeciwnym razie → angielski. Jest trafniejszy niż samo geo‑IP: obsługuje Polaków za granicą (diaspora chce PL mimo obcego IP) i ekspatów w Polsce (chcą EN mimo polskiego IP). - **Geo‑IP = tylko tie‑break** (gdy język przeglądarki niejednoznaczny), nigdy sam. - **Zawsze przełączalne** — widoczny toggle `PL | EN` na resolverze; wybór użytkownika zapamiętywany i nadrzędny wobec auto‑detekcji. - **Bez twardego przekierowania po IP** — ustawiamy domyślny język interfejsu, ale URL i treść zostają (ochrona SEO: Googlebot crawl‑uje z USA, nie wolno mu podać EN dla polskich URL‑i). - Dla użytkownika spoza PL resolver renderuje się po angielsku i **wyróżnia środowiska ENG** (High School / University na pierwszej pozycji); środowiska PL pozostają dostępne obok. Mockup pokazuje oba warianty: `Resolver (PL)` i `Resolver (EN)`. - To dotyczy **języka interfejsu/framingu** — macierz dostępnych środowisk (poziom × język treści) jest ta sama niezależnie od lokalizacji odwiedzającego. **Dostęp między przestrzeniami — reguła DWÓCH OSI:** Konto ma jeden **dom** (wybrane środowisko). Dostęp do innych przestrzeni zależy od osi: - **Oś pionowa = poziom szkoły** (Studia → Liceum → Podstawówka). **Fundamenty w dół są w zasięgu AUTOMATYCZNIE** (reach‑down): gdy temat opiera się na niższym poziomie, silnik „Napraw lukę"/Tutor podrzuca dokładnie tę lekcję‑pomost — **może ją wygenerować w locie** (dedykowana lekcja uzupełniająca braki) — i wraca do domu. Nigdy w górę automatycznie. Materiał „pożyczony" jest oznaczony (np. „fundament · Liceum”). - **Oś pozioma = język treści** (Studia PL ↔ University ENG). **Nigdy automatycznie, nigdy wmieszane** — angielski bliźniak to materiał *równoległy*, nie prerekwizyt, więc silnik go nie podrzuca. Dostępny tylko przez **świadomy switch** (chip środowiska). - **Switch (ekran „Przełącz przestrzeń")** zmienia cały dom (pulpit, nawigacja, next‑step) — dotyczy zmiany poziomu „na dłużej" ORAZ zmiany języka. To jedyna droga „w górę" i „w bok". - **Nic nie jest wmieszane w dom.** Twoje Studia PL zostają studenckie i polskie; liceum wchodzi tylko jako pojedynczy fundament na żądanie, a ENG tylko po świadomym przełączeniu. Zero szumu w głównym doświadczeniu. - Treść lekcji jest i tak **publiczna** (SEO/GEO) — „dostęp" nie jest osią płatną; płatna jest personalizacja/silnik (patrz model Free/Pro). Rzecz w tym, co jest *domem*, a co świadomie odwiedzasz. - Opcja na przyszłość (nie rdzeń): per‑lekcja toggle „czytaj po angielsku”, gdy istnieje bliźniak — dwujęzyczne słownictwo bez robienia z ENG osobnego domu. --- ## 5. Zasady projektowe (kierunek wizualny) **Mobile = projekt podstawowy, desktop = adaptacja** (nie odwrotnie). Wzorce aplikacyjne (feel natywnej apki, inspiracja: Duolingo / Brilliant / Khan — ale bardziej „serio"): - **Dolny pasek zakładek** (bottom tab bar) dla 4 obszarów — kciukowy zasięg. - **Hero „następny krok"** — duża karta z pierścieniem postępu + jeden gruby CTA. - **Grywalizacja (skalowana per poziom):** seria (streak 🔥), cel dnia, % opanowania, „odblokuj następny temat". Dla liceum — widoczna, nie krzykliwa; dla studiów — stonowana. - **Reader lekcji:** pasek kroków (4/7), duże chip-karty, pływający „Zapytaj Tutora", sticky „Dalej →". - Śmiała typografia, duży promień narożników, wyraziste akcenty kolorystyczne. Paleta (tokeny): fiolet `#5B46E8` = Nauka, teal `#0E9E8E` = Ćwicz, amber `#D98324` = Materiały/Narzędzia; font Inter. --- ## 6. Co zawiera mockup (mapa płótna) Płótno ma kilka rzędów (oznaczonych nagłówkami). **Cały mockup jest w jednym, spójnym systemie app-like** — desktop i mobile używają tej samej nawigacji 4 obszarów i tego samego języka wizualnego. 1. **Logowanie → resolver** — ekran logowania (jedno konto) + resolver 3×2. 2. **Dashboard — 4 środowiska (desktop)** — ten sam układ pulpitu dla Liceum PL / High School ENG / Studia PL / University ENG (izolacja + spójność; górny pasek nawigacji 4 obszarów). 3. **Dashboard — stany użytkownika** — nowy / powracający po przerwie / z luką w prerekwizycie / przed kolokwium (pokazuje, że pulpit jest **state-driven**, nie feature-driven). 4. **Widoki wewnętrzne (desktop)** — Nauka (Lekcje) · Ćwicz (hub) · Narzędzia · Odkrywaj. 5. **Mobile — wejście i home** — logowanie, resolver 3×2, home („Kontynuuj"), home w stanie luki. 6. **Mobile — 4 obszary + reader** — Nauka (lista lekcji), Ćwicz (hub), Narzędzia, Odkrywaj oraz ekran lekcji (reader + Tutor jako bottom-sheet). ### Uczciwe zastrzeżenia dla oceniającego - To mockup klikalny w wybranych miejscach; **brak** realnych danych, routingu, silnika „następnego kroku", płatności (cennik/subskrypcje to osobny wątek) i trybu ciemnego. - Treści sub-stron w środowiskach ENG są w mockupie uproszczone (ENG = pilot) — kluczowy jest język etykiet i izolacja, nie kompletność treści. --- ## 7. Pytania do oceny (prosimy o krytykę) 1. **Zrozumiałość dla 15-latka.** Czy przepływ login → resolver → pulpit → „następny krok" jest oczywisty bez tłumaczenia? 2. **Resolver / skalowanie.** Czy matryca 3×2 (wiersze=poziomy, kolumny=języki) jest czytelna i czy udźwignie 8–10 przestrzeni? Lepszy byłby przełącznik języka u góry zamiast 2 kolumn? 3. **„Jedno konto, wiele przestrzeni."** Czy model jest intuicyjny, czy użytkownik pomyśli, że to osobne konta? Czy chip przełączania w nagłówku wystarcza? 4. **Głębokość nawigacji.** 4 obszary → w Nauce 3 poziomy (Zrozum/Ćwicz/Materiały). Czy to nie za dużo zagnieżdżenia na mobile? 5. **Kierunek app-like / młodzież.** Czy trafia w nastolatka bez infantylizowania? Czy grywalizacja (seria/cel/odblokowania) motywuje, czy wywołuje presję? Czy skalowanie tonu per poziom (podstawówka ↔ studia) jest słuszne? 6. **Retencja / aktywacja.** Czy „następny krok" + stany pulpitu realnie rozwiążą problem zerowych rozpoczętych sesji? Czego brakuje (powiadomienia? cel tygodniowy? powrót po przerwie)? 7. **Ryzyka i ślepe punkty.** Co pominęliśmy? Gdzie architektura się złamie przy wzroście? 8. **Porównanie.** Jak to wypada względem Duolingo / Khan Academy / Brilliant pod kątem IA i onboardingu? --- ## 8. Jak oglądać Mockup jest prywatnym artefaktem (Design canvas) — link otwiera tylko właściciel konta. Aby przekazać innemu AI do oceny **wizualnej**, dołącz zrzuty ekranu poszczególnych artboardów (desktop + ramki mobilne). Ten dokument opisuje całość słownie, więc model tekstowy może ocenić **architekturę i kierunek** także bez obrazów. --- ## 9. Zmiany w v2 (po recenzji trzech AI — ChatGPT, Gemini, Grok) Wprowadzone na podstawie zgodnych uwag: - **Pulpit = tylko „następny krok".** Usunięto katalog 6 równorzędnych kafli. Został hero (jedna główna akcja) + postęp. Tryby treningu (quizy/fiszki/sprawdzian/zbiór) przeniesione do obszaru **Ćwicz**. - **Jeden spójny system nawigacji** desktop = mobile: górny pasek / dolny tab bar z 4 obszarami **Nauka · Ćwicz · Narzędzia · Odkrywaj** (ENG: Learn · Practice · Tools · Explore). Koniec rozdwojenia. - **„Więcej" rozbite** na osobne widoki **Narzędzia** i **Odkrywaj** (konkretne nazwy zamiast „Więcej"/„More"). - **Zero „Level 1/2/3" w UI** — w interfejsie tylko nazwy obszarów; poziomy (L1–L4) zostają w logice silnika i Mapie wiedzy. - **Mobile w pełni app-like** — porzucono starszy web-ish układ; wszystkie ekrany w stylu aplikacyjnym (hero + pierścień, seria/cel dnia, bottom tabs). - **Stan „Napraw lukę" jako pełnoprawny wariant home** (gap-hero), obok „Kontynuuj". - **Tutor w lekcji = bottom-sheet** (do połowy ekranu) — nie zasłania rozwiązywanego zadania. - **Resolver: przyszłe środowiska zdegradowane** do cienkiego paska „Wkrótce" (Podstawówka PL = podstawa MEN · 🌍 ENG = International School), nie równorzędne puste karty. - **Profil/statystyki/przełącznik środowiska** pod awatarem w nagłówku (nie zabiera taba). **Świadomie poza mockupem (logika silnika, nie UI):** next-step z grafu zależności + mastery + poziomu (nie liniowej kolejności lekcji); „Ćwicz" filtrowany po aktualnym zakresie ucznia; reguła `default_context` (powracający omija resolver). To rekomendacje do implementacji, nie zmiany ekranów. ### Decyzja otwarta (świadomie niełączona przez zespół) Czwarty tab: utrzymano **Odkrywaj** (zgodnie z pierwotną wizją 4 obszarów). Gemini sugerował w jego miejsce **Profil**, a Grok — Narzędzia tylko kontekstowo. Zostawiamy Odkrywaj jako tab; Narzędzia są jednocześnie tabem i dostępne kontekstowo w lekcji; Profil pod awatarem. --- ## 10. Monetyzacja — pakiety PER ŚRODOWISKO (zgodne z produkcją) Cennik jest **per środowisko** (nie account‑wide). Każdy poziom ma 4 tiery; wyższy zawiera niższy. Płatna oś to **narzędzia + silnik**, nie dostęp do treści (treść wejściowa jest otwarta/SEO). | Poziom | Free | Basic | Pro | Egzamin | |---|---|---|---|---| | **Liceum** (live) | kl. 1 | **49** · kl. 2–4 + narzędzia‑coach | **79** · silnik | **149 · Matura** | | **Studia** | podgląd | **49** | **79** | **149 · Sesja** | | **Podstawówka** | kl. wejściowa | **39** | **59** | **99 · Egzamin 8‑kl.** | | **Rodzina** (cross‑poziom) | — | — | **129** · Pro dla ≤3 dzieci | — | Co odblokowuje każdy tier (Liceum, z prod `/plany`): - **Free** — przedmioty **klasy 1** · czat z lekcją · lektury, notatki, lab, wzory, kalkulatory. - **Basic 49** — + klasy **2–4** · Writing Coach · Trener ortografii · Notatki AI (PDF/zdjęcia) · Wyzwania · Dashboard rodzica · Panel nauczyciela. - **Pro 79** — + **silnik**: Mapa wiedzy + „następny krok" · Sprawdziany z działów · Exam Radar · **Napraw lukę (lekcje generowane w locie)**. - **Matura 149** — + Matura próbna (arkusze CKE) · Matura ustna · powtórki maturalne · cel + plan poprawy. Warstwa egzaminu ma inną nazwę per poziom (ta sama rola): **Matura / Sesja / Egzamin 8‑klasisty**. Zasady: - **Konto Free automatycznie** po rejestracji — zero plan‑picka na wejściu (aktywacja to bottleneck). Upsell **w kontekście** (paywall przy funkcji, np. Writing Coach → Basic), nie ściana. - **Reach‑down (fundamenty niższego poziomu) jest dostępny niezależnie od pakietu** — to nie jest oś płatna (patrz reguła dwóch osi). Płacisz za silnik/narzędzia w SWOIM środowisku. - Płatność: **Stripe Managed Payments (MoR)** — VAT/OSS po stronie Stripe (już na prodzie). - Gap Scanner wygaszany (evidence→mastery) → w nowym cenniku „Mapa wiedzy / Napraw lukę" zamiast „Gap Scanner".