Rediseñando Pinterest, bloque por bloque

Cuando era un niño que crecía en Suecia, mi habitación estaba llena de juguetes clásicos de madera diseñados por BRIO. Recuerdo estar fascinado con los diseños simples, los colores brillantes y la mezcla de formas geométricas abstractas y formas orgánicas. La forma en que se veían y se movían te invitaba a jugar con ellos.

El sistema de trenes de madera fue especialmente genial. Podrías encajar las piezas de la pista en círculos, rectas, curvas en S, lo que quisieras. Pero tenía que ser cuidadoso acerca de cómo creó sus rutas: había una lógica sobre cómo encajaban las piezas y no podía forzar la geometría.

Unos veinte años después, mis propios hijos juegan con estas mismas reliquias de mi infancia. Puedo escucharlos golpear contra el piso de madera de su habitación en este momento. Los diseños perdurables se han mantenido durante años y generaciones de cambio.

Esta maravillosa simplicidad evidente de BRIO estaba en mi mente la primavera pasada, cuando comencé a centrarme en un gran problema que se había desarrollado con el diseño de Pinterest. En realidad, 3 grandes problemas.

  1. Nuestra IU era inconsistente
  2. Nuestro sistema visual estaba rancio
  3. Nuestro marketing se sintió desconectado de nuestro producto.

A lo largo de los años, los diseños de nuestro sitio web, aplicaciones y marketing habían comenzado a desviarse, por lo que ya no sentían que tenían la misma personalidad. También se agregaron varias características nuevas sin una visión clara de cómo encajan en el diseño general, por lo que la interfaz comenzó a sentirse desordenada y difícil de entender. No había una jerarquía visual o un sistema para ayudarlo a comprender lo que era importante cuando miraba una página determinada. Como resultado, todas las ideas inspiradoras que la gente guarda en Pinterest, con mucho, la parte más importante de nuestra experiencia, se estaban perdiendo.

Resulta que es muy difícil diseñar cosas consistentes y hermosas a escala.

Una cuestión de principios

La experiencia de Pinterest en su conjunto tenía una gran necesidad de simplificar y unificar. Y si íbamos a hacer eso, necesitábamos identificar algunos principios básicos de diseño para nosotros mismos.

Me retiré a un rincón oscuro del sótano de Pinterest y pasé las siguientes semanas jugando con diseños. Ni siquiera estaba seguro de lo que estaba haciendo al principio, básicamente era como mi propia versión adulta de golpear bloques juntos. Empecé a reflexionar sobre preguntas como: ¿Por qué la gente ama Pinterest? ¿Qué hace que nuestro producto sea único? ¿Cuál es nuestra personalidad? ¿De qué se trata todo esto?

Cuanto más lo pensaba, más me daba cuenta de que la esencia de Pinterest se parecía mucho a la querida colección de juguetes BRIO de mi familia. Ambos te animan a jugar con diferentes opciones, conectar piezas y crear tu propio mundo. Puede comenzar con sus propios objetivos y proyectos en mente, o puede inspirarse con lo que otra persona está haciendo y construir a partir de eso. Salta y comienza a jugar de inmediato, detente cuando quieras, luego regresa y continúa donde lo dejaste.

Impulsando aún más el pensamiento, las cualidades esenciales que Pinterest y BRIO compartieron se redujeron a 3 principios simples. Estos describieron las mejores cualidades de Pinterest hoy, y sentaron las bases para dónde queríamos llevar el producto en el futuro.

-

  1. Lúcido

Es intuitivo, no aprendido
 Entiendes cómo funcionan las cosas sin ninguna explicación directa.

Hace que el usuario se sienta poderoso
Nada te hace sentir incómodo o no puedes confiar en el sistema. El sistema le proporciona los componentes correctos y le pregunta qué hacer a continuación.

Hace que el contenido sepa mejor
El marco es totalmente transparente y oculto. No lo notas hasta que interactúas con él. Puedes decidir qué quieres que sea, en lugar de que te lo obliguemos.

2. animado

Es colorido
La personalidad es audaz y se destaca.

Es visualmente sensible
La experiencia interactúa de forma física.

Es inesperado
La experiencia es lúdica y divertida, pero nunca abrumadora.

3. irrompible

Está construido para la exploración.
Al igual que un juguete para niños, debe probarlo solo para ver qué sucederá. Cuanto más investigas, más rápido aprendes y más obtienes a cambio.

Es imposible tocar mal
Todo está diseñado para ayudarlo a navegar fácilmente y hacer exactamente lo que tenía en mente.

Es reversible
Si accidentalmente hace algo que no produce los resultados que estaba buscando, es obvio cómo corregirlo.

-

Una vez que bloqueamos estos 3 principios, el siguiente paso fue traducirlos en algo tangible que podría ser la base de todo lo que construimos para avanzar.

Los basicos

Formas: utilizamos formas básicas y fáciles de tocar con las que las personas entienden y desean interactuar de forma natural. Las esquinas son redondeadas para que se sientan más accesibles.

Colores: soy un gran admirador de esquemas de colores análogos. Se sienten muy naturales y reflejan una sensación de calma. Cuando combina algunos esquemas de color análogos diferentes que originalmente se basaron en algunos colores complementarios dados, el resultado es muy interesante e inesperado.

Jerarquía: todo es extremadamente jerárquico, por lo que siempre está claro qué es lo más importante. Mientras diseñamos nos preguntamos: ¿qué es lo más importante que alguien entienda aquí? ¿Qué podemos eliminar para hacer las cosas aún más obvias?

Espacio en blanco: en el antiguo diseño de Pinterest, la atención se centraba en los contenedores que rodeaban el contenido de las personas, que dominaban el contenido en sí. Todo lo que viste fueron muchas líneas, degradados, sombras de gris. No había espacio para respirar. La introducción del espacio en blanco brinda una separación natural entre los elementos sin agregar más ruido visual. El resultado es equilibrado y estructurado, y la cantidad de espacios en blanco agrega personalidad e impacto.

Las primeras exploraciones e ideas.

Queríamos ver qué pasaría si simplemente quitáramos todos los contenedores de la interfaz de usuario. ¿Volvería el foco a los objetos mismos o la experiencia se desmoronaría por completo?

Resulta que la cuadrícula resultante sin contenedores se sintió genial, y el énfasis finalmente regresó a las ideas que la gente estaba guardando en Pinterest. No perdimos los contenedores por completo, ya que ayudan a aclarar qué información va con qué imagen. En cambio, esperamos mostrar el contenedor hasta que tenga la curiosidad de tocar. De esa manera, la interfaz le enseña visualmente cómo se conecta y agrupa la información en nuestro sistema. Solo necesita experimentar esta interacción una vez para comprender cómo se construye un Pin.

Diseñando un nuevo conjunto de estándares

Después de jugar con los diseños y las interacciones durante un buen par de meses, el equipo y yo finalmente conseguimos ubicar los elementos donde sentimos que nuestros 3 principios de diseño de productos (lúcidos, animados, irrompibles) estaban representados. Estábamos listos para poner a prueba nuestros principios y sistema de diseño recién establecidos.

Queríamos comenzar con un sistema contenido, por lo que decidimos abordar nuestra aplicación iOS primero. Para nuestro primer paso, nos enfocamos en el diseño visual: la reelaboración de la arquitectura de la información vendrá más tarde. Puede leer todo sobre el rediseño de iOS y la reconstrucción coordinada de backend en WIRED.

Junto con el rediseño de la aplicación, también creamos lo que llamamos Estándares de Diseño de Producto de Pinterest, que incluye:

Sistema: formas, tipografía, colores, cuadrículas
Estructura - La disposición de los componentes.
Medio ambiente: todas las pequeñas piezas del mundo que estamos diseñando

Pasamos los siguientes 9 meses trabajando estrechamente con la ingeniería para construir cada componente, e hicimos muchas modificaciones y ajustes en el camino. Ha sido un esfuerzo increíble y colaborativo asegurar que todo lo que construimos juntos no solo cumpla con nuestros objetivos de diseño, sino que sea reutilizable y valioso para todos los demás equipos de ingeniería de productos en Pinterest.

A continuación se detallan algunas de las formas en que nuestros nuevos estándares de diseño han tomado forma en Pinterest.

El equipo épico que lo hizo posible.

Casi todo el equipo de diseño de productos en Pinterest estuvo involucrado en la investigación y ejecución del nuevo sistema de diseño.

También tuvimos un pequeño equipo de diseñadores de crack (Annie Teng, Jay Marsh, Kimberly Fellman, Linus Wahlstedt, Long Cheng, Patrik Goethe, Rick Chatas, Susan Kare, Tom Watson, Woosung Kang) que trabajaron estrechamente conmigo y nuestros increíbles ingenieros para iterar juntos en las decisiones de diseño, encontrar las transiciones y curvas correctas, crear prototipos de diferentes gestos, y así sucesivamente. Esta fue realmente la mejor parte del proceso. Trabajar en equipos, incorporando comentarios desde múltiples perspectivas (un proceso conocido en Pinterest como "tejido") hizo que los resultados fueran exponencialmente más fuertes. También nos divertimos mucho.

Y por último, trabajé estrechamente con el equipo de marca de Pinterest para crear nuevas pautas de marca que reflejen estos mismos principios de diseño. Nuestro último marketing ya está comenzando a parecer que comparte la misma voz con nuestro producto.

A continuación, abordaremos la próxima ola de mejoras para la aplicación de iOS, junto con el rediseño del sitio web de Pinterest y la aplicación de Android, y estamos buscando aún más diseñadores estelares para ayudar a que esto suceda.

Espero que estés tan emocionado como nosotros acerca de dónde terminará todo.

-

Gracias a 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 por hacer que esto suceda.

-

Andreas