Construirea unui limbaj vizual: în spatele scenelor sistemului nostru de design Airbnb

Lucrând în dezvoltarea și proiectarea software, ni se solicită adesea să livrăm soluții unice. Uneori, lucrăm în limitele de timp și alteori pur și simplu nu ne-am dat încă de acord asupra unei căi de urmat. Aceste soluții unice nu sunt în mod inerent rău, dar dacă nu sunt construite pe o bază solidă, în cele din urmă ne găsim că trebuie să achităm datorii tehnice și de proiectare acumulate.

Limbajul vizual este ca orice alt limbaj. Înțelegerile apar dacă limba nu este împărtășită și înțeleasă de toată lumea care o folosește. Pe măsură ce un produs sau o echipă crește, provocările din cadrul acestor modalități se completează.

Proiectarea a fost întotdeauna în mare parte în ceea ce privește sistemele și modul de a crea produse într-un mod scalabil și repetabil. De la culorile Pantone la șuruburile Philips, aceste sisteme ne permit să gestionăm haosul și să creăm produse mai bune. Produsele digitale sunt poate cel mai fertil teren pentru punerea în aplicare a acestor sisteme și totuși nu sunt considerate adesea o prioritate.

Un sistem de proiectare unificat este esențial pentru construirea mai bună și mai rapidă; mai bine pentru că o experiență coezivă este mai ușor de înțeles de către utilizatorii noștri și mai rapid pentru că ne oferă un limbaj comun cu care să lucrăm.

De ce avem nevoie de sisteme de proiectare

De-a lungul anilor, Airbnb a cunoscut o mulțime de creștere. În prezent departamentul nostru de proiectare este format din aproape o duzină de funcții și echipe de rezultate. A devenit clar că avem nevoie de modalități mai sistematice de orientare și de susținere a eforturilor noastre colective. Deși am recunoscut aceste provocări în cadrul companiei, cred că sunt simptome ale unor probleme mai mari din industria software.

Prea puține constrângeri
Proiectarea software are puține constrângeri fizice în comparație cu multe alte discipline de proiectare. Acest lucru permite o varietate de soluții pentru orice provocare dată, dar o deschide și la experiențele utilizatorului disociat. În calitate de proprietari și designeri de produse, trebuie să creăm și să urmăm propriile constrângeri.

Mai mulți designeri și părți interesate
Software-ul este adesea construit de echipe - uneori echipe incredibil de mari - de oameni. Provocarea de a crea experiențe coerente se înmulțește exponențial pe măsură ce se adaugă mai multe persoane la mix. De asemenea, de-a lungul timpului, indiferent cât de consistentă sau mică este o echipă, diferiți oameni vor contribui la soluții și stiluri noi, provocând divergența experiențelor.

Multitudine de platforme
Trebuie să livrăm produsul nostru pe o multitudine de platforme și dispozitive. Menținerea sincronizată a funcțiilor și a proiectelor necesită eforturi semnificative, necesitând deseori repetarea aceleiași lucrări pe toate aceste platforme.

Software-ul ca continuum
Un alt lucru unic în ceea ce privește software-ul este că, deși poate fi considerat un produs, acesta nu se uzează cu adevărat și nu este înlocuit ca produsele tradiționale de consum. Codurile și desenele create acum ani există încă în multe locuri, chiar și după ce peisajul unei companii și produsul acesteia s-au schimbat semnificativ. Aceasta necesită o întreținere constantă și modernizare.

Ajungând la muncă

Pentru a rezolva aceste provocări și a ne menține rapid procesul de luare a deciziilor, am reunit un grup mic de proiectanți și ingineri [2]. Ne-am șters calendarele, am rezervat un loc de studio extern chiar în afara sediului Airbnb și ne-am dedicat proiectării și construirii Design Language System (DLS).

Scopul pe care l-am propus pentru DLS a fost să creăm un limbaj de design mai frumos și mai accesibil. Modelele noastre trebuie să fie platforme unificate care să conducă la o eficiență sporită prin componente bine definite și refolosibile. Pentru a ne concentra eforturile, am redus scopul inițial la crearea sistemului mai întâi pe platformele native (iOS și Android).

Am început prin verificarea și tipărirea multor proiecte, atât vechi, cât și noi. Așezând fluxurile unul lângă altul pe o placă, am putut vedea unde și cum se sparge experiențele și unde trebuie să începem să facem schimbări. Ne-am gândit că cel mai bun mod de a începe a fost prin abordarea problemelor. Fiecare dintre noi s-a concentrat pe un ecran sau zona de produs pentru a reproiecta și am stabilit câteva principii care să ne ghideze cu aceste modele individuale:

Unificat: Fiecare piesă face parte dintr-un întreg mai mare și ar trebui să contribuie pozitiv la sistemul la scară. Nu ar trebui să existe caracteristici sau contururi izolate.

Universal: Airbnb este utilizat în întreaga lume de o largă comunitate globală. Produsele și limbajul nostru vizual trebuie să fie primitoare și accesibile.

Iconic: Ne concentrăm atât în ​​ceea ce privește designul, cât și funcționalitatea. Lucrările noastre ar trebui să vorbească cu îndrăzneală și în mod clar în acest sens.

Conversație: utilizarea noastră de mișcare inspiră viață în produsele noastre și ne permite să comunicăm cu utilizatorii în moduri ușor de înțeles.

Punerea bazei

Înainte de a începe acest sprint de design, am creat deja un ghid de bază de stil, pe care l-am numit fundația. Această fundație a definit cu ușurință tipografia noastră, culorile, pictogramele, distanțarea și arhitectura informațiilor. Fundația s-a dovedit esențială pentru a ne ghida munca într-o direcție unificată, lăsând în același timp loc pentru a explora individual soluții de design creativ.

În acest fel am simțit că lucrăm împreună, spre aceeași idee. Analizând activitatea noastră colectivă la sfârșitul fiecărei zile, am început să vedem care apar tipare. Am corectat cursul când a fost necesar și am început să definim componentele noastre standardizate.

Crearea componentelor

În mod tradițional, multe ghiduri de stil definesc componentele ca componente atomice, care sunt apoi utilizate pentru a construi molecule mai complexe. În teorie, acest lucru funcționează bine pentru a crea sisteme coerente și flexibile. În practică, însă, ceea ce se întâmplă adesea este că acești atomi reutilizabili sunt folosiți în mai multe moduri diferite, permițând crearea tuturor tipurilor de molecule. Din nou, aceasta deschide ușa pentru tot felul de experiențe disjuncte și face ca sistemul să fie mai greu de întreținut.

În loc să ne bazăm pe atomii individuali, am început să considerăm componentele noastre ca elemente ale unui organism viu. Au o funcție și personalitate, sunt definite de un set de proprietăți, pot coexista cu ceilalți și pot evolua independent. Un limbaj de design unificat nu ar trebui să fie doar un set de reguli statice și atomi individuali, ci un ecosistem în evoluție.

Un limbaj de design unificat nu ar trebui să fie doar un set de reguli statice și atomi individuali; ar trebui să fie un ecosistem în evoluție.

De exemplu, elementul nostru avatar de utilizator ar putea fi definit inițial de un ghid de stil, dar utilizarea finală a acestuia în platformă poate prelua sute de permutări, ceea ce face dificilă actualizarea cu succes a elementului avatar pe drum. ”Dacă dorim să schimbăm fie din aceste lucruri, putem fi siguri că nu rupem alte ecrane.

Fiecare componentă este definită de elementele necesare (cum ar fi titlul, textul, pictograma și imaginea) și poate conține uneori elemente opționale. Aceste elemente sunt definite atât în ​​documentul Sketch, cât și în cod. În loc să permitem în sine liniile divizor, avem nevoie ca fiecare componentă să aibă un divizor, care este apoi vizibil sau ascuns în funcție de logica vizualizării.

Compilarea bibliotecii

În timp ce creăm aceste componente, le-am colectat într-un fișier principal numit biblioteca, la care am făcut referire pe parcursul întregului proces de proiectare. După o săptămână sau două am început să vedem salturi mari în productivitate, folosind biblioteca atunci când se itera pe design. Într-o zi, în timp ce alcătuia un prototip de ultimă oră, echipa noastră a putut să creeze aproape 50 de ecrane în doar câteva ore, folosind cadrul oferit de biblioteca noastră.

În timp ce biblioteca crește, am început să organizăm componente individuale în tablouri de artă care conțin elemente similare. Aceste tablouri au fost apoi organizate pe categorii generale în: Navigare, Marcaje, Conținut, Imagine și Specialitate.

Am creat un set de aceste componente pentru telefoane (iOS și Android) și le-am adaptat la dimensiunile tabletelor de acolo. Componentele tabletei sunt în mare parte identice cu cele pentru mobil, iar la nivel tehnic codul trebuie să existe doar o dată în două stiluri diferite. Cu acest sistem componentele pot varia în ceea ce privește aspectul și poziționarea lor, în mod similar modului în care funcționează designul receptiv pentru web. Proiectanții pot apoi proiecta un ecran odată folosind componente obișnuite și poate fi adaptat cu ușurință la dimensiuni diferite de ecran, precum și la iOS și Android.

Pentru tabletă, am creat câteva concepte de layout simple, cum ar fi Focus Views, care concentrează conținutul pe pagină, modale și machete cu două coloane și grile.

Toate componentele și punctele de vedere sunt construite cu cadrul nostru de vizualizare tehnică, care gestionează aceste stiluri, stări și adaptabilitate. [2]

Lecții învățate

Știam că acesta era un proiect provocator. A însemnat re-proiectarea și reconstruirea majorității vizualizărilor din aplicația noastră. Am reușit să ne realizăm obiectivul de a crea sistemul și de a lansa noile aplicații pe 17 aprilie. Ca în orice proiect, există lucruri pe care ne-am dori să le-am fi făcut diferit.

Nu toate componentele sunt create egale. În majoritatea aplicațiilor există un set de componente care se repetă des. Pentru noi, aceste componente sunt rânduri (sau tabele-celule). Privind înapoi, mi-aș dori să ne fi luat mai mult timp pentru a ne gândi la rânduri și a veni cu un set mai puternic de modele și componente. În cele din urmă, ne-am încheiat cu mai multe tipuri diferite, cu unele inconsistențe.

Schiță. Inițial am încercat să creăm aceste componente ca simboluri în Sketch, ceea ce a dus la o încurcătură. Chiar și acum, fișierele noastre Sketch sunt uneori dificil de întreținut. Mergând mai departe, sperăm să găsim modalități mai bune de menținere și creare de componente noi. [3]

Documentație. Acest proiect ne-a impus să funcționăm într-un calendar strict, ceea ce ne-a determinat să trecem cu vederea o parte din procesul de documentare. Lipsa unei documentații amănunțite a creat o confuzie care ar fi putut fi evitată. La fel ca în cazul codificării, documentarea sistemelor așa cum sunt create este esențială pentru acest proces. Trebuie făcută mai devreme sau mai târziu, iar documentarea pe parcursul procesului de creare permite luarea unei decizii mai ușoare.

Concluzie

Deoarece limbajul și codul de design sunt deseori împărtășite, acum putem construi și elibera funcții pe toate platformele native în același timp. Dezvoltarea este în general mai rapidă, deoarece inginerii de produse se pot concentra mai mult pe scrierea logicii caracteristicilor decât pe codul vizualizării. În plus, inginerii și designerii împărtășesc acum un limbaj comun.

Designerii au fost, de asemenea, încântați de sistem. Permite recenziilor produsului să se concentreze pe conceptele și experiențele reale ale unui design, mai degrabă decât căptușirea, culorile și alegerile de tip. DLS ne oferă o înțelegere comună a stilului nostru vizual și eficientizează contribuțiile la un singur sistem. Acest sistem ne permite, de asemenea, tuturor să prototipăm și să experimentăm idei cu fidelitate ridicată mai rapid și la un cost mai mic.

Cred că, ajutat cu aceste sisteme, ne putem concentra mai mult pe experiențele și concepțiile utilizatorilor pe care dorim să le creăm în viitor.

Am răspuns și la câteva întrebări despre Designer News AMA.

Actualizare: Pentru detalii suplimentare și evoluții mai recente în jurul sistemului nostru de proiectare, urmăriți discuția mea la Conferința Design Systems 2018 Helsinki, Finlanda.

Note de subsol:

[1]: Multe proiecte grozave sunt despre echipe și există întotdeauna prea multe persoane pentru care să le mulțumesc, dar am vrut să subliniez puțini oameni care au făcut acest proiect să se realizeze:

Bek Stone, Adam Michela, Amber Cartwright, Alex Schleifer, Michael Bachand, Paul Kompfner, Sean Abraham, Salih Abdul-Karim, Michael Sui + multe altele din echipele de proiectare și inginerie. Mulțumesc Josh Leong, Sola Biu, Catherine Waite pentru citirea proiectelor.

[2]: Voi lăsa unuia dintre inginerii noștri să scrie mai multe despre partea tehnică a DLS.

[3]: În cazul nostru, dorim ca oamenii să poată schimba dimensiunile simbolurilor (de ex. Trebuie să încadrați mai mult conținut într-un antet). Dacă aveți nevoie de redimensionare sau redimensionare accidentală de ceva, Sketch (2.5) va redimensiona automat fiecare instanță a acelui simbol. Asta ți-ar ucide schița pentru câteva momente și probabil ar încurca fișierul permanent (uneori, nu a funcționat). Am încheiat punând componentele în grupuri de straturi și le-am permis oamenilor să le copieze și să le lipească.

De asemenea, folosim git / github pentru a facilita procesul de actualizare a fișierelor. Creăm și adăugăm noi componente în fișierul nostru Sketch al bibliotecii principale și trimitem solicitări de tragere cu un jurnal de modificări și exporturi png generate care documentează modificările. După aceea, fișierul Sketch ajunge într-un folder Box comun, care este legat de șabloanele Sketch, astfel încât toată lumea are acces imediat la noile componente.