Sistem de proiectare a plasmei

Crearea și documentarea unui sistem de proiectare a produsului

Acest studiu de caz își propune să cronicizeze modul în care am creat un sistem de proiectare la WeWork. Voi împărtăși informații despre procesul nostru, designul produsului, instrumentele pe care le-am folosit pentru a crea și implementa sistemul, precum și modul în care ne documentăm și împărtășim sistemul cu echipa noastră.

Un exemplu UI de la unul dintre produsele noastre care utilizează sistemul de proiectare a plasmelor

Introducere

WeWork creează spații de lucru comune inspirate, cu accent pe comunitate. Proiectăm și construim propriile noastre instrumente digitale interne pentru a răspunde nevoilor noastre de afaceri și pentru a ne gestiona rețeaua globală de clădiri și membri. „Plasma” este un sistem de proiectare creat pentru aceste instrumente de afaceri interne.

Plasma ca concept a fost fondată de unul dintre liderii noștri creativi digitali, Nick Stamas. Nick i-a prezentat pe inginerii noștri la conceptul de construire a unui sistem în React JS și Sass și, de atunci, a condus la construirea sistemului. Îi conduc designul, direcția creativă și documentarea. De asemenea, lucrez cu designerul de produse Deena Edwards, care aplică plasmă produselor noastre.

Pasul 1: Explorarea proiectării

Am început să experimentăm cu trei produse interne diferite la care ar fi aplicat sistemul - descoperirea, stabilirea și testarea stresului unui stil (e) și bibliotecă de componente și modele. Direcția, interfața utilizatorului (UI) și stilul s-au schimbat în timp, pe care am încercat să le surprind mai jos pentru a arăta progresia și gama de produse testate.

Planșe de schiță care prezintă explorări inițiale

Este important de menționat: direcția de proiectare a acestui sistem a fost influențată foarte mult de liniile directoare ale mărcii digitale WeWork, cunoscute sub denumirea de WeWork Digital Foundations. Puteți citi mai multe despre acestea aici.

Simplu, clar și curat

Instrumentele noastre interne sunt toate produse bazate pe date grele pe date. Simplitatea, lizibilitatea și timpul de încărcare sunt esențiale. Știam de la început că ne străduim pentru o estetică clară și curată.

Teoria culorilor

Sistemul este predominant alb, negru și gri. Este important ca designul să nu distragă atenția de la conținut, astfel încât subtilitatea este esențială. Culorile mai strălucitoare sunt folosite pentru a transmite sensul. Galbenul este utilizat pentru acțiunile primare, deoarece galbenul este una dintre culorile de bază ale mărcii WeWork. Albastru este pentru link-uri de navigare. Red este pentru avertizări și alerte. De asemenea, folosim violetul ca culoare terțiară, deoarece este o culoare moștenire în instrumentele noastre interne și am dorit să păstrăm un aer de familiaritate în produsele noastre.

O tipografie care să se potrivească

Plasma folosește exclusiv Helvetica, un font simplu și îndrăzneț. Calculatoarele Mac au Helvetica preinstalate și toate computerele care nu sunt în siguranță cu Arial (un font similar, dar sigur pentru web). Acest lucru este important, deoarece nu este nevoie de scripturi de la terți pentru a încărca fontul, adică timpii de încărcare a paginii mai rapide.

Proiectarea tuturor statelor. O privire a fișierului nostru principal Sketch pentru sistemul de proiectare a plasmelor

Design de produs

Sunt sigur că ați văzut „kit-ul UI - gratuit pentru descărcare!” Pe Behance și Dribbble de multe ori. Unele dintre ele arată frumos! Dar multe dintre ele sunt în cele din urmă defecte decât dacă sunt proiectate cu produse, conținut și date reale. Nu se potrivește niciodată conținutului cu designul, sistemul trebuie să funcționeze cu orice conținut. Nu vă proiectați doar pentru cel mai bun caz de caz - dați seama pentru toate scenariile.

Este esențial să creăm un sistem de proiectare care să utilizeze produse la care va fi aplicat, cu date și probleme reale.

Scopul nostru aici nu este să creăm cel mai frumos sistem, ci să proiectăm un sistem care să răspundă cel mai bine nevoilor noastre - nevoile de afaceri în cazul Plasma, ci nevoile clienților pentru unele sisteme. Desigur, ne-am propus să creăm produse încântătoare, dar numai pentru a îmbunătăți experiența utilizatorului (UX).

În cele ce urmează, vă prezentăm în cele ce urmează cele trei produse care au modelat sistemul:

Produsul 1: CMS (denumit „Maggie”)

Produsul nostru CMS permite echipelor noastre de marketing și creștere să adauge, să editeze și să gestioneze clădirile și piețele noastre pe site-ul nostru principal de marketing: wework.com. Înainte de plasmă, CMS-ul nostru era pur și simplu o serie de tabele HTML cu personalizare CSS de bază. UZ și UX ale acestor produse au plasmatizat plasma. Mai jos găsiți un mic eșantion de interfață de utilizator din acest produs. Puteți face clic pe imagini pentru a vedea fiecare dimensiune completă.

Probele din produsul CMS cu sistemul de proiectare a plasmei aplicat acestuia

Produs 2: Spațiere

Produsul nostru de spațiere este unul dintre instrumentele noastre cele mai utilizate la sediul WeWork și în fiecare dintre clădirile noastre la nivel internațional. Este un produs care conține date care gestionează o bază de date uriașă de informații și facturare referitoare la membrii și clădirile noastre. Aceasta este o mulțime de tabele, intrări de formular, filtre și navigație - testbed-ul perfect pentru un sistem de proiectare a produsului! Am lucrat cu Deena Edwards, producătorul principal de produse la Spacestation, pentru a concepe, aplica, testarea stresului și a itera pe sistem așa cum se aplica la acest produs.

Eșantion, UI concept al produsului Spacestation cu sistemul de proiectare a plasmei aplicat acestuia

Produs 3: interogare de date

Natura afacerii WeWork înseamnă că avem o mulțime de date! În Digital, aceasta înseamnă că avem la dispoziție o multitudine de date pe care le putem folosi pentru a construi produse mai bune pentru a satisface nevoile clienților noștri. Ideea pentru acest produs a venit la un moment foarte oportun - am început deja să concepem sistemul de proiectare a plasmelor și știam că acest nou produs poate atât să folosească sistemul, cât și să îl împingă mai departe cu nevoia suplimentară de date, adică. Am lucrat cu echipa noastră de inginerie de date la conceptul de tablouri de bord și instrumente de interogare a datelor. Câteva dintre aceste explorări sunt incluse mai jos.

Proiectarea explorărilor pentru un produs de date, utilizând sistemul de proiectare a plasmelor. Toate datele afișate sunt alcătuite pentru prezentare publică!

Pasul 2: Modele și componente

După zile de explorare, recenzii și iterații, am ajuns la un stil cu care eram fericiți. Sarcina era acum să creeze o suită extinsă de modele și componente, care să reprezinte toate stările și scenariile - creând în esență un kit UI complet pentru echipa noastră.

Sistemul nostru este format din elemente fundamentale precum stiluri de text definite pentru anteturi și conținut, o paletă de culori, ceea ce numim modele și componente și șabloane.

Modelele și componentele UI consistente fac o diferență uriașă în ghidarea unui utilizator printr-un produs.

Modele de

Modelele se referă la elemente sau practici recurente sau mereu prezente în cadrul unui produs. Exemple includ navigație, carduri, tabele, stări goale sau de încărcare, notificări, alerte și modale. Modelele sunt versatile, pot conține componente și pot fi asociate împreună pentru a alcătui un șablon.

Componente

Componentele se referă la elemente distincte ale utilizatorului care sunt utilizate de mai multe ori de-a lungul unui produs - în mod normal acționabile, uneori pentru a transmite sens. Câteva exemple includ butoane, intrări, selecții, comutare, avatare și sfaturi de instrumente.

Sistemul de proiectare (și activele pentru documentație) sunt în desfășurare în Sketch

Urmați acest link pentru o tură rapidă a fișierului principal Sketch (văzut mai sus) care conține toate modelele și componentele sistemului de proiectare.

Cel mai bun instrument pentru job

Instrumentul nostru de alegere pentru designul UI este Sketch. Caracteristicile care fac Sketch excelent pentru designul produsului îl fac deosebit de puternic pentru proiectarea sistemului. Când creați sute de simboluri editabile și stiluri de text ușor aplicabile, simplitatea Sketch devine crucială.

La receptivitate

Plasma este proiectată pentru a fi receptivă. Deși este simplu să creezi componente responsive, nu este atât de simplu să creezi sensibil. Sau așa ne-am gândit. Este important să proiectați unități de utilizare web care funcționează la diferite lățimi ale browserului. Din fericire, Sketch oferă posibilitatea de a seta elemente pentru a răspunde în moduri diferite, pe măsură ce cresc sau micșorează dimensiunea. Folosind o combinație de setări, grupuri și simboluri, puteți crea o interfață de utilizator sensibilă de bază în Sketch. Deși acest lucru nu vă va ajuta cu punctele de întrerupere, este puternic pentru a vedea rapid cum sau dacă proiectarea funcționează la dimensiuni diferite ale browserului. Astfel, am creat biblioteca noastră de modele și componente pentru a fi receptive.

Proiectare sensibilă în Sketch

Citiți acest articol pentru o introducere a designului receptiv în Sketch.

Pasul 3: Puterea unui șablon

În interesul consecvenței în produsele noastre, este important să facem cât mai simplu pentru echipa noastră să proiecteze cu Plasma. Din fericire, simbolurile și stilurile de text editabile ale Sketch simplifică distribuirea și menținerea unui sistem de proiectare.

Este ușor pentru designul unui produs să se rătăcească dacă echipa noastră nu poate aplica pur și simplu sistemul în activitatea lor.

Avem un fișier de schiță master (pentru tot timpul lucrului în curs) pentru toată plasma. Ultimul lucru pe care ni-l dorim este ca oamenii care lucrează din acest fișier master, să editeze sau să șteargă accidental lucrurile! Așa că am creat un șablon Sketch pentru ca echipa noastră să le folosească, găzduită pe Dropbox. Șablonul are o gamă largă de simboluri editabile, toate stilurile de text, culorile mărcii și o plană de artă de bază gata de a merge - ceea ce face ușor să configurați rapid și să asamblați o interfață de utilizator folosind plasmă.

Lucrul cu tipare și componente consacrate ne eliberează pentru a ne concentra pe experiența utilizatorului, rezolvarea problemelor și crearea de caracteristici și produse semnificative.

Acoperind toate scenariile

Contăm toate „stările” din sistem și există simboluri pentru fiecare dintre aceste stări. De exemplu, o intrare de formular are un loc de reținere, plasează, focalizează, completat, eroare și starea dezactivată. În exemplul de mai jos pentru componenta noastră multi-selectă, în dreapta, veți vedea simbolul „multi-select / placeholder”. De acolo puteți accesa un dropdown cu toate celelalte simboluri - și puteți schimba simbolul în „multi-select / complete” sau „multi-select / eroare”. Acest lucru este excelent pentru proiectarea și cartografierea fluxurilor de produse!

Toate stările de intrare a formularului, butoane etc. sunt contabilizate în simboluri (în Sketch)

Biblioteca meșteșugurilor

Un instrument excelent pe care îl folosim este și plugin-ul Craft Library de InVision pentru Sketch. Acest lucru ne-a permis să creăm o bibliotecă comună de active (găzduită pe Dropbox) pe care echipa noastră o poate folosi pentru a trage și arunca elemente în proiectele lor.

Actualizare (decembrie 2017): Acum folosim Sketch Libraries, în locul Craft Craft. Face mai mult sau mai puțin același lucru, doar mult mai eficient! Orice modificări aduse fișierului Sketch master pentru bibliotecă, se sincronizează cu orice proiectare folosind componentele bibliotecii. Foarte tare.

Dacă aveți o bibliotecă prestabilită de butoane, intrări, stiluri etc., reduce riscul ca elementele să fie reproiectate în mod repetat.
Biblioteca de meșteșuguri la locul de muncă în Sketch. Acesta este o imagine a fișierului nostru principal Sketch pentru plasmă.

Pasul 4: Documentarea unui sistem de proiectare

Atunci când creați un sistem de proiectare, este important să fiți atenți că nu veți fi singurul proiectant (sau dezvoltator) care lucrează cu acesta.

Documentarea literală a sistemului de proiectare a fost cea mai mare provocare pentru mine în acest proiect. În mod normal, creez specificații adnotate - de obicei acestea sunt o serie de fișiere .psd sau .sketch, pentru a însoți designul (designurile). Un bun exemplu al acestei abordări poate fi văzut în studiul meu de caz pentru Adobe Portfolio. În timp ce specificațiile pot conține toate detaliile imaginabile, lucrurile pot fi totuși ratate sau înțelese greșit atunci când un designer nou sau înlocuitor intră în pantofi. Am vrut să ne descurcăm mai bine cu plasma!

Cum vă documentați un sistem de proiectare?

Am început să citesc și să cercetez cum făcuseră alte echipe. Din fericire, Internetul este plin de răspunsuri în acest sens, iar multe companii și-au făcut public documentația.

Iată o listă utilă de link-uri către toată documentația sistemului de proiectare online a notei pe care am găsit-o. Sper că ajută :)

Scopul meu inițial, având în vedere atâtea exemple stelare online, a fost crearea unui site web pentru a documenta sistemul, specificațiile, prezentarea exemplelor de utilizare și specificarea liniilor directoare pentru toate modelele și componentele. Ar acționa ca o referință rapidă, sau o biblie pentru a studia în detaliu.

Cu toate acestea, nu doream să fiu reținut de restricțiile de design, construire și timp ale creării unui site web pentru acest lucru. Așa că, pentru a începe, am creat pur și simplu un nou document Google și am început să tastați. Pe măsură ce documentul crește, mi-am dat seama că a făcut exact ceea ce aveam nevoie pentru noi - singurul motiv pentru a crea un site web public, de marcă, pentru acest lucru ar fi un „proiect de mândrie” pentru WeWork Digital, sau ca o resursă dacă deschidem sistemul. .

Însă, deocamdată, Google Docs s-a dovedit a fi mediul perfect! Este ușor accesibil de toată echipa noastră, plus că pot comenta în linie, ceea ce este excelent pentru feedback. Funcția „Schița documentului” din Google Docs, plus posibilitatea de a conecta / ancora marcaje și titluri din document, a furnizat o navigare amplă. Locuri de muncă un bun! ... cum spunem în nordul Angliei :)

Previzualizarea documentației noastre

Deoarece documentația se află într-un document Google privat, am surprins mai jos câteva imagini de ecran pentru a da o idee bună despre modul în care a fost construită, expusă și ce conține. Puteți face clic pe imagini pentru a vedea fiecare dimensiune completă.

Documentația sistemului de proiectare a plasmei într-un document Google

Actualizare: decembrie 2017

De la publicarea acestui articol, aproximativ 11 luni mai târziu, documentația a evoluat într-un site web pe care îl puteți vedea! Am folosit GitHub pentru a permite controlul versiunii și accesul ușor al echipei noastre pentru a scrie și contribui la documentație. Scrieți în marcaj și cu o mică personalizare CSS puteți adapta documentația la marca dvs.! GitBook nu este perfect, nu răspunde, dar face treaba .

Vizualizați documentația sistemului de proiectare a plasmei

În spatele scenei (descărcare)

Am creat o mică resursă cu privire la modul în care acest sistem de proiectare a fost configurat în Sketch, inclusiv o descărcare de fișiere Sketch și un extras din documentație. Vizualizați resursa în linkul de mai jos:

Pasul 5: Ingineria unui sistem de proiectare

Pe măsură ce documentația a luat formă, proiectarea a avut nevoie de o modalitate de comunicare și urmărire eficientă a dezvoltării și integrării sistemului către dezvoltatori. Am ales (și recomandăm) să folosim GitHub pentru acest lucru. Am creat „probleme” pentru componente specifice - distribuirea de previzualizări ale proiectului, specificațiilor și CSS / Sass pentru a ușura procesul de dezvoltare. În acest fel, inginerii noștri pot aborda aceste bucăți de mușcături, unul câte unul, întrucât sunt pregătiți, sunt trași la răspundere și nu se pierde nimic!

Folosim GitHub pentru a comunica componentele care vor fi construite

Proiectare și cod

Dezvoltatorul nostru principal pe Plasma este, de asemenea, un designer. Designerul nostru principal (eu) este, de asemenea, dezvoltator. Acest lucru este reflectat în procesul nostru și în calitatea sistemului. Prin documentația noastră ne place să expunem proiectanților noștri CSS / Sass, încurajându-i să înțeleagă cum funcționează lucrurile. Dintr-un punct de vedere al „învățării proiectării cu ajutorul sistemului”, acesta ajută la a vedea și a învăța în mod explicit valorile, spațiile și convențiile de denumire din compilare. De asemenea, ajută la reducerea decalajului dintre proiectare și inginerie.

Convențiile de denumire

Nu în ultimul rând: Unul dintre obiectivele sistemului de proiectare este acela de a face ca designerii, dezvoltatorii și managerii de produse să vorbească în aceeași limbă. Putem ajuta la realizarea acestui lucru cu convenții de numire semantice consistente, cu care suntem cu toții familiarizați (în design și cod), fie că este vorba de variabile Sass, stiluri de font, culori, modele de utilizator și componente, șabloane sau nume de pagini.

Totul se conturează frumos.

Acesta nu este sfarsitul

Avem planuri mărețe pentru plasmă. Lucrăm cu greu la dezvoltarea sistemului și îl derulăm în produsele Spacestation și CMS pe care le-ați văzut anterior. Învățăm foarte multe în acest proces și ne propunem să obținem feedback valoros din partea personalului nostru global, folosind instrumentele noastre și repetând sistemul. Am vorbit despre plasmă cu aprovizionare deschisă, dar încă nu suntem acolo.

Sper că v-a plăcut acest studiu de caz, o perspectivă asupra procesului nostru de proiectare, instrumentele pe care le folosim și o previzualizare a plasmelor! :)

Lasă [un produs] pe o notă pozitivă și prietenoasă :)

Mulțumiri speciale lui Nick Stamas și Deena Edwards la WeWork pentru munca grea și sprijinul acordat acestui proiect. Și „editorul meu” Meagan Fisher!

P.S. Nu creați un sistem de proiectare a produselor ca acesta sărind direct în Sketch. S-a construit multă muncă pentru a ajunge la această etapă. Co-liderul meu în acest proiect, Nick Stamas, a scris despre acest proces în: „Vânzarea unui sistem de proiectare la compania dvs.”, pe care vă recomand să îl citiți în continuare.

Actualizare: 2019. Am scris o carte despre proiectarea sistemului și ghidul digital al mărcii! https://designsystemfoundations.com