Progresywna Aplikacja Mobilna

1. O Projekcie

Kontekst

Habit Bubbl to progresywna aplikacja mobilna (PWA) stworzona jako projekt dyplomowy na kierunku Informatyka (Uniwersytet Vizja) pod kierunkiem dra inż. Marcina Kacprowicza.

Problem

Grupa docelowa to osoby dorosłe aktywne zawodowo (ze szczególnym uwzględnieniem grupy wiekowej 18–30 lat), które mierzą się z brakiem motywacji, trudnościami w organizacji czasu, prokrastynacją oraz wysokim obciążeniem poznawczym wynikającym z łączenia pracy i obowiązków domowych — a dostępne na rynku aplikacje produktywnościowe nie oferują żadnego wsparcia, gdy zabraknie im samodyscypliny.

Cel

🎯 Skuteczna realizacja codziennych zadań i budowanie trwałych nawyków prowadzących do osiągania długoterminowych celów, niezależnie od stopnia ich trudności.

🎯 Duży nacisk na techniki UX — zoptymalizowaną ścieżkę użytkownika, intuicyjny interfejs oraz elementy gamifikacji — wspierające regularność działań i poczucie realnego postępu.

Ograniczenia

⚠️ Niestabilność połączeń mobilnych — aż 56% użytkowników smartfonów regularnie doświadcza problemów z siecią, więc aplikacja musiała w pełni działać offline.

⚠️ Realizacja solo w ramach pracy dyplomowej — od researchu po wdrożenie i optymalizację, bez zespołu, w 4 miesiące.

⚠️ Minimalizacja obciążenia poznawczego — interfejs musiał zostać prosty i intuicyjny mimo łączenia trzech warstw (zadania, nawyki, cele) w jednym systemie.

2. Badania

Zamiast ograniczonej, autorskiej ankiety wybrałem analizę danych już dostępnych w internecie (desk research), opierając założenia na globalnych raportach rynkowych (m.in. Statista, Google Web.dev, Global Wireless Solutions).

Na rynku istnieje wiele aplikacji wspierających produktywność — m.in. Microsoft To Do, InnerGrow Habit czy Apple Reminders. Ich zaletą jest prostota, ale analiza konkurencji ujawniła wspólną, istotną lukę funkcjonalną:

• Brak mechanizmów motywacyjnych: gdy użytkownik nie wykona zadania, żadna z tych aplikacji nie oferuje wbudowanego sposobu na pomoc mu wrócić na właściwe tory.
• Brak powiązań strukturalnych: zadanie, nawyk i cel funkcjonują osobno — nie ma połączenia, które wspierałoby regularność i budowanie trwałych nawyków.
• Brak celów w ogóle: większość nawet najmniejszych zadań użytkownicy wykonują w imię większego celu, a żadna z analizowanych aplikacji go nie uwzględnia.

Dane ilościowe potwierdziły też słuszność wyboru architektury: ponad połowa globalnego ruchu w internecie pochodzi z urządzeń mobilnych, a aż 56% ich użytkowników regularnie doświadcza problemów ze stabilnością sieci. Skalę potencjału PWA pokazuje przykład Alibaby, która po przejściu na tę architekturę odnotowała średnio 76-procentowy wzrost konwersji i zaangażowania użytkowników.

Habit Bubbl odpowiada na zidentyfikowaną lukę zintegrowanym systemem, w którym pojedyncze działania budują nawyki, a te bezpośrednio przekładają się na postęp w realizacji celów głównych.

3. Ideacja

Architekturę informacji oparłem na czterech ekranach — Liście Zadań, Kalendarzu, Nawykach ze statystykami oraz Ekranie Bohatera — połączonych Tab Navigation, znaną użytkownikom z natywnych aplikacji mobilnych. Dla kluczowych funkcji przygotowałem w FigJam user flows, które przeanalizowałem pod kątem liczby kroków i potencjalnych pain pointów.

Jedną z decyzji podjętych na tym etapie było celowe wykluczenie edycji pojedynczego zadania — żeby nie obciążać użytkownika nadmiarem opcji na ekranie głównym, edycję zostawiłem tylko dla powtarzalnych nawyków i długoterminowych celów.

Pracę nad warstwą wizualną zacząłem od logo i style guide w stylu „Liquid Glass", który wyznaczył ramy projektowe: spójną kolorystykę, minimalizację obciążenia poznawczego oraz dostępność (kontrast, wielkość elementów interaktywnych). Interfejs zaprojektowałem w Figmie — od makiet niskiej wierności, przez makiety wysokiej wierności, po interaktywny prototyp — weryfikując założenia jeszcze przed implementacją.

Stos technologiczny i narzędzia:

• Projektowanie UX/UI: Figma (makiety lo-fi/hi-fi, design system), FigJam (user flows, diagramy).
• Frontend: HTML5, CSS3, JavaScript (ES6+).
• PWA i architektura: Service Worker (tryb offline, cache), Web App Manifest (instalowalność), IndexedDB (asynchroniczna baza lokalna, wydajniejsza niż Local Storage przy większej ilości danych).
• Narzędzia i testy: Visual Studio Code, Chrome DevTools, Google Lighthouse.

4. Iteracje

Przeprowadziłem serię badań użyteczności — testy scenariuszowe, testy first-click oraz analizę heurystyczną — na grupie docelowych użytkowników. Ujawniły one złamania heurystyk elastyczności i obsługi błędów (H7, H9) oraz spójności (H4), a także bariery dostępności WCAG (kontrast poniżej 4.5:1 na neonowych elementach tła). Każdy znaleziony problem przełożył się na konkretną poprawkę:

• Zbyt agresywny kolor i nieczytelne tło: intensywna fuksja na ekranie startowym męczyła wzrok, a słabe przyciemnienie tła sprawiało, że teksty pod spodem przebijały i dekoncentrowały. Złagodziłem odcień i wdrożyłem pełne tło ponad warstwą danych w onboardingu.
• Gesty w przewodniku ignorowane: użytkownicy intuicyjnie próbowali przewijać tutorial gestem swipe zamiast klikać kropki nawigacyjne, a po włączeniu powiadomień brakowało potwierdzenia. Dodałem pełną obsługę swipe oraz systemowe potwierdzenie po aktywacji powiadomień.
• Niespójne nazewnictwo sekcji głównej: etykieta „today's tasks" nie pasowała do zawartości, bo mieszała zadania i nawyki. Zmieniłem nazwę i nagłówek na „To Do Today".
• Za małe tarcie przy usuwaniu: kliknięcie gdziekolwiek w kafelek natychmiast odznaczało nawyk, a usunięcie wymagało tylko dwóch kliknięć, bez cofnięcia. Wprowadziłem mechanizm przytrzymania — element znika dopiero po 3 sekundach.
• Brak feedbacku XP i błędy audio: po odhaczeniu zadania brakowało wyraźnej informacji o zdobytym XP, a dźwięk odhaczenia aktywował się błędnie też przy cofaniu zaznaczenia. Dodałem wyskakujący „bąbelek z XP" i podpiąłem dźwięk pękającej bańki wyłącznie pod pozytywną akcję ukończenia.
• Blokująca się lista nawyków na mobile: elementy nachodziły na siebie, a interfejs okazjonalnie blokował się przy edycji kilku pozycji naraz. Zmieniłem architekturę na rozwijaną listę pionową, eliminując nakładanie się elementów.
• Spowolnienia głównego wątku: dynamiczne renderowanie wielu „bąbelków" nawyków blokowało interfejs na słabszych urządzeniach (długie Long Tasks, słabe FCP/LCP). Zoptymalizowałem kod pod kątem Total Blocking Time i usunąłem render-blocking CSS z krytycznej ścieżki renderowania.

5. Systematyzacja Komponentów: Storybook

Po ukończeniu głównej wersji aplikacji chciałem usystematyzować swoją pracę i jeszcze mocniej skupić się na komponentach interfejsu — dlatego wdrożyłem Storybook (26 stories dla 5 komponentów) do istniejącej aplikacji vanilla JS/HTML/CSS, bez kroku budowania. Zamiast wymuszać framework, dobrałem narzędzie (@storybook/html-vite) do faktycznej architektury kodu — funkcje zwracające węzły DOM, które aplikacja już traktowała jak komponenty.

• Świadomy zakres, nie przepisywanie od zera: nie refaktoryzowałem całego ~2000-liniowego pliku UI na bibliotekę komponentów. Wydzieliłem tylko elementy z realnym powodem — rzeczywistą czystością funkcji albo potwierdzonym powielaniem tego samego znacznika na 4 podstronach.
• Izolacja komponentów ujawniła realne błędy: animacja pierścienia postępu była martwa przez niedopasowaną nazwę klasy CSS (naprawione), a dodatek do testowania dostępności wykrył brakujące atrybuty „for" w etykietach formularza — po znalezieniu 2 z 8 przypadków, przejrzałem cały modal i naprawiłem wszystkie osiem.
• Redesign „premium glass" bez nowych wartości: podniosłem bąbelki zadań o jeden poziom na istniejącej pięciopoziomowej skali tokenów „--glass-*" (tło, rozmycie, obramowanie, cień) — żadna wartość nie została wymyślona od nowa.

6. Efekt Końcowy

Aplikacja składa się z czterech głównych modułów wspierających produktywność:

• Lista Zadań: Zarządzanie bieżącymi obowiązkami w danym dniu.
• Kalendarz: Planowanie przyszłych działań oraz weryfikacja historii zadań.
• Ekran Nawyków i Statystyk: Śledzenie regularności i analiza stopnia utrwalenia nawyków.
• Ekran Bohatera (Gamifikacja): Zarządzanie długoterminowymi celami, podgląd statystyk rozwoju oraz poziomu zaawansowania użytkownika.

Optymalizacja wydajności — podział jednego pliku CSS (86 KB) na mniejsze arkusze ładowane tylko tam, gdzie są potrzebne, lokalne hostowanie czcionek zamiast Google Fonts, minifikacja CSS oraz konwersja grafik do WebP i dźwięków do MP3 — przełożyła się na wymierną poprawę wyników Google Lighthouse:

7. Po Projekcie

Kluczowe Wnioski

🧠 Wykorzystanie architektury PWA w połączeniu z zasadami UX oraz mechanizmami grywalizacji pozwoliło stworzyć lekkie, wydajne i niezależne od połączenia internetowego narzędzie. Połączenie zadań, nawyków i celów w jednym systemie skutecznie redukuje obciążenie poznawcze i pomaga utrzymać długofalową motywację użytkowników.

🔁 Implementacja w PWA pozwoliła mi przetestować każdą funkcję w praktyce, także w trybie offline, i wprowadzać poprawki na podstawie własnych obserwacji zachowań użytkowników — nie tylko założeń projektowych.

Perspektywy Rozwoju

Trzy kierunki, w które rozwijałbym Habit Bubbl dalej:

• 🔜 Grywalizacja społecznościowa (priorytet): konta z synchronizacją w chmurze, ekran znajomych ze wspólnymi wyzwaniami i rywalizacją, system losowych nagród z personalizowanymi awatarami.
• 🔜 Rozbudowa systemu RPG i nagród: naliczanie XP per konkretny nawyk z rozwojem powiązanej umiejętności Bohatera, odblokowywane skórki interfejsu.
• 🔜 Optymalizacja UX i danych: system flag do kategoryzacji i filtrowania zadań, zaawansowane sortowanie celów wg terminu realizacji, zapamiętywanie ulubionych lokalizacji dla szybszego planowania.