Oprettelse af Cirrus: Den næste generations Predix-designsprog

At udvikle vores designsystem med en samfundsdrevet tilgang

I løbet af GE Digital's historie har der været et par generationer af designsystemer. Den aktuelle inkarnation af Predix Design System, der er baseret på genanvendelige webkomponenter, blev lanceret for cirka to år siden. På det tidspunkt var vores produktsuite mindre, og designsystemet var primært fokuseret på én produktlinje og nogle meget specifikke anvendelsessager. Da GE købte produkter, steg antallet af teams, der bygger apps, og det samme gjorde kravene og forventningerne fra deres kunder.

Almindelig feedback fortalte os, at designsystemet ikke var fleksibelt og manglede visuel indflydelse og appel. Det originale designsprog blev skabt med en meget minimal stil, der passer til vores hovedmål på det tidspunkt: leveringstid. Mens det var passende på det tidspunkt, voksede forventningerne til et mere raffineret og mangfoldigt designsystem til vores produkter. Tiden var inde til at investere i en samlet opdatering af designsproget for hele systemet.

For at måle vores succes skitserede vi et sæt mål for indsatsen:

  • Etabler et mere visuelt sofistikeret designsprog
  • Forøg mangfoldigheden af ​​designmønstre
  • Inddrag designfællesskabet for at forbedre kvalitet og vedtagelse
  • Giv bedre vejledning i, hvordan du bruger designsystemet.

Bestemmelse af vores synspunkt

Før vi samlet det bredere designfællesskab hos GE, var vores kerneteam nødvendigt at forklare elementerne i en god Predix-applikation. I betragtning af vores tilfælde af digital-industriel brug, vores apps mål og slutbrugerens arbejdsgange udarbejdede vi et sæt designprincipper til at guide opdateringsindsatsen.

Målbevidst
Design med et formål, der citerer kontekst og klare opfordringer til handling, der giver mulighed for hurtig orientering.

Effektiv
Respekter en brugers tid og arbejdsgang.

Konsekvent
Stol på velkendte visuelle stilarter og lignende interaktioner for almindelige mønstre på tværs af pakken med Predix-apps.

Elegant
Brug moderne visuelle konventioner og interaktionskonventioner. Find muligheder for at skabe og egne innovative ideer.

Disse principper gav os et fælles sprog til at tale om det arbejde, vi så, og en ramme til måling af succes med eksisterende applikationer og mønstre til opdateringen.

Designprincipper gav os et fælles sprog til at tale om arbejdet og rammerne til at måle mod med det umiddelbare team og produktteamene.

Forbindelse med samfundet

Før vi fulgte med på forfriskningen, talte vi med adskillige designere og produktteam om deres oplevelser med Predix Design System. I løbet af et par uger planlagde vi uformelle samtaler med interessenter. Vi ønskede at høre deres tanker om, hvad der fungerede, og hvor vi skulle fokusere vores rettelser. Feedbacken var ret konsistent. Generelt troede de, at komponenterne ikke var fleksible efter deres behov, de ønskede apps med visuel påvirkning, og de ønskede også at vide bedste praksis for brug af designsystemet.

For at få succes, var vi nødt til at invitere hold ind i processen og give dem en stemme.

Den tidligere version af Predix Design System blev bygget på brugssager og krav til et enkelt produkt. Efterhånden som andre produktteam dukkede op og applikationer udviklede sig, dukkede der op en mangel. For at opdateringen skulle få succes, var det tydeligt, at vi var nødt til at invitere hold ind i processen og give dem en stemme. Vi besluttede den bedste måde at oprette forbindelse til lokalsamfundet og få dem til at bidrage med var at gennemføre en række workshops. At give vores interessenter en mulighed for at dele deres brugssager, fremhæve udfordringer og brainstormløsninger ville hjælpe os med at forstå vores brugers behov, opbygge deres investering i systemet og inspirere designideer til et system, der bedre imødekommer alles behov.

Revision af eksisterende produkter gav os en basislinje for, hvor vi skulle fokusere workshops.

Strukturering og drift af workshops

For at bestemme fokuset på workshopperne havde vi brug for bedre at forstå det arbejde, der sker i GE-designfællesskabet. Vi bad hvert team om at skrive deres arbejde med kommentarer på vores interne design-delingswebsite. Vi udskrev derefter værket og placerede det på tavler og udførte en revision. Vi katalogiserede eksisterende mønstre og komponenter inden for rammerne af vores designprincipper, bemærkede, hvor designere valgte at oprette nye komponenter baseret på brugssager og identificerede nye mønstre, vi ikke adresserede.

Vi planlagde seks workshops, så det var nok tid til fjernteams at rejse og deltage. I den første session delte designere deres arbejde og talte om krav og designbeslutninger. Dette hjalp os med at validere vores fund fra revisionen og opdatere de resterende workshops, mens deltagerne kunne kommunikere deres prioriteter og sammenligne med designarbejde i hele virksomheden. De andre fem workshops var fokuseret på grundlæggende elementer i vores applikationer. Dette omfattede fokuserede sessioner om navigation, sidelayout, farve og materialitet samt datainput og datapræsentation.

Det var klart, at man skitserede målene for workshopperne, for at få mest muligt ud af dem.At gruppere folk fra forskellige hold sammen under workshops var en god katalysator for kreativitet.

Vi strukturerede designworkshops i tre timers blokke for at holde deltagerne fokuserede og respektere deres tid. Der blev delt en dagsorden på forhånd, og vi forberedte en kort introduktion og uddelingsdel til hver session. Vi arrangerede rummet med borde med plads til 5-6 personer hver og bad folk om at sidde med andre end deres sædvanlige medarbejdere.

Vi ønskede at lette tværgående samtaler mellem forretningsenheder og informere deltagerne om den brede vifte af krav, som designsystemet skal understøtte. Tiden blev fordelt mellem delingsarbejde, at nyde en aktivitet baseret på temaer, der kom frem fra delingssessionen, og diskutere output fra aktiviteten. Efter hver workshop leverede vi detaljerede noter og billeder til hele designsamfundet (de tilstedeværende og fraværende).

Definition af sproget

I løbet af workshopperne begyndte vi at se nogle tendenser og fælles smertepunkter. Da vi pakket dem op, havde vi en ret klar idé om den retning, vi havde brug for for at tage designsystemet.

Farve
Vores produkter bruges i kritiske miljøer, hvor farver har tydelige og vigtige betydninger, så vi var meget målbevidste med vores brug af farve. Derudover er datavisualiseringer et vigtigt aspekt af mange Predix-applikationer, hvor nogle af de mest dybdegående opgaver udføres. Det var logisk at udvide vores datavisualiseringsfarvesæt til mere meningsfulde og ekspressive diagrammer og grafer; men vi var også nødt til at overveje, hvor meget farve, der skal lånes til de grundlæggende interfaceelementer, såsom menuer, overskrifter og navigation. I sidste ende, baseret på forskning fra vores Healthcare designteam, valgte vi at tilføje flere farver til vores neutrale kernepalette og flytte tonen fra varm til kølig. Dette giver en Predix-applikation en personlighed, der øger meningsfuld farvebrug inden for datavisualisering og alarmer.

Den neutrale kerne gråtoner kombineret med den udvidede datavispalette giver mulighed for ekspressive diagrammer, der skalerer.

væsentlighed
Det næste trin var at fortolke målet med et visuelt sofistikeret designsprog. Da læsbarheden af ​​data på vores produktgrænseflader er så vigtig, ønskede vi at holde vores datainput og præsentationsmønstre rene. Vi så baggrundsmaterialerne som en god mulighed for at tilføje stil til designsystemet. Det eksisterende system havde et lyst tema og et mørkt tema, men vi lærte under workshopperne, at valget ikke tillade meget fleksibilitet. For en rigere følelse af materialer kombinerede vi temaerne, mens vi udvider vores grundlæggende seje grå farve - nu et signaturelement i systemet. At forene temaerne fordoblet vores kernefarvepalet og gav designere større evne til at fremhæve vigtig information og tilføje visuel interesse. Paletten giver også hold mulighed for at definere en unik stil til deres app i Predix-farvefamilien.

Ved at kombinere vores mørke og lyse temaer giver produktteamene en masse fleksibilitet i deres layout.

Animation og lagdeling
Predix-applikationer vedrører ofte enheder og miljøer i den virkelige verden, og vi ønskede at bringe noget af den taktile tilgang til designsprog. Vi skabte et system til lagdeling af brugergrænsefladeelementer, der tilføjer fysiskhed og styrker det visuelle hierarki. Komponenter sidder i bunden af ​​en side, midlertidige elementer, såsom drop-downs, sidder i midten, og modaler og navigation sidder på toppen. Den klare lagdeling hjælper med at styrke hierarki og prioriteringer under arbejdsgange.

Yderligere bygger på vores princip om elegance, tilføjede vi bevægelse til overgange. Vi vælger steder at tilføje subtile overgange, hvor de vil tilføje oplevelsen og ikke hindre effektiviteten. Dette resulterede i lette animationsbehandlinger for navigationsmenuer, paneler og indlæsningsspinnere, der øger oplevelsen og gør den mere flydende.

Subtil lagdeling af komponenter og overgange styrker hierarki og tilføjer sprogets overordnede elegance.

Ikonografi
Designsystemet havde været afhængig af en praktisk, men ikke unik open source-ikonfont til dens ikonografi. Da vi begyndte at anvende de eksisterende ikoner på vores nye, åbne og moderne sprog, blev vi klar over, at de klodsede ikoner hjalp lidt. Derudover havde mange teams ikke optimale metaforer, fordi de var begrænset af valg af ikonskrifttype. For at opfylde retningen for vores designsprog oprettede vi et brugerdefineret ikonsæt, der lader os adressere vores industrielle brugssager og nemt udvide dem, når det er nødvendigt.

Et sæt tilpassede SVG-ikoner var vigtigt for at opfylde vores designsprog. Designretningslinjer giver hold mulighed for at udvide sættet efter behov.

Implementering

Inden vi forpligtede os til at skrive en kodelinje, var vi nødt til at stresstest vores design i applikationer i den virkelige verden. Når vi havde arbejdet igennem vores oprindelige designideer, leverede vi en Sketch-fil med kernekomponenter og layout for at give designere mulighed for at undersøge, hvordan de kan oversætte deres apps til det nye designsprog. Vi inviterede designere til at deltage i kontortiden og diskutere, hvordan systemet blev skaleret efter dem. Denne proces giver os mulighed for at forfine designsprog lettere, end hvis vi var sprunget lige ind i udviklingen, og vores trin lader også samfundet skabe det designsprog, der hjælper med at skabe et delt ejerskab.

Før vi forpligtede os til at skrive en kodelinje, var det vigtigt at stresstest vores designs i applikationer i den virkelige verden.

Vi holdt månedlige aflæsninger af interessenter for at sammenfatte fremskridt for designere, produktledere og ingeniører, for at indhente feedback om designretningen og til feltspørgsmål. Ud over at demonstrere kernekoncepterne og den visuelle retning, var vi i stand til at udforske efterforskninger fra andre hold for at illustrere, hvordan systemet ville skalere og anvende til forskellige applikationer. Dette viste sig at være en kraftfuld måde at visualisere samfundsinddragelse og kommunikere visionen for vores applikationer.

Et Kanban-bord var den mest produktive måde at styre fremskridt i vores team.

Når vi var sikre på vores retning, gik teamet ned på implementeringen. Vi var nødt til at beslutte, om vi skulle frigive komponenter under udførelse, eller når alle var klar. Vores team foretrækker typisk kontinuerlig integration, men da dette ville være en banebrydende ændring, valgte vi at holde komponenter i gang bag et prerelease-tag i GitHub. Efter at have startet designprocessen i januar, konkurrerede vi den enorme indsats og lykkedes at sende den generelle tilgængelighedskode i juli.

Stats:

  • 117 GitHub-repos inkluderet i frigivelsen
  • 3.578 forpligter sig til disse repos
  • 116 dage med udviklingstid, i gennemsnit 31 forpligtelser pr. Dag
  • 3484 automatiserede enhedstest for vores webkomponenter, som vi kører mod 6 browsere

Vi præsenterer Cirrus

Resultatet af denne samfundsdrevne tilgang er vores nye visuelle sprog ved navn Cirrus. Navnet antyder de tynde, piskede skyer i den øvre atmosfære og afspejler "lethed" i forbedringerne af det visuelle og interaktionssprog. Systemet er fleksibelt til at understøtte forskellige af vores produktbrugssager, mens det stadig kan genkendes som Predix.

Vejledning og vedtagelse

Forsendelse af de opdaterede komponenter var kun starten. Før opdateringen havde komponenterne og designretningslinjerne separate placeringer for designere og udviklere til at overholde den bedste praksis. Hvis du vidste om komponentbiblioteket, var det sandsynligt, at du aldrig havde set designvejledningen. Baseret på output fra workshops og input fra lokalsamfundet, skabte vi et nyt sæt retningslinjer for vores nye designsprog. Med hold spredt over hele verdenen er vi nødt til at holde al vores dokumentation og vejledning ét sted. Så vi byggede et nyt afsnit på predix-ui.com til at tjene design- og udviklingsretningslinjer.

Udgivne retningslinjer er nyttige, men for at være fuldt ud effektiv, er vores arbejde nødvendigt for at blive en del af en designer's workflow. Den forrige iteration af vores designstencil blev bygget i Adobe Illustrator og tillader en vis frihed, men gav ikke meget vejledning om komponenternes funktionalitet. Designstencil gjorde det også muligt for designere, der ikke kendte designsystemet, nemt at vende sig væk fra tilgængelig funktionalitet i komponenterne og utilsigtet forårsage mere udviklingsarbejde for deres teams. Dette skabte meget friktion for produktteamene og forvirring omkring, hvad vores komponenter faktisk leverede.

For at undgå dette har vi bygget en helt ny Sketch-stencil, der er afhængig af symboler for at opretholde paritet med komponenternes funktionalitet. Symbolerne giver os mulighed for at sætte skinner på tilpasningen og vise designere, hvordan komponenter fungerer uden helt at stole på komponentkataloget. Den nye stencil har været yderst effektiv til at øge designernes produktivitet og gøre deres design nøjagtige.

Brug af symboler i Sketch giver os mulighed for at bringe komponentfunktionalitet og vejledning til designerens arbejdsområde.

Derudover fordoblede vi vores indbyggede materiale på stedet for at afklare, hvordan man kommer i gang med designsystemet. Hvad angår designretningslinjerne, eksisterede meget af materialet, men var spredt. Undertiden er visning bedre end at fortælle, så vi oprettede en eksempelapp, der illustrerer, hvordan grundlæggende konstruktioner som navigation, datavisualisering og formularer skal fungere i en applikation.

Takeaways

Vores designsprog er moderne og elegant, komponenterne og designmønstrene er mere fleksible, vi har dyrket et stort samfund gennem workshops, design kontortid og andre kanaler, og vejledning til designere og udviklere er mere robust. Vi er i stand til at sende et bedre produkt og har fortalere, når vi involverer samfundet i designprocessen. Se hvordan det hele kommer sammen på Predix-UI.com.