Designet til vækst

Illustration af Naomi Wilkinson
Teknologiselskaber forventes at bevæge sig i utroligt tempo, og bygningssoftware er komplekst.

Alex Schleifer, VP for design hos Airbnb, skrev disse ord i sin artikel, The Way We Build. Det er en vidunderlig læsning af, hvordan Airbnb omtænkte deres tilgang til design.

Hos Etsy havde vi en lignende åbenbaring. At forstå, hvordan man designer, på en måde, der forudser ændringens uundgåelige fremtid, kræver et paradigmeskifte i den måde, vi designer.

Håndtering af gæld

Når tech-virksomheder vokser og ældes, begynder du at føle den gæld, du erhverver, ikke finansiel gæld, men teknisk og designgæld. Gæld erhverves ved bygning på kort sigt. Den påløbne rente er mængden af ​​tid til at styre, reparere, omskrive og bygge på den dårligt skrevne og designede kode.

Designgæld erhverves af designteams, der skaber ikke-genanvendelige løsninger til isolerede problemer. Designgæld består af en overvægt af ikke-genanvendelige og inkonsekvente stilarter, behandlinger og interaktioner, og interessen er den umulige opgave for deres styring og ændring.

Vi har set vores designgæld påvirke anvendeligheden og ydelsen af ​​vores websted. Uoverensstemmende interface-konventioner forhindrer brugervenlighed, CSS for disse unikke interfaceelementer øger sidevægten, og modstridende CSS skaber et QA-mareridt.

Det bremser os også meget.

Nedenfor er en diff af Jessica Harllee's arbejde, når hun opdaterer stylingen af ​​knapper på etsy.com. Den røde er koden, der er slettet, og den grønne er koden, der er skrevet. Helt for meget kode blev rørt for at foretage en enkel visuel ændring.

Skabelsen er ikke det, der bygger gæld. Det er oprettelsen af ​​ikke-genanvendelig kode og design, der tilføjer gæld. Men når du bygger ting, der kan genanvendes, opretter du effektivt et system. Og systemer er det, vi har fundet som den bedste måde at styre vores designgæld på.

Design systemer

Som så mange andre virksomheder skabte vi et Design Systems-team. Målet med dette team er at opbygge systemer og oplevelser, der udtrykker Etsys brand på en kreativ og anvendelig måde. Men inden oprettelsen af ​​dette team, som endnu ikke er et år gammelt, blev vores system bygget og vedligeholdt af en gruppe dejlige frivillige ledet af et par designere fra vores Seller Experience-team. Dette arbejde ud over frivilliges andre projekter og ting skred frem, men langsomt. Efter en periode besluttede vi at danne et team dedikeret til vores systemer på fuld tid. Således blev Design Systems-teamet født. Vi har nu værktøjssæt til web, iOS, Android og e-mail.

Det, vi kalder et værktøjssæt, som nogle andre kalder en stilguide eller et mønsterbibliotek, men det er en ressource for genanvendelige UI-komponenter, som designere og frontend-ingeniører bruger til at skabe et hvilket som helst antal designløsninger. Mange hold har bygget systemer og gjort dem offentlige til at inspirere og uddanne. Etsy værktøjssæt er endnu ikke offentlige, men vi håber at gøre dem offentlige i ikke så fjern fremtid.

I fremtidige indlæg dykker vi dybere ned i vores værktøjssæt, men her er et par tricks, som vi har brugt for at holde vores webværktøjssæt fleksibel uden at miste konsistensen i konventioner eller æstetik.

Atomic Design er en bog skrevet af Brad Frost. Konceptet udfordrer dig til at tænke på dit UI i dets mest elementære former eller "atomer." Atomerne kan samles på et vilkårligt antal måder for at skabe noget. Dette holder konsistensen, samtidig med at der tillades fleksibilitet i ethvert brug.

Objektorienteret CSS eller OOCSS ændrer, hvordan du skriver din CSS. I teorien ligner det Atomic Design. Det er en fleksibel løsning til at skrive minimal, men genanvendelig CSS. Det har to hovedprincipper: separat struktur fra tema og containere fra indhold.

Sass-variabler er en fantastisk måde at holde din CSS håndterbar. I stedet for at gentage hexen for en farve i 1.000 forskellige klasser, tilføjer du en variabel i disse 1.000 klasser, og variablen refererer til en hex skrevet et sted. Dette gør ændring virkelig let.

Designtoketter tilføjer et andet abstraktionslag for at gøre variabler let at ændre. I stedet for at bruge en variabel som $ orange til at tilføje farve til en knap, bruger du et designtoken som $ primær-knap-baggrund. Derefter refererer $ primær-knap-baggrund-referencer $ orange og $ orange farven hex i en separat tokens-fil.

Alt design er systemdesign

Konvention over konfiguration er et teknisk udtryk, der også gælder for design. Ved at give efter for systemets konventioner er beslutningstagningen fokuseret på ting som informationsarkitektur og brugerstrømme. Vi ønsker ikke, at vores designteam skal løse de samme designproblemer igen og igen. Dette er spildt tid. Vi ønsker, at de skal fokusere på de unikke udfordringer ved deres projekter. Systemet skal tilvejebringe de nødvendige konventioner for at løse de tilbagevendende designproblemer.

Men hvad sker der, når systemet konstateres, at systemet mangler, og det er nødvendigt med konfiguration? Dette er paradigmeskiftet.

I stedet for at skabe flere tilpassede løsninger, som tilføjer vores gæld, skal du oprette løsninger, der skal føres tilbage til systemet. Hvis alt, hvad vi skaber, bruger systemet eller feeds tilbage i det, bliver al design systemdesign.

Design Systems-teamet er vicevært for vores værktøjssæt, men det er ikke en bjergomgivet have. Alle vores designere forventes og får beføjelse til at bidrage til vores værktøjssæt, hvilket gør dem mere passende og robuste. Det bedste arbejde i vores Design Systems-team går ind for brugen af ​​vores værktøjssæt, uddanner team om dets fordele og i sidste ende dyrker en mental designmodel i hele vores virksomhed.

Fordelene ved at være gældsfri

Selvom vi meget langt fra er fri for designgæld, har vi allerede følt fordelene ved det arbejde, der er udført. I løbet af sommeren redesignede vi vores konveksværktøj, der giver købere og sælgere mulighed for at kommunikere med hinanden. Det var et gammelt værktøj, der havde flere desktop- og mobile webskabeloner, der brugte forskellige kode med forskellige designbehandlinger. Omdesignet blev helt bygget ved hjælp af vores webværktøjssæt. Det er lydhør, tilgængeligt og konsistent - alle fordele, der er arvet gratis fra vores værktøjssæt. Det var også utroligt hurtigt at bygge. Fra start til lancering tog det 8 uger at redesigne og genopbygge produktet.

Gæld er en vægt omkring din hals. Dens eksistens koster tid, ressourcer og risiko, der forhindrer, at kvalitetsprodukter bygges i rette tid. Ved at have et system og give efter for det er vi i stand til at bevæge os hurtigere og opbygge bedre produkter.