Wypuszczanie Produktów i Startupów na Rynek: Design system i interakcje z UI i UX

0:00Teraz chciałbym zabrać Cię na przejażdżkę do środka naszej firmy, czyli tego, jak

0:04produkt, który tworzymy, powstaje i jak tworzymy jego interfejs.

0:08Być może nie będzie to dobry poradnik dla osób, które tworzą

0:13innego rodzaju produkty niż narzędzia czy SaaS, ale być może będzie

0:16to dalej dla Ciebie ciekawe.

0:17A jak nie, to sobie po prostu przewiń do kolejnych lekcji.

0:20Chciałbym wytłumaczyć jak wygląda nasze podejście do redesignu produktu, a w

0:24kolejnej lekcji powiem, jak prowadzimy cały proces od tego

0:28designu do developmentu.

0:30Jeżeli chodzi o narzędzia, to korzystamy zawsze tylko i wyłącznie z Sigmy.

0:34Sigma jest rewelacyjnym narzędziem, które służy do projektowania UI.

0:38W samej warstwie marketingowej korzystamy oczywiście też z innych narzędzi, które o

0:42których wspomnę podczas omawiania strony internetowej.

0:45Tam jest tych narzędzi całkiem sporo, ale tutaj korzystamy tylko z firmy Sigma daje

0:49nam rewelacyjne możliwości tworzenia właśnie takiego najpierw style guide'u, a

0:55później już całego kompletnego design systemu, który zawiera zmienne kolorów,

1:01który zawiera wytyczne na temat typografii, który zawiera wszystkie

1:05potrzebne ikony, logotypy, Awatary. Badger.

1:10Tutaj wszystko po prostu jest w tym design systemie i wszystko jest stworzone

1:15zgodnie z wytycznymi Figmy.

1:17Zgodnie z tymi nowymi narzędziami, które w firmie są, czyli auto layout.

1:22Co sprawia, że projekty, które tworzymy są responsywne, już przygotowane

1:26na różne rozdzielczości.

1:28Również korzystamy z komponentów, które na przykład posiadają warianty.

1:34Jeśli skorzystamy sobie z takiego na przykład komponentu,

1:37to proszę zobacz, że on po prawej stronie zawiera informację o tym, że możemy

1:41tutaj pokazać albo ukryć label.

1:44Możemy też sprawić, że będzie to wymagany komponent i dostaje tutaj taką

1:47gwiazdkę, którą zaprojektowaliśmy.

1:49Możemy włączyć tooltip, możemy włączyć taki tekst, który wyświetla się pod spodem

1:54i w końcu możemy dla wszystkich tych zaprojektowanych przez nas

1:57komponentów zmieniać różne stany.

1:59Na przykład to jest stan placeholder, ale możemy przejść do stanu focus.

2:03I w tym momencie widać, jak taki komponent wygląda w momencie, gdy

2:06użytkownik na niego kliknie.

2:08Więc pomiędzy tymi elementami, nawet pomiędzy jego otwartym stanem i

2:13zamkniętym, można bardzo łatwo przełączać się w samym komponencie.

2:17Jest to niezwykle przydatne, bo można bardzo łatwo zbudować jeden komponent,

2:21który prezentuje wszystkie potrzebne stany, no i który prezentuje wszystkie

2:26opcje, które możemy włączać i wyłączać w zależności od tego, czy dla danej

2:29instancji komponentu w danym elemencie UI Chcemy taki, taki na przykład tooltip

2:34pokazać czy też nie, więc jest to super przydatne i skupiliśmy się właśnie

2:39najpierw na zbudowaniu takiego dość rozbudowanego design systemu

2:42akurat w przypadku Easy2.0. No i wszystko tutaj jest.

2:46Zobacz, że tutaj jest masa rzeczy i są też takie bardziej złożone komponenty.

2:52Są też zaprojektowane wszystkie ekrany modalne, pop upy jak powinny wyglądać

2:56również w wersji mobilnej są pokazane i desktopowe.

3:00I to wszystko składa się na system, który powstał na potrzeby tego naszego

3:06narzędzia, który jest dostępny w postaci assetów biblioteki w bibliotece.

3:10Czyli mamy tutaj mnóstwo różnych komponentów, które możemy wyszukać np.

3:14Jeśli wyszukam button, to oczywiście znajdę button i mogę sobie

3:18skorzystać z jednego z przycisków po to, żeby umieścić go na canvasie.

3:23I gdybym chciał np.

3:24Zmienić ten przycisk z podstawowego na przykład na secondary, to mogę to bardzo

3:30łatwo zrobić, ten share i tak dalej.

3:31Więc generalnie jest to bardzo proste w użyciu.

3:34W momencie, gdy mamy taką bibliotekę komponentów, możesz o tym myśleć jak o

3:37bibliotece komponentów dla SAS, a dla konkretnego narzędzia dla oprogramowania,

3:42Ale możesz również taką bibliotekę komponentów oczywiście sobie stworzyć na

3:45Twoje różne potrzeby, na przykład potrzeby tworzenia kolejnych ebooków w spójny i

3:49sprawny sposób, czy tworzenia jakichś elementów na potrzeby np.

3:55Reklam czy banerów.

3:56I o tym też będę jeszcze później mówił.

3:58W każdym razie skonstruowanie takiej obszernej biblioteki.

4:02To jest zajęcie full time na tak naprawdę kilka dobrych tygodni czy miesięcy.

4:09I my faktycznie rozbudowaliśmy i tworzyliśmy tą bibliotekę od podstaw.

4:13Mamy tutaj jeden komponent mniej niż 8 tysięcy.

4:17I te komponenty, jak widzisz, za każdym razem, gdy się zmieniają, można te

4:21zmiany do całej biblioteki opublikować.

4:23No i co ważne te komponenty są używane we wszystkich plikach, z których korzystamy,

4:27czyli nie tylko w tym głównym pliku, gdzie na przykład powstaje nasz onboarding.

4:33Tutaj są ekrany onboardingu, ale też we wszystkich innych plikach, które mamy

4:38na przykład dla Easy carta i Easy Tulip.

4:42Przygotowaliśmy bibliotekę komponentów, taką główną, ale też dla każdego narzędzia

4:47z osobna, czyli Easy player, easy pricing, easy love.

4:49Wszystko w firmie ma osobny plik, do którego można wejść i w którym są

4:54zaprojektowane wszystkie ekrany, które korzystają właśnie z tej bazy komponentów.

4:59To znaczy, że jeżeli zaktualizujemy jakiś komponent.

5:02On po prostu zmieni się też we wszystkich tych projektach.

5:05Jeżeli stosujemy jakiś na przykład opis text, to zawsze stosujemy text, który już

5:10znajduje się w naszej bibliotece, jeśli chodzi o jego stylowanie.

5:13Czyli nigdy nie wrzucamy sobie pustej ramki tekstowej i nie stylujemy

5:16jej, tylko zawsze ten styl bierzemy.

5:19Zarówno jeśli chodzi o text.

5:20Tutaj jest użyty text and regular i możemy to zmienić na jakiś

5:25inny, który znajduje się w naszej bibliotece, na przykład semibold czy

5:28medium, ale zawsze bierzemy z tej naszej biblioteki, również jeśli chodzi o kolory.

5:32Zobacz, że to jest nie jest jakiś customowy kolor, tylko to jest po prostu

5:35kolor wzięty z naszej biblioteki i możemy wybrać jakiś inny, ale znów zawsze

5:39korzystamy z tego naszego style guide'a czy design systemu.

5:42Jest to krytycznie ważne przy tworzeniu produktów, ponieważ po pierwsze pozwala

5:46nam na ich bardzo proste utrzymanie, po drugie pozwala nam na na to, żeby wszystko

5:51w tych produktach było spójne, żeby cały ten design był był zaprojektowany w taki

5:57sposób, że korzystając z różnych nawet produktów użytkownik myśli,

6:00że korzysta z jednego.

6:01Jest to bardzo intuicyjne, więc przygotowanie tego typu

6:05akurat w naszym przypadku.

6:07Jak widzisz, jest tych narzędzi bardzo dużo i musieliśmy

6:10zaprojektować dosłownie tysiące ekranów, które które służą do tego, aby zbudować

6:15Easy 2.0, ale to tylko dlatego, że jest to naprawdę duży projekt.

6:18Prawdopodobnie w twoich mniejszych projektach nie będzie to konieczne i i

6:23będziesz miał dużo prostszy ten design system.

6:26Natomiast chcę powiedzieć też o pewnej warstwie koncepcyjnej, która służyła

6:31tworzeniu tych konkretnych komponentów.

6:34I tutaj mam jeden komponent rozbity, Czyli wspominałem ostatnio o tym, jak

6:38tworzyliśmy cały, cały ten audyt i jak wyciągaliśmy z niego wnioski.

6:43Wnioski z audytu wyciągaliśmy na poziomie trochę bardziej generalnym.

6:46To znaczy chodzi tutaj o to na przykład, które sekcję aplikacji umieścić w tej

6:51zakładce, które w innej, jak ogólnie to usprawnić?

6:54Jak zrobić hub dla wszystkich produktów?

6:56Natomiast nie schodziliśmy w tym audycie i jego wnioskach do pojedynczych

7:00komponentów, do rozkminek, które generalnie dotyczą na przykład tylko

7:05jednego guzika w naszej aplikacji czy jednego komponentu do zakupu w koszyku.

7:09Natomiast na etapie tworzenia już nowego wyglądu, nowego UI, docelowego UI

7:14aplikacji naturalnie było na to miejsce i skupialiśmy się przy projektowaniu każdego

7:20z elementów właśnie na tym, żeby go rozkminić.

7:23Czyli jeśli projektujemy guzik, to zastanówmy się, gdzie będziemy go używać,

7:26jakie jego warianty powinniśmy stworzyć i dlaczego akurat ten guzik ma tak wyglądać,

7:31Dlaczego ma mieć ikonę lub też nie.

7:33No i to jest rozkminka na przykład ulepszenia jednego z komponentów

7:36wariantów w naszym cenniku.

7:38I zobacz, że na tylko ten jeden komponent, który jest w naszej bibliotece,

7:42a który w koszyku pojawia się jako jeden z wariantów płatności za produkt.

7:47Zobacz, ile rozkminek mieliśmy w demie i Jak te wszystkie rozkminki są uzasadnione.

7:55Przykładowo, jeśli wstawiamy tutaj pole discount, to użytkownik zwraca uwagę na

7:59wyróżnioną tagiem przecenę.

8:01Tutaj mamy ten sam kolor.

8:02Dzięki temu użytkownik wie, że dotyczą tego samego elementu.

8:06Kolejno na przykład mamy informację dlaczego akurat wyróżniamy pogrubienia,

8:11tytuł, pogrubienia, dlaczego akurat umieszczamy cenę w tym miejscu,

8:14Dlaczego używamy szarego koloru?

8:17Dlaczego to jest?

8:18Bo to jest drugorzędny element. Dlaczego Grubość.

8:21Grubością wyróżniamy cenę.

8:23I tak dalej, Czyli wszystkie decyzje projektowe, jeśli chodzi o ten konkretny

8:28komponent, są bardzo mocno uzasadnione.

8:31I to jest mnóstwo pracy.

8:33Ale właśnie w ten sposób tworzy się produkty, które robią różnicę i które są

8:37gotowe do na przykład światowej międzynarodowej premiery.

8:40Nie chcę wpędzić Cię w kompleksy, bo prawdopodobnie nie rozkminiasz tak

8:44szczegółowo każdego z komponentów.

8:47No i oczywiście my też każdego z komponentów nie rozkminiamy aż tak

8:50szczegółowo, Ale to akurat jest jeden z najważniejszych naszych komponentów i

8:56dlatego skupiamy się na tym, żeby po prostu bardzo dobrze

8:59zobaczyć to, co mamy tutaj.

9:01Wypisać błędy.

9:02Dlaczego tutaj jest zbyt dużo pustej przestrzeni, dlaczego ceny

9:05są w kilku liniach i tak dalej?

9:07Dlaczego tu jest bałagan i jak chcemy to ulepszyć?

9:10Dlaczego powinniśmy odejść od tego typu wyświetlania

9:14komponentu i nawet na takim prostym mockapie zacząć robić to w ten sposób?

9:18W ten sposób na przykład ten komponent staje się kuloodporny, jeśli chodzi

9:22o długość tekstu, która tutaj jest.

9:24Po prostu przechodzi do następnej linii, a nie zaczyna nam jakby tutaj być

9:30problematyczna w kontekście innych elementów, które pojawiają się z boku.

9:33Więc to wszystko jest bardzo, bardzo istotne i faktycznie można poświęcić na

9:38to mnóstwo czasu, żeby to uporządkować.

9:40Więc powinniśmy raczej skupić się na tych najważniejszych komponentach, które na

9:44których nam zależy, zwłaszcza tych, które determinują to, że na przykład akurat ten

9:48komponent determinuje to, czy ktoś coś kupi w koszyku, czyli zwiększa konwersję,

9:53czyli jest naszym jednym z największych USP naszego narzędzia i dlatego

9:57rozkminiliśmy to aż tak szczegółowo.

9:59Oczywiście też gdzieś na boku, wrzucając sobie jakieś

10:03gotowe rzeczy w kontekście tego tutaj na przykład jakiś post na LinkedInie

10:08dziewczyny, która rozkminiła, które rzeczy działają dobrze na konwersję w koszyku i

10:12oczywiście wspomagając się od razu dodatkowo takimi rzeczami, które ktoś inny

10:16już wymyślał, po to, żebyśmy my nie musieli wymyślać koła na nowo.

10:20Staraliśmy się zebrać jak najwięcej tych rzeczy, żeby się nimi zainspirować.

10:24No i wszystko to właśnie jest w rezultacie takim jednym komponentem, który powstaje.

10:31No i oczywiście też zwróć uwagę na to, że ten konkretny komponent po prostu ma

10:34bardzo dużo rzeczy, które mogą się w nim pojawić czy nie mogą, są opcjonalne.

10:39Jakaś promocja, przecena to wszystko może być, ale nie musi tego być, więc trzeba

10:43tak przemyśleć wszystkie te funkcje i tak stworzyć warianty tego komponentu w

10:47firmie, żeby faktycznie one to wszystko uwzględniały.

10:50Dlaczego Ci też to wszystko pokazuję i dlaczego o tym tak szczegółowo mówię?

10:55Otóż dlatego, że to nie jest praca, którą możesz outsourcować i na przykład jakiś

11:01świetny UI designer designer wszystko to zrobi za ciebie.

11:05To jest w wielu miejscach praca, którą ty sam musisz poświęcić.

11:10I te rozkminki ty sam sama musisz zrobić jako founder takiego projektu, bo po

11:14prostu nikt nie rozumie tego projektu tak głęboko jak Ty, zwłaszcza po audycie i

11:18po wyciągnięciu wszystkich tych wniosków.

11:20Więc w tym procesie znowu polecam aktywność, a nie pasywność.

11:24I tak samo jak powiedziałem, że audytu nie warto outsourcować, bo nikt tak dobrze nie

11:29rozumie naszego projektu i nikt tak dobrze nie zrobi tego jak my.

11:31Tak samo i tutaj możesz outsourcować przygotowanie biblioteki i przygotowanie

11:35całego design systemu, ale nie możesz outsourcować myślenia o tym, jak Twój

11:39produkt ma działać i w związku z tym na każdym etapie powinieneś powinnaś

11:44konsultować to z tym, z tą osobą, która tego typu rzeczy wdraża.

11:48No i akurat nasz model komunikacji jest cały przez firmę.

11:52To znaczy, że tutaj wystarczy pacnąć c Można zaznaczyć jakąś część ekranu, można

11:57dodać komentarz, wstawić obrazek, wysłać ten komentarz

12:01i w tym momencie, jeśli wyślemy ten komentarz, możemy też oznaczyć kogoś w

12:06tym komentarzu, dodać odpowiedź, możemy oznaczyć osoby z zespołu, one

12:11dostają stosowne powiadomienie i możemy sobie tutaj w takim komentarzu ciągnąć

12:15jakąś nitkę aż do momentu, gdy czegoś nie załatwimy i wtedy oznacza

12:19się to jako resolved.

12:20I wszystkie tego typu usprawnienia właśnie robiliśmy komentarzami, czy to w demie,

12:26czy już na właściwym pliku w Figmie.

12:28Tutaj też jest mnóstwo komentarzy.

12:31Przy okazji jeden fajny skrót dla Sigmy.

12:33W ogóle można tutaj wcisnąć też forward slash i jeśli jesteśmy z kimś

12:39razem na tym pliku, to możemy kliknąć w jego mordkę po to, żeby obserwować co on

12:42robi i możemy kliknąć forward slash po to, żeby czatować.

12:45Ale możemy też włączyć sobie sesję na żywo i też rozmawiać ze sobą.

12:48Także firma oferuje mnóstwo fajnych opcji jeśli chodzi o kolaboracje i

12:52pracę nad tego typu systemem.

12:54A jeśli wciśniemy command i forward slash, to możemy tutaj wpisać comments i mamy coś

12:59takiego jak show comments albo Hide comments.

13:01Więc jeśli tych komentarzy jest w tym pliku za dużo i one przeszkadzają nam w

13:06odbiorze tego projektu, to wystarczy albo wcisnąć Shift C, albo wpisać

13:09tutaj właśnie command i odznaczyć.

13:10I wszystkie komentarze na chwilę zostaną dla nas ukryte.

13:14I w ten sposób ekran po ekranie, najpierw robiąc audyt, rozpisując wszystko na

13:19surowo, a później tworząc design, system i wszystkie te komponenty, które

13:24powstawały oczywiście w miarę czasu.

13:26To nie jest tak, że stworzyliśmy najpierw wszystkie przyciski, wszystkie listy i tak

13:29dalej, tylko oczywiście patrzyliśmy sobie na ekran i wiedzieliśmy, że

13:32tutaj potrzeba nam dorobić menu.

13:34No to robiliśmy komponent menu i staraliśmy się już utrzymywać go

13:38spójnie w każdym kolejnym projekcie.

13:39Więc ten design system powstawał razem z projektowaniem poszczególnych

13:44ekranów i poszczególnych screenów.

13:45No i w rezultacie dostajemy po jakimś czasie gotową,

13:51gotową aplikację, która składa się naprawdę z wielu, wielu

13:55rozmaitych ekranów.

13:57Tutaj, jak widzisz, jest sporo ekranów, sporo komentarzy, wszystkie funkcje są

14:01odpowiednio opisane tooltipami i tak dalej.

14:04No i jest to już gotowe do tego, aby przekazać to dalej do developmentu.

14:09Jeszcze ewentualnie jedna alternatywna rzecz to stworzenie tłumaczeń.

14:12My akurat w tym przypadku chcieliśmy zrobić kilka wersji językowych interfejsu.

14:16Sprowadza się to do tego, że w firmie na przykład można skorzystać z

14:19różnych pluginów, które tutaj są.

14:21Jest taki plugin, który pozwala nam po prostu przetłumaczyć różne rzeczy.

14:25Na przykład z pomocą Deepla wystarczy zaznaczyć wszystkie ramki tekstowe i one

14:28automatycznie się przetłumaczą na dowolny język.

14:31Oczywiście trzeba przez te wszystkie funkcje przejść i trzeba zobaczyć, czy

14:36zostały odpowiednio przetłumaczone.

14:38Każdy z takich komponentów, który był projektowany, właśnie przechodził takie

14:42testy, jeśli chodzi o opisywanie tych funkcji oraz tłumaczenia to też niestety

14:46jest Twoja rola jako osoby, która doskonale rozumie projekt I oczywiście te

14:51języki, których nie rozumiesz, możesz zlecić np.

14:54Na fiverze, aby ktoś za kilkanaście dolarów sprawdził i poprawił.

14:57Ale z drugiej strony podpowiem Ci jeden tip.

15:00To jak ja pracowałem robiłem automatycznie tłumaczenia właśnie

15:03pluginem Figme do Diplo, a następnie oczywiście najpierw zrobiłem jedną wersję,

15:08taką podstawową po angielsku, która była tą wyjściową.

15:11Tą wersję po angielsku konsultowałem z Elise, czyli moim osobistym asystentem z

15:16aplikacją, którą stworzyliśmy, ale jest też dostępna dla Ciebie na Alice

15:20i generalnie z pomocą Alice po prostu prosiłem Elise o to, żeby przepisała mi

15:25polecenia w UI tak, żeby były proste i żeby cechowały się czytelnością.

15:31No i dawałem jej poszczególne polecenia, a ona pomagała mi w przeformatowaniu ich

15:37w taki sposób, aby były jeszcze lepsze.

15:38I muszę Ci powiedzieć, że AI radzi sobie z tym doskonale.

15:41Nawet mój rodzimy język polski Alice potrafiła tak przekształcić, żeby te

15:47polecenia w aplikacji były krótsze i po prostu zdecydowanie lepsze.

15:51Natomiast jeśli chodzi o inne języki, często robiłem screeny

15:54z porcji interfejsu.

15:56Następnie wrzucałem je do Alice po to, żeby widziała lepszy kontekst, żeby

15:59wiedziała na przykład, czego dotyczy ten opis czy ten label, że jest tym polem.

16:04I prosiłem ją o to, żeby zrobiła rewizje tego tłumaczenia na inny język i

16:09również sprawdzało się to świetnie.

16:11Więc polecam Wam zaprzęgnięcie narzędzi AI do tego, żeby ułatwiać sobie

16:16na każdym z tych etapów pracę.

16:18Jeśli chodzi o ogólne schematy, design systemu i to jak go przygotowywaliśmy oraz

16:24w jakich narzędziach, to myślę, że wszystko wiesz.

16:26Nie ma co tutaj dłużej tego tłumaczyć od strony projektowania, zwłaszcza, że nie

16:30będzie to aplikowane do wszystkich projektów i przypadków.

16:34Dlatego przejdę teraz do kolejnej lekcji, w której powiem Ci jak to jest od strony

16:38wdrożenia i od strony deweloperów, a następnie eksportowania tego, co

16:41przygotowaliśmy do gotowego kodu. Do usłyszenia.