Plasmedesignsystem

Oprettelse og dokumentation af et produktdesignsystem

Denne casestudie sigter mod at kronikere, hvordan vi oprettede et designsystem hos WeWork. Jeg vil dele indsigt i vores proces, produktdesign, de værktøjer, vi brugte til at oprette og implementere systemet, og også hvordan vi dokumenterer og deler systemet med vores team.

Et eksempel UI fra et af vores produkter, der bruger Plasmedesignsystemet

Introduktion

WeWork skaber inspirerende delte arbejdsområder med vægt på samfund. Vi designer og bygger vores egne interne digitale værktøjer til at imødekomme vores forretningsbehov og til at styre vores globale netværk af bygninger og medlemmer. 'Plasma' er et designsystem oprettet til disse interne forretningsværktøjer.

Plasma som koncept blev grundlagt af en af ​​vores digitale kreative kundeemner, Nick Stamas. Nick introducerede vores ingeniører til konceptet om at opbygge et system i React JS og Sass og har siden ført opbygningen af ​​systemet. Jeg leder dens design, kreative retning og dokumentation. Jeg arbejder også med produktdesigner Deena Edwards, der anvender Plasma på vores produkter.

Trin 1: Designudforskning

Vi startede med at eksperimentere med tre forskellige interne produkter, som systemet ville blive anvendt på - at opdage, etablere og stresstest en stil (er) og et bibliotek med komponenter og mønstre. Retningen, brugergrænsefladen (UI) og stil ændrede sig over tid, hvilket jeg har forsøgt at fange nedenfor for at vise udviklingen og udvalget af testede produkter.

Sketch artboards viser indledende udforskninger

Det er vigtigt at bemærke: Designets retning for dette system blev meget påvirket af WeWorks retningslinjer for digitalt brand, kendt som WeWork Digital Foundations. Du kan læse mere om disse her.

Enkel, klar og ren

Vores interne værktøjer er alle datatunge, webbaserede produkter. Enkelhed, læsbarhed og indlæsningstid er alt vigtigt. Vi vidste tidligt, at vi stræbte efter en klar og ren æstetik.

Farve teori

Systemet er overvejende hvidt, sort og gråt. Det er vigtigt, at designet ikke distraherer fra indholdet, så subtilitet er nøglen. Lysere farver bruges til at formidle mening. Gul bruges til primære handlinger, da gult er en af ​​WeWork's grundlæggende mærkefarver. Blå er til navigationslinks. Rødt er til advarsler og alarmer. Vi bruger også lilla som en tertiær farve, da det er en arv farve i vores interne værktøjer, og vi ønskede at holde en luft med fortrolighed i vores produkter.

Et skrifttype, der skal matche

Plasma bruger udelukkende Helvetica, en enkel og fed skrift. Mac-computere har Helvetica forudinstalleret og alle computere, der ikke falder tilbage til Arial (en lignende, men websikker font). Dette er vigtigt, da der ikke er behov for scripts fra tredjepart for at indlæse skrifttypen, hvilket betyder hurtigere sideindlæsningstider.

Designe alle stater. Et glimt af vores master Sketch-fil til plasma-designsystemet

Produkt design

Jeg er sikker på, at du har set 'UI-kit - gratis at downloade!' På Behance og Dribbble mange gange. Nogle af dem ser smukke ud! Men mange af dem er i sidste ende mangelfulde, medmindre de er designet med ægte produkter, indhold og data. Tilpas aldrig indholdet til designet, systemet skal arbejde med noget indhold. Design ikke bare til det bedste case-scenarie - redegør for alle scenarier.

Det er vigtigt at oprette et designsystem ved hjælp af produkter, det vil blive anvendt på, med reelle data og problemer.

Vores mål her er ikke at skabe det smukkeste system, det er at designe et system, der bedst imødekommer vores behov - forretningsbehov i Plasmas tilfælde, men kundebehov for nogle systemer. Vi tager selvfølgelig ud for at skabe dejlige produkter, men kun for at forbedre brugeroplevelsen (UX).

Nedenfor er en lille indsigt i de tre produkter, der formede systemet:

Produkt 1: CMS (alias ‘Maggie’)

Vores CMS-produkt giver vores marketing- og væksthold mulighed for at tilføje, redigere og styre vores bygninger og markeder på vores centrale marketingwebsted: wework.com. Før plasma var vores CMS blot en række HTML-tabeller med grundlæggende CSS-tilpasning. Plasmaformet dette produkt UI og UX. Nedenfor er en lille prøve af UI'er fra dette produkt. Du kan klikke på billederne for at se hver fuld størrelse.

Prøver fra CMS-produktet med plasma-designsystemet anvendt på det

Produkt 2: Spacestation

Vores Spacestation-produkt er et af vores mest anvendte værktøjer på WeWork-hovedkvarteret og i hver af vores bygninger internationalt. Det er et datatungt produkt at administrere en enorm database med information og fakturering, der vedrører vores medlemmer og bygninger. Det er en masse tabeller, formindgange, filtre og navigation - det perfekte testbed til et produktdesignsystem! Jeg arbejdede sammen med Deena Edwards, den førende produktdesigner på Spacestation, til at koncept, anvende, stresstest og iterere på systemet, som det gjaldt for dette produkt.

Prøve, konceptgrænseflade fra Spacestation-produktet med plasma-designsystemet anvendt på det

Produkt 3: Dataforespørgsel

Arten af ​​WeWork's forretning betyder, at vi har en masse data! I Digital betyder det, at vi har et væld af data til rådighed, som vi kan udnytte til at opbygge bedre produkter, der imødekommer vores kunders behov. Ideen til dette produkt kom på et meget passende tidspunkt - vi var allerede begyndt at konceptere plasma-designsystemet og vidste, at dette nye produkt både kunne bruge systemet, og skubbe det videre med det yderligere behov for data, nemlig. Jeg arbejdede med vores Data engineering team til at koncept dashboards og data forespørgsel værktøjer. Nogle få af disse udforskninger er inkluderet nedenfor.

Design undersøgelser for et dataprodukt ved hjælp af Plasmedesignsystemet. Alle viste data er sammensat til offentlig præsentation!

Trin 2: Mønstre og komponenter

Efter dage med udforskning, anmeldelser og iterationer ankom vi en stil, som vi var tilfredse med. Opgaven nu var at skabe en omfattende pakke med mønstre og komponenter, der redegør for alle tilstande og scenarier - i det væsentlige at skabe et omfattende UI-kit, som vores team kunne bruge.

Vores system består af grundlæggende elementer som definerede tekstformater til overskrifter og indhold, en farvepalet, hvad vi kalder mønstre og komponenter, og skabeloner.

Konsistente brugergrænseflademønstre og komponenter gør en enorm forskel i at guide en bruger gennem et produkt.

Mønstre

Mønstre refererer til tilbagevendende eller stadig tilstedeværende elementer eller praksis i hele et produkt. Eksempler inkluderer navigation, kort, tabeller, tomme eller indlæsningstilstande, underretninger, advarsler og modaler. Mønstre er alsidige, kan indeholde komponenter og parres sammen for at udgøre en skabelon.

komponenter

Komponenter henviser til karakteristiske brugergrænsefladeelementer, der bruges om og om igen i et produkt - normalt anvendelige, undertiden for at formidle mening. Et par eksempler inkluderer knapper, indgange, markeringer, skift, avatarer og værktøjstip.

Det igangværende designsystem (og aktiver til dokumentationen) i Sketch

Følg dette link for en hurtig rundvisning af master-sketch-filen (set ovenfor), der indeholder alle mønstre og komponenter til designsystemet.

Bedste værktøj til jobbet

Vores værktøj, du vælger til UI-design, er Sketch. Funktioner, der gør Sketch fantastisk til produktdesign gør det specielt kraftigt til systemdesign. Når du opretter hundredvis af redigerbare symboler og let anvendelige tekstformater, bliver Sketches enkelhed afgørende.

Om lydhørhed

Plasma er designet til at være lydhør. Selvom det er simpelt at opbygge lydhøre komponenter, er det ikke så simpelt at mockupe responsivt. Eller så troede vi. Det er vigtigt at designe web-UI'er, der fungerer i forskellige browserbredder. Heldigvis giver Sketch muligheden for at indstille elementer til at reagere på forskellige måder, når de vokser eller krymper i størrelse. Ved hjælp af en kombination af indstillinger, grupper og symboler kan du oprette en grundlæggende responsiv brugergrænseflade i Sketch. Selvom dette ikke hjælper dig med breakpoints, er det kraftfuldt til hurtigt at se, hvordan eller om designet fungerer i forskellige browserstørrelser. Således skabte vi vores bibliotek med mønstre og komponenter for at være lydhøre.

Responsivt design i Sketch

Læs denne artikel for en introduktion til lydhør design i Sketch.

Trin 3: Kraften i en skabelon

Af hensyn til konsistensen i vores produkter er det vigtigt, at vi gør det så enkelt som muligt for vores team at designe med Plasma. Heldigvis gør Sketchs redigerbare symboler og tekstformer det let at distribuere og vedligeholde et designsystem.

Det er let for et produkts design at komme på afveje, hvis vores team ikke blot kan anvende systemet i deres arbejde.

Vi har en master (evigt arbejde-i igangværende) skitse-fil til alt plasma. Den sidste ting, vi ønsker, er folk, der arbejder fra denne masterfil, som ved et uheld redigerer eller sletter ting! Så vi oprettede en sketch-skabelon, som vores team kan bruge, hostet på Dropbox. Skabelonen har et bredt udvalg af redigerbare symboler, alle tekstformer, mærkefarver og et grundlæggende artboard klar til at gå - hvilket gør det nemt at hurtigt opsættes og samle en UI ved hjælp af plasma.

Arbejde med etablerede mønstre og komponenter frigør os til at fokusere på brugeroplevelse, problemløsning og opbygge meningsfulde funktioner og produkter.

Dækker alle scenarier

Vi står for alle 'tilstande' i systemet, og der er symboler for hver af disse tilstande. For eksempel har en formularindtastning en pladsholder, svæver, fokus, udfyldt, fejl og deaktiveret tilstand. I eksemplet herunder for vores multi-select-komponent, til højre ser du symbolet "multi-select / placeholder" er valgt. Derfra kan du få adgang til en dropdown af alle andre symboler - og ændre symbolet til "multi-select / udfyldt" eller "multi-select / error". Dette er fantastisk til at designe og kortlægge produktstrømme!

Alle tilstandsformer-indgange, knapper osv. Indregnes i symboler (i skitse)

Craft Library

Et godt værktøj, vi også bruger, er Craft Library-plugin fra InVision for Sketch. Dette gjorde det muligt for os at oprette et delt bibliotek med aktiver (hostet på Dropbox), som vores team kan bruge til at trække og slippe elementer i deres design.

Opdatering (dec. 2017): Vi bruger nu Sketch Libraries i stedet for Craft Library. Det gør mere eller mindre den samme ting, kun langt mere effektivt! Eventuelle ændringer, du foretager i master-sketch-filen til biblioteket, synkroniseres til alle designs ved hjælp af bibliotekskomponenterne. Meget sejt.

At have et forudindstillet bibliotek med knapper, indgange, stilarter osv. Reducerer risikoen for, at elementer gentagne gange omdesignes.
Craft Library på arbejde i Sketch. Dette er et glimt af vores master Sketch-fil til plasma.

Trin 4: Dokumentering af et designsystem

Når du opretter et designsystem er det vigtigt at være opmærksom på, at du ikke vil være den eneste designer (eller udvikler), der arbejder med det.

Bogstaveligt dokumentation af designsystemet var den største udfordring for mig med dette projekt. Normalt opretter jeg annoterede specs - typisk er dette en række .psd- eller .sketch-filer, der skal ledsages af design (er). Et godt eksempel på denne tilgang kan ses i min casestudie til Adobe Portfolio. Mens specifikationer kan indeholde alle tænkelige detaljer, kan ting stadig gå glip af eller misforstås, når en ny eller erstatningsdesigner træder ind i dine sko. Vi ville gøre det bedre med plasma!

Hvordan dokumenterer du et designsystem?

Jeg begyndte at læse og undersøge, hvordan andre hold havde gjort dette. Heldigvis er Internettet fuld af svar på dette, og mange virksomheder har offentliggjort deres dokumentation.

Her er en nyttig liste over links til al online dokumentationssystem-dokumentation for den note, jeg fandt. Jeg håber, det hjælper :)

Mit oprindelige mål, efter at have set så mange stjernernes eksempler online, var at oprette et websted til at dokumentere systemet, specifikationer, vise eksempler på anvendelser og specificere retningslinjer for alle mønstre og komponenter. Det vil fungere som en hurtig reference eller en bibel til at studere i detaljer.

Jeg ønskede dog ikke at blive holdt tilbage af design, opbygning og tidsbegrænsninger for at oprette et websted til dette. Så for at komme i gang oprettede jeg blot en ny Google Doc og begyndte at skrive. Efterhånden som dokumentet voksede op, indså jeg, at det gjorde nøjagtigt, hvad vi havde brug for det - den eneste grund til at oprette et offentligt, brandet websted til dette ville være som et 'stolthedsprojekt' for WeWork Digital, eller som en ressource, hvis vi open-source systemet .

Men indtil videre viste Google Docs sig at være det perfekte medium! Det er let tilgængeligt for alle vores team, plus de kan kommentere inline, hvilket er godt til feedback. Funktionen 'Dokumentoversigt' i Google Dokumenter plus muligheden for at linke / forankre til bogmærker og overskrifter inden for dokumentet leverede rigelig navigation. Job en god! ... som vi siger i det nordlige England :)

Eksempel på vores dokumentation

Da dokumentationen findes i en privat Google Doc, har jeg taget nogle skræbber nedenunder for at give en god idé om, hvordan den blev konstrueret, lagt ud og hvad den indeholder. Du kan klikke på billederne for at se hver fuld størrelse.

Plasmadesignsystem-dokumentation i et Google-dokument

Opdatering: december 2017

Siden offentliggørelsen af ​​denne artikel, ca. 11 måneder senere, har dokumentationen udviklet sig til et websted, du kan se! Vi brugte GitHub for at give mulighed for versionskontrol og let adgang fra vores team til at skrive og bidrage til dokumentationen. Du skriver i markdown, og med lidt CSS-tilpasning kan du skræddersy dokumentationen til dit brand! GitBook er ikke perfekt, den er ikke lydhør, men den gør jobbet .

Se dokumentationen til plasma-designsystemet

Bag kulisserne (download)

Jeg skabte en lille ressource med indsigt i, hvordan dette designsystem blev oprettet i Sketch, herunder download af en Sketch-fil og et uddrag fra dokumentationen. Se ressourcen i linket herunder:

Trin 5: Konstruktion af et designsystem

Idet dokumentationen tog form, havde design brug for en måde at kommunikere effektivt og spore opbygningen og integrationen af ​​systemet til udviklerne. Vi valgte (og anbefaler) at bruge GitHub til dette. Vi oprettede 'problemer' til specifikke komponenter - delte forhåndsvisninger af design, specifikationer og CSS / Sass for at lette udviklingsprocessen. På denne måde kan vores ingeniører tackle disse bidte størrelser en efter en, når de er klar, de holdes ansvarlige, og intet bliver gået glip af!

Vi bruger GitHub til at kommunikere komponenter, der skal bygges

Design og kode

Vores hovedudvikler på Plasma er også en designer. Vores hoveddesigner (mig) er også en udvikler. Dette afspejles i vores proces og systemets kvalitet. Via vores dokumentation udsætter vi gerne vores designere for CSS / Sass og opfordrer dem til at forstå, hvordan tingene fungerer. Fra en 'lære at designe med systemets' synspunkt hjælper det med at eksplicit se og lære værdier, afstand og navngivningskonventioner i bygningen. Det hjælper også med at bygge bro mellem design og konstruktion.

Navnekonventioner

Sidst men ikke mindst: Et af målene med designsystemet er at få designere, udviklere og produktledere, der alle taler det samme sprog. Vi kan hjælpe med at opnå dette med konsistente, semantiske navnekonventioner, som vi alle er bekendt med (i design og kode), hvad enten det er Sass-variabler, skrifttyper, farver, UI-mønstre og komponenter, skabeloner eller sidenavne.

Det hele tager form pænt.

Dette er ikke slutningen

Vi har store planer for plasma. Vi arbejder hårdt på at udvikle systemet og rulle det ud til de Spacestation- og CMS-produkter, du har set tidligere. Vi lærer meget i processen og har som mål at få værdifuld feedback fra vores globale personale ved hjælp af vores værktøjer og iterere på systemet. Vi har talt om åben sourcing af plasma, men vi er ikke der endnu.

Jeg håber, du nød denne casestudie, en indsigt i vores designproces, de værktøjer, vi bruger, og en forhåndsvisning af Plasma! :)

Efterlad [et produkt] på en positiv, venlig note :)

Særlig tak til Nick Stamas og Deena Edwards hos WeWork for deres hårde arbejde og støtte til dette projekt. Og 'min redaktør' Meagan Fisher!

P. S. Du opretter ikke et produktdesignsystem som dette ved at hoppe lige ind i Sketch. Der er opbygget meget arbejde for at komme til dette stadie. Min co-lead for dette projekt Nick Stamas skrev om denne proces i: “Sælger et designsystem hos din virksomhed”, som jeg anbefaler, at du læser næste.

Opdatering: 2019. Jeg skrev en bog om systemdesign og retningslinjer for digitalt brand! https://designsystemfoundations.com