Stvaranje Cirrus-a: Novi dizajnerski jezik Predixa nove generacije

Razvijanje našeg dizajnerskog sustava s pristupom vođenim u zajednici

Tijekom povijesti GE Digital-a postojalo je nekoliko generacija dizajnerskih sustava. Trenutačna utjelovljenje Predix Dizajn sustava, temeljenog na web komponentama za višekratnu upotrebu, pokrenuta je prije oko dvije godine. U to vrijeme naš je proizvodni paket bio manji, a sustav dizajna bio je usmjeren prvenstveno na jednu liniju proizvoda i neke vrlo specifične slučajeve upotrebe. Kako je GE nabavljao proizvode, povećao se broj aplikacija za izradu timova, pa su tako i zahtjevi i očekivanja njihovih kupaca.

Zajedničke povratne informacije govorile su nam da sustav dizajna nije bio fleksibilan i nedostaje mu vizualni utjecaj i privlačnost. Izvorni jezik dizajna stvoren je u vrlo minimalnom stilu kako bi u to vrijeme odgovarao našem glavnom cilju: brzini isporuke. Iako je u to vrijeme bilo prikladno, rasla su očekivanja za profinjenijim i raznolikim sustavom dizajna za naše proizvode. Vrijeme je bilo za ulaganje u cjelokupno osvježenje dizajnerskog jezika za cijeli sustav.

Kako bismo izmjerili naš uspjeh, zacrtali smo niz ciljeva:

  • Uspostavite vizualno sofisticiraniji jezik dizajna
  • Povećajte raznolikost obrazaca dizajna
  • Uključite dizajnersku zajednicu da poboljša kvalitetu i usvajanje
  • Dajte bolje upute o tome kako koristiti sustav dizajniranja.

Utvrđivanje našeg gledišta

Prije okupljanja šire zajednice dizajna u GE-u, naš temeljni tim trebao je objasniti elemente dobre Predix aplikacije. Uzimajući u obzir slučajeve digitalne i industrijske upotrebe, poslovne ciljeve naših aplikacija i radne tijekove krajnjeg korisnika, osmislili smo skup načela dizajna kojim ćemo usmjeriti napor osvježavanja.

namjeran
Dizajn s namjerom koji navodi kontekst i jasne pozive na radnju koji omogućuju brzu orijentaciju.

Učinkovit
Poštujte vrijeme i tijek rada korisnika.

dosljedan
Oslonite se na poznate vizualne stilove i slične interakcije za uobičajene uzorke u paketu Predix aplikacija.

Elegantan
Koristite moderne vizualne i interakcijske konvencije. Pronađite mogućnosti za stvaranje i posjedovanje inovativnih ideja.

Ovi principi omogućili su nam zajednički jezik za razgovor o radu koji smo vidjeli i okvir za mjerenje uspješnosti postojećih aplikacija i obrazaca za osvježavanje.

Principi dizajna omogućili su nam zajednički jezik za razgovor o radu i okviru za mjerenje s neposrednim timom i timovima proizvoda.

Povezivanje sa zajednicom

Prije nego što se potpuno upustimo u osvježenje, razgovarali smo s brojnim dizajnerima i timovima proizvoda o njihovim iskustvima sa Predix Design System. Tijekom nekoliko tjedana zakazali smo neformalne razgovore sa dionicima. Željeli smo čuti njihove misli o tome što djeluje i gdje bismo trebali usredotočiti svoje popravke. Povratne informacije bile su prilično dosljedne. Općenito, mislili su da komponente nisu fleksibilne za njihove potrebe, željeli su aplikacije s vizualnim utjecajem, a također su htjeli znati najbolje prakse za korištenje dizajnerskog sustava.

Da bi napor bio uspješan, morali smo pozvati timove u proces i dati im glas.

Prethodna verzija Predix Dizajn sustava izgrađena je na slučajevima upotrebe i zahtjevima jednog proizvoda. Kako su se pojavili drugi timovi proizvoda i evoluirale aplikacije, pojavio se jaz. Da bi osvježavanje bilo uspješno, bilo je jasno da trebamo pozvati timove u proces i dati im glas. Odredili smo najbolji način da se povežemo sa zajednicom i dali im doprinos je da provedemo niz radionica. Davanje našim dionicima priliku da podijele svoje slučajeve korištenja, istaknute izazove i rješenja za brainstorm pomoglo bi nam da razumijemo potrebe naših korisnika, izgradimo njihovo ulaganje u Sustav i potaknemo dizajnerske ideje za sustav koji će bolje odgovoriti na potrebe svih.

Revizija postojećih proizvoda pružila nam je osnovnu osnovu za fokusiranje radionica.

Strukturiranje i vođenje radionica

Da bismo odredili fokus radionica, morali smo bolje razumjeti rad koji se događa u GE dizajnerskoj zajednici. Zamolili smo svaki tim da svoj rad objavi s napomenama na našoj internoj web stranici za dijeljenje dizajna. Potom smo ispisali djelo i postavili ga na ploče i obavili reviziju. Katalogizirali smo postojeće obrasce i komponente u skladu s našim principima dizajna, napomenuli gdje su dizajneri odlučili stvoriti nove komponente na temelju slučajeva upotrebe i identificirali nove obrasce kojima se nismo bavili.

Zakazali smo šest radionica, čime je udaljenim timovima bilo dovoljno vremena za putovanje i prisustvovanje. U prvoj sesiji dizajneri su podijelili svoj rad i govorili o zahtjevima i dizajnerskim odlukama. To nam je pomoglo da potvrdimo svoja otkrića iz revizije i ažuriramo preostale radionice, dok su sudionici mogli priopćiti svoje prioritete i usporediti s dizajnerskim radom u cijeloj tvrtki. Ostalih pet radionica bile su usredotočene na temeljne elemente naših aplikacija. To je uključivalo fokusirane sesije o navigaciji, izgledu stranice, boji i značajnosti, kao i unosu podataka i prezentaciji podataka.

Jasno je iznijeti ciljeve radionica bilo je presudno za postizanje maksimuma.Grupiranje ljudi iz različitih timova tijekom radionica bio je dobar katalizator kreativnosti.

Organizirali smo dizajnerske radionice u trosatne blokove kako bi polaznici bili usredotočeni i poštivali njihovo vrijeme. Prethodno smo podijelili dnevni red i pripremili smo kratki uvod i upute za svaku sesiju. Organizirali smo sobu sa stolovima na kojima se nalazilo 5-6 ljudi i zamolili ljude da sjednu s drugima osim uobičajenih kolega.

Željeli smo olakšati međusobni razgovor između poslovnih jedinica i informirati sudionike o širokom rasponu zahtjeva koje sustav dizajna treba podržati. Vrijeme je podijeljeno između dijeljenja rada, uživanja u aktivnosti temeljenoj na temama koje su proizašle iz sesije dijeljenja i raspravljanja o rezultatima iz aktivnosti. Nakon svake radionice, pružili smo detaljne bilješke i slike cijeloj dizajnerskoj zajednici (prisutni i odsutni).

Definiranje jezika

Tijekom radionica počeli smo uočavati neke trendove i uobičajene boli. Kad smo ih zamotali, imali smo prilično jasnu predodžbu o smjeru kojim smo trebali krenuti prema dizajnerskom sustavu.

Boja
Naši se proizvodi koriste u kritičnim okruženjima gdje boje imaju različita i važna značenja, tako da smo bili vrlo svrhoviti s našim korištenjem boja. Pored toga, vizualizacije podataka važan su aspekt mnogih Predix aplikacija u kojima se obavljaju neki od najdubljih zadataka. Bilo je logično proširiti skup boja za vizualizaciju podataka za smislenije i izražajnije grafikone i grafikone; međutim, također smo trebali razmotriti koliko boje možemo posuditi osnovnim elementima sučelja, poput izbornika, zaglavlja i navigacije. Konačno, na temelju istraživanja našeg dizajnerskog tima Healthcare, odlučili smo dodati više boja u svoju neutralnu jezgru palete i preusmjeriti ton s toplog na hladan. To aplikaciji Predix daje osobnost koja povećava smislenu upotrebu boja unutar vizualizacije podataka i upozorenja.

Siva jezgra u kombinaciji s proširenom paletom podataka omogućuje izražene ljestvice takvih razmjera.

materijalnost
Sljedeći je korak bio protumačiti cilj vizualno sofisticiranog dizajnerskog jezika. Budući da je čitljivost podataka na našim sučeljima proizvoda tako važna, željeli smo održati čiste uzorke unosa i prezentacije podataka. Pozadinske materijale vidjeli smo kao dobru priliku za dodavanje stila u sustav dizajna. Postojeći sustav imao je svijetlu i tamnu temu, ali tijekom radionica smo naučili da izbor ne dopušta veliku fleksibilnost. Da bismo postigli bogatiji osjećaj materijala, kombinirali smo teme istodobno proširujući naše temeljne svježe sive boje - sada element sustava. Objedinjavanje tema udvostručilo je našu osnovnu paletu boja i dizajnerima omogućilo više isticanja važnih podataka i dodavanja vizualnog interesa. Paleta također omogućava timovima da definiraju jedinstveni stil za svoju aplikaciju unutar porodice boja Predix.

Kombinacija naših mračnih i svijetlih tema omogućuje timovima proizvoda veliku fleksibilnost u njihovom izgledu.

Animacija i slojevi
Primjene Predix-a često se odnose na stvarne uređaje i okruženja, a mi smo željeli prenijeti dio takvog taktilnog jezika u dizajn. Stvorili smo sustav za slojevite elemente korisničkog sučelja koji dodaje tjelesnost i pojačava vizualnu hijerarhiju. Komponente sjede na dnu stranice, privremeni elementi, poput pada, sjede u sredini, a modalisti i navigacija sjede na vrhu. Jasan sloj pomaže ojačati hijerarhiju i prioritete tijekom tijekova rada.

Dalje nadolazeći na našem principu elegancije, dodali smo gibanje prijelazima. Mi biramo mjesta za dodavanje suptilnih prijelaza, gdje bi oni dodali iskustvu i ne ometali učinkovitost. To je rezultiralo laganim animacijskim tretmanima za navigacijske menije, ploče i utovar papuče koji povećavaju iskustvo i čine ga fluidnijim.

Suptilni slojevi komponenata i prijelazi jačaju hijerarhiju i dodaju cjelokupnoj eleganciji jezika.

Ikonografija
Sustav dizajna se za svoju ikonografiju oslanjao na praktičan, ali ne jedinstven font ikone otvorenog koda. Kako smo započeli s primjenom postojećih ikona na naš novi, otvoreni i moderni jezik, shvatili smo da glomazne ikone nisu malo pomogle. Uz to, mnogi timovi nisu imali optimalne metafore jer su bili ograničeni izborom fonta ikone. Da bismo ispunili smjernice našeg dizajnerskog jezika, kreirali smo prilagođeni skup ikona koji će nam omogućiti da se pozabavimo našim slučajevima industrijske uporabe i lako ih proširimo kad je potrebno.

Skup prilagođenih SVG ikona bio je važan za ispunjavanje našeg dizajnerskog jezika. Dizajnerske smjernice omogućuju timovima da produže skup prema potrebi.

izvršenje

Prije nego što smo se obvezali na pisanje retka koda, trebali smo testirati dizajn u stvarnim aplikacijama. Nakon što smo razradili naše početne ideje dizajna, pružili smo datoteku Sketch s temeljnim komponentama i izgledima kako bismo dizajnerima omogućili istraživanje načina prevođenja njihovih aplikacija na novi jezik dizajna. Pozvali smo dizajnere da prisustvuju radnom vremenu i razgovarali o tome kako ih je sustav skalirao. Taj nam je postupak omogućio lakši pročišćavanje dizajnerskog jezika nego da smo skočili pravo u razvoj, a naši koraci također omogućavaju zajednici da kreira jezik dizajna koji pomaže stvoriti zajedničko vlasništvo.

Prije nego što smo se obvezali na pisanje retka, bilo je važno testirati naše projekte u stvarnim aplikacijama.

Mjesečno smo održavali čitanja dionika kako bismo zabilježili napredak za dizajnere, menadžere proizvoda i inženjere, kako bismo prikupili povratne informacije o dizajnu i rješavali pitanja na terenu. Uz prikaz osnovnih koncepata i vizualnog smjera, mogli smo prikazati i istraživanja drugih timova kako bismo ilustrirali kako će se sustav skalirati i primijeniti na razne aplikacije. Ovo je pokazalo moćan način za vizualizaciju sudjelovanja u zajednici i prenošenje vizije za naše aplikacije.

Kanban ploča bila je najproduktivniji način za upravljanje napretkom u našem timu.

Jednom kada smo bili sigurni u svom smjeru, tim je krenuo naglavačke na implementaciju. Morali smo odlučiti hoćemo li pustiti komponente u tijeku ili kada su svi spremni. Naš tim obično voli kontinuiranu integraciju, ali kako bi to bila prekidna promjena, odlučili smo da komponente ostanu u tijeku iza oznake za predizdanje u GitHubu. Pokrenuvši proces dizajna u siječnju, nadmetali smo se s velikim naporima i uspjeli smo isporučiti šifru General Availability u srpnju.

Statistika:

  • 117 GitHub repos uključen u izdanje
  • 3,578 obvezuje na te repove
  • 116 dana razvojnog vremena, u prosjeku 31 ugovor dnevno
  • 3484 automatizirani testovi jedinica za naše web komponente, koje pokrećemo u odnosu na 6 preglednika

Predstavljamo Cirrus

Rezultat ovog pristupa usmjerenog u zajednicu je naš novi vizualni jezik pod nazivom Cirrus. Ime sugerira tanke, vlažne oblake gornje atmosfere i odražava "lakoću" vizualnih i jezičnih poboljšanja. Sustav je fleksibilan kako bi podržao različite slučajeve korištenja naših proizvoda, a još uvijek je prepoznatljiv kao Predix.

Smjernice i usvajanje

Isporuka ažuriranih komponenti bila je tek početak. Prije ažuriranja, komponente i smjernice dizajna imali su odvojena mjesta kako bi se dizajneri i programeri pridržavali najboljih praksi. Ako ste znali za knjižnicu komponenti, vjerojatno niste nikad vidjeli smjernice za dizajn. Na temelju rezultata iz radionica i doprinosa zajednice, stvorili smo svjež set smjernica za naš novi jezik dizajna. S timovima koji se šire po cijelom svijetu, svu našu dokumentaciju i smjernice moramo čuvati na jednom mjestu. Stoga smo na predix-ui.com napravili novi odjeljak koji će služiti smjernicama za dizajn i razvoj.

Objavljene smjernice su korisne, ali da bismo u potpunosti djelovali, naš je rad potreban da postanemo dio dizajnerskog procesa rada. Prethodna iteracija našeg dizajnerskog šablona izgrađena je u Adobe Illustratoru i omogućila je slobodu, ali nije dala puno smjernica o funkcionalnosti komponenata. Dizajnerski šablon omogućio je i dizajnerima koji nisu upoznati s dizajnerskim sustavom da se lako odvoje od dostupnih funkcionalnosti komponenti i nenamjerno izazovu više razvojnog rada svojih timova. To je stvorilo veliko trenje za timove proizvoda i zbrku u vezi s onim što su naše komponente doista imale.

Da bismo to izbjegli, izgradili smo potpuno novi šablon Sketch oslanjajući se na simbole za održavanje pariteta s funkcionalnošću komponenti. Simboli nam omogućuju da postavimo tračnice na prilagođavanje i pokažemo dizajnerima kako komponente rade bez potpuno oslanjanja na katalog komponenata. Nova šablona vrlo je učinkovita u povećanju produktivnosti dizajnera kao i preciznosti njihovih dizajna.

Upotreba simbola u Sketch-u omogućava nam da funkcionalnost komponenti i upute dovedemo u radni prostor dizajnera.

Pored toga, udvostručili smo materijal na brodu na mjestu kako bismo pojasnili kako započeti s dizajnerskim sustavom. Što se tiče smjernica za dizajn, velik dio materijala je postojao, ali bio je raspršen. Ponekad je prikazivanje bolje nego pripovijedati, pa smo stvorili primjerak aplikacije koja ilustrira kako osnovni konstrukti poput navigacije, vizualizacije podataka i oblika trebaju raditi u aplikaciji.

takeaways

Naš je dizajnerski jezik moderan i elegantan, komponente i obrasci dizajna su fleksibilniji; odgajali smo veliku zajednicu kroz radionice, radno vrijeme dizajna i druge kanale, a smjernice za dizajnere i programere su snažnije. U mogućnosti smo isporučiti bolji proizvod i imati zagovornike kada u proces dizajniranja uključimo zajednicu. Pogledajte kako sve to zajedno dolazi na Predix-UI.com.