Typ projektu: projekt zespołowy
Zakres: landing page, design system, projektowanie widoków aplikacji mobilnej i desktopowej, programowanie aplikacji w Angularze
O aplikacji
Opis projektu
Evaround to aplikacja podróżnicza tworzona przez zespół pasjonatów technologii i podróży. Celem było stworzenie narzędzia, które pozwoli użytkownikom w prosty sposób organizować wyjazdy i wydarzenia grupowe. Dołączyłam do projektu na etapie, gdy istniało już określone MVP (Minimum Viable Product), kolorystyka, typografia, logo oraz pierwszy landing page.
Problem do rozwiązania
Organizacja podróży w grupie często wiąże się z trudnościami:
- komunikacja rozproszona pomiędzy różnymi aplikacjami (Messenger, WhatsApp, e-maile),
- brak wspólnego miejsca na plan podróży, zdjęcia czy notatki,
- kłopotliwe rozliczenia kosztów między uczestnikami.
Zespół zidentyfikował lukę rynkową: potrzebę zintegrowanego narzędzia, które połączyłoby w sobie wszystkie te elementy w intuicyjny sposób.
Cele projektu
- Cel użytkownika: uproszczenie procesu planowania i komunikacji, zwiększenie przejrzystości oraz zmniejszenie chaosu organizacyjnego.
- Cel biznesowy: stworzenie działającego MVP, które można testować na rynku i w przyszłości rozwijać w kierunku monetyzacji (np. model subskrypcyjny, płatne rozszerzenia).
Rozwiązanie – funkcjonalności MVP
Wersja podstawowa aplikacji zawierała:
- tworzenie i współdzielenie wydarzeń,
- zapraszanie znajomych i przyjaciół do wydarzeń,
- plan dnia dostępny dla wszystkich uczestników,
- możliwość dodawania współdzielonych notatek, zdjęć i plików,
- dedykowane czaty dla każdego wydarzenia,
- prosty moduł budżetowy z opcją rozliczeń.
Możliwości rozwoju
Na dalszym etapie aplikacja mogłaby zostać rozbudowana o:
- integrację z zewnętrznymi serwisami (np. Booking, Strava),
- system rekomendacji atrakcji oparty na lokalizacji,
- udostępnianie swojej agendy innym osobom,
- personalizację wyglądu aplikacji,
- płatne rozszerzenia funkcjonalności.
Moja rola
W projekcie pełniłam podwójną funkcję — UI Designera oraz Frontend Developera.
Jako UI Designer:
- Dołączyłam do zespołu designerskiego, gdzie wspólnie w Figmie pracowaliśmy nad spójnym design systemem aplikacji. Regularne spotkania pozwalały na wypracowanie jednolitego stylu wizualnego i spójnych komponentów.
- Odpowiadałam za zaprojektowanie widoków planu dnia, notatek oraz budżetu.
- Na wczesnym etapie stworzyłam też panel administracyjny (desktop), obejmujący m.in. zarządzanie użytkownikami.
- Zaprojektowałam landing page, dostępny obecnie pod adresem evaround.com/pl, na którym wykorzystano także moje autorskie zdjęcia.
Jako Frontend Developer:
- Brałam udział w implementacji aplikacji we frameworku Angular.
- Zakodowałam zaprojektowany wcześniej panel zarządzania użytkownikami, w tym: system blokowania i odblokowywania kont, rejestr zmian, przypisywanie ról oraz usuwanie użytkowników.
- Byłam odpowiedzialna również za frontendową warstwę widoków planu dnia oraz notatek, zapewniając ich zgodność z projektem graficznym.
Współpraca w zespole
Jako zespół korzystaliśmy z ClickUp, który służył nam do planowania, zarządzania zadaniami i komunikacji między designerami a developerami. Dzięki temu praca była transparentna, a każdy członek zespołu miał wgląd w postępy projektu.
Proces projektowy – Panel zarządzania użytkownikami
Kontekst i wyzwanie
Panel administratora miał być narzędziem wspierającym osoby odpowiedzialne za zarządzanie społecznością aplikacji. Jego główną funkcją było umożliwienie szybkiego i intuicyjnego zarządzania użytkownikami: weryfikacji, blokowania, zmiany ról czy usuwania kont. Ważne było zachowanie przejrzystości interfejsu, ponieważ z panelu mogły korzystać osoby o różnym poziomie zaawansowania technicznego.
Struktura panelu
- Sidebar: po lewej stronie umieściłam nawigację z przyciskami do głównych sekcji panelu. Początkowo były to: Zarządzanie użytkownikami oraz Newsletter, z możliwością dalszej rozbudowy o kolejne moduły. Na dole sidebaru znalazł się avatar zalogowanego administratora oraz przycisk Wyloguj się.
- Content area: prawa, większa część ekranu była przeznaczona na dynamiczną treść, zależną od wybranej sekcji.
Projektowanie sekcji „Zarządzanie użytkownikami”
- Tabela użytkowników: zawierała listę wszystkich kont wraz z podstawowymi danymi.
- Filtrowanie i wyszukiwarka: nad tabelą umieściłam pasek do filtrowania i wyszukiwania, aby administrator mógł szybko znaleźć konkretnego użytkownika.
- Widok szczegółów użytkownika: kliknięcie w rekord przenosiło do profilu, gdzie można było:
- podejrzeć logi użytkownika,
- sprawdzić przypisaną rolę (i zmienić ją w razie potrzeby),
- zobaczyć dostawców logowania,
- wykonać akcje: usunięcie konta, potwierdzenie, blokada lub odblokowanie.
Rozwiązania UX
- Jasny podział przestrzeni (sidebar vs content) zwiększył czytelność i intuicyjność panelu.
- Użycie tabeli z ożliwością filtrowania odpowiadało na potrzebę szybkiego wyszukiwania użytkowników w dużych bazach.
- Grupowanie akcji w profilu użytkownika zmniejszało ryzyko pomyłki i zapewniało większą kontrolę nad procesem zarządzania.
Efekty
Dzięki zaprojektowaniu panelu administratora zespół otrzymał sprawne narzędzie do zarządzania użytkownikami już na wczesnym etapie rozwoju aplikacji. Umożliwiło to testowanie procesów administracyjnych, weryfikację przepływów związanych z rejestracją oraz moderacją kont, a także przyspieszyło dalsze prace nad częścią użytkownika końcowego.
Proces projektowy – Landing page
Kontekst i wyzwanie
Zadanie polegało na zaprojektowaniu drugiej, ulepszonej wersji, która lepiej przedstawi wartość aplikacji i skuteczniej angażuje odwiedzających. Główne problemy do rozwiązania: dotychczasowy LP nie eksponował korzyści, miał słabszą warstwę wizualną i niezbędne elementy komunikacji były mało widoczne.
Struktura strony
- Hero (logo + mocne hasło komunikujące korzyść).
- Krótki opis czym jest aplikacja.
- Kluczowe funkcjonalności przedstawione w jasnej kolejności.
- Mockupy ekranów aplikacji (smartfon) — przygotowane przeze mnie.
- Sekcja zapisu do newslettera.
- Stopka / informacje dodatkowe.
Projektowanie treści i układu
- Najpierw wireframe (Figma) — ustaliłam priorytet treści i logiczny przepływ informacji.
- Priorytetyzacja: najpierw przekaz wartości (dlaczego warto), potem funkcje, na końcu zaproszenie do zapisu.
- Przemyślane nagłówki i krótkie akapity, aby przyspieszyć decyzję użytkownika.
- CTA umieszczone w kilku strategicznych punktach (hero + dół strony) — wyraźne, z czytelnym microcopy zachęcającym do zapisu.
Rozwiązania UX
- Uproszczenie struktury — mniejsza liczba sekcji, lepsze prowadzenie wzroku użytkownika.
- Optymalizacja kolejności informacji, aby szybko odpowiedzieć na pytanie „co z tego mam?”.
- Responsywne podejście — projektowanie od desktopu do mobile tak, by mockupy i treści czytelnie działały na telefonach.
- Minimalizacja „hałasu” wizualnego — czyste bloki tekstu, kontrast dla czytelności, prosty system typograficzny zgodny z istniejącym design systemem.
Efekty
Nowa wersja landing page’a była bardziej czytelna i epiej komunikowała wartość Evaround. Sekcja zapisu do newslettera pozwoliła zacząć budować bazę zainteresowanych użytkowników, a mockupy i zdjęcia poprawiły wiarygodność projektu. Strona stała się solidnym narzędziem promocyjnym, bardziej adekwatnym do dalszych działań marketingowych zespołu.
Proces projektowy – widoki aplikacji (UX/UI)
Podejście
Projektowanie aplikacji rozpoczęliśmy w duchu mobile first, zakładając, że zdecydowana większość użytkowników będzie korzystać z niej w podróży. Dopiero w dalszej kolejności adaptowaliśmy widoki na desktop. Moim zadaniem było stworzenie interfejsów dla kluczowych modułów: Notatek, Agendy (Planu dnia i Pomysłów) oraz Budżetu.
Notatki
Założenie: użytkownicy potrzebują prostego sposobu zapisywania i współdzielenia informacji związanych z podróżą.
- Zaprojektowałam dwa typy notatek:
- notki – do zapisywania ważnych informacji (np. kodów rezerwacji, instrukcji dojazdu),
- checklisty – do tworzenia list rzeczy do zabrania lub zadań do odhaczenia.
- Funkcjonalności:
- możliwość współedytowania notatek przez wielu użytkowników (z widoczną informacją, kto ostatnio edytował),
- checklisty działały indywidualnie — każdy użytkownik mógł je odhaczać na swojej kopii,
- w widoku listy notatek widać autora,
- ważne notatki i checklisty można przypiąć na górze.
- Efekt: powstał prosty, intuicyjny edytor, który odpowiadał na różne style pracy grupowej – od gromadzenia informacji po wspólne planowanie.
Agenda
Założenie: użytkownicy chcą mieć jasny plan dnia z możliwością szybkiego dodawania i edycji punktów, a jednocześnie przestrzeń do zapisywania luźnych pomysłów.
- Plan dnia:
- automatyczne tworzenie dni w ramach wydarzenia,
- lewa część ekranu: lista dni, prawa: szczegółowy plan wybranego dnia,
- dodawanie punktów w trzech krokach:
- tytuł i opis (opcjonalnie wybór z backlogu „Pomysłów”),
- przypisanie do dnia, godzina i kategoria,
- lokalizacja.
- punkty dnia prezentowane jako kolorowe kafelki (kolor = kategoria), z szybkim dostępem do edycji, usunięcia i nawigacji w Google Maps,
- dla dni z wieloma punktami — dodatkowy przycisk „Mapa” z widokiem wszystkich lokalizacji.
- Pomysły (backlog):
- miejsce na zapisywanie luźnych koncepcji,
- każdy pomysł można później przenieść do planu dnia,
- opcje: tytuł, opis, kategoria.
- Efekt: powstał prosty, intuicyjny edytor, który odpowiadał na różne style pracy grupowej – od gromadzenia informacji po wspólne planowanie.
Budżet
Założenie: łatwe rozliczanie kosztów między uczestnikami wydarzenia.
Pierwotny projekt modułu budżetu przygotowała inna osoba z zespołu. Po wdrożeniu testowej wersji aplikacji i testach w gronie znajomych okazało się, że interfejs jest nieintuicyjny i sprawia użytkownikom trudności. W tym momencie przejęłam odpowiedzialność za przeprojektowanie tego widoku.
- Problemy pierwotnej wersji:
- zbyt wiele opcji ukrytych,
- brak jasnych kroków procesu dodawania wydatku,
- trudność w szybkim podziale kosztów.
- Moje rozwiązania:
- Wprowadzenie jasnego, krokowego formularza „Dodaj wydatek”: nazwa wydatku, kto zapłacił i ile, sposób podziału kwoty (na wszystkich, na wybrane osoby, ręczne wpisywanie, przypisanie tylko do siebie), możliwość dodania zdjęcia paragonu.
- W szczegółach rozliczenia można było sprawdzić: kto ma komu zapłacić, ile zostało do rozliczenia, dodawać kolejne osoby.
- Przejrzysta wizualizacja aktualnego stanu rozliczeń.
- Efekt: użytkownicy w testach potwierdzili, że nowy projekt jest znacznie bardziej intuicyjny. Proces dodawania wydatku stał się szybki i zrozumiały, a cały moduł faktycznie wspierał wspólne podróże zamiast utrudniać rozliczenia.
Efekty ogólne
Dzięki podejściu mobile first oraz iteracyjnym poprawkom aplikacja zyskała intuicyjne, estetyczne i funkcjonalne ekrany. Moje projekty przyczyniły się szczególnie do zwiększenia czytelności i wygody korzystania z modułu budżetu, który był kluczowy dla użyteczności całego produktu.
Proces projektowy – implementacja aplikacji (Angular)
Panel zarządzania użytkownikami
Po zaprojektowaniu interfejsu byłam również odpowiedzialna za jego wdrożenie we frameworku Angular. Zaimplementowałam sidebar z nawigacją, widok tabeli użytkowników z filtrami i wyszukiwarką oraz szczegóły profilu, umożliwiające m.in. zmianę roli, blokowanie i odblokowywanie kont, a także podgląd logów.
Widok notatek
Zaimplementowałam interfejs umożliwiający tworzenie i edycję notatek oraz checklist, z funkcją przypinania ważnych pozycji na górze listy i wyświetlaniem autora notatki.
Widok agendy
Skupiłam się głównie na warstwie wizualnej – wdrożyłam wygląd listy planu dnia oraz mechanizm przełączania się pomiędzy dniami.
Podsumowanie
W wyniku wspólnej pracy zespołu powstała aplikacja Evaround — narzędzie ułatwiające organizację podróży i wydarzeń w grupie. Aplikacja pozwala na tworzenie planów dnia, dodawanie notatek i checklist, zarządzanie budżetem, wymianę zdjęć i plików, a także komunikację poprzez czaty. Oprócz aplikacji mobilnej i desktopowej przygotowano również panel administracyjny oraz stronę landing page. Dzięki testom użytkowników projekt był rozwijany w sposób iteracyjny, co pozwoliło udoskonalić jego kluczowe funkcjonalności i zapewnić intuicyjną obsługę.
