Case study · Product design
Zlecenie na makiety UX/UI, które wzbogaciło się o design system – bo zobaczyłam okazję, żeby dać klientowi znacznie więcej w ramach tego samego budżetu. Tokeny, komponenty, dokumentacja i edukacja zespołu w 3 miesiące.
Kontekst
Zostałam zatrudniona do zaprojektowania makiet UX/UI dla platformy artystycznej – przeprojektowanie procesów rejestracji, płatności i subskrypcji. Budżet z dotacji, 3 miesiące, każdy ekran budowany od zera, brak systemu projektowania.
Po wstępnym audycie zobaczyłam, że w ramach tego budżetu mogę dać klientowi znacznie więcej niż same ekrany. Przegadałam to z klientem i zaproponowałam: zanim przejdę do makiet, najpierw szybko poukładamy fundamenty – design system, tokeny, instrukcje. Nowe makiety będziemy już tworzyć zgodnie z tymi zasadami, a przyszłościowo klient będzie mógł z tego skorzystać, żeby uporządkować i zaktualizować resztę serwisu.
faza 01
Rozpoczęłam od audytu istniejącej platformy i warsztatów z klientem.
01
Architektura informacji
Analiza struktury, przepływów użytkownika i procesów.
02
UI i dostępność
Ocena interfejsu pod kątem spójności wizualnej i zgodności z WCAG.
03
Mapa potrzeb
Zidentyfikowałam obszary do optymalizacji i automatyzacji w ramach dostępnego budżetu.
faza 02
Zanim powstał pierwszy ekran makiety, zbudowałam fundament: kolory, typografię, spacing, grid, design tokeny z eksportem do JSON. Równolegle tworzyłam komponenty systemowe – przyciski, pola formularzy, komunikaty, nawigacje.
01
Tokeny
Wszystkie wartości opisane, uporządkowane i przekazane developerom w formie gotowej do implementacji.
02
Komponenty
Każdy z dokumentacją: stany, warianty, anatomia, zasady użycia.
03
Dostępność
Poprawa kontrastów i czytelności zgodnie z wytycznymi WCAG.
04
Instrukcje
Zasady korzystania z systemu, tworzone z myślą o tym, że makiety będziemy już wdrażać zgodnie z nimi.
Jeden komponent, dwa tryby – przełączenie kolorystyki odbywa się na poziomie tokenów, bez zmian w strukturze.
faza 03
Przed przejściem do makiet spotkałam się z zespołem developerskim (Angular), żeby omówić wypracowane fundamenty i ustalić zasady wdrożenia. Przygotowałam dokumentację i instrukcje – żeby developerzy mogli samodzielnie korzystać z systemu po zakończeniu projektu.
01
Wdrożenie
Developerzy na bieżąco implementowali tokeny i komponenty, korzystając z dokumentacji w Figmie.
02
Dokumentacja
Zasady użycia komponentów, stany, warianty, anatomia – wszystko opisane i dostępne w pliku projektowym.
03
Instrukcje
Jak korzystać z systemu, jak go rozwijać i jak dodawać nowe elementy zgodnie z wypracowanymi zasadami.
04
Komunikacja
Współpraca przez pliki projektowe i komentarze w Figmie – bez pośredników, krótszy czas reakcji.
faza 04
Mając gotowe fundamenty, przeszłam do realizacji głównego zlecenia – makiet procesów rejestracji, płatności i subskrypcji. Każdy ekran zbudowany na komponentach i tokenach z design systemu.
Podsumowanie
3 miesiące, ograniczony budżet z dotacji – a efektem jest fundament, który projektuje dalej. Spójne komponenty, tokeny, dokumentacja i przeszkolony zespół.
Design system, który stworzyłam, stał się podstawą do tworzenia nowych widoków – rejestracja, panel admina, cennik. Nawet w małych budżetach można myśleć systemowo – klucz to analiza, dopasowanie do zasobów i automatyzacja tam, gdzie ma ona realny sens.
Szukam projektantki.
A jakiej?
Takiej, co nie boi się Figmy, Excela i developera naraz.
Cześć. To ja. 🙂