Redesigning Pinterest, blok po bloku

Když jsem byl dítě vyrůstající ve Švédsku, můj pokoj byl naplněn klasickými dřevěnými hračkami navrženými společností BRIO. Vzpomínám si, že jsem fascinován jednoduchými vzory, jasnými barvami a mixem abstraktních geometrických tvarů a organických tvarů. To, jak vypadali a pohybovali se, vás pozvalo hrát si s nimi.

Dřevěný vlakový systém byl obzvláště skvělý. Díly skladby můžete spojit do kruhů, rovných křivek, křivek s, cokoli jste chtěli. Museli jste však přemýšlet o tom, jak jste si vytvořili své trasy - existovala logika toho, jak kusy zapadají do sebe, a geometrii jste nemohli vynutit.

Asi o dvacet let později si moje děti hrají s těmito stejnými památkami z mého dětství. Slyšel jsem, jak se právě teď stahují na dřevěnou podlahu svého pokoje. Trvalé návrhy vydržely v průběhu let a generací změn.

Tuto úžasnou zjevnou jednoduchost BRIO jsem měl na mysli loni na jaře, když jsem se poprvé začal soustředit na velký problém, který se vyvinul s designem Pinterestu. Vlastně 3 velké problémy.

  1. Naše uživatelské rozhraní bylo nekonzistentní
  2. Náš vizuální systém byl zastaralý
  3. Náš marketing se cítil odpojen od našeho produktu

V průběhu let se všechny návrhy našich webových stránek, aplikací a marketingu začaly unášet, takže se už necítily, jako by měly stejnou osobnost. Byla přidána řada nových funkcí, aniž by byla jasná představa o tom, jak zapadají do celkového designu, takže se rozhraní začalo cítit nepřehledně a těžko pochopitelné. Neexistovala žádná vizuální hierarchie ani systém, který by vám pomohl pochopit, co bylo důležité, když jste se dívali na jakoukoli danou stránku. V důsledku toho se všechny inspirativní nápady, které lidé na Pinterestu ušetří - zdaleka nejdůležitější část naší zkušenosti - ztratily.

Jak se ukazuje, je to zatraceně těžké navrhnout konzistentní a krásné věci v měřítku.

Otázka zásad

Zkušenost Pinterest jako celku vyžadovala zjednodušení a sjednocení. A pokud bychom to chtěli udělat, museli jsme si určit některé základní principy návrhu pro sebe.

Ustoupil jsem do tmavého rohu suterénu Pinterestu a několik následujících týdnů jsem strávil hraním s návrhy. Nebyl jsem si vůbec jistý, co jsem dělal zpočátku - v podstatě to bylo jako moje vlastní dospělá verze narážecích bloků dohromady. Začal jsem mumlat na otázky jako: Proč lidé milují Pinterest? Co dělá náš produkt jedinečným? Jaká je naše osobnost? O čem jsme všichni?

Čím víc jsem o tom přemýšlel, tím více jsem si uvědomil, že podstata Pinterestu je hodně podobná milované sbírce hraček BRIO mé rodiny. Oba povzbuzují, abyste si hráli s různými možnostmi, spojovali kousky dohromady a vytvořili svůj vlastní svět. Můžete začít s vlastními cíli a projekty, nebo se můžete inspirovat tím, co dělá někdo jiný, a stavět na tom. Přejít a okamžitě začít hrát, zastavit, kdykoli budete chtít, pak se vraťte a vyzvedněte přesně tam, kde jste skončili.

Ještě více posouvají myšlení, základní vlastnosti, které Pinterest a BRIO sdílejí, probubly až na 3 jednoduché principy. Ty popisovaly nejlepší vlastnosti Pinterest dnes a položily základ pro to, kam jsme chtěli produkt v budoucnu vzít.

-

  1. Lucid

Je to intuitivní, nenaučené
 Rozumíte tomu, jak věci fungují bez jakéhokoli přímého vysvětlení.

Díky tomu se uživatel cítí silně
Nic vás necítí nepříjemně nebo se vám systému nedůvěřujete. Systém vám poskytne ty správné komponenty a zeptá se vás, co dělat dál.

Zlepšuje chuť obsahu
Rámec je zcela plynulý a skrytý. Nevšimnete si to, dokud s tím nebudete komunikovat. Můžete se rozhodnout, co chcete, namísto toho, abychom to na vás donutili.

2. Animovaný

Je to barevné
Osobnost je odvážná a vyniká.

Je vizuálně citlivý
Fyzické interakce zkušeností.

Je to neočekávané
Zážitek je hravý a zábavný, ale nikdy ohromující.

3. nerozbitné

Je postaven pro průzkum
Stejně jako dětská hračka ji chcete vyzkoušet, abyste zjistili, co se stane. Čím více prozkoumáte, tím rychleji se naučíte a čím více získáte na oplátku.

Je nemožné špatně klepnout
Vše je navrženo tak, aby vám pomohlo snadno se orientovat a dělat přesně to, co jste měli na mysli.

Je to reverzibilní
Pokud omylem uděláte něco, co nepřináší výsledky, které jste hledali, je zřejmé, jak je opravit.

-

Jakmile jsme tyto 3 principy zablokovali, dalším krokem bylo převést je do něčeho hmatatelného, ​​co by mohlo být základem všeho, co jsme postavili a postupovali kupředu.

Základy

Tvary - Používáme základní a na dotyk přátelské tvary, s nimiž lidé přirozeně rozumí a chtějí s nimi interagovat. Rohy jsou zaoblené, aby se cítily přístupnější.

Barvy - jsem velkým fanouškem analogických barevných schémat. Cítí se velmi přirozeně a odrážejí pocit klidu. Když zkombinujete několik různých analogických barevných schémat, která byla původně založena na některých daných doplňkových barvách, je výsledek velmi zajímavý a neočekávaný.

Hierarchie - Všechno je velmi hierarchické, takže je vždy jasné, co je nejdůležitější. Při navrhování se ptáme sami sebe: Co je pro někoho nejdůležitější, aby zde porozuměl? Co můžeme odstranit, aby se věci ještě více zjevily?

Prázdné místo - Ve starém designu Pinterestu se pozornost soustředila na kontejnery, které obklopovaly obsah lidí, který obsah sám přemohl. Viděli jste jen spoustu čar, přechodů, odstínů šedé. Nebyl prostor k dýchání. Zavedení bílého prostoru poskytuje přirozené oddělení mezi prvky, aniž by přidávalo více vizuálního šumu. Výsledek je vyvážený a strukturovaný a množství mezery přidává osobnost a dopad.

První průzkumy a nápady

Chtěli jsme vidět, co by se stalo, kdybychom z UI odstranili všechny kontejnery. Vrátilo by se zaostření na samotné objekty nebo by se zážitek úplně rozpadl?

Ukázalo se, že výsledná mřížka bez kontejneru se cítila skvěle a důraz byl konečně zpět na myšlenky, které lidé na Pinterestu šetřili. Kontejnery jsme neztratili úplně, protože pomáhají objasnit, které informace se vztahují k jakému obrázku. Místo toho počkáme na ukázku kontejneru, dokud nebudete dostatečně zvědaví na to, abyste mohli klepnout. Rozhraní tak vizuálně učí, jak jsou informace a informace seskupeny v našem systému. Tuto interakci musíte zažít pouze jednou, abyste pochopili, jak je pin vytvořen.

Návrh nové sady standardů

Poté, co jsme si po dobrých pár měsících hráli s designy a interakcemi, jsme konečně dostali místo na místo, kde jsme se cítili, jako by byly zastoupeny všechny 3 naše principy návrhu produktu (přehledné, animované, nerozbitné). Byli jsme připraveni otestovat naše nově zavedené zásady a konstrukční systém.

Chtěli jsme začít s uzavřeným systémem, a tak jsme se rozhodli řešit naši aplikaci pro iOS jako první. Při našem prvním průchodu jsme se zaměřili na vizuální design - přepracování informační architektury přijde později. Ve WIRED si můžete přečíst vše o redesignu iOS a koordinovaném backendu.

Spolu s přepracováním aplikace jsme také vytvořili to, čemu říkáme Pinterestové standardy designu produktů Pinterest, což zahrnuje:

Systém - tvary, typografie, barvy, mřížky
Struktura - uspořádání komponent
Životní prostředí - Všechny malé kousky světa, které navrhujeme

Strávili jsme dalších 9 měsíců úzkou spoluprací s inženýrem při stavbě každé komponenty a během cesty jsme provedli řadu úprav a úprav. Bylo to neuvěřitelné a společné úsilí, abychom se ujistili, že vše, co jsme společně vytvořili, nejenže splňuje naše designové cíle, ale je znovu použitelné a cenné pro všechny ostatní týmy pro vývoj produktů v Pinterestu.

Níže uvádíme jen několik způsobů, jak se naše nové konstrukční standardy utvářely na Pinterestu.

Epický tým, který to umožnil

Do prověřování a provádění nového konstrukčního systému se zapojil téměř celý tým designu výrobků ve společnosti Pinterest.

Také jsme měli malý tým návrhářů trhlin (Annie Teng, Jay Marsh, Kimberly Fellman, Linus Wahlstedt, Long Cheng, Patrik Goethe, Rick Chatas, Susan Kare, Tom Watson, Woosung Kang), kteří úzce spolupracovali se mnou a našimi úžasnými inženýry, aby iterovat společně o rozhodování o návrhu, najít správné přechody a křivky, prototypovat různá gesta atd. a tak dále. To byla skutečně nejlepší část procesu. Práce napříč týmy zahrnutím zpětné vazby z více perspektiv (proces známý jako Pinterest jako „pletení“) způsobila, že výsledky byly exponenciálně silnější. Také jsme se bavili.

A nakonec jsem úzce spolupracoval s týmem Pinterest na vytvoření nových směrnic značky, které odrážejí stejné principy designu. Náš nejnovější marketing již začíná mít pocit, že sdílí stejný hlas s naším produktem.

Až budeme příště řešit další vlnu vylepšení pro aplikaci pro iOS, spolu s přepracováním webu Pinterest a aplikace pro Android a hledáme ještě více hvězdných návrhářů, kteří by to pomohli.

Doufám, že jste stejně nadšeni, jako jsme o tom, kde to všechno skončí.

-

Díky Adamu Bartonovi, Allen Williams, Arla Rosenzweig, Andreau Burbankovi, Austinu Changovi, Austinu Loudenovi, Billovi Kunzovi, Brendanovi Ryanovi, Binovi Liu, Chrisu Danfordovi, Changshuovi Liu, Chunyanovi Wangovi, Connorovi Montgomerymu, Danu Lurie, Eusdenovi Shingovi, Evanovi Sharpovi, Evany Thomas, Huy Nguyen, Frank Fumarola, Garrett Moon, George Liu, Gordon Chen, Jason Costa, Jeff Ferris, Jenny Liu, John Milinovich, červen Andrews, Leo Liu, Leon Lin, Levi McCallum, Lukáš 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 za to, že se to stalo.

-

Andreas