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:

Foursquare message MisterPedro.com   Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

“- ¡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.

Foursquare message 2 MisterPedro.com   Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

“-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.

 

1 Logotipo Swarm MisterPedro.com   Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

Logotipo final de Swarm

 

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.

Diseño UI de Courtney Christopher y Nicole Formica MisterPedro.com   Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

Diseño UI de Courtney Christopher y Nicole Formica

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.

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

Diseño de Swarm: De izquierda a derecha Zack Davenport, David Ricart, Mike McVicar

4 Ideas para la aplicación  Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

Izquierda: primeras ideas para la aplicación
Derecha: Mi checklist al inicio del proceso de branding

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.

Inspiración visual recolectado en un tablero de Pinterest  Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

Diseño de Swarm: Inspiración visual recolectada en un tablero de Pinterest

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

Izquierda a derecha, Zack Davenport, Jon Steinback, Sam Brown, Courtney Christopher, Sean Salmon en las oficinas centrales de Red Antler

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

Tablero definitivo para el diseño de Swarm

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

Tablero definitivo para el diseño de Swarm

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

160 abejas un esfuerzo colaborativo entre Mike McMicar de Red Andler y Zack Davenport de Foursquare   Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

160 abejas, un esfuerzo colaborativo entre Mike McMicar, de Red Andler y Zack Davenport, de Foursquare

 

9 Una seleccion de las abejas diseñadas por Mike McMicar de Red Andler y Zack Davenport de Foursquare   Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

Una seleccion de las abejas diseñadas por Mike McMicar, de Red Andler y Zack Davenport, de Foursquare

 

10 Una seleccion de las abejas diseñadas por Mike McMicar de Red Andler y Zack Davenport de Foursquare   Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

11 Una seleccion de las abejas diseñadas por Mike McMicar de Red Andler y Zack Davenport de Foursquare   Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

Desarrollo del Wordmark

Seleccion de wordmarks por Mike McVicar David Ricart y Zack Davenport  Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

Seleccion de wordmarks por Mike McVicar, David Ricart, y Zack Davenport

13 Seleccion de wordmarks por Mike McVicar David Ricart y Zack Davenport  Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

Seleccion de wordmarks por Mike McVicar, David Ricart, y Zack Davenport

Presentacion a Dennis Crowley y equipo de Foursquare  Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

Presentacion a Dennis Crowley y equipo de Foursquare

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

Logo de Swarm alineado

Parte III: Finalizando el sistema

 

16 Wordmark y logotipo final de Swarm  Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

Wordmark y logotipo final de Swarm

17 Wordmark y logotipo final de Swarm  Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

Wordmark y logotipo final de Swarm

18 Añadiendo el primer patrón de vuelo para los anuncios en Internet y los banners  Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

Añadiendo el primer patrón de vuelo para los anuncios en Internet y los banners

19 Icono final de la aplicación  Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

Icono final de la aplicación

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.

20 Versiones iniciales del botón de check in  Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

Versiones iniciales del botón de check-in. Queríamos que pareciera ligero para representar la rapidez de la acción

21 Conjunto final de iconografía  Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

Conjunto final de iconografía

22 Iconografía final de Swarm  Proceso creativo de Foursquare para llegar al nuevo diseño de Swarm

Iconografía final de Swarm y su posicionamiento en la aplicación. Diseño de Interfaz de Usuario por Courtney Christopher y Nicole Formica

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.

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

Stickers de Swarm

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

¡Los quiero todos!

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

 

 

 

 

 

 

Autor: Mister Pedro

Mister Pedro es Pedro García Navarro. Un apasionado del Geomarketing, WordPress, la tecnología y las redes sociales. Si quieres contactar con él, puedes escribirle a hola@misterpedro.com

Compartir esta publicación en

Trackbacks/Pingbacks

  1. ¡Vuelven los badges y alcaldías de Foursquare! - MisterPedro.com: Foursquare, Geomarketing, WordPress, Tecnologia, Redes Sociales, Aplicaciones Moviles y mas - […] en el antiguo foursquare piensan recuperar? Creo que nuestro diseñador favorito de Foursquare, Zack Davenport(@mrdavenport), que es quien normalmente …

Comentarios (puedes iniciar sesión con tus redes sociales)