Design Systems hos Gusto: Del I

Hvad vi byggede, hvad vi lærte undervejs, og hvor vi skal hen videre.

Hos Gusto har vi bygget vores designsystem i de sidste to år og tænkt på, hvordan vi skal skalerer vores produkt- og designproces på tværs af flere komplekse projekter og teams. Så uanset om du lige er begyndt at bygge en kompliceret frontend, eller hvis du gør dig klar til at opbygge en stilguide hos en stor organisation, så kan du forhåbentlig lære af nogle af mine fejl, som jeg har vist nedenfor.

Fordi åh dreng, jeg lavede en masse af dem.

Hvorfor har Gusto endda brug for et designsystem? Da jeg tiltrådte lønningsteamet i juni 2016, identificerede vi nogle problemer med design- og udviklingsprocessen. Der var intet mønsterbibliotek eller stilguide, og teamet havde ni produktdesignere med et stort antal ingeniører og projektledere fordelt på missioner. Problemet med alt dette er, hvordan kommunikationen mellem disse missioner var begyndt at silo ind i endnu mindre grupper, og i sidste ende førte dette til en stor, forvirrende front-end codebase.

Dine kolleger er muligvis ikke i stand til at identificere et problem og kalde det et problem med det overordnede designsystem, men alle føler smerten. Produktdesignere vil kæmpe for at finde ud af, hvilke komponenter eller skabeloner de skal bruge. PMer vil opdage, at projekter tager meget længere tid, end de først forventede, og ingeniører vil blive frustrerede, da de bruger meget tid på at oprette brugerdefineret brugergrænseflade. Dette vil naturligvis altid være tilfældet, når et firma vokser til en bestemt størrelse.

Alle disse spørgsmål stammer dog fra mangel på kommunikation, uanset hvor fremragende eller smart eller strålende teamet måske er. Hvis gode designere eller ingeniører ikke kommunikerer med hinanden, er disse problemer simpelthen uundgåelige. Så det var på dette tidspunkt, jeg rullede ærmerne op, åbnede min kodeditor og forberedte mig på at løse alles problemer alene.

Dette var, da jeg lærte den vigtigste lektie til systemdesign.

Lektion 1

Du kan ikke selv oprette et designsystem.

Jeg troede virkelig, at jeg kunne gemme mig i kontorets mørkeste hjørne, designe et fantastisk system, bygge en fremragende front-end og vende tilbage til teamet en helt. Men! Der er ingen helte i denne arbejdslinje. Der er faktisk en stor episode af podcasten Sporændringer, hvor Paul Ford og Rich Ziade taler om den sociale dynamik i legacy code. Paul nævner, at:

Det værste, du kan gøre for din organisation, er at bevise, hvor smart du er.

Oof. Da jeg hørte, at jeg indså, at jeg havde brugt en frygtelig mængde tid på at prøve at være den smarteste og mest geniale fyr i rummet, og det førte i sidste ende til en vis friktion i teamet. Ingen vil arbejde med den fyr, der er diktatorisk og ond. Han er bare en nar.

Først senere senere indså jeg, at de mest succesrige projekter var dem, hvor jeg introducerede andre designere og udviklere tidligt i processen. Fra refaktoring af vores ikonsystem, til en typografisk opdatering, til at fjerne Bootstrap-stilarter fra appen, alle havde på forhånd god feedback, hvor vi kunne læne os på deres oplevelse for at forbedre systemet.

Den vigtige ting at huske ved design af systemsystemer er, at selvom alle vil have det samme resultat, er det sådan, man kan gøre det, det er den vanskelige del. Og da hver org og ingeniørkultur er anderledes, fandt jeg, at rådene fra andre hold, jeg havde læst om, ikke var så nyttige for mig. Men et spørgsmål, som ethvert udviklings- og designteam derude har til fælles, er behovet for en enkelt kilde til sandhed - et hjem til at repræsentere al deres kode og design. På den måde kan alle bidrage på en skalerbar måde uden at gemme sig i deres egne teams og opbygge brugerdefineret UI hele tiden.

Under alle omstændigheder, efter flere dage og nætter med at hacking ting sammen, vendte min ven og chef Dora Chan tilbage med en prototype af, hvad der snart ville blive The Guide.

Og det var vidunderligt.

Dette er den anden version af guiden, der blev lanceret meget senere.

Da vi begyndte at udslette Doras prototype, havde vi tre mål, der drev alle vores beslutninger:

  1. Sæt høje standarder for design og frontend-udvikling.
  2. Dokumenter, hvordan komponenter kan bruges til alle hold.
  3. Reign i koden og design uoverensstemmelser, vi fandt i appen.

Dette er noget, som alle hold af en bestemt størrelse har brug for, og det er derfor usandsynligt, at denne nyhed til nogen på dette tidspunkt. Jeg synes dog, det er let for disse slags regler at blive slemme og grimt i betragtning af den rigtige tone. Så i introduktionen til guiden begyndte jeg at informere teamet om vores mål i en mere samarbejdsånd:

Det er her al dokumentation for Gustos designsystem arkiveres til sikker opbevaring; det indeholder alle de aktiver, du har brug for, såsom billeder og illustrationer samt noter om vores tekstforfatterstil og dokumentation for vores React-komponenter. Faktisk kan vi lide at tænke på The Guide som en slags Pokédex.
Det er ideelt her, hvor vi kan dele information og samarbejde i et offentligt rum for at opnå konsensus på tværs af missioner med hensyn til kode, design, tilgængelighed, ydelse og branding. Hvis vi forbedrer en enkelt komponent her i guiden, vil alle vores apps og funktioner høste fordelene på samme tid på en forudsigelig måde.
Illustrationer stilles til rådighed for download i vejledningen.

At bygge guiden var dog hård gående. Det krævede at tage al vores kode ud af vores hovedapp, rense den og placere den i en ny repo kaldet Component Library. På denne måde ville vi have en fælles gruppe af komponenter, der kan bruges i enhver applikation, som Gusto bygger for fremtiden. Men meget tid blev brugt på at tale med ingeniører og designere om denne plan og forestille sig en fremtid, hvor design og udvikling ikke kun var let, men også blæsende.

Lektion # 2

Et designsystem behøver ikke være komplet for at være nyttigt.

At have alle vores komponenter i en separat repo betød i sidste ende, at vi kunne bruge det som grundlaget for design hos Gusto: hver gang vi ville oprette en ny app, kunne vi afhænge af, at disse indstillinger og stilarter er ensartede og lette at bruge uden at have at bygge hele dang ting fra bunden. Men vi var bekymrede for, at det var ufuldstændigt og uafsluttet; der var ikke god dokumentation for alle vores stilarter eller endda en liste over, hvilke proptyper der var tilgængelige i vores React-komponenter, for eksempel.

Så snart vi frigav The Guide, fandt vi imidlertid, at ingeniør- og designteamene hos Gusto begyndte at bruge den, selvom den var uafsluttet. Dette var chokerende, fordi guiden altid var vores nordstjerne for, hvordan vi ville bygge produkter og funktioner, men det var aldrig så stort, som vi ville have det til, i det mindste i begyndelsen. Vi skubbede langsomt forbedringer af det over tid, og vi var alt for tøvende med at ændre noget, indtil det var perfekt. Men efter at have set holdene på Gusto hoppe på det så ivrig, tror jeg nu, at alle stilguider burde sigte mod at være nyttige, men at være rodet er også okay.

Fantastisk visuelt design eller endda UX i en stilguide er ikke overalt så vigtigt som dokumentationen er på et enkelt sted, som alle nemt kan finde. Og hvis vores arbejde sparede en ingeniør eller designer fem minutter med at spørge en anden på Slack om, hvordan man bruger komponent X, er guiden en succes, hvis kun en lille.

Lektion 3

Designsystemer lever og dør af deres dokumentation.

Det var omkring denne tid, at jeg lærte min tredje lektion af systemdesignarbejde: det handler ikke kun om at refaktorere ældre komponenter og kodning. Stilguider kræver enorme mængder af omhyggelig, bevidst skrivning, og jeg fandt kortvarigt, at tekstforfatteren var lige så vigtig som koden.

Og i betragtning af at vi kun var to designere, der udførte dette arbejde (for det meste som et sideprojekt), vidste vi, at vi ikke kunne sætte os ned og forklare guiden til alle, der kom med i virksomheden. Så et andet mål af vores var at sikre, at designere og ingeniører kunne undersøge, hvad systemet var i stand til uden at skulle stille spørgsmål hele tiden. Guiden skal i sidste ende føles som en legeplads, hvor du hurtigt kan tage LEGO-blokke og bygge hvad du vil fra den. Men det tog også et stykke tid at finde ud af. Efter måneders arbejde fandt jeg, at en stilguide er mindre nyttig, når den beordrer folk til at gøre noget.

Udforskning i et designsystem behøvede ikke kun at være muligt da, men aktivt opmuntret - Jeg forestillede mig, at Vejledningen måtte være et varmt og indbydende sted for enhver udvikler eller designer uanset erfaring. Kort sagt; venlighed var nøglen.

Lektion 4

Et designsystem er mere end kode og design - det er en registrering af delt viden.

Jeg tror, ​​at de fleste systemdesignere arbejder med dette tidligt i deres karriere, men det tog en ekstraordinær lang tid, før skoen faldt for mig. Og det begyndte først at ske, da jeg læste de nogensinde så fremragende Design Systems af Alla Kholmatova, hvor hun skriver:

Nogle gange tror vi, at andre hold har det rigtigt og stræber efter at opbygge et system ligesom Airbnb. Men enhver tilgang har sine ulemper. […] Kernen i ethvert effektivt designsystem er ikke værktøjerne, men den delte designviden om, hvad der skaber godt design og UX til dit særlige team og dit særlige produkt. Hvis denne viden er klar, følger alt andet.
- Designsystemer, Alla Kholmatova

Med denne lille bog lærte jeg, at hvis et designsystem ikke løser designernes og ingeniørernes behov, så føler de, at systemet kommer i vejen for deres arbejde. Min kammerat Jules Forrest beskrev det sådan:

Designteam belønnes ikke eksplicit for at genbruge design, som ingeniører ved, at de skal skrive TØR-kode, så det at introducere uoverensstemmelser føles som produktivitet.

Så hvordan bygger vi et designsystem, hvor det modsatte er sandt? Hvordan får vi føje uproduktiv til at tilføje uoverensstemmelser til et designsystem? Nå, jeg synes, det er vigtigt at bemærke, at designere og ingeniører introducerer uoverensstemmelser til et system ikke på grund af kodekvaliteten nødvendigvis, men på grund af et uheld af andre grunde: dårlig dokumentation i en stilguide, navnekonstruktionen af ​​vores komponenter, manglende evne til at hurtigt scanne efter, hvad de har brug for.

Dette betyder, at designsystemer handler mere om evangelisering end næsten alt andet. Og hvad jeg oprindeligt antog var et kodnings- og programmeringsprogram, og det viste sig ikke at være noget af den art - denne arbejdslinje endte med at være omkring 10% kode og 90% samarbejde, forskning og mentorskab.

Dette var, da jeg indså, at stilguider ikke er vigtige, fordi de nøjagtigt repræsenterer kodebasen, og de er bestemt ikke vigtige, fordi de opretter regler og forskrifter på tværs af et netværk af teams. I stedet er stilguider vigtige, fordi de er et samlingsrum. De mindsker en organisations sociale kompleksitet, fordi al denne viden kan gemmes og udnyttes.

Fremtiden for designsystemer

Jeg synes altid det er sjovt, når folk taler om fremtiden for X eller Y, men hvis jeg skulle tage et vildt gæt om, hvor alt dette fører, så ville jeg ikke satse på værktøjerne - de er ikke rigtig den vigtigste del af design systemer arbejde. Stilguider er nyttige, selvom det er lidt mere kompliceret end det.

Bær med mig et øjeblik, men for kort tid siden var der et stort indlæg af Austin Kleon om, hvordan forholdet til hans familie ændrede sig med fødselen af ​​hans anden søn. Han lavede en graf, der peger på forholdet mellem ham, hans kone og hans børn, der repræsenterer hver af dem som knudepunkter i et komplekst netværk, der bliver eksponentielt mere kompliceret med hver tilføjelse til familien. Austin behøver ikke bare at beskæftige sig med sit forhold til sin søn, men han skal nu også være bekymret for forholdet mellem sine sønner.

Og det samme gælder et designteam. Med hver nye tilføjelse forøges forholdene mellem alle designere i kompleksitet og bliver kun mere komplicerede, når du tænker over deres forhold til produktledere, ingeniører og projektledere.

Stilguider og mønsterbiblioteker er vigtige for at tackle de uundgåelige fejlkommunikationsfejl, der dukker op mellem disse komplekse forhold. Imidlertid! Det egentlige mål med design-systemarbejdet er at sikre, at disse forhold er frugtbare og synkroniseres med hinanden fra start: alle vores bestræbelser skal være fokuseret på at mindske vores teams sociale kompleksitet. Det er fremtidens designsystemer. I det mindste tænker jeg på alt dette i dag.

Hvad er det næste for Gusto?

Nå, det er her du kommer ind. Vi ansætter i øjeblikket produktdesignere, og så har du muligheden for at forme enorme dele af design og kultur her. Vi arbejder på nogle interessante funktioner, og vi kan ikke vente med at fortælle dig alt om dem.