Cómo diseñamos Foursquare Swarm 5.0

Renovando nuestra aplicación Lifelog

En los últimos ocho meses, el equipo de Swarm ha trabajado arduamente en la investigación, creación de prototipos y construcción hacia Swarm 5.0. El martes lanzamos. (Vaya a descargar Swarm 5.0 ahora.) Fue una gran empresa que involucró a mucha gente. El cofundador de Foursquare, Dennis Crowley, ya compartió por qué me hicieron estos cambios, lo que significa que puedo explicar qué, precisamente, estábamos haciendo todo este tiempo.

Como diseñador de productos que trabaja en Swarm, algunas de las piezas en las que trabajé específicamente para 5.0 incluyeron simplificar la arquitectura de la información, actualizar nuestra guía de estilo interna, rediseñar la pantalla de inicio y el perfil. Más sobre todo eso a continuación.

Empezando

Nuestra primera prioridad fue la simplificación. Sabíamos que Swarm tenía muchas de las piezas correctas, pero es posible que no se hayan organizado de la manera más intuitiva. El plan era hacer algunos cambios y luego probarlos con consumidores reales en tiempo real, y aprender y aprovechar estos comentarios.

Una de las conclusiones más tempranas e inmediatas de la investigación de usuarios fue que escuchamos que el lenguaje visual de Swarm era más joven que nuestra demostración principal de exploradores urbanos, de 25 a 45 años. Así que, además de la simplificación, sabíamos que ahora debíamos centrarnos en cómo hacer que Swarm se sienta moderno.

Algunas ideas de bocetos tempranos

Nos pusimos a trabajar en la producción de una serie de ideas diferentes, que surgieron en forma de bocetos, estructuras alámbricas e iteraciones de diseño de baja fidelidad. Estábamos evaluando constantemente, ya sea imprimiendo cosas y colgándolas en una pared o construyendo prototipos estáticos rápidos.

Después de numerosas iteraciones, era hora de compartir una vez más con personas fuera de los muros Cuadrangulares. Llevamos a cabo nuevas rondas de investigación de usuarios, que nos hicieron saber que a los participantes les gustó que hayamos eliminado gran parte de la complejidad de la aplicación.

La aplicación final de Chrome

A estos grupos también les encantó el nuevo diseño de vida (vea la publicación de Dennis para obtener más información sobre este tema), que ponemos al frente y al centro, y la función de búsqueda universal, que ahora se encuentra en un lugar destacado en la parte superior de la pantalla. Estaba claro que estábamos en el camino correcto.

Actualizando nuestra guía de estilo interna

Swarm siempre ha tenido una excelente base de diseño visual y no queríamos perder eso al pensar en 5.0 y más allá.

Tipografía, colores y símbolos de croquis en nuestra guía de estilo interna

En cambio, decidimos establecer una guía de estilo robusta que nos ayudó a adoptar la arquitectura de información actualizada. Es muy importante mantener al equipo de diseño en la misma página durante todo el proceso de iteración, por lo que creé una guía de estilo de vida que incluía estilos y componentes reutilizables que todos podríamos compartir.

Íconos en nuestra guía de estilo interna

Esto fue un poco difícil de comenzar, principalmente porque no sabíamos exactamente cuál sería la dirección visual completa de Swarm 5.0, pero sabía que queríamos simplificar el lenguaje. También sabíamos que esta guía de estilo evolucionaría con el tiempo (que lo ha hecho) a medida que continuamos desarrollando las características.

Una vez que tuvimos algunas de las piezas principales en su lugar, las cosas comenzaron a rodar.

Siguiente: rediseñando la pantalla de inicio

La pantalla de inicio rediseñada

Como mencioné, sabíamos que queríamos mostrar los registros de entrada de un usuario de una manera muy prominente para crear un registro de vida personal. Exploramos múltiples iteraciones de la pantalla de inicio. Desarrollamos instrucciones de diseño que abarcaban toda la gama, desde bastante segura hasta loca. Queríamos considerar todo el espectro y agotar todas las ideas.

Seguimos volviendo a la idea de una sola línea que conecta todos los registros de un usuario, y eso es lo que ves en la aplicación ahora. Conceptualmente, nos gustó la idea de que la línea vertical ilustra fácilmente los lugares a los que va. Se eleva hasta el foco de Swarm 5.0, que consiste en registrar vidas y recordar donde quiera que vaya.

Tarjeta de vista previa de la página de inicio y mapa

El mapa en la pantalla de inicio era un hecho: sabíamos que el mapa, que muestra cada registro de un usuario, siempre iba a ser destacado e interactivo.

Actualización de los dos feeds dinámicos de Swarm

Una vez que decidimos simplificar el lenguaje visual de Swarm, decidimos hacer que la actualización de las fuentes dinámicas existentes en Swarm sea nuestra siguiente prioridad. Como estábamos elevando el historial de check-in a la página de inicio de la aplicación (en lugar de ser una subvista en su propio perfil), las celdas de alimentación de check-in debían coincidir estrechamente con el aspecto de las celdas de check-in de sus amigos. Es decir, la pantalla de inicio (pestaña Línea de tiempo) debería sentirse muy similar a la pestaña Amigos, ya que ambos resaltan los registros. Esto fue difícil por algunas razones.

Comparaciones de celdas de alimentación de check-in de las pestañas Timeline y Friends
  1. Queríamos conectar íconos de categoría en la pantalla de inicio para crear líneas verticales, lo que crea una conexión entre los lugares que visita. Esto fue difícil porque necesitábamos una solución que funcionara con los numerosos tipos de células. Terminamos usando una gran cantidad de relleno a la izquierda del check-in para permitir que una línea vertical vaya directamente hacia abajo de la pantalla.
  2. Estas celdas también tuvieron que articular claramente que puedes confirmar o negar si has estado o no en un lugar. Para dar cuenta de esto, creamos visitas grises (sin confirmar) que se muestran en la línea de tiempo. Estos se destacan a propósito, por lo que puede confirmar o negar rápidamente que estuvo en ese lugar específico, y luego volver a explorar el mundo.
  3. Además, no desea ver su propio avatar repetido varias veces en la pestaña Línea de tiempo, por lo que teníamos que descubrir cómo hacer que la pestaña Línea de tiempo se sintiera similar en peso a la pestaña Alimentación social. Utilizamos un ícono de categoría dentro de un círculo en su pestaña Línea de tiempo, lo que ayudó con la consistencia entre pestañas.

Rediseñando el perfil

Una frase que se dijo con bastante frecuencia fue que el perfil de una persona debería capturar el registro vital desde una vista de 10,000 pies.

En 5.0, el perfil necesitaba resaltar las estadísticas y los elementos más importantes. Nuevamente, el mapa es una característica superior; necesitaba tener un amplio espacio. También sabíamos (anecdóticamente) que a las personas ya les encantaba compartir sus mapas en Facebook y Twitter. Decidimos que mostrar un mapa nativo grande con alfileres (puntos) de color naranja en la parte superior del perfil era la forma más clara de resaltar los lugares en los que has estado. Nos decidimos por un diseño similar a una tarjeta para algunas de las estadísticas que pensamos que deberían interesarle más.

Algunos estados diferentes en los que podría estar un perfil

Otro desafío de la página de perfil fue determinar qué estadísticas debían ser las más destacadas. Al final, acordamos que los registros, lugares, categorías (con su propia arquitectura y elementos de diseño), rayas y alcaldes fueron las ideas más convincentes basadas en los comentarios de los nuevos y antiguos usuarios de Swarm.

Dos consejos clave de diseño

Los grandes lanzamientos no suceden sin un par de grandes conclusiones. Aquí están los míos:

  1. Involucre a los ingenieros al principio. Algo en lo que sigo esforzándome para ser mejor es involucrar a los ingenieros antes en el proceso de diseño. A veces, las decisiones se tomaban rápidamente y estoy seguro de que podría haber ahorrado algo de tiempo examinando los primeros diseños de alguien con un poco más de conocimiento técnico para decirme si mi idea es demasiado loca y potencialmente fuera del alcance del proyecto. . A veces luché con esto principalmente debido a la velocidad de movimiento de todo el equipo. A veces, una pequeña decisión de diseño puede tener un gran impacto técnico. Depende de mí seguir involucrando a los ingenieros antes para resolverlo.
  2. Comparta temprano, comparta a menudo y clasifique el desorden. Me digo esto al entrar en cada proyecto y / o función en la que trabajo (aunque no siempre soy bueno en eso). Hay muchas personas y equipos que desean ser incluidos en las primeras instrucciones de diseño, pero no siempre es útil la retroalimentación. A veces es difícil cortar algo de eso para obtener una opinión clara y significativa. Siempre es bueno recordar que, al igual que es importante compartir, es su trabajo como diseñador recibir todos los comentarios y utilizarlos para tomar decisiones informadas.

Por último

Mirando hacia atrás en toda la planificación, creación de prototipos, investigación, diseño y construcción, el lanzamiento de Swarm 5.0 ha sido una gran hazaña. El equipo de ingeniería reescribió muchas vistas principales en Swarm y casi todas las pantallas cambiaron de alguna manera. Más de 20 personas se dedicaron a trabajar en el equipo de Swarm durante los últimos ocho meses, incluidos Sam Brown y Jack Osborne específicamente, quienes ayudaron en el trabajo de diseño.

Entonces, ¿qué estás esperando? Descargar Swarm 5.0 ahora. Esperamos que os guste.