Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

 

La cuenta de Twitter de Zack Davenport (@mrdavenport), diseñador gráfico en Foursquare, está resultando una cuenta muy interesante para seguir, si tienes curiosidad por saber qué pasa en Foursquare. Primero publicó un tweet dando un anticipo de cómo van a ser las nuevas pegatinas de Foursquare para los establecimientos. Y ahora, de nuevo por medio de un tweet, nos revela una entrada muy detallada en su blog donde cuenta todo el proceso creativo por el que pasó Foursquare para llegar al nuevo diseño de Swarm. Y también ha publicado un vídeo en el que ha contado con todo detalle este proceso, en un evento de diseñadores de Nueva York.

Me consta que el nuevo diseño tiene muchos detractores, y de hecho es raro ver el naranja como color predominante en una aplicación móvil pero, en cualquier caso, resulta muy interesante ver todos los detalles del proceso para entenderlo, te guste o no el nuevo diseño.

Resulta curioso que hace pocos días Business Insider publicara un artículo contando como tomó Foursquare la atrevida decisión de partir su producto en dos, y cómo le ha ido a ambas aplicaciones desde entonces y que ahora nos encontremos con este otro artículo. De nuevo, nos vamos enterando de como se gestó esa gran revolución que llevó a Foursquare su aplicación móvil con una historia de cinco años, en dos aplicaciones distintas, totalmente reinventadas: Foursquare y Swarm. En este caso, vemos la perspectiva del diseño gráfico

A partir de aquí tenéis el vídeo y el artículo completo traducido. Espero que os resulte tan interesante como a mí.

---

 

Vídeo: Cómo se hizo el diseño de Swarm (en inglés)

---

 

 Swarm, diseño visual e imagen de marca

Primero, algo de contexto

Desde 2009, Foursquare ha tenido dos casos de uso principales: compartir tu localización con amigos por medio de check-ins, y buscar qué hay bueno en los sitios que tienes cerca.

Con toda la funcionalidad que tiene, las preguntas acerca de Foursquare, solían requerir respuestas bastante largas:

“- ¡Hey! ¿Cómo utilizo Foursquare?”

- Mira, puedes usarlo para hacer check-in en sitios, compartir tu localización con amigos… Ah, también está genial para encontrar restaurantes cercanos, y saber más sobre el bar en el que estás”

Normalmente, las personas que estaban interesadas en la funcionalidad de búsqueda personalizada, no querían usar Foursquare para hacer check-in o compartir su localización.

“-Eso está muy bien, pero no me siento cómodo compartiendo mi localización”

Hablamos con muchos usuarios de Foursquare, y siempre escuchamos que abrían la aplicación para buscar, o para hacer check-in, pero raramente las dos cosas al mismo tiempo. Por eso decidimos hacer un movimiento arriesgado para mejorar la experiencia de ambos casos de uso.

Después de una serie de alternativas, decidimos que era más natural separar nuestros dos casos de uso en dos aplicaciones separadas. Una dedicada a compartir tu localiación y la otra para búsquedas locales personalizadas. Esto implicaba sacar la funcionalidad de check-in fuera de Foursquare, a una segunda aplicación, Swarm, dejando sitio en Foursquare para centrarse al 100% en las búsquedas locales y en descubrir sitios.

 

 

Te presento a Swarm

Swarm es la forma más rápida y más sencilla de mantener el contacto y encontrarte con tus amigos. Como una evolución de la experiencia original de Foursquare, con Swarm con Swarm puedes ver de un plumazo donde están todos tus amigos y lo que están haciendo, lo que hace más fácil permanecer en contacto on-line y también quedar con ellos en la vida real.

El proceso de Branding

Trabajamos muy de cerca con nuestros amigos de Red Antler a lo largo del proceso de branding tanto de Swarm como de Foursquare, y llegué a llamar casa a sus oficinas centrales durante el mes y pico en el que trabajamos juntos.

Durante el proceso tuve la oportunidad única de trabajar de cerca con el equipo de Swarm en el diseño visual de la aplicación, mientras que trabaja simultáneamente con Red Antler en el branding de la aplicación.

Parte I: En busca de la inspiración

Queríamos que Swarm pareciera rápido, divertido y evocara descubrimiento, así que necesitábamos una identidad que encajara con esta personalidad. Empezamos el proceso recolectando digitalmente referencias e imágenes por medio de un tablero Pinterest y a continuación imprimiendo físicamente, cortando y recolocando las imágenes en un tablero de ideas en la pared.

Parte II: Ideando e iterando

Una vez que completamos el tablero que representaba visualmente la personalidad que queríamos representar, empezamos a hacer bocetos de ideas para el logotipo.

Nuestra identidad anterior de Foursquare, no tenía un logotipo oficial (aunque había muchos extra oficiales) así que era algo en lo que estábamos muy interesados en incorporar en el las marcas del nuevo Foursquare y de Swarm.

Desarrollo del logo

 

 

Desarrollo del Wordmark

Parte III: Finalizando el sistema

 

Diseño visual de Swarm

Mientras trabajaba con Red Antler en el branding, Courtney Christopher lideraba el esfuerzo de desarrollo de la interfaz de usuario en la aplicación. Eventualmente acabamos colaborando cuando empezamos a implementar más elementos visuales en Swarm. Fue la bomba desarrollar el estilo general de las pegatinas de Swarm, la iconografía y otros diseños visuales.

Pegatinas (stickers)

Cuando construimos Foursquare in 2009, las mecánicas de juego se añadieron para ayudar a los usuarios a aprender a usar Foursquare y para hacer las experiencias en el mundo real más divertidas. Los usuarios recibían badges y puntos por explorar sitios nuevos y alcaldías por su lealtad como clientes a sus sitios favoritos.

Según creció nuestra base de usuarios, los elementos de juego empezaron a dejar de tener sentido. Las alcaldías eran geniales cuando había poca gente, pero según creció nuestra comunidad, conseguir una corona de alcalde se convirtió en casi imposible. Los badges eran divertidos de coleccionar, pero muchos de nuestros usuarios históricos habían dejado de desbloquear badges hacía tiempo, con lo cual no había un incentivo adicional para hacer check-in.

Así que, con Swarm decidimos dar a nuestros elementos de gamificación un repaso que le hacía mucha falta. Ahora, la gente puede desbloquear stickers para aplicarlos a sus check-ins para expresar cómo se sienten y lo que están haciendo. Más que competir con el resto del mundo, las alcaldías de Swarm se ganan derrotando a tus amigos en una categoría particular de sitios. Si has hecho check-in en el gimnasio más que cualquiera de tus amigos, se te concederá una pegatina con el biceps de oro, para que puedas fardar cuando quieras.

Ser parte del branding y el diseño visual de Swarm ha sido una increíble oportunidad y una experiencia de aprendizaje. No sólo he sido testigo de la increíble cantidad de trabajo que lleva construir una aplicación desde cero, también he conseguido echar un vistazo detrás del telón al proceso de branding de Red Antler.

Para Swarm, la identidad visual recien estrenada es sólo el principio. Síguenos mientras seguimos iterando nuestros mecanismos de juego y otra funcionalidades para hacer que mantener el contacto y encontrarte con tus amigos sea todavía más fácil

 

Fuente: Swarm: Branding and Visual Design