Rok w Allegro był niezwykle intensywny, do tego stopnia, że pomimo mojej wielkiej pasji do tworzenia marek, nie udało mi się stworzyć żadnej w tym czasie.
Oczywiście mógłbym mieć poczucie rozczarowania, ale przyznam, że projektowo to był świetny rok, mimo że graficznie mało projektowałem.
A co robiłem? Współtworzyłem i nadal tworzę wizję dla Customer Back Office System, czyli przestrzeni, w której rozwiązywane są wszystkie sprawy klienta w Allegro – na zapleczu.
Naszymi celami nie jest ilość sprzedanych produktów ani ilość klientów, a jakość rozwiązywania problemów pracowników i klientów. To pozwala poczuć misję UX w całym znaczeniu tego słowa.
Skala Allegro początkowo wgniata w ziemię (150 narzędzi administratorskich), lecz po 6-miesięcznej analizie osiągnęliśmy wizję, która pomoże wznieść Allegro na jeszcze wyższy poziom. Teraz pozostaje tylko ruszyć wieloryba 🙂
Na cały proces tworzenia wizji CBS składa się wiele warstw od stworzenia interdyscyplinarnego zespołu namiotowego, tworzenie zasad dla Design Systemu po komunikację w organizacji o nowym rozwiązaniu.
Już za chwilę powstanie kilka felietonów dot. UX i przestrzeni projektowej:
Czy da się nawigować wielorybem?
Co daje zespół namiotowy w świadomej organizacji?
Byłem też szczęśliwcem, który miał możliwość stworzyć logikę, UI i user flow dla intranetu Allegro | Home oraz logikę i user flow dla portalu Allegro | Jobs z ogłoszeniami, który właśnie na dniach miał premierę.
W tle wojna, resztki pandemii, tylko kosmici mogliby nas zaskoczyć. Chwilowo stabilnie.
Minęły dwa miesiące od ekscytacji świata ChatGP3, a już mamy ChatGP4, no i MidJurney w wersji 5.1, które pokazuje, że generowanie obrazów przez sztuczną inteligencję jest już na zaawansowanym poziomie.
Poniżej mała próbka. Co by było, gdyby Audi wypuściło wersję All Road w 1970 roku albo grafikę do kampanii reklamowej WWF, lub abstrakcyjną ilustrację czarnej dziury w stylu muminków.
Wszystkie te obrazy są kompilacją milionów innych, lecz stanowią jakąś jednostkowość, czyje są prawa autorskie? Moje czy AI? Czy czuję się przez to lepszym grafikiem / projektantem? Jak pomoże mi AI w przyszłości… oj myślę, że wszyscy się nad tym obecnie zastanawiamy.
Audi All Road z lat 70Kampania dla WWF Ilustracja w stylu muminków
Miałem możliwość realizować bardzo ciekawy projekt nietypowego komponentu w standardowym procesie zakupowym wraz z zespołem z global4net.
Przejście z koszyka do płatności (Krok 1) oraz z płatności (Krok 2) do podsumowania (Krok 3) to typowy proces e-commercowy, który w przypadku systemu MyBenefit (dla którego był projektowany) potrzebuje dodatkowych elementów takich jak źródła finansowania (nietypowe, bo banki punktów) oraz musi uwzględniać różne typy produktów: produkty jednorazowe, turystykę i produkty abonamentowe.
1 Banki punktów to miejsca, w które firmy przelewają środki dla pracowników. Pracownicy mogą z punktów kupować różne usługi / kody wartościowe / abonamenty np. medyczne, ubezpieczeniowe itp.
Komponent, o którym mowa zaznaczyłem zakreśleniem.
Krok I – Koszyk
Krok II – Płatność
Krok III – Podsumowanie
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.
Jakiś czas temu udało się wydać mikro artykuł nt. badań wizerunku i wykorzystania dyferencji w ramach wydania publikacji Katedry Grafiki Uniwersytetu SWPS, w której autorzy dokonują pewnej rewizji 10-letniej działalności poprzez próbę autoprezentacji.
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.
Powstało wiele nowych sposobów, ale firmy nadal mierzą się z utrzymaniem i flow pracy projektowej pod dyktando programistów1, backlogów i krótkich terminów.
1 I tu nie chodzi o to, żeby odbierać IT dominującą rolę, a zbudować tak rozwiązanie, aby dla obu stron budowa nie była uciążliwa, a jednocześnie proporcje skupienia na obie dyscypliny były mniej więcej równe.
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.
Tym sposobem powstał pierwszy własny Design WorkFlow:
Był rok 2019, 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:
Koniec roku to moment, kiedy można znaleźć czas i „wydać” w końcu projekt, który przez cały rok był zbywany, nie mniej projekt w swojej idei mocno dopracowany. Zbywany, bo dla bliskiej mi osoby projektowany, a jak wiadomo, projekty te „dla siebie” są najtrudniejsze i najdłużej budowane.
Marka lepiejmniej to blog osobisty związany z ideą popularyzacji życia w duchu minimalizmu, może trochę zen ale też z dużą dawką zdrowego rozsądku i dystansu. Osoba, która prowadzi blog „od zawsze” stara się tak otaczać przestrzeń, aby nie zabrudzać go niepotrzebnymi detalami lecz jak to w życiu, nie zawsze udaje się to zrealizować.
Przygotowanie marki dla producenta czekolady to czysta przyjemność. Zadanie nie jest jednak proste, kiedy budujemy całą strukturę portfela marek.
Sygnet powstał na prośbę właścicieli. Nawiązuje do ich nazwiska. Mimo początkowego sceptycyzmu, udało się wykonać znak odpowiadający cechom wizerunkowym obranym na początku zadania.
Czekolada to najczęściej wybierany comfort food na świecie.
Towarzyszy nam w chwilach sukcesu i momentach zadumy. Kiedy jesteśmy z najbliższymi i kiedy jedynym towarzystwem, na jakie mamy ochotę, jest właśnie Ona.
Powyżej tekst wizerunkowy przygotowany dla marki Arteda Enterprise
Logo ułożone na siatce umożliwia przewidywalny układ na różnych materiałach, buduje stały element i rozpoznawalność mimo zmian w funkcji.
Współpraca z firmą Arteda Enterprise to ciągły proces szukania najlepszego rozwiązania dla określonych celów. W ramach projektu zostaną również wdrożone dwie submarki i opakowania.
