Refonte de Pinterest, bloc par bloc

Quand j'étais enfant en Suède, ma chambre était remplie de jouets en bois classiques conçus par BRIO. Je me souviens d’être fasciné par les dessins simples, les couleurs vives et le mélange de formes géométriques abstraites et de formes organiques. La façon dont ils ont regardé et déplacé vous a invité à jouer avec eux.

Le système de train en bois était particulièrement bien. Vous pouvez assembler les morceaux de piste en cercles, lignes droites, courbes en S, comme vous le souhaitez. Mais vous deviez réfléchir à la façon dont vous avez créé vos itinéraires. Il existait une logique dans l’ajustement des pièces et vous ne pouviez pas forcer la géométrie.

Quelque vingt ans plus tard, mes propres enfants jouent avec ces mêmes reliques de mon enfance. Je peux les entendre claquer contre le parquet de leur chambre en ce moment. Les conceptions durables ont résisté au fil des ans et des générations de changement.

Cette merveilleuse simplicité évidente de BRIO était dans mon esprit le printemps dernier, lorsque j'ai commencé à me concentrer pour la première fois sur un gros problème qui s'était développé avec le design de Pinterest. En fait, 3 gros problèmes.

  1. Notre interface utilisateur était incompatible
  2. Notre système visuel était périmé
  3. Notre marketing s'est senti déconnecté de notre produit

Au fil des ans, les conceptions de notre site Web, de nos applications et de notre marketing ont toutes commencé à dériver et elles ne se sentent plus comme si elles avaient la même personnalité. Un certain nombre de nouvelles fonctionnalités ont également été ajoutées sans une vision claire de la manière dont elles s'intègrent dans la conception globale. L'interface a donc commencé à être encombrée et difficile à comprendre. Il n'y avait pas de hiérarchie visuelle ni de système pour vous aider à comprendre ce qui était important lorsque vous regardiez une page donnée. En conséquence, toutes les idées inspirantes que les gens économisent sur Pinterest - de loin la partie la plus importante de notre expérience - se perdaient.

En fin de compte, il est extrêmement difficile de concevoir des choses cohérentes et belles à l’échelle.

Une question de principes

L’expérience Pinterest dans son ensemble avait cruellement besoin de simplification et d’unification. Et si nous voulions le faire, nous devions identifier certains principes de conception fondamentaux.

Je me suis retiré dans un coin sombre du sous-sol Pinterest et ai passé les quelques semaines suivantes à jouer avec les dessins. Au début, je ne savais même pas trop ce que je faisais. En gros, c’était comme si j’avais ma propre version adulte de taper des blocs. J'ai commencé à réfléchir à des questions telles que, pourquoi les gens aiment Pinterest? Qu'est-ce qui rend notre produit unique? Quelle est notre personnalité? De quoi sommes nous tous?

Plus j'y pensais, plus je réalisais que l'essence de Pinterest ressemblait beaucoup à la collection bien-aimée de ma famille, les jouets BRIO. Tous les deux vous encouragent à jouer avec différentes options, à relier des morceaux et à créer votre propre monde. Vous pouvez commencer avec vos propres objectifs et projets en tête, ou vous inspirer de ce que quelqu'un d'autre fait et en tirer parti. Sautez et commencez immédiatement à jouer, arrêtez-vous quand vous le souhaitez, puis revenez et reprenez-vous là où vous l'avez laissé.

Poussant encore plus loin la réflexion, les qualités essentielles partagées par Pinterest et BRIO se résumaient en 3 principes simples. Celles-ci décrivaient les meilleures qualités de Pinterest aujourd'hui et établissaient les fondements sur lesquels nous souhaitions utiliser le produit à l'avenir.

-

  1. Lucide

C’est intuitif, pas appris
 Vous comprenez comment les choses fonctionnent sans aucune explication directe.

Cela donne à l'utilisateur un sentiment de puissance
Rien ne vous met mal à l’aise ou ne vous permet pas de faire confiance au système. Le système vous fournit les bons composants et vous demande quoi faire ensuite.

Cela donne un meilleur goût au contenu
Le cadre est totalement transparent et caché. Vous ne le remarquerez pas tant que vous n’y interagirez pas. Vous décidez ce que vous voulez que ce soit, au lieu de nous le forcer.

2. animée

Il est coloré
La personnalité est audacieuse et se démarque.

C’est réactif visuellement
Les interactions d'expérience de manière physique.

C’est inattendu
L'expérience est ludique et amusante, mais jamais écrasante.

3. Incassable

Il est construit pour l'exploration
Tout comme un jouet pour enfants, vous voulez l'essayer juste pour voir ce qui va se passer. Plus vous étudiez, plus vous apprenez vite et plus vous obtenez en retour.

Il est impossible de mal taper
Tout est conçu pour vous aider à naviguer facilement et à faire exactement ce que vous aviez en tête.

C’est réversible
Si vous faites accidentellement quelque chose qui ne produit pas les résultats escomptés, il est évident de corriger le problème.

-

Une fois que nous avons bloqué ces 3 principes, la prochaine étape consistait à les traduire en quelque chose de concret qui pourrait potentiellement être la base de tout ce que nous avons construit pour aller de l'avant.

Les bases

Formes - Nous utilisons des formes simples et conviviales que les gens comprennent naturellement et avec lesquels ils souhaitent interagir. Les coins sont arrondis pour les rendre plus accessibles.

Couleurs - Je suis un grand fan de jeux de couleurs analogues. Ils se sentent très naturels et reflètent un sentiment de calme. Lorsque vous combinez plusieurs jeux de couleurs analogues différents, basés à l'origine sur des couleurs complémentaires données, le résultat est très intéressant et inattendu.

Hiérarchie - Tout est extrêmement hiérarchisé, le plus important est donc toujours clair. Lors de la conception, nous nous demandons quelle est la chose la plus importante à comprendre ici. Que pouvons-nous enlever pour rendre les choses encore plus évidentes?

Espace blanc - Dans l’ancien design de Pinterest, l’accent était mis sur les récipients qui entouraient le contenu des personnes, qui surpassaient le contenu lui-même. Tout ce que vous avez vu, c’est beaucoup de lignes, de dégradés, de nuances de gris. Il n'y avait pas de place pour respirer. L'introduction d'un espace permet une séparation naturelle entre les éléments sans ajouter de bruit visuel. Le résultat est équilibré et structuré, et la quantité d’espace ajoute de la personnalité et de l’impact.

Les premières explorations et idées

Nous voulions voir ce qui se passerait si nous retirions simplement tous les conteneurs de l'interface utilisateur. Est-ce que la focalisation reviendrait aux objets eux-mêmes ou l'expérience s'effondrerait-elle complètement?

Il s’avère que la grille obtenue sans conteneur s’est sentie très bien, et l’accent a finalement été mis sur les idées que les utilisateurs économisaient sur Pinterest. Nous n’avons pas entièrement perdu les conteneurs, car ils aident à préciser les informations associées à quelle image. Au lieu de cela, nous attendons de montrer le conteneur jusqu’à ce que vous soyez suffisamment curieux pour taper. De cette manière, l'interface vous apprend de manière visuelle comment les informations sont connectées et groupées dans notre système. Il vous suffit de faire l'expérience de cette interaction une seule fois pour comprendre comment un code PIN est construit.

Concevoir un nouvel ensemble de normes

Après avoir joué avec les conceptions et les interactions pendant quelques mois, l'équipe et moi-même avons enfin réussi à placer les choses où nous avions l'impression que nos 3 principes de conception de produits (lucide, animé, incassable) étaient représentés. Nous étions prêts à mettre à l’épreuve nos principes et notre système de conception nouvellement établis.

Nous voulions commencer avec un système confiné, nous avons donc décidé de nous attaquer d'abord à notre application iOS. Pour notre premier passage, nous nous sommes concentrés sur la conception visuelle - la retouche de l’architecture de l’information viendra plus tard. Vous pouvez en savoir plus sur la refonte iOS et la reconstruction d’arrière-plan coordonnée dans WIRED.

Parallèlement à la refonte de l'application, nous avons également élaboré ce que nous appelons les normes de conception de produits de Pinterest, qui incluent:

Système — Formes, typographie, couleurs, grilles
Structure - La disposition des composants
Environnement - Tous les petits morceaux du monde que nous concevons

Pendant les neuf mois qui ont suivi, nous avons travaillé en étroite collaboration avec l’ingénierie pour construire chaque composant, et nous avons apporté de nombreuses modifications et ajustements au cours du processus. C’est un effort de collaboration incroyable qui a permis de s’assurer que tout ce que nous construisons ensemble respecte non seulement nos objectifs de conception, mais qu’il est réutilisable et utile pour toutes les autres équipes d’ingénierie produit de Pinterest.

Vous trouverez ci-dessous quelques exemples de la manière dont nos nouvelles normes de conception ont pris forme à travers Pinterest.

L'équipe épique qui a rendu cela possible

Pratiquement toute l'équipe de conception de produits chez Pinterest a participé à la vérification et à l'exécution du nouveau système de conception.

Nous avons également eu une petite équipe de concepteurs de crack (Annie Teng, Jay Marsh, Kimberly Fellman, Linus Wahlstedt, Long Cheng, Patrik Goethe, Rick Chatas, Susan Kare, Tom Watson et Woosung Kang) qui ont travaillé en étroite collaboration avec moi et nos ingénieurs parcourez ensemble les décisions de conception, pour trouver les bonnes transitions et courbes, pour prototyper différents gestes, etc. C'était vraiment la meilleure partie du processus. Travailler avec toutes les équipes en intégrant les retours de plusieurs points de vue (un processus connu sous le nom de «tricot» chez Pinterest) a rendu les résultats plus forts de manière exponentielle. Nous nous sommes aussi beaucoup amusés.

Enfin, j'ai travaillé en étroite collaboration avec l'équipe de la marque Pinterest pour créer de nouvelles directives de marque reflétant ces mêmes principes de conception. Notre dernier marketing commence déjà à donner l'impression de partager la même voix avec notre produit.

Ensuite, nous aborderons la prochaine vague d’améliorations pour l’application iOS, ainsi que la refonte du site Web Pinterest et de l’application Android, et nous recherchons des concepteurs encore plus stellaires pour nous aider à y parvenir.

J'espère que vous êtes aussi enthousiastes que nous sur l'endroit où tout cela aboutira.

-

Merci à 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 Goodley, Seth Weisfeld, Steven Ramkumar, Steven Walling, Trevor Pels, Vincent Tian, ​​Vivian Qu, Wendy Lu, Yu Yang, Yuchen Liu, Yuliang Lin, Yunnan Wu pour avoir rendu cela possible.

-

Andreas