Ser til Horisont: Hvorfor vi byggede et designsystem

Horizon Design System, del 1

Da jeg tiltrådte Twitter for over to år siden, opdagede jeg en gruppe hengivne designere og ingeniører, der arbejdede på et Hack Week-passionprojekt, der hedder Feather. Feather blev et bibliotek med webkomponenter, der fokuserede på at servere Twitter's interne og virksomhedsprodukter.

Feather's mission var at levere ensartede og tankevækkende oplevelser i skala. Efterhånden som antallet af Feather's komponenter, mønstre og interne kunder voksede, udviklede dette engang-Hackathon-passion-projekt sig til et godt understøttet team. Vores gruppe var forpligtet til at skabe et bibliotek af kvalitetskomponenter, der understøttede andre teams ved at forbedre arbejdsydelsen og effektiviteten.

I mellemtiden var ressourcerne, vi brugte til at oprette Twitter-appen, ikke så godt defineret. På trods af alles bedste intentioner om at skabe en sammenhængende oplevelse med Sketch UI-skabeloner og kontortid - uformelle sessioner, hvor funktionsdesignere møder platformdesignteamet om bedste praksis - designteamets størrelse var for stor til at opretholde justering og konsistens.

For at finde ud af mere om manglen på samhørighed gennemførte en brugerforsker på vores team, Wilson Chan, adskillige interviews blandt designteamet på udkig efter, hvor vi kunne gøre forbedringer. Vi deler snart det, vi lærte i et indlæg her.

Baseret på den indsamlede forskning sammensatte vi et team til at skabe Horizon, vores designsystem til alle vores Twitter-forbrugerprodukter. For at Horizon skulle få succes, vidste vi, at det var nødvendigt at blive behandlet med den samme indsats som et produkt, med klart identificerede mål, en køreplan og - selvfølgelig - swag.

Mål 1: Få samhørighed på tværs af platforme
En pålidelig måde at introducere samhørighed på tværs af platforme var gennem revisioner. Lette visuelle forskelle på tværs af platforme var let at finde, men med forskellige teams dedikeret til forskellige initiativer var uoverensstemmelser på tværs af UI-elementer og interaktioner alt for almindelige.

Revisionsøvelserne hjalp os med at oprette en opgørelse over opdateringer, som vi kan gøre, når ressourcer bliver tilgængelige, eller holdene berører relaterede områder af apps.

Den bedste anvendelse af vores revisionsresultater var at tage modstridende mønstre og dokumentere de passende anvendelser til at guide mod forening. Med denne dokumentation havde vi endelig en ressource til at hjælpe med at forhindre de samme problemer i at opstå igen.

Mål 2: Giv betroede ressourcer
Oprettelse af ensartede dokumentationsretningslinjer og distribution af altid ajourførte .sketch-aktiver som ressourcer hjalp alle med at begynde at kommunikere verbalt og visuelt på en samlet måde.

Vi ønskede at sikre, at vores teams sprog til forskellige elementer og fortolkninger af passende brug ikke var vildt anderledes. Gennem navngivningsøvelser, interviews og arbejdssessioner samarbejdede vi med designere og ingeniører på tværs af teamet for at lave et omfattende sæt brugsretningslinjer.

Uden denne centraliserede dokumentation kunne vores team ikke skalere korrekt. Viden var begrænset til bestemte mennesker, hvilket resulterede i, at disse personer regelmæssigt skulle mødes med andre for at diskutere det samme emne igen og igen. Vores dokumentation skabte et enkelt sted til indsamling af den viden, som teammedlemmer fik, mens de arbejdede på et produkt, hvilket gav mulighed for en selvbetjeningsmodel.

Fra den forskning, der blev udført inden for designteamet, blev der brugt en betydelig mængde tid på at genskabe synspunkter i produktet i Sketch. Ved at tilvejebringe et sæt synkroniserede ressourcer på hver designer's computer, der indeholder ajourførte elementer og skærme, er vi i stand til at øge produktiviteten og effektiviteten; vi eliminerede den kedelige, tilbagevendende opgave (mere at komme med dette i et kommende indlæg).

Mål 3: Se mod fremtiden uden at genskabe hjulet
At vide, hvordan og hvornår en eksisterende komponent eller interaktionsmønster skal udvikles, kan ofte være uklart. Vi løser dette ved at identificere en sekventiel efterforskningsfase inden for vores produktdesignproces: Udnyttelse, Tilpasning og derefter Oprettelse.

Brug af Horizon-komponenter giver os mulighed for at udnytte definerede løsninger til almindelige designproblemer og behov. Med vores designsystem byggede vi stærke fundamenter af eksisterende UI-elementer og interaktionsmønstre, som vi kan bruge og genbruge med lidt overhead og mindst mulig friktion. Brug af disse elementer understøtter skabelse af en ensartet oplevelse på tværs af platforme, der kræver, at folk skal udføre mindre kognitivt arbejde for at lære nye interaktioner.

Tilpasning af et element er en mulighed for at forfine og forbedre alle aktuelle brugssager. Når en eksisterende præsentation eller adfærd ikke fuldstændigt løser et problem, kan vi foretage justeringer af et element for at imødekomme behovene og få disse ændringer til at sprede sig i hele appen.

Oprettelse af nye UI-elementer eller interaktionsmønstre er undertiden nødvendigt, når delene af vores designsystem ikke løser et specifikt problem for folk, der bruger Twitter. Vi forsøger, når det er muligt, at overholde brugen og tilpasningen af ​​vores system, men erkender, at der nogle gange er behov for nye artefakter for at løse et problem for at give en god oplevelse. Ved at gennemgå denne cyklus kan vi sikre, at oprettelse af et nyt element er gavnligt for vores system og de mennesker, der bruger Twitter.

Konklusion
Ved at identificere disse mål tidligt i vores proces sætter vi vores syn på, hvordan vi ønsker at arbejde, og hvad vi vil bygge.

Vi lærer meget gennem denne proces gennem kvartalsvise team-feedback-undersøgelser og -præsentationer, mens vi evangeliserer vores mission i hele organisationen.

Dette er det første blogindlæg i serien “Horizon Design System”. Vi ser frem til at dele mere om vores proces og fremskridt i fremtidige stillinger. I mellemtiden, hvis du har spørgsmål, så lad os svare. Eller send os en Tweet!

Studiobilleder med tilladelse fra Josh Wilburne. Hovedillustration med tilladelse fra Michie Cao.