Folkets del af designsystemer

Eksperimenter og erfaringer fra administration af Design Systems hos Etsy.

For lidt over ni måneder siden forlod jeg Etsy for at fundet relaterede værker. I løbet af mit sidste halvanden år der ledede jeg Etsys første dedikerede Design Systems-team. Nedenfor er mine tanker om, hvad det betød at gøre teamet og arbejdet vellykket.

Når tech-virksomheder vokser, kan oprettelsen af ​​deres designsystem blive et kraftfuldt og nødvendigt værktøj. Designsystemer, der typisk består af et defineret sæt genanvendelige komponenter og retningslinjer, gør det nemt for enhver at skabe en brandorienteret og sammenhængende kundeoplevelse konsekvent. Når de er bedst, har de magten til at tilpasse alle til en fælles vision om, hvad dit brand's stemme og visuelle stil er, og hvordan det opfører sig. Hvis du er ny inden for designsystemers verden, vil jeg anbefale at læse InVisions designhåndbog.

I årenes løb gennemgik Etsys designsystem mange inkarnationer. Måden vi organiserede for at udføre arbejdet ændrede sig også, og i 2016 oprettede vi vores første dedikerede Design Systems-team. Indtil da var det blevet bygget og vedligeholdt af en gruppe designere og ingeniører, der gjorde det på toppen af ​​deres almindelige produktarbejde. Forbedringer blev foretaget, men langsomt. Efterhånden som efterspørgslen steg, blev det klart, at vi havde brug for et fuldtidshold for at holde trit.

Vi havde en storslået vision om, at ved at sætte et team af designere, ingeniører og produktledere i stand til at fokusere på fortsat vedligeholdelse, forbedring og vedtagelse af vores system, kunne resten af ​​produktorganet vende tilbage til at koncentrere sig om at opbygge kundeoplevelser. Alle kunne stadig bidrage til arbejdet, men den tunge løft var nu ansvaret for Design Systems-teamet.

Virkeligheden viste sig at være mere kompliceret end det.

Selvom vi nu havde et dedikeret team, var vi stadig relativt små med et ton overfladeareal til at dække; Etsy havde kundeoplevelser, der spænder over web, iOS, Android, e-mail og off-Etsy og offline, hvilket var nødvendigt for at imødekomme behovene hos både købere og sælgere, der havde meget forskellige behov. Vi arbejdede også med at skabe en ny markedsplads med sit eget brand og kundebehov. Vi var strakte tynde og kunne ikke understøtte alle anmodninger om nye eller ændrede komponenter. Produkthold udfylder hullerne i sig selv ved at oprette de tilføjelser eller ændringer, de havde brug for, men ofte uden den nødvendige omhu for at sikre, at de fungerer på tværs af alle vores brugssager og relevante platforme. Design Systems-teamet faldt i et mønster for at spille indhentning. Vi var på vej ned ad en vej, hvor vi var en flaskehals, og fordelen ved, at vores systemer var kilden til sandheden, blev langsomt forværret.

Fremme af kollektivt ejerskab

Vi indså, at i sidste ende for at vores systemer skulle lykkes på lang sigt, skulle de tænkes som alles ansvar. Det blev tydeligt, at vores rolle som et team ikke kun var ved at løfte den vedligeholdelse og forbedringer kraftigt. Vi var et team af systemadvokater og facilitatorer, der hjalp alle med at bidrage til vores udviklende system med det store billede i tankerne.

Vi lærte, at det var vigtigt at skabe plads, tid og forskellige måder, mennesker kunne være involveret på. Vi var nødt til at definere klare mål for, hvordan vi bidrog, og hvad et vellykket bidrag var. Til sidst måtte der være muligheder for krydseksponering for både krav og begrænsninger fra individuelle produktteam og Design Systems-teamet.

I løbet af det første år eksperimenterede vi med og prøvede en masse forskellige ting. Nogle blev spundet op, men de fleste udviklede sig fra eksisterende programmer. Vi endte med et økosystem af muligheder, processer og mekanismer, der var værdifulde på forskellige måder.

Design bug rotation

Etsy havde akkumuleret en anstændig mængde designgæld gennem årene. Når du navigerede over Etsy, kunne du støde på en række lignende, men lidt forskellige komponenter, interaktioner eller opførsel. Det skabte en fragmenteret og forvirrende kundeoplevelse, der udhuler kundernes tillid.

Inspireret af ingeniørorganisationen oprettede Designteamet Design Bug Rotation for at hjælpe med at nedbetale vores designgæld. Hver anden uge skulle en gruppe designere mødes i et par timer for at ordne det, vi kaldte "designfejl." Dette var ting, der ikke hindrede funktionaliteten og ikke ville have været arkiveret som en teknisk fejl, men var steder, hvor vi brugte en gammel komponent, en eksisterende forkert eller en engangsændring. Da nogen i virksomheden stødte på en af ​​disse bugs, arkiverede de en billet under et delt Jira-bord. I løbet af en rotation, ville designere gå igennem listen og chip væk på dem.

Udviklingen af ​​Etsys visuelle sprog gennem årene.

I årenes løb fik rotationen mere struktur, med hver rotation fokuseret på et specifikt tema, komponent eller produktområde takket være det hårde arbejde fra Cambria Kline. Vi udnyttede rotationerne som et kraftløft til Design Systems-teamet og hjalp os med at komme igennem ethvert arbejde, der inkluderede oprydning af en del relateret designgæld.

Udover at fremskynde vores arbejde frigav rotationer ofte System-teamet til at innovere og tænke på et højere niveau. For eksempel arbejdede vi med et stort skub for at opdatere vores farvebrug overalt for at være mere brand-tilpasning. Det var under en af ​​disse rotationer, at Katie Sylor-Miller, ingeniør i systemteamet, indså, at vi havde brug for en mere effektiv og fremtidssikker måde at udføre disse typer af fejende, globale ændringer på. Som et resultat var hun i stand til at gå ind for oprettelse af designtokener. Hvis vi besluttede, at vi skulle opdatere vores farver igen i fremtiden, ville vi blot opdatere dem et sted og se ændringerne afspejles overalt.

Til sidst skabte disse rotationer en let måde bidrager uden en betydelig tidsforpligtelse. Der var masser af designere og ingeniører, der ville hjælpe, men ikke havde en bestemt ting i tankerne. Design Bug Rotation gav dem en mulighed for at gøre netop det. De blev også nødt til at opleve førstehåndsomkostningerne ved ikke at investere i at bruge vores designsystem.

Ny leje af Boot Camp

Efterhånden som designteamet voksede, blev det uvurderligt for nye designere ombord for at hjælpe dem med at slå jorden i gang. I årenes løb blev processen mere robust med en pakke ressourcer og en-til-en-sessioner, der viste dem, hvordan man bruger vores webværktøjssæt og skubber ændringer til produktionen. En af disse tilføjelser var, at hver ny leje foretog en 2–3 ugers boot camp med et team, før han tiltrådte deres produktteam på fuld tid.

Når vi oprettede teamet Design Systems, ville vi forsøge at få så mange nye ansættelser som muligt deres boot camp med os. Vi ville give dem et opnåeligt projekt, de kunne afslutte inden for to uger, hvilket gav dem en mulighed for at få nogle praktiske oplevelser ved hjælp af vores værktøjssæt, dokumentation og andre ressourcer.

Disse boot camps gjorde systemtænkning til en grundlæggende del af deres indrejse i Etsy. Ved at arbejde tidligt på vores system blev de investeret i dets succes. Hver ny leje, der gjorde deres boot camp med Design Systems, blev en stærk talsmann for arbejdet og dets vedtagelse.

Til gengæld skabte det også en mulighed for et nyt perspektiv og nye ideer. Ting, vi var vant til, blev stillet spørgsmålstegn ved at skabe mere tankevækkende diskussioner og langsigtede løsninger.

Designsystemer årlig rotation

For hvert år hos Etsy kunne enhver branddesigner, produktdesigner eller ingeniør tilbringe to uger i træk med indlejret i Design Systems-teamet. De ville gå til alle de regelmæssigt planlagte møder og designkriterier og arbejdede på et projekt, de var ansvarlige for at gennemføre i løbet af denne periode. Vi ville udpege nogen på holdet som deres kompis, der var der for at hjælpe med at besvare spørgsmål eller til at afvise ideer om, hvis de skulle. Rotatorer kunne hjælpe med igangværende projekter, men ofte havde de specifikke selvstyrede planer, de ønskede at forfølge.

Disse rotationer gav folk, der ellers måske ikke har tid til at udføre systemarbejde, mulighed for at hjælpe på en fokuseret og meningsfuld måde. Det gav de personer, der elskede systemarbejde, men alligevel foretrak at fokusere på produktarbejde på fuld tid, lidt af begge verdener.

Et af de mest effektive resultater var, når branddesignere gjorde en rotation. Vores brandteam arbejdede på marketingkampagner til og fra Etsy, fysiske ting og specielle begivenheder for vores sælgere og købere over hele verden. De brugte forskellige processer og værktøjer end produktdesignteamet. Mange udtrykte et ønske om at lære mere om produktudviklingsprocessen og hvordan vi bruger vores webværktøjssæt, men det var svært at presse ind i deres travle tidsplaner. Som en del af en rotation med Design Systems, ville vi have dem til at gennemgå vores nye leje onboarding-proces, lære at bruge vores webværktøjskasse og skubbe ændringer på egen hånd. Vi parrede dem derefter med nogen på teamet for at arbejde sammen om at finde et eksisterende projekt, de arbejdede med, der havde et element, de kunne kode selv, eller noget, der kunne blive et genanvendeligt layout eller komponent med retningslinjer.

Rotationer med vores brandpartnere gav indsigt i, hvordan vi gør vores systemer til et stærkere udtryk for vores brand, samtidig med at de gør deres arbejde mere systemindstillet i dets udførelse og drift. For eksempel fokuserede en rotation på at skabe et sæt genanvendelige og lydhøre heltekomponenter, som vi brugte til marketingkampagner, begivenhedsmikrosites eller kritiske sider som vores hjemmeside. Ud over at tilføje en nyttig UI-komponent til vores system, havde branddesignteamet nu et værktøj, der hjalp dem med at planlægge og straks teste, om de aktiver, de skabte til heltens plads, ville fungere. Mens de var ved en fotosession, kunne de indsætte billedet i heltekomponenten, bekræfte, at det så godt ud for alle breakpoints, og iterere på stedet, hvis de havde behov for det.

Susi Vetter tester billedindstillinger for Etsy Resolution destinationssidehelten, mens hun er på fotoshoot.

Design Systems Council

Holdene arbejdede hurtigt, og når vores nuværende komponenter eller moduler ikke passede til et specifikt behov, var systemteamet ikke i stand til altid at være der for at hjælpe og give feedback. For at hjælpe med at afhjælpe disse problemer oprettede vi det, vi kaldte Design Systems Council. Det var et skift i vores teammodel til mere af en fødereret model med en udvalgt gruppe af repræsentanter, der var produktområde, emne eller platformeeksperter.

Deres ansvar var at være en mere formaliseret udvidelse af Design Systems-teamet, der mødes hver anden uge for at give opdateringer om alt, hvad der sker inden for deres produktområde, der kunne påvirke alle og til at evaluere, rådgive og træffe beslutninger om foreslåede ændringer af system. De var også ansvarlige for at dele disse beslutninger og opdateringer med deres respektive teams. Repræsentanter roterer omtrent hver sjette måned for at give flere enkeltpersoner mulighed for at deltage.

Rådets sammensætning spejlede det overfladeareal, som vores systemer understøttede.

Det øgede synligheden og diskussionen på tværs af produktorganet om, hvad der blev taget arbejde og beslutninger om vores designsystem, og hvilke behov og problemer der kom op, der skulle løses. Det forkortede feedback-løkker mellem produktteams behov og Design Systems-teamet, hvilket gjorde det lettere for diskussionen at ske så hurtigt som muligt, når vores systemer ikke betjener dem.

Rådet spredte ansvarlighed, ejerskab og beslutningstagning til et sæt individer, der unikt var positioneret som eksperter i hele virksomheden. Ved at være en del af samtalerne om de virkninger, disse ændringer kan have på hele vores system, stimulerede det alle til at tænke systematisk.

Forstærkede effekter

Ud over at øge investeringerne og deltagelsen i vores systemer i hele virksomheden, var der yderligere resultater, der havde en positiv indflydelse på vores arbejde og Etsy som helhed:

  1. Det klarede vores mål. For at gøre disse programmer nyttige, var vi nødt til at forbedre vores bidragsproces, hvordan vi evaluerede og målte succes for disse bidrag, og hvordan vi prioriterede arbejdet for at have størst effekt. Hver person, der deltog i disse programmer, bragte en mulighed for at stille spørgsmålstegn ved og afsløre områder, hvor vi ikke kun kunne gøre komponenterne bedre og dokumentation klarere, men også processen med at bruge og bidrage til vores system lettere.
  2. Oprettet mere overvejede og tankevækkende tilføjelser til vores systemer. Det gav eksponering for de enkelte produktteams udfordringer og behov med at opretholde og skalere et globalt system og således skabe et mere robust et.
  3. Øget kommunikation og tillid på tværs af hold. Folk kom til at samarbejde med andre, som de ellers ikke ville få til som en del af deres regelmæssige arbejde. De forhold, der blev skabt under disse forskellige programmer, skabte mere åbne kommunikationskanaler. Folk var mere tilbøjelige til at nå ud til designsystemer, hvis de havde et spørgsmål, og hastigheden, hvorpå information blev delt, steg.

Arbejdet udføres aldrig

Gennem vores eksperimenter lærte vi at designsystemer er mere end komponenter og retningslinjer. De er levende organismer, der består af de forhold og mekanismer, du bruger til at fremme kollektivt ejerskab. At gøre designsystemer vellykkede handler lige så meget om at skabe et folkesystem som det handler om at skabe et teknisk eller operationelt system. Du skal gøre det let for alle at føle sig ansvarlige for systemet med strukturer, der danner vedvarende uddannelseskanaler og kommunikation mellem hold. Når alt kommer til alt arbejder de, tilpasser sig og forbliver modstandsdygtige på grund af de involverede mennesker.

Mange tak til Ara Kim, Giovanni Fernandez-Kincade, Seth Daggett, Marco Suarez og Katie Sylor-Miller for at have taget sig tid til at læse dette indlæg og give tankevækkende feedback.