Omdesign Pinterest, blok for blok

Da jeg var barn, der voksede op i Sverige, blev mit værelse fyldt med klassisk BRIO-designet trælegetøj. Jeg kan huske at jeg blev fascineret af de enkle design, lyse farver og blanding af abstrakte geometriske former og organiske former. Den måde, de så på og flyttede, inviterede dig ind til at lege med dem.

Træbanesystemet var især godt. Du kunne passe sporstykkerne sammen i cirkler, straks, s-kurver, hvad du end ville. Men du skulle være opmærksom på, hvordan du oprettede dine ruter - der var en logik for, hvordan brikkerne passer sammen, og du kunne ikke tvinge geometrien.

Nogle tyve år senere leger mine egne børn med disse samme relikvier fra min barndom. Jeg kan høre dem klamre sig ned mod trægulvet i deres værelse lige nu. Den vedvarende design har holdt op gennem år og generationer af forandringer.

Denne vidunderlige selvindlysende enkelhed af BRIO var på mit sind sidste forår, da jeg først begyndte at fokusere på et stort problem, der var udviklet med design af Pinterest. Faktisk 3 store problemer.

  1. Vores UI var inkonsekvent
  2. Vores visuelle system var forældet
  3. Vores marketing følte sig frakoblet fra vores produkt

I årenes løb var designerne til vores websted, apps og marketing alle begyndt at køre, så de følte sig ikke længere som om de havde den samme personlighed. En række nye funktioner blev også tilføjet uden en klar vision om, hvordan de passer ind i det overordnede design, så grænsefladen var begyndt at føles rodet og svært at forstå. Der var intet visuelt hierarki eller system til at hjælpe dig med at forstå, hvad der var vigtigt, når du kiggede på en given side. Som et resultat forsvandt alle de inspirerende ideer, som folk redder på Pinterest - langt den vigtigste del af vores oplevelse.

Det viser sig, at det er svært at designe ensartede og smukke ting i skala.

Et spørgsmål om principper

Pinterest-oplevelsen som helhed havde et ømt behov for at forenkle og forene. Og hvis vi skulle gøre det, var vi nødt til at identificere nogle centrale designprincipper for os selv.

Jeg trak mig tilbage til et mørkt hjørne af Pinterest-kælderen og tilbragte de næste par uger med at lege med designs. Jeg var ikke engang sikker på, hvad jeg lavede til at begynde med - dybest set var det som min egen voksne version af bankede blokke sammen. Jeg begyndte at tænke på spørgsmål som: Hvorfor elsker folk Pinterest? Hvad gør vores produkt unikt? Hvad er vores personlighed? Hvad handler vi om?

Jo mere jeg tænkte over det, desto mere blev jeg klar over, at essensen af ​​Pinterest er meget som min families elskede samling af BRIO-legetøj. Begge opfordrer dig til at lege med forskellige muligheder, forbinde brikker sammen og skabe din egen verden. Du kan starte med dine egne mål og projekter i tankerne, eller du kan blive inspireret af, hvad en anden gør og bygge det op. Spring ind og start straks med at spille, stop når du vil, så kom tilbage og afhent lige hvor du slap.

Ved at skubbe tankerne endnu længere boblet de væsentlige kvaliteter, som Pinterest og BRIO delte, ned til 3 enkle principper. Disse beskrev de bedste kvaliteter ved Pinterest i dag og lagde grundlaget for, hvor vi ønskede at tage produktet i fremtiden.

-

  1. Klar

Det er intuitivt, ikke lært
 Du forstår, hvordan ting fungerer uden nogen direkte forklaring.

Det får brugeren til at føle sig kraftig
Intet får dig til at føle dig utilpas eller at du ikke kan stole på systemet. Systemet giver dig de rigtige komponenter og spørger dig, hvad du skal gøre næste.

Det gør indholdet smag bedre
Rammen er helt sømløs og skjult. Du bemærker det ikke, før du interagerer med det. Du får bestemme, hvad du vil have det til, i stedet for at vi tvinger det til dig.

2. Animeret

Det er farverigt
Personligheden er dristig og skiller sig ud.

Det er visuelt lydhør
Oplevelsen interagerer på en fysisk måde.

Det er uventet
Oplevelsen er leg og sjov, men aldrig overvældende.

3. Ubrudt

Det er bygget til efterforskning
Ligesom et børns legetøj, vil du prøve det bare for at se, hvad der vil ske. Jo mere du undersøger, jo hurtigere lærer du, og jo mere får du til gengæld.

Det er umuligt at forkert trykke på
Alt er designet til at hjælpe dig med at navigere let og gøre nøjagtigt det, du havde i tankerne.

Det er reversibelt
Hvis du ved et uheld gør noget, der ikke giver de resultater, du ledte efter, er det indlysende, hvordan du retter det.

-

Når vi blokerede for disse 3 principper, var det næste skridt at oversætte dem til noget håndgribeligt, der potentielt kunne være grundlaget for alt, hvad vi byggede fremad.

Det grundlæggende

Former - Vi bruger basale og berøringsvenlige former, som folk naturligt forstår og ønsker at interagere med. Hjørnerne er afrundede for at få dem til at føle sig mere tilgængelige.

Farver - Jeg er en stor fan af analoge farveskemaer. De føler sig meget naturlige og afspejler en følelse af ro. Når du kombinerer et par forskellige analoge farveskemaer, der oprindeligt var baseret på nogle givne komplementære farver, er resultatet meget interessant og uventet.

Hierarki - Alt er ekstremt hierarkisk, så det er altid klart, hvad der er vigtigst. Når vi designer, spørger vi os selv: Hvad er det vigtigste for nogen at forstå her? Hvad kan vi fjerne for at gøre tingene endnu mere tydelige?

Hvidt rum - I det gamle Pinterest-design var fokuset på containerne, der omringede folks indhold, som overmandede selve indholdet. Alt hvad du så var masser af linjer, gradueringer, gråtoner. Der var ikke plads til at trække vejret. Introduktion af hvidt rum giver en naturlig adskillelse mellem elementer uden at tilføje mere visuel støj. Resultatet er afbalanceret og struktureret, og mængden af ​​hvidafstand tilføjer personlighed og indflydelse.

De tidlige udforskninger og ideer

Vi ønskede at se, hvad der ville ske, hvis vi bare fjernede alle containere fra UI. Ville fokuset vende tilbage til selve objekterne, eller ville oplevelsen falde fra hinanden?

Det viser sig, at det resulterende containerværde gitter følte sig godt, og betoningen var endelig tilbage på de ideer, folk sparede på Pinterest. Vi mistede ikke containerne helt, da de hjælper med at afklare, hvilke oplysninger der passer til hvilket billede. I stedet venter vi på at vise containeren, indtil du er nysgerrig nok til at trykke på. På den måde lærer grænsefladen visuelt dig, hvordan information forbindes og grupperes i vores system. Du behøver kun opleve denne interaktion én gang for at forstå, hvordan en pin er bygget.

Design af et nyt sæt standarder

Efter at have leget rundt med design og interaktion i gode par måneder, fik teamet og jeg endelig ting at placere, hvor vi følte, at alle tre af vores produktdesignprincipper (klodsede, animerede, uknuselige) var repræsenteret. Vi var klar til at sætte vores nyetablerede principper og designsystem på prøve.

Vi ønskede at starte med et indesluttet system, så vi besluttede at tackle vores iOS-app først. For vores første pas fokuserede vi på det visuelle design - omarbejdning af informationsarkitekturen kommer senere. Du kan læse alt om iOS-redesign og koordineret backend-genopbygning i WIRED.

Sammen med omdesign af appen byggede vi også det, vi kalder Pinterest's produktdesignstandarder, som inkluderer:

System - figurer, typografi, farver, gitter
Struktur - Arrangementet af komponenter
Miljø - Alle verdens små stykker, vi designer

Vi tilbragte de næste 9 måneder tæt sammen med engineering for at bygge hver komponent, og vi foretaget mange ændringer og justeringer undervejs. Det har været en utrolig samarbejdsindsats at sikre, at alt, hvad vi har bygget sammen, ikke kun opfylder vores designmål, men er genanvendeligt og værdifuldt for alle andre produktteknikhold på tværs af Pinterest.

Nedenfor er kun nogle af de måder, vores nye designstandarder har taget form på tværs af Pinterest.

Det episke hold der fik det til at ske

Stort set var hele produktdesignteamet hos Pinterest involveret i vetting og eksekvering af det nye designsystem.

Vi havde også et lille team af crack-designere (Annie Teng, Jay Marsh, Kimberly Fellman, Linus Wahlstedt, Long Cheng, Patrik Goethe, Rick Chatas, Susan Kare, Tom Watson, Woosung Kang), der arbejdede tæt sammen med mig og vores fantastiske ingeniører til gentage designbeslutninger sammen, finde de rigtige overgange og kurver, prototype forskellige bevægelser osv. og så videre. Dette var virkelig den bedste del af processen. At arbejde på tværs af teams og inkorporere feedback fra flere perspektiver (en proces, der blev kendt på Pinterest som "strikning"), gjorde resultaterne eksponentielt stærkere. Vi havde også en masse sjov.

Og sidst arbejdede jeg tæt med Pinterest-brandteamet for at skabe nye brand-retningslinjer, der afspejler de samme designprincipper. Vores seneste markedsføring begynder allerede at føles som om den deler den samme stemme med vores produkt.

Dernæst skal vi tackle den næste bølge af forbedringer til iOS-appen sammen med at redesigne Pinterest-webstedet og Android-appen, og vi leder efter endnu flere stjernede designere, der hjælper med at få det til at ske.

Jeg håber, du er lige så ophidset som vi er over, hvor det hele ender.

-

Tak til 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 for at få dette til at ske.

-

Andreas