Kategoria: Projektowanie

Od lat obserwuję, jak mój tata, który zajmuje się renowacją starych samochodów, w swoim warsztacie korzysta z narzędzi, które… sam zbudował. Jeśli czegoś mu brakuje,
po prostu to tworzy. Dorabia uchwyty, podpory, ściski, różne drobne narzędzia. Wszystko dopasowane dokładnie do jego potrzeb.

W świecie cyfrowym właśnie dzieje się coś bardzo podobnego. Rewolucja związana z AI zmienia sposób, w jaki tworzymy i pracujemy. Oczywiście przyniesie też sporo chaosu i przeciętnych efektów, ale na chwilę skupmy się na jej pozytywnej stronie.

Nigdy wcześniej nie byliśmy tak samowystarczalni jak teraz. Wcześniej zawsze brakowało nam jakiegoś elementu układanki: grafik nie potrafił programować, programista nie miał wyczucia estetyki, a projektant często nie znał się na kodzie.

Dziś – z pomocą AI – możemy budować własne środowisko pracy, dopasowane do nas jak rękawiczka. Główne narzędzia, takie jak Figma czy Android Studio, oczywiście pozostają, ale tworzenie własnych dodatków, automatyzacji czy pluginów stało się banalnie proste.

Dla przykładu: wczoraj stworzyłem prosty plugin do Figmy, który zbiera wszystkie elementy ze strony i wyświetla je w osobnym oknie. Ktoś mógłby powiedzieć: „Przecież jest panel Assets!”. Jasne, ale ja wolę mieć wszystko po swojemu – w oknie, które otwieram jednym kliknięciem.
I teraz mogę.

Kiedyś zrobienie czegoś takiego zajęłoby mi dwa tygodnie i wymagało sporo samozaparcia. Dziś? Dwie, może trzy godziny – i gotowe.

I to jest właśnie coś, co najbardziej mnie cieszy w tej zmianie – pojawia się nowy typ twórcy: „cyfrowy rzemieślnik„

Ktoś, kto nie tylko korzysta z narzędzi, ale też nadaje im własny charakter – tak jak dawni rzemieślnicy potrafili dostroić każde dłuto do siebie.

W większości firm technologicznych można wyróżnić dwie główne grupy procesów projektowych:

Obie grupy procesów są niezbędne, ale różnią się naturą i rytmem pracy. Pierwsza wymaga eksploracji, niepewności i zdolności tworzenia nowych znaczeń. Druga – precyzji, powtarzalności i doskonalenia tego, co już istnieje.

W praktyce oznacza to, że projektowanie oparte o wizję znajduje swoje zastosowanie głównie w procesach tworzenia nowych produktów, narzędzi i kierunków rozwoju.

Tam, gdzie organizacja stoi przed wyzwaniem wyobrażenia sobie tego, czego jeszcze nie ma – potrzebna jest metoda, która pozwoli zsynchronizować różne perspektywy i stworzyć wspólny obraz lub obrazy przyszłości.

Projektowanie w oparciu o wizję

To sposób pracy projektowej, w którym głównym celem procesu jest zbudowanie jednego lub wielu obrazów przyszłości zrozumiałych w ten sam sposób przez wszystkich uczestników procesu.

Nie chodzi tu o stworzenie idealnego rozwiązania, lecz o synchronizację wyobrażeń – wspólne zrozumienie tego, co tworzymy i dlaczego. Jakość rozwiązania przyjdzie sama, jako efekt dobrze zsynchronizowanego procesu.

Synchronizacja wyobrażeń jako rdzeń procesu

Człowiek, w przeciwieństwie do maszyn lub Profesora X (Charles Xavier), nie potrafi przesyłać obrazów myśli. Komunikujemy się za pomocą słów, gestów i dokumentów – środków, które są nieprecyzyjne i wieloznaczne.

Dlatego kiedy mówimy o rozwiązaniu wyłącznie w formie ustnej lub opisowej, każdy uczestnik procesu buduje w swojej głowie własny, nieco inny obraz. Te obrazy mogą być do siebie „bliskie”, ale nigdy nie są identyczne.

Właśnie dlatego w projektowaniu w oparciu o wizję rozwiązanie pełni funkcję synchronizatora wyobrażeń.

To nie tylko prototyp, makieta czy diagram – to narzędzie porozumienia, które pozwala ludziom zobaczyć to samo i rozmawiać o tym samym.

Rozwiązanie jako narzędzie, nie cel

W klasycznych podejściach projektowych rozwiązanie często jest celem samym w sobie. W tym modelu przeciwnie – rozwiązanie jest środkiem do budowania wspólnego rozumienia. Może być wielokrotnie zmieniane, ewoluować, a nawet zostać odrzucone. Najważniejsze, że umożliwia synchronizację zespołu wokół jednego obrazu przyszłości.

Każdy z tych wariantów staje się hipotezą, którą można testować, porównywać i rozwijać. Dzięki temu organizacja zyskuje nie tylko plan, ale też zdolność do myślenia wizualnego i systemowego – umiejętność wspólnego przewidywania i współtworzenia przyszłości.

Dlaczego to tak trudny proces?

Ponieważ wymaga zmiany sposobu myślenia.
Nie chodzi już tylko o rozwiązanie problemu, lecz o wspólne zrozumienie tego, co naprawdę chcemy osiągnąć.
To wymaga czasu, rozmów, eksperymentów i gotowości na niepewność.

Takie podejście często powoduje dyskomfort wśród członków zespołu. W tradycyjnym modelu rozwiązanie jest ostatecznym dowodem jakości pracy projektanta – efektem dogłębnych analiz, badań, testów A/B i wielu iteracji prowadzących do „najlepszego możliwego rezultatu”.

W projektowaniu opartym o wizję jest inaczej.
Projektant tworzy wstępne, celowo niedoskonałe rozwiązanie – oparte na danych i analizach, ale wciąż płynne, otwarte na interpretacje i zmiany. Nie chodzi o perfekcyjny projekt, lecz o wizualny punkt odniesienia, który pozwala zsynchronizować wyobrażenia wszystkich uczestników procesu.

Dodatkowa trudność polega też na tym, że wizja nie powstaje w jednym miejscu – tworzy się na styku wielu perspektyw: użytkowników, biznesu, technologii, strategii i emocji zespołu. Zsynchronizowanie tych światów w jeden wspólny obraz to właśnie sedno procesu.

Projektowanie w oparciu o wizję nie jest tylko metodą pracy, lecz sposobem myślenia o projektowaniu.

To świadome używanie wizualnych reprezentacji, prototypów i wspólnych modeli po to, by ludzie mogli zobaczyć to samo i działać w tym samym kierunku.

To podejście nie gwarantuje szybkich rezultatów – ale tworzy fundamenty dla organizacji, które potrafią projektować swoją przyszłość świadomie.

Wizja jako kompas dla Discovery

Aby lepiej zrozumieć miejsce projektowania wizji w strukturze działań projektowych, warto spojrzeć na nią nie jako na osobny poziom, ale jako kompas, który przenika wszystkie poziomy odkrywania (Discovery).

Wizja nie kończy się na strategii – wpływa również na decyzje taktyczne i działania operacyjne.

Na poziomie strategicznym pomaga odpowiedzieć na pytanie „dlaczego to robimy?”, na taktycznym – „jakie możliwości warto eksplorować?”, a na operacyjnym – „czy to, co dziś dostarczamy, naprawdę przybliża nas do tej przyszłości?”

Poziom	Cel	Typ	Główne pytania
Strategiczny	Zrozumieć przyszły kierunek firmy	Strategic Discovery	Co jest warte odkrywania? Dlaczego to ważne?
Taktyczny	Znaleźć najlepsze rozwiązanie w ramach kierunku	Product Discovery	Jak to najlepiej rozwiązać? Czy to działa?
Operacyjny	Udoskonalać, skalować, optymalizować	Delivery / Continuous Improvement	Jak to działa? Jak to ulepszyć?

Wizja w tym ujęciu nie jest kolejnym etapem w hierarchii – jest źródłem orientacji, które łączy wszystkie poziomy.
To wspólna perspektywa, która pomaga zespołom rozumieć, po co to robimy, niezależnie od tego, czy projektują nową funkcję, czy optymalizują proces.

Projektowanie oparte o wizję to nie metoda ani faza projektu, ale sposób utrzymywania spójnego kierunku w świecie pełnym zmian. To narzędzie synchronizacji, które pozwala ludziom w organizacji widzieć ten sam horyzont – niezależnie od tego, czy patrzą z perspektywy strategii, produktu czy operacji.

Bo organizacje, które potrafią świadomie projektować swoją przyszłość, nie tylko reagują na to, co nadchodzi – one potrafią nadawać kierunek zmianom, zanim te się wydarzą.

Poniżej przykładowy model Strategic Discovery Process który powstał, by zapewnić strukturę i jasność w tym złożonym zadaniu.

Dla każdego projektanta przejście od sztywnych, desktopowych narzędzi jak Photoshop, Axure, Adobe XD czy Sketch do chmurowych rozwiązań takich jak Figma czy Framer było krokiem milowym.

Dzięki temu przeszliśmy od pracy na statycznych ekranach i e-mailowych ping-pongach, do wspólnej pracy w czasie rzeczywistym z całymi zespołami produktowymi.

Kiedyś

Dzisiaj

Od tego momentu projektanci zaczęli odgrywać znacznie bardziej strategiczną rolę – nie tylko projektując interfejsy, ale aktywnie współtworząc kierunek rozwoju produktu i mając realny wpływ na decyzje biznesowe. Projektowanie przestało być etapem końcowym, a stało się integralną częścią procesów decyzyjnych.

Co sprawiło, że ta zmiana była możliwa? Przede wszystkim nowe narzędzia – to one stworzyły przestrzeń do lepszego zrozumienia i współpracy. Dzięki nim łatwiej było nam pokazać sens naszych działań, wyjaśnić procesy, opowiedzieć o decyzjach i ich konsekwencjach.

Możliwe że dzięki tej większej przejrzystości zbudowaliśmy przestrzeń, w której projektowanie mogło stać się językiem współpracy.

To była ogromna zmiana – nie tylko w sposobie, w jaki tworzymy cyfrowe doświadczenia, ale też w znaczeniu roli projektanta w organizacji.

Przed nami może rysować się kolejny istotny krok naprzód. Tym razem chodzi o znacznie głębszą integrację z technologią – z backendem, z logiką działania systemów. A wszystko dzięki: Node Interface i boomu na automatyzację.

Jutro

Node Interface – co to takiego?

Node Interface to graficzny interfejs, który pozwala użytkownikowi budować logikę działania procesu lub systemu poprzez łączenie węzłów (nodes). Każdy węzeł reprezentuje jakąś funkcję, operację lub przepływ danych. To podejście znane jest projektantom i developerom z narzędzi takich jak Blender Shader Editor, Unreal Engine, Unity czy Cinema 4D – gdzie od lat świetnie sprawdza się w wizualnym tworzeniu skomplikowanych struktur i zależności.

Przykładowy proces z n8n.io

Od dłuższego czasu procesy były wizualizowane z wykorzystaniem BPMN (Business Process Model and Notation), jednak zazwyczaj pełniły funkcję dokumentacyjną, pełną i bardzo skomplikowaną zamiast model wspierający współpracę między interesariuszami.

Dziś nowy, bardziej uproszczony sposób myślenia wkracza w obszar automatyzacji i integracji systemów – za sprawą narzędzi takich jak n8n.io, Zapier, Plumb i wiele innych, które wyrastają jak grzyby po deszczu.

Dlaczego ma to znaczenie dla projektantów?

Do tej pory programiści nie potrzebowali wizualnej reprezentacji kodu – i pewnie nadal jej nie potrzebują 😉. Ale to, co zaczyna się dziać obok tradycyjnego developmentu, może na zawsze zmienić sposób, w jaki budujemy rozwiązania cyfrowe.

Node Interface umożliwia coś niesamowitego: zrozumienie i współtworzenie logiki działania systemu nawet przez osoby nietechniczne. Coś, co wcześniej było ukryte w czeluściach backendu, staje się teraz widoczne, edytowalne i zrozumiałe dla zespołów projektowych.

Zrozumienie logiki działania rozwiązania stanowi przecież fundament projektowania, zwłaszcza w przypadku złożonych systemów.

Nowa jakość współpracy

W obecnym modelu często mamy sytuację, gdzie zespół UX projektuje ekrany, zespół dev implementuje lecz gdy pojawia się potrzeba zmiany logiki działania – np. kolejności kroków w procesie, sposobu walidacji czy reguł automatyzacji – zaczynają się schody, nowe taski, sprinty i frustracje.

Node Interface może to zmienić. Pozwoli całemu zespołowi faktycznie współtworzyć system, a nie tylko jego wizualną fasadę. Może zwiększyć ilość „tanich” pośrednich iteracji, a to szansa na głębsze zrozumienie działania produktu i realny wpływ na to, jak zachowuje się system, nie tylko jak wygląda.

Nadchodzi nowy etap

Jeśli nauczymy się pracować w node interface’ach i będziemy mogli „widzieć cały proces” – od inputu użytkownika po wynik działania systemu – to otwieramy zupełnie nowy rozdział projektowania.

To nie tylko kolejny etap integracji z zespołami technologicznymi. To zmiana paradygmatu: od projektowania ekranów do projektowania zachowania i działania systemu jako całości.

Jak stworzyć zespół projektowy, który wyznaczy drogę jakości w Twojej firmie?

Działania na rzecz jakości mogą przebiegać równolegle z innymi projektami. Można je realizować poprzez jeden dedykowany zespół „zespół namiotowy” lub kilka równoległych ścieżek, które łączą się w jedną całość.

Skąd wzięła się inspiracja? Zespoły projektowe, które zajmują się jakością w wielu firmach, mają wiele analogi do zespołów zdobywających szczyty górskie.

W kontekście projektowym, aby skonsolidować ludzi, niezbędny jest wspólny cel – taki, który jest zarówno szeroki, jak i jasno określony.

Aby ekspedycja mogła się zrealizować trzeba zbudować zespół namiotowy.

Interdyscyplinarny, ale działający w ramach jednego wysokopoziomowego celu. Z pełnym poczuciem odpowiedzialności i bezpieczeństwem we własnym środowisku, a co za tym idzie, możliwością polegania na innych z zespołu.

W zespołach alpinistycznych lider jest nieodłącznym elementem, w projektowych może być obecny, ale nie jest to konieczne. Rozpoczynając projekt interdyscyplinarny, stajemy w obliczu politycznego nacisku różnych grup w organizacji. Tworząc zespół, chcemy uniknąć nadmiernego akcentowania na jedną stronę od samego początku, lider powinien wyłonić się naturalnie w trakcie wyprawy.

Czyli jak wpływać na duże organizacje
będąc planktonem?

Każda duża organizacja posiada tak wiele projektów i tak wiele celów do osiągnięcia, że czasem oddolne inicjatywy, które najlepiej wskazują kierunki, nie zostają zauważone.

Jeśli jesteśmy zaangażowani, posiadamy dużo determinacji i wiemy co może uleczyć sytuację, to jesteśmy w stanie spowodować zmianę. Możemy mieć wpływ na biznes.

Wieloryba nie poruszy jednostka, wieloryba może poruszyć ławica, a w organizacjach, aby oddolna inicjatywa przebiła się do szerokiego grona, potrzebuje zespołu, który pociągnie za sobą wielu ludzi i będzie w ramach swoich obszarów pociągał kolejnych do momentu, aż wpłynie na poruszenie wieloryba.

Ale jak zbudować jakość?
Jak być pewnym wytyczonych kierunków?

Miałem możliwość realizować bardzo ciekawy projekt nietypowego komponentu w standardowym procesie zakupowym
wraz z zespołem z global4net.

Komponent, o którym mowa zaznaczyłem zakreśleniem.

Krok I – Koszyk

• 

Jeśli się przyjrzeć z bliska, posiada bardzo dużo informacji wymaganych przez dział prawny, ale dostosowany jest tak aby zminimalizować poczucie przytłoczenia, poprzez wydzielenie przestrzeni zgodnie z zasadami Gestalten.

Proces zakupowy dla produktów jednorazowych

Proces zakupowy dla turystyki

Komplikacja pojawia się wtedy, gdy chcemy każdy proces zakupowy obsłużyć w podobnej ścieżce, a posiadamy różne segmenty produktów, w tym przypadku turystykę.

Proces zakupowy dla abonamentów

Pewnie w kolejnych iteracjach będzie można zrobić to lepiej, ale jak na pierwszy cykl, uchwycone zostały wszystkie wymagania biznesowe, prawne i uspójnienie estetyczne tak trudne dla wielu segmentów produktowych.

Ścieżka powrotu wykorzystywana w szczególności w e-commerce stała się dla mnie inspiracją do stworzenia menu kontekstowego, wraz z dynamiczną rolą powrotu. Temat z 2017 ale cały czas aktualny.

Typowa ścieżka powrotu (breadcrumbs):

Głównym założeniem menu była możliwość wchodzenia w głąb oraz prosty sposób powrotu w zależności od zagłębienia.

Tak powstało menu z podziałem na 3 konteksty:

Element klikalny to ikona oraz napis. Ikona resetuje wartości wybrane lub prowadzi do danego kontekstu. Napis otwiera menu kategorii.

Samo działanie możemy zobaczyć na filmie poniżej we wdrożonym projekcie EduFox dla systemu zarządzania przedszkolami.

Pierwszy sposób użycia odnosi się do przejścia po każdej kategorii, aż wybierzemy docelowy oraz szybki powrót poprzez wybranie ikony.

Drugi sposób przedstawia ominięcie jednej z kategorii i przejście do konkretnego wybranego.

W zależności od wybranego kontekstu, dodawanie nowego elementu powoduje automatyczne wrzucenie go do danej kategorii. Przyśpieszamy dzięki temu proces wyboru, pozostawiamy dobre praktyki z możliwością pozostawienia ścieżki powrotu oraz wprowadzamy kontekstową budowę elementów.

Komponent ten został sprawdzony na bardzo wymagającej grupie docelowej, w której sprawdził się doskonale.

Budowa i rozwój systemów „informatycznych” z roku na rok wchodzi w bardziej zaawansowany etap. Kiedyś pracowaliśmy na jednorodnych systemach (Monolitach) gdzie elementy wizualne przetrzymywane były w arkuszach styli CSS i po roku utrzymania takiego systemu mieliśmy już niezły bajzel.

Potem zakochaliśmy się w Mikroserwisach i komunikacji poprzez API i dzięki temu przeszliśmy na budowę elementów wizualnych z podziałem na Elementy i Komponenty wykorzystując np. Idee Atomic Design, co doprowadziło do powstania Design Systemów, Storybooków itp.

Będąc tu i teraz szukam rozwiązania dla własnych zespołów, korzystając z obecnych rozwiązań tak aby rola projektantów nie stanowiła jedynie dostawcy makiet / grafik w pośpiechu, a posiadała najważniejszą część, w której pracuje już IT, czyli iteracje. Możliwość powtarzania, wyciągania wniosków i ulepszania daje jakościowe rezultaty.

W 2019 powstał pierwszy własny Design WorkFlow:

Flow nie było doskonałe, nie bazowało na metodyce Atomic Design, ale już posiadało wybranie reguł ogólnych do osobnego pliku CSS, który mógł być szybko nadpisywany oraz do CSS dla poszczególnych komponentów z wykorzystaniem nazewnictwa w konwencji BEM.

Wyciągając wnioski z błędów popełnionych w takim rozwiązaniu i w związku ze zmianami technologicznymi budując Flow w drugiej wersji, wykorzystujemy pracę projektową w oparciu o Elementy i Komponenty w Design Systemie po stronie Projektowej i Storybooku po stronie Programistycznej.

WorkFlow wygląda mniej więcej tak:

Sam Design System po stronie projektowej, czyli tam, gdzie sami możemy wprowadzić ulepszenia jest najistotniejszy, ponieważ to my projektanci jeśli nie opracujemy sposobu własnej pracy nie możemy oczekiwać że IT nam ją przedstawi w taki sposób jak nam odpowiada, bo po prostu jej nie zna. IT zawsze będzie oczekiwać materiałów do wdrożenia w terminie, to jest zrozumiałe i to się nie zmieni.

Projektanci muszą wymyślić swoje flow pracy tak, aby było jakościowe i dostarczało na czas rozwiązania. Dlatego na flow pracy projektowej składa się flow pracy nad Design Systemem, który jest ciągłym procesem doskonalenia.

Design System Flow może wyglądać tak:

Najważniejszym elementem rozwoju DS jest przestrzeń dla projektantów gdzie mogą swobodnie nanosić zmiany, komentarze i uspójnienia na przyszłość pracując dalej w wersji obecnego DS. Dzięki przestrzeni, wymogi czasu i pchania projektów do przodu, utrzymujemy pamięć na spójności i jakości, którą możemy wdrożyć w kolejnej iteracji DS.

Dodatkowo bardzo ważnym czynnikiem jest dopuszczenie do pracy projektowej interesariuszy projektu, nieraz osób bezpośrednio z biznesu lub pracowników różnego szczebla firmy. Stąd wciąż zmieniany proces projektowy oparty jest o wciąż rosnące w popularności narzędzie Figma i może wyglądać tak:

Co znaczy być autentyczny? Jak marki mogą być autentyczne? I co definiuje autentyczność?
W szczególności, kiedy żyjemy w czasach, w których ciężko rozróżnić prawdę od fake news. Najważniejsza cecha XXI wieku jest jedną z najtrudniejszych do osiągnięcia.

Znacie ten film z Oumi Janta? 20 latka, która zawładnęła instagramem. Zrobiła coś moim zdaniem niebywałego. Coś, co mogłoby szybko umknąć w natłoku bełkotu internetowego, a może nam pokazać jak tworzyć autentyczne materiały.

https://www.instagram.com/p/CBwJa4rqLEh/

Nie widziałem w internecie dawno nic bardziej autentycznego od tego krótkiego klipu, mimo że taniec jest ostatnią formą abstrakcyjnej komunikacji, którą akceptuję.

Materiał jest bardzo jakościowy, mimo pewnych, wydawałoby się niedociągnięć. Te zakłócenia, szumy wiatru, przejazd deskorolkarza przez pierwszy plan nie umniejszają materiałowi, a zwiększają jego autentyczność. Dodatkowym atutem stają się postacie drugoplanowe, które pod koniec klipu nawiązują kontakt, wszystko jest wyjątkowo naturalne. Śmiech kamerzysty okazuje się elementem podkładu muzycznego, ale w klipie sprawia wrażenie jak by ktoś tam był. Wszystkie te drobne przeszkadzajki wokół budują niewiarygodną autentyczność.

Materiał ten nie jest formą reklamy, ale mogę sobie wyobrazić, że spokojnie mógłby być klipem dla każdej największej marki globalnej (jeżeli już ktoś go nie wykorzystał).

Ten charakter komunikacyjny szybko podchwycą agencje reklamowe i już niebawem możemy spodziewać się „autentycznych” treści wyreżyserowanych w podobnym duchu.