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.

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

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

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.

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

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

Tablero definitivo para el 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

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

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

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

Presentacion a Dennis Crowley y equipo de Foursquare

Logo de Swarm alineado
Parte III: Finalizando el sistema

Wordmark y logotipo final de Swarm

Wordmark y logotipo final de Swarm

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

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.

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

Conjunto final de iconografía

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.

Stickers 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
Trackbacks/Pingbacks