Redizajniranje Pinterest-a, blok po blok

Kad sam bio dijete odrastao u Švedskoj, moja je soba bila ispunjena klasičnim drvenim igračkama koje su dizajnirane BRIO. Sjećam se da sam bio očaran jednostavnim dizajnom, svijetlim bojama i mješavinom apstraktnih geometrijskih oblika i organskih oblika. Način na koji su izgledali i kretali pozvao vas je da se igrate s njima.

Sustav drvenih vlakova bio je posebno sjajan. Možete sastaviti dijelove staza u krugove, pravocrtno, s-krivulje, sve što želite. Ali morali ste dobro razmisliti o tome kako kreirate svoje rute - postojala je logika kako se komadi spajaju zajedno, a geometriju niste mogli prisiliti.

Dvadesetak godina kasnije moja se vlastita djeca igraju s tim istim relikvijama iz djetinjstva. Odmah čujem kako se prikradaju za drveni pod svoje sobe. Trajni dizajni održani su kroz godine i generacije promjena.

Ova divna samorazumljiva jednostavnost BRIO pala mi je na pamet prošlog proljeća, kad sam se prvi put počeo fokusirati na veliki problem koji se razvio s dizajnom Pinterest-a. Zapravo, 3 velika problema.

  1. Naš interfejs bio je nedosljedan
  2. Naš vizualni sustav je stajao
  3. Naš se marketing osjećao nepovezano s našim proizvodom

Tijekom godina, dizajni za našu web stranicu, aplikacije i marketing svi su počeli propadati, tako da se više nisu osjećali kao da imaju istu osobnost. Brojne nove značajke također su dodane bez jasne vizije o tome kako se uklapaju u cjelokupni dizajn, pa se sučelje počelo osjećati zbijeno i teško razumljivo. Ne postoji vizualna hijerarhija ili sustav koji bi vam pomogao razumjeti što je važno kada pogledate bilo koju određenu stranicu. Kao rezultat toga, sve nadahnjujuće ideje koje ljudi štede na Pinterestu - daleko najvažniji dio našeg iskustva - bile su izgubljene.

Kako se ispostavilo, teško je dizajnirati skladne i lijepe stvari u razmjeru.

Stvar načela

Cjelokupno je iskustvo Pinteresta bilo u potrebi da pojednostavi i objedini. A ako ćemo to učiniti, morali smo utvrditi neke temeljne principe dizajna za sebe.

Povukao sam se u mračni kutak podruma Pinterest-a i proveo narednih nekoliko tjedana igrajući se s dizajnom. U početku nisam ni bio siguran što radim - u osnovi to je bilo poput moje vlastite odrasle verzije zajedničkog udaranja blokova. Počeo sam razmišljati o pitanjima poput: Zašto ljudi vole Pinterest? Po čemu je naš proizvod jedinstven? Kakva je naša osobnost? Što smo sve?

Što sam više razmišljao o tome, više sam shvatio da je suština Pinterest-a jako slična kolekciji BRIO igračaka moje obitelji. Oboje vas potiču da se igrate različitim mogućnostima, povežete komade zajedno i stvarate svoj vlastiti svijet. Možete početi s vlastitim ciljevima i projektima na umu ili se možete nadahnuti onim što netko drugi radi i izgraditi to. Uskočite i odmah počnite igrati, zaustavite se kad god želite, a zatim se vratite i pokupite se tamo gdje ste stali.

Gurajući mišljenje još više, bitne kvalitete koje su Pinterest i BRIO dijelili srušili su se na 3 jednostavna principa. Oni su opisali najbolje kvalitete Pinterest-a danas i postavili su temelj gdje ćemo proizvod morati koristiti u budućnosti.

-

  1. Lucidan

To je intuitivno, a ne naučeno
 Shvaćate kako stvari funkcioniraju bez izravnog objašnjenja.

Korisnik čini moćnim
Ništa vas ne osjeća neugodno ili kao da ne možete vjerovati sustavu. Sustav vam pruža prave komponente i pita vas što dalje.

To čini sadržaj okusa boljim
Okvir je potpuno neprimjeren i skriven. Ne primjećujete dok ne komunicirate s njim. Vi morate odlučiti što želite, umjesto da to forsiramo na vas.

2. Animirani

Šareno je
Osobnost je odvažna i ističe se.

Vidljivo je
Interakcije iskustva na fizički način.

To je neočekivano
Doživljaj je razigran i zabavan, ali nikad neodoljiv.

3. Neraskidiva

Izgrađen je za istraživanje
Baš poput dječje igračke, želite je isprobati samo da vidite što će se dogoditi. Što više istražujete, brže ćete učiti i više dobiti zauzvrat.

Nemoguće je pogrešno dodirnuti
Sve je osmišljeno kako bi vam pomoglo u jednostavnoj navigaciji i raditi točno ono što ste imali na umu.

Reverzibilna je
Ako slučajno učinite nešto što ne daje rezultate koje ste tražili, očito je kako to ispraviti.

-

Nakon što smo blokirali ta tri principa, sljedeći korak bio je njihov prevođenje u nešto opipljivo što bi potencijalno moglo biti temelj svega što smo izgradili krećući se prema naprijed.

Osnove

Oblici - koristimo osnovne i dodirne oblike, koje ljudi prirodno razumiju i žele komunicirati. Kutovi su zaobljeni kako bi se osjećali pristupačnijima.

Boje - veliki sam obožavatelj analognih shema boja. Osjećaju se vrlo prirodno i odražavaju osjećaj smirenosti. Ako kombinirate nekoliko različitih analognih shema boja koje su se izvorno temeljile na određenim komplementarnim bojama, rezultat je vrlo zanimljiv i neočekivan.

Hijerarhija - Sve je izuzetno hijerarhijsko, tako da je uvijek jasno što je najvažnije. Dok se dizajniramo, postavljamo si pitanje: Što je najvažnije da netko ovdje razumije? Što možemo ukloniti da stvari postanu još očitije?

Bijeli prostor - U starom Pinterest dizajnu fokus je bio na kontejnerima koji su okruživali ljudski sadržaj, koji su nadjačali sam sadržaj. Sve što ste vidjeli bilo je puno linija, gradijenata, nijansi sive. Nije bilo mjesta za disanje. Uvođenjem bijelog prostora prirodno se odvajaju između elemenata bez dodavanja više vizualnog šuma. Rezultat je uravnotežen i strukturiran, a količina praznog prostora dodaje osobnost i utjecaj.

Rana istraživanja i ideje

Željeli smo vidjeti što će se dogoditi ako samo uklonimo sve spremnike s korisničkog sučelja. Da li bi se fokus vratio na same predmete ili bi se doživljaj potpuno raspao?

Ispada da se rezultirajuća mreža bez spremnika osjećala izvrsno, a naglasak je konačno vraćen na ideje koje su ljudi štedjeli na Pinterestu. Nismo potpuno izgubili spremnike jer oni pomažu u razjašnjenju koji podaci idu uz koju sliku. Umjesto toga, čekamo da se prikaže spremnik dok ne budete dovoljno znatiželjni da ga dodirnete. Na taj način sučelje vas vizualno uči kako su informacije povezane i grupirane u našem sustavu. Ovu interakciju trebate doživjeti samo jednom da biste shvatili kako je izgrađen Pin.

Dizajniranje novog skupa standarda

Nakon igranja dizajna i interakcija dobrih par mjeseci, ekipa i ja smo konačno postavili mjesta na kojima smo se osjećali kao da su predstavljena sva 3 naša načela dizajna proizvoda (lucidni, animirani, neraskidivi). Bili smo spremni isprobati naše novopostavljene principe i sustav dizajna.

Željeli smo započeti sa sadržanim sustavom, pa smo se odlučili prvo pozabaviti se našom aplikacijom za iOS. Za prvi prolaz usredotočili smo se na vizualni dizajn - preraditi informacijsku arhitekturu doći ćemo kasnije. Sve o redizajnu iOS-a i koordiniranoj pozadinskoj obnovi možete pročitati u WIRED-u.

Uz redizajniranje aplikacije, izradili smo i ono što nazivamo Pinterestovim standardima dizajna proizvoda, što uključuje:

Sustav - oblici, tipografija, boje, rešetke
Struktura - Raspored sastavnih dijelova
Okoliš - svi mali dijelovi svijeta koje dizajniramo

Sljedećih 9 mjeseci usko smo radili s inženjeringom za izgradnju svake komponente, a napravili smo puno izmjena i prilagodbi. Bio je to nevjerojatan zajednički napor da sve što smo zajedno napravili ne samo da ispunjava naše ciljeve dizajna, već je ponovo upotrebljivo i vrijedno za sve ostale timove za inženjering proizvoda širom Pinterest-a.

U nastavku su samo neki od načina na koji su se naši novi standardi dizajna oblikovali u cijelom Pinterestu.

Epski tim koji je to učinio

Prilično cjelokupni tim dizajnera proizvoda u Pinterestu uključen je u provjeru i izvršavanje novog dizajnerskog sustava.

Imali smo i mali tim dizajnera krekova (Annie Teng, Jay Marsh, Kimberly Fellman, Linus Wahlstedt, Long Cheng, Patrik Goethe, Rick Chatas, Susan Kare, Tom Watson, Woosung Kang) koji su usko surađivali sa mnom i našim nevjerojatnim inženjerima da iterati zajedno na dizajnerskim odlukama, pronaći ispravne prijelaze i krivulje, prototipirati različite geste, itd. i tako dalje. Ovo je uistinu bio najbolji dio postupka. Rad kroz timove, uključivanje povratnih informacija iz više perspektiva (proces poznat na Pinterestu kao "pletenje") učinio je rezultate eksponencijalno jačim. Također smo se jako zabavili.

I na kraju, usko sam surađivao s timom marki Pinterest kako bih stvorio nove smjernice branda koje odražavaju iste principe dizajna. Naš najnoviji marketing već počinje osjećati kao da dijeli isti glas s našim proizvodom.

Sljedeće ćemo rješavati sljedeći val poboljšanja za iOS aplikaciju, zajedno s redizajniranjem web stranice Pinterest i aplikacije Android, a tražit ćemo još zvijezdane dizajnere koji bi pomogli da se to dogodi.

Nadam se da ste uzbuđeni koliko i mi oko toga gdje će se sve završiti.

-

Zahvaljujući Adamu Bartonu, Allenu Williamsu, Arlu Rosenzweigu, Andrea Burbank, Austinu Changu, Austinu Loudenu, Billu Kunzu, Brendanu Ryanu, Bin Liuu, Chrisu Danfordu, Changshu Liuu, Chunyan Wangu, Connoru Montgomeryju, Danu Lurieju, Eusdenu Shingu, Evanu Sharpu, 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 da bi se to dogodilo.

-

Andreas