Dizajnerski sustavi u Gustu: I. dio

Što smo izgradili, što smo naučili na putu i kamo idemo dalje.

U Gustu gradimo naš sustav dizajna posljednje dvije godine i razmišljamo o tome kako proširiti naš proizvod i proces dizajna kroz više složenih projekata i timova. Dakle, bilo da započinjete izgradnju kompliciranog sučelja ili se pripremate za izgradnju stilskog vodiča u velikoj organizaciji, nadam se da možete naučiti iz nekih mojih pogrešaka koje sam navela dolje.

Jer, dečko, puno sam ih napravio.

Zašto Gusto uopće treba sustav dizajniranja? Pa, kad sam se pridružio timu za obračun plaća u lipnju 2016., identificirali smo neke probleme s procesom dizajna i razvoja. Nije postojala knjižnica uzoraka ili vodič za stilove, a tim je imao devet dizajnera proizvoda s velikim brojem inženjera i rukovoditelja projekata raspoređenih u misije. Problem u svemu tome je kako se komunikacija između tih misija počela silovati u još manje grupe i na kraju je to dovelo do velike, zbunjujuće baze podataka sučelja.

Vaši suradnici možda neće moći prepoznati problem i nazvati to problemom u cjelokupnom sustavu dizajna, ali svi osjećaju bol. Dizajneri proizvoda borit će se s pronalaženjem komponenti ili predložaka koje će se koristiti, PM-ovi će otkriti da projekti traju mnogo duže nego što su prvo očekivali, a inženjeri će postati frustrirani jer provode mnogo vremena u izradi prilagođenog korisničkog sučelja. Naravno, to će uvijek biti slučaj kada tvrtka raste do određene veličine.

Svi ovi problemi potiču iz nedostatka komunikacije, bez obzira na to koliko tim može biti izvanredan ili pametan ili sjajan. Ako sjajni dizajneri ili inženjeri međusobno ne komuniciraju, ovi problemi su jednostavno neizbježni. U tom sam trenutku zasukao rukave, otvorio uređivač koda i pripremio se da sve probleme riješim sam.

Tada sam naučio najvažniju lekciju dizajna sustava.

Lekcija 1

Ne možete sami izraditi sustav dizajna.

Iskreno sam vjerovao da se mogu sakriti u najmračnijem kutku ureda, osmisliti sjajan sustav, izgraditi izvanredan prednji kraj i vratiti u momka heroja. Ali! U ovoj liniji rada nema junaka. U stvari, postoji sjajna epizoda podcast Track Changes u kojoj Paul Ford i Rich Ziade razgovaraju o društvenoj dinamici naslijeđenog koda. Pavao spominje da:

Najgore što možete učiniti za svoju organizaciju je dokazati koliko ste pametni.

Oof. Kad sam čuo da sam shvatio da sam potrošio strašno puno vremena pokušavajući biti najpametniji i najbriljantniji tip u sobi i to je na kraju dovelo do nekih trenja unutar tima. Nitko ne želi raditi s momkom koji je diktatorski i zloban. On je samo kreten.

Tek kasnije nisam shvatio da su najuspješniji projekti oni u koje sam uvodio druge dizajnere i programere u proces. Od refaktoringa našeg ikonskog sustava, do osvježavanja tipografije, uklanjanja stilova Bootstrap iz aplikacije, svi su prethodno imali sjajne povratne informacije gdje smo se mogli oslanjati na svoje iskustvo poboljšanja sustava.

Također, važno je zapamtiti o radu na dizajnerskim sustavima da iako svi žele isti ishod, to je škakljiv dio. A kako je svaka orguljaška i inženjerska kultura različita, otkrio sam da mi saveti drugih timova o kojima nisu čitali nisu baš toliko korisni. Ali jedno pitanje koje svaki zajednički razvojni i dizajnerski tim ima zajedničko je potreba za jedinstvenim izvorom istine - domom koji će predstavljati sav njihov kod i dizajn. Na taj način svatko može dati svoj doprinos na skalabilan način bez skrivanja u vlastitim timovima i neprestanom izradi korisničkog sučelja.

U svakom slučaju, nakon nekoliko dana i noći zajedno hakiranja stvari, moja drugarica i šefica Dora Chan vratile su se s prototipom onoga što će uskoro postati Vodič.

I bilo je čudesno.

Ovo je druga verzija Vodiča koja je pokrenuta puno kasnije.

Kad smo počeli izbacivati ​​Dorein prototip, imali smo tri cilja koja su potaknula sve naše odluke:

  1. Postavite visoke standarde za dizajn i razvoj napred.
  2. Dokumentirajte kako se komponente mogu koristiti za sve timove.
  3. Unesite se u kod i nedosljednosti dizajna koje smo pronašli u aplikaciji.

To je nešto što trebaju svi timovi određene veličine, pa je malo vjerovatno da će ta vijest ikome biti upućena u ovom trenutku. Međutim, mislim da je lako takvim pravilima postati gadno i gadno s obzirom na pravi ton. Dakle, u uvodu Vodiča, koji sam postavio za cilj da informiram tim o našim ciljevima u suradnijem duhu:

Ovdje je arhivirana sva dokumentacija za Gustov dizajnerski sustav za sigurno čuvanje; Sadrži svu potrebnu imovinu, poput slika i ilustracija, kao i bilješke o našem stilu kopiranja i dokumentaciji za naše komponente React. U stvari, volimo razmišljati o Vodiču kao o vrsti Pokédexa.
U idealnom slučaju ovdje možemo dijeliti informacije i surađivati ​​u javnom prostoru kako bismo postigli konsenzus u svim misijama u pogledu koda, dizajna, pristupačnosti, performansi i marke. Ako ovdje poboljšamo jednu komponentu u Vodiču, tada će sve naše aplikacije i značajke dobiti predvidljive nagrade u isto vrijeme.
Ilustracije su dostupne za preuzimanje u Vodiču.

Izgradnja vodiča ipak je bila teška. Bilo je potrebno izvaditi sav naš kod iz naše glavne aplikacije, očistiti ga i staviti u novi repo, nazvan Biblioteka komponenata. Na ovaj način imali bismo zajedničku grupu komponenti koje bi se mogle koristiti u bilo kojoj aplikaciji koju Gusto gradi za budućnost. Ali mnogo vremena utrošeno je razgovarajući s inženjerima i dizajnerima o ovom planu i zamišljajući budućnost u kojoj dizajn i razvoj nisu samo lagani, već i lagani.

Lekcija br. 2

Sustav dizajna ne mora biti kompletan da bi bio koristan.

Imati sve naše komponente u zasebnom repo-u, u konačnici je značilo da bismo to mogli koristiti kao temelj za dizajn u Gustu: svaki put kada smo željeli stvoriti novu aplikaciju mogli bismo ovisiti o tome da su ove postavke i stilovi dosljedni i laki za upotrebu, a da ih nema izgraditi cijelu tugu stvar od nule. Ali brinuli smo se da je nepotpuno i nedovršeno; nije postojala dobra dokumentacija za sve naše stilove, pa čak ni popis vrsta propType-a, na primjer, u našim React komponentama.

No čim smo objavili vodič, ustanovili smo da su inženjerski i dizajnerski timovi na Gustu počeli koristiti njega, iako je bio nedovršen. To je bilo šokantno jer je Vodič uvijek bio naša sjeverna zvijezda za to kako smo htjeli stvarati proizvode i mogućnosti, ali nikada nije bio tako sjajan koliko smo željeli da bude, barem u početku. Vrlo smo polako gurali poboljšanja prema njemu s vremenom i previše smo oklijevali da bilo šta promijenimo dok ne bude savršeno. Ipak, nakon što sam gledao kako ekipe u Gustu tako žarko skaču na njega, sada vjerujem da bi svi vodiči za stil trebali imati za cilj biti korisni, ali također je i nered u redu.

Izvrstan vizualni dizajn ili čak UX stilski vodič nije nigdje toliko važan kao što je dokumentacija na jednom mjestu koje svi lako mogu pronaći. A ako je naš posao spasio inženjera ili dizajnera pet minuta pitajući nekoga drugog na Slacku o tome kako koristiti komponentu X, tada je Vodič uspješan, ako ne i mali.

Lekcija br. 3

Dizajnerski sustavi žive i umiru prema svojoj dokumentaciji.

Otprilike u ovo sam vrijeme naučio svoju treću lekciju rada na dizajniranju sustava: ne radi se samo o preuređivanju starijih komponenti i kodiranju. Vodiči za stil zahtijevaju ogromne količine pažljivog i promišljenog pisanja i ubrzo sam utvrdio da je copywriting jednako važan kao i kod.

S obzirom da smo samo dva dizajnera radili ovaj posao (uglavnom kao sporedni projekt) znali smo da ne možemo sjesti i objasniti Vodič svima koji su se pridružili tvrtki. Dakle, još jedan naš cilj bio je osigurati da dizajneri i inženjeri mogu istražiti što je sustav sposoban bez da stalno postavljaju pitanja. Vodič bi se u konačnici trebao osjećati kao igralište na kojem možete brzo uzeti LEGO blokove i izgraditi sve što želite od njega. Ali i to je potrajalo neko vrijeme. Nakon višemjesečnog rada otkrio sam da mi stilski vodič manje pomaže kada naređuje ljudima da nešto urade.

Istraživanje u dizajnerskom sustavu bilo je potrebno ne samo da bi tada bilo moguće, već i aktivno ohrabreno - zamislio sam da Vodič mora biti toplo i dobrodošlo mjesto bilo kojem programeru ili dizajneru bez obzira na iskustvo. Ukratko; ljubaznost je bila ključna.

Lekcija br. 4

Sustav dizajna više je od koda i dizajna - to je zapis zajedničkog znanja.

Mislim da većina ljudi koji rade s dizajnerima to rade ranije u karijeri, ali trebalo je izuzetno dugo vremena da mi cipela padne. A to se počelo događati kad sam pročitala uvijek tako odlične Dizajnerske sustave Alla Kholmatova gdje piše:

Ponekad mislimo da i drugi timovi imaju to kako treba i žele izgraditi sustav poput Airbnb-a. Ali svaki pristup ima svoje nedostatke. […] U središtu svakog učinkovitog dizajnerskog sustava nisu alati, već zajedničko dizajnersko znanje o tome što čini dobar dizajn i UX za vaš određeni tim i vaš određeni proizvod. Ako je to znanje jasno, uslijedit će sve ostalo.
- Sustavi dizajna, Alla Kholmatova

Uz ovu malu knjigu naučio sam da ako sustav dizajniranja ne riješi potrebe dizajnera i inženjera, osjetit će da sustav sprečava njihov rad. Moj prijatelj Jules Forrest opisao je to ovako:

Dizajnerski timovi nisu izričito nagrađeni za ponovnu upotrebu dizajna onako kako inženjeri znaju da trebaju napisati DRY kod, pa se uvođenjem nedosljednosti osjeća kao produktivnost.

Pa kako graditi sustav dizajna tamo gdje je suprotno? Kako da dodavanjem nedosljednosti u sustav dizajna osjećamo neproduktivno? Pa, mislim da je važno napomenuti da dizajneri i inženjeri uvode nedosljednosti u sustav ne zbog nužne kvalitete koda, već zbog mnoštva drugih razloga: loša dokumentacija u vodiču za stil, struktura imenovanja naših komponenata, nemogućnost brzo skenirajte što im treba.

To znači da sustavi dizajna više govore o evangelizaciji nego gotovo svemu drugom. I ono što sam u početku pretpostavljao je koncept kodiranja i programiranja nije ništa slično - ovaj posao je završio s oko 10% koda i 90% suradnje, istraživanja i mentorstva.

Tada sam shvatio da vodiči za stil nisu važni jer precizno predstavljaju bazu kodova, a sigurno nisu važni jer stvaraju pravila i propise kroz mrežu timova. Umjesto toga, stilski vodiči važni su jer su prostor za okupljanje. Oni smanjuju socijalnu složenost organizacije jer se sve to znanje može pohraniti i iskoristiti.

Budućnost dizajnerskih sustava

Uvijek mi je smiješno kad ljudi govore o budućnosti X ili Y, ali ako bih se dobro zamislio kamo sve to vodi onda se ne bih kladio u alate - oni zapravo nisu najvažniji dio dizajnerski sustavi rade. Vodiči za stil korisni su zasigurno, iako je malo složeniji od toga.

Nosite se sa mnom na sekundu, ali malo prije stigao je sjajan post Austina Kleona o tome kako se odnos s njegovom obitelji promijenio rođenjem drugog sina. Napravio je grafikon koji utvrđuje odnose između njega, njegove žene i njegove djece, predstavljajući ih svaki kao čvorove u složenoj mreži koja postaje eksponencijalno kompliciranija sa svakim dodatkom u obitelji. Austin se ne mora baviti samo svojim odnosom sa sinom, već sada mora brinuti i o odnosima svojih sinova.

A isto vrijedi i za dizajnerski tim. Sa svakim novim dodavanjem odnosi svih dizajnera povećavaju se složenosti, a usložnjavaju se samo kada razmišljate o njihovim odnosima s vodičima proizvoda, inženjerima i rukovoditeljima projekata.

Vodiči za stil i biblioteke uzoraka važni su za rješavanje neizbježnih pogrešaka u pogrešnoj komunikaciji koji nastaju između ovih složenih odnosa. Međutim! Stvarni cilj rada dizajnerskih sustava jest osigurati da ti odnosi budu plodni i usklađeni jedni s drugima: svi naši napori trebaju biti usmjereni na smanjenje društvene složenosti naših timova. To je budućnost dizajnerskih sustava. Barem, tako danas razmišljam o svemu ovome.

Što slijedi za Gusto?

Pa, to je ono gdje ulazite. Trenutno zapošljavamo dizajnere proizvoda, tako da ovdje imate priliku oblikovati ogromne dijelove dizajna i kulture. Radimo na nekim zanimljivim značajkama i jedva čekamo da vam ispričamo sve o njima.