Redesignarea Pinterest, bloc cu bloc

Când eram copil în Suedia, camera mea era plină de jucării clasice din lemn, concepute de BRIO. Îmi amintesc că am fost fascinat de designurile simple, de culori strălucitoare și de amestecul de forme geometrice abstracte și forme organice. Felul în care arătau și se mișcau te-a invitat să te joci cu ei.

Sistemul de trenuri din lemn a fost deosebit de bun. Puteți monta piesele împreună în cercuri, drepte, curbe s, orice doriți. Dar trebuia să te gândești la modul în care ți-ai creat rutele - exista o logică a modului în care piesele se potrivesc și nu puteai forța geometria.

După vreo douăzeci de ani, propriii mei copii se joacă cu aceste moaște din aceeași copilărie. Îi pot auzi clocotindu-se de podeaua din lemn a camerei lor chiar acum. Modelele durabile au rezistat de-a lungul anilor și generațiilor de schimbări.

Această minunată simplitate evidentă a BRIO mi-a fost în minte primăvara trecută, când am început să mă concentrez pe o mare problemă care s-a dezvoltat odată cu designul Pinterest. De fapt, 3 mari probleme.

  1. UI-ul nostru a fost inconsecvent
  2. Sistemul nostru vizual era învechit
  3. Marketingul nostru s-a simțit deconectat de produsul nostru

De-a lungul anilor, design-urile pentru site-ul nostru, aplicațiile și marketingul nostru au început să se deruleze, așa că nu mai simțeau că au aceeași personalitate. De asemenea, au fost adăugate o serie de funcții noi, fără o viziune clară a modului în care acestea se încadrează în designul general, astfel încât interfața începuse să se simtă înfundată și greu de înțeles. Nu exista nicio ierarhie vizuală sau un sistem care să te ajute să înțelegi ce era important atunci când te-ai uitat la o pagină dată. Drept urmare, toate ideile inspiratoare pe care oamenii le salvează pe Pinterest - de departe cea mai importantă parte a experienței noastre - s-au pierdut.

După cum se dovedește, este al naibii de greu să proiectăm lucruri consistente și frumoase la scară.

O chestiune de principii

Experiența Pinterest în ansamblu a avut o mare nevoie de simplificare și unificare. Și dacă urma să facem asta, trebuia să identificăm niște principii de proiectare de bază pentru noi înșine.

M-am retras într-un colț întunecat al subsolului Pinterest și am petrecut următoarele săptămâni jucându-mă cu modele. Nici măcar nu eram sigur ce făceam la început - practic era ca propria mea versiune de blocuri blocate. Am început să mă gândesc la întrebări de genul: De ce iubesc oamenii Pinterest? Ce face produsul nostru unic? Care este personalitatea noastră? Despre ce este vorba?

Cu cât mă gândeam mai mult la asta, cu atât mi-am dat seama că esența Pinterest este similară cu iubita colecție de jucării BRIO a familiei mele. Ambele vă încurajează să vă jucați cu diferite opțiuni, să conectați piese împreună și să vă creați propria lume. Puteți începe cu propriile obiective și proiecte în minte sau vă puteți inspira din ceea ce face altcineva și construiți asta. Sariți și începeți să jucați imediat, opriți-vă oricând doriți, apoi reveniți și ridicați-vă chiar unde ați plecat.

Împingând gândirea și mai departe, calitățile esențiale pe care Pinterest și BRIO le-au împărtășit au ajuns la 3 principii simple. Acestea au descris cele mai bune calități ale Pinterest astăzi și au pus bazele pentru unde am dorit să ducem produsul în viitor.

-

  1. Lucid

Este intuitiv, nu învățat
 Înțelegeți cum funcționează lucrurile fără nicio explicație directă.

Îl face pe utilizator să se simtă puternic
Nimic nu te face să te simți inconfortabil sau parcă nu poți avea încredere în sistem. Sistemul vă oferă componentele potrivite și vă întreabă ce să faceți în continuare.

Face conținutul să aibă un gust mai bun
Cadrul este complet transparent și ascuns. Nu o observați până nu interacționați cu ea. Trebuie să decideți ce doriți să fie, în loc să ne forțăm asupra voastră.

2. Animat

Este colorat
Personalitatea este îndrăzneață și iese în evidență.

Răspunde vizual
Experiența interacționează într-un mod fizic.

Este neașteptat
Experiența este jucăușă și distractivă, dar niciodată copleșitoare.

3. Incalzitor

Este construit pentru explorare
La fel ca o jucărie pentru copii, doriți să o încercați doar pentru a vedea ce se va întâmpla. Cu cât investighezi mai mult, cu atât înveți mai repede și cu atât vei primi mai mult în schimb.

Este imposibil să atingeți greșit
Totul este conceput pentru a vă ajuta să navigați ușor și să faceți exact ceea ce aveți în minte.

Este reversibil
Dacă faceți din greșeală ceva care nu produce rezultatele pe care le căutați, este evident cum să îl corectați.

-

Odată ce am blocat aceste 3 principii, următorul pas a fost să le transpunem în ceva tangibil care ar putea fi fundamentul a tot ceea ce am construit înainte.

Cele elementare

Forme - Folosim forme de bază și ușor de atins, cu care oamenii înțeleg în mod natural și doresc să interacționeze. Colțurile sunt rotunjite pentru a le face să se simtă mai abordabile.

Culori - Sunt un mare fan al schemelor de culori analogice. Se simt foarte firești și reflectă un sentiment de calm. Atunci când combinați câteva scheme de culori analogice diferite care au fost inițial bazate pe unele culori complementare date, rezultatul este foarte interesant și neașteptat.

Ierarhie - Totul este extrem de ierarhic, așa că este întotdeauna clar ceea ce este cel mai important. Pe măsură ce proiectăm, ne întrebăm: Care este cel mai important lucru pentru ca cineva să înțeleagă aici? Ce putem elimina pentru a face lucrurile și mai evidente?

Spațiu alb - În vechiul design Pinterest, accentul a fost pus pe containerele care înconjurau conținutul oamenilor, care au depășit conținutul în sine. Tot ce ai văzut erau o mulțime de linii, gradiente, nuanțe de gri. Nu era loc să respire. Introducerea spațiului alb oferă o separare naturală între elemente fără a adăuga mai mult zgomot vizual. Rezultatul este echilibrat și structurat, iar cantitatea de spațiu alb adaugă personalitate și impact.

Explorările și ideile timpurii

Am vrut să vedem ce se va întâmpla dacă am elimina doar toate containerele din UI. Focalizarea s-ar întoarce asupra obiectelor în sine sau experiența s-ar destrăma complet?

S-a dovedit că grila rezultată fără containere rezultă excelent, iar accentul a revenit în sfârșit pe ideile pe care oamenii le salvau pe Pinterest. Nu am pierdut containerele în întregime, deoarece acestea ajută la clarificarea informațiilor care merg cu imaginea. În schimb, așteptăm să afișăm containerul până când nu sunteți suficient de curios pentru a atinge. În acest fel, interfața vă învață vizual modul în care informațiile sunt conectate și grupate în sistemul nostru. Trebuie doar să experimentați această interacțiune o singură dată pentru a înțelege cum este construit un Pin.

Proiectarea unui nou set de standarde

După ce ne-am jucat cu design-urile și interacțiunile timp de câteva luni bune, echipa și cu mine am ajuns în sfârșit să lucrăm acolo unde ne-am simțit ca toate cele 3 dintre principiile noastre de proiectare a produselor (lucide, animate, de neîntrerupt) au fost reprezentate. Eram gata să punem la încercare principiile și sistemul de proiectare nou stabilite.

Am vrut să începem cu un sistem conținut, așa că am decis mai întâi să abordăm aplicația noastră iOS. Pentru primul nostru pas, ne-am concentrat pe designul vizual - reeditarea arhitecturii informaționale va veni mai târziu. Puteți citi totul despre reproiectarea iOS și reconstruirea backend-ului coordonat în WIRED.

Împreună cu reproiectarea aplicației, am creat și ceea ce numim Standardele de proiectare a produselor Pinterest, care includ:

Sistem - Forme, tipografie, culori, grile
Structura - dispunerea componentelor
Mediu - Toate micile piese din lume pe care le proiectăm

Am petrecut următoarele 9 luni lucrând îndeaproape cu inginerie pentru a construi fiecare componentă și am făcut o mulțime de modificări și ajustări pe parcurs. A fost un efort de colaborare incredibil, asigurându-ne că tot ceea ce am construit împreună nu numai că îndeplinește obiectivele noastre de proiectare, dar este reutilizabil și valoros pentru toate celelalte echipe de inginerie de produse de pe Pinterest.

Mai jos sunt doar câteva dintre modalitățile prin care noile noastre Standarde de proiectare s-au conturat pe Pinterest.

Echipa epică care a făcut-o să se întâmple

Întreaga echipă de design a produsului Pinterest a fost implicată în verificarea și executarea noului sistem de proiectare.

Am avut și o mică echipă de designeri de crack (Annie Teng, Jay Marsh, Kimberly Fellman, Linus Wahlstedt, Long Cheng, Patrik Goethe, Rick Chatas, Susan Kare, Tom Watson, Woosung Kang) care au lucrat îndeaproape cu mine și cu inginerii noștri uimitori pentru iterați asupra deciziilor de proiectare împreună, pentru a găsi tranzițiile și curbele potrivite, pentru a prototip diferite gesturi și așa mai departe. Aceasta a fost cu adevărat cea mai bună parte a procesului. Colaborarea în echipe, încorporarea feedback-ului din perspective multiple (un proces cunoscut la Pinterest drept „tricotat”) a făcut ca rezultatele să fie mai puternice. Ne-am distrat și noi.

Și, în sfârșit, am lucrat îndeaproape cu echipa de brand Pinterest pentru a crea noi linii directoare de marcă care să reflecte aceste aceleași principii de design. Ultima noastră comercializare începe deja să simtă că împarte aceeași voce cu produsul nostru.

Următorul lucru, vom aborda următorul val de îmbunătățiri pentru aplicația iOS, împreună cu reproiectarea site-ului Pinterest și a aplicației Android și căutăm și mai mulți designeri stelari care să o ajute să se realizeze.

Sper că sunteți la fel de entuziasmați, cât suntem de unde se va sfârși totul.

-

Mulțumesc lui Adam Barton, Allen Williams, Arla Rosenzweig, Andrea Burbank, Austin Chang, Austin Louden, Bill Kunz, Brendan Ryan, Bin Liu, Chris Danford, Changshu Liu, Chunyan Wang, Connor Montgomery, Dan Lurie, Eusden Shing, Evan Sharp, Evany Thomas, Huy Nguyen, Frank Fumarola, Garrett Moon, George Liu, Gordon Chen, Jason Costa, Jeff Ferris, Jenny Liu, John Milinovich, June Andrews, Leo Liu, Leon Lin, Levi McCallum, Lukas Blakk, Luke Zhao, Martin Jiang , Maura Lynch, Max Gu, Michael Schneider, Nicole Hedley, Nipoon Malhotra, Rahul Malik, Ricky Cancro, Rocir Santiago, Romi Phadte, Samuel Hsiung, Scott Goodson, Seth Weisfeld, Steven Ramkumar, Steven Walling, Trevor Pels, Vincent Tian, ​​Vivian Qu, Wendy Lu, Yu Yang, Yuchen Liu, Yuliang Lin, Yunnan Wu pentru a face acest lucru.

-

Andreas