Este artículo habla de nuestra app de running anterior, que ya no existe.
Cómo hicimos Gyroscope Running
Nombre en clave Quicksilver: nuestra primera app de iPhone en React Native
Hace poco publicamos una app experimental para iPhone llamada Running by Gyroscope. Te deja armar imágenes bonitas para compartir tu última carrera. Esta es la historia de cómo diseñamos la app, las herramientas que usamos para construirla y lo que aprendimos en el camino.
La app funciona con dos de nuestras integraciones más queridas, Runkeeper y Strava. Ellas hacen un trabajo excelente registrando tu actividad. Después de una carrera, Gyroscope sincroniza los datos crudos de forma automática. Y ahí empieza la parte divertida: eliges la historia que quieres contar.
¿Un mapa satelital de tu ruta con vistas? ¿Quizá la foto que sacaste de ese atardecer increíble? ¿O el hecho de que equivalía a 7 donas? Tal vez tu ritmo cardíaco estuvo altísimo y quieres destacarlo. Tú eliges.
Capítulo 1
Marzo de 2015
Acabábamos de lanzar el sitio de Gyroscope. El sistema andaba muy bien. Mis carreras se sincronizaban al instante y aparecían en aprilzero.com, con todos mis datos e incluso cosas como la música que había escuchado en Spotify.
Habíamos construido un panel precioso, pero la única forma de compartirlo era mandarle a alguien el sitio entero.
Los siguientes retos grandes eran el móvil y compartir.
Una tarde de marzo salí a correr hasta Twin Peaks. Era un día despejado y hermoso, con los dos puentes visibles a lo lejos.
Mientras miraba la ciudad, quise una forma de compartir ese momento. Había registrado y medido todo: el desnivel, mi ritmo cardíaco, la ruta que hice para llegar, la música que escuchaba y lo que estaba viendo (con una foto), pero no había manera de volver a juntarlo todo en una experiencia.
Me imaginé una vista de realidad aumentada de mi ruta subiendo el cerro. Se me ocurrió la idea de una tarjeta para compartir, con mis constantes y mi ubicación encima de la foto que había sacado. Toda esa información ya estaba en Gyroscope: solo faltaba diseñarla bien.
Decidí que sería una buena foto para Instagram y volví corriendo hasta mi casa con ganas de probarlo.
Capítulo 2
Fíngelo hasta que sea real
Apenas llegué a casa abrí Photoshop y arrastré algunas de las fotos que había sacado. Le agregué los datos del mapa de mi carrera y los combiné con algunas cifras para armar una infografía básica. Algún día quizá tengamos una herramienta automática linda, pero por ahora era más rápido hacerla desde cero.
Puse los datos básicos, como la ciudad y la distancia, en una esquina. Saqué el color del texto (turquesa) de la propia foto y agregué un marcador en el punto donde la había tomado. Unas horas después, la foto que publiqué estaba llena de likes. La gente preguntaba cómo la había hecho.
Decidí seguir con el experimento: hacer imágenes a mano después de cada carrera y probar diseños nuevos.
Durante las semanas siguientes seguí armando imágenes nuevas para compartir después de cada carrera. Jugué con distintos estilos de mapa y con agregar detalles como la música, el clima o el ritmo cardíaco. Esos toques chicos le daban más profundidad y más dimensiones a la carrera, y a la gente parecía gustarle.
Empecé a esperar con ganas ese ejercicio creativo de armar y compartir una tarjeta después de correr. Sumado a las endorfinas, terminó volviéndose bastante adictivo. Había muchas capas nuevas de creatividad y de narración: revisar las fotos que había sacado, ver distintas vistas de la ruta en el mapa, elegir colores de acento bonitos, etc.
Juntaba varias de mis cosas favoritas: la fotografía, correr y llamar la atención.
Había algo en agregarle unos datos y un logo a la foto que la transformaba: dejaba de parecer una foto y pasaba a ser diseño gráfico o incluso arte. La composición y la forma de todos los elementos podían trabajar juntas para crear algo mucho mayor que la suma de sus partes.
Incluso de viaje disfrutaba haciéndolas. Las tarjetas eran una buena forma de capturar los distintos lugares que visitaba, como una especie de postal.
Prender y apagar datos como la música o los mapas contaba una historia distinta con el mismo contenido. Por ejemplo, en una carrera más intensa quizá agregaba mi ritmo cardíaco. Si era un día muy caluroso o muy frío, el clima podía ser un dato interesante. Si había un atardecer o una vista preciosa, solía quedar buenísimo de fondo. Si la geografía era llamativa, la vista satelital la resaltaba.
Después de unos meses con este experimento, me di cuenta de que sería un producto bastante increíble. Lo quería para mí, y mucha gente había mostrado interés en usarlo también.
Empecé a bocetar algunos conceptos y a reunir mis experimentos en unos cuantos diseños, los mejores.
Capítulo 3
Diseñar la app
Cuando empiezo un diseño nuevo me gusta hacer una lista de objetivos. Elegir bien las metas suele ser más importante y más difícil que lograr que algo se vea bonito. Para Quicksilver había unos principios guía que me parecían importantes. Iban a definir cada píxel y cada línea de código que escribiéramos.
- Conseguir la mayor cantidad de likes posible
- Ver tu última carrera al instante
- Que personalizar sea divertido
Diseñar para que la gente reaccione
Para conseguir la mayor cantidad de likes posible teníamos que dar con el toque visual, el foco y el contexto justos para que le llegara a los demás. Entender a quién le hablábamos, al público en general y no solo a otros atletas, ayudó a darle forma a todo y fue una gran diferencia con lo que hacían los demás.
Casi todas las apps tenían datos detallados para mejorar el rendimiento. Pero para un amigo que no corre, esa información entusiasma bastante menos. Seguramente prefiera ver que equivalía a 5 donas y mandarte un pulgar arriba. O una foto bonita desde la cima del cerro que subiste con tanto esfuerzo.
Intentamos que cada diseño fuera su propia marca, con un nombre y un icono propios. Era la función central de la app y tenía que ser muy intuitiva y divertida de usar.
Después de probar varias ideas, terminamos con los diseños en una lista larga abajo. Era muy satisfactorio ir pasando entre ellos y elegir uno.
Se sentía como filtros de Instagram para correr
Pantalla de inicio
Como la fotografía y el contenido de la gente eran una parte grande de la app, quería que eso se notara apenas la abrías.
Me puse a buscar fotos bonitas para usar de fondo. Mi amigo Adam, uno de los mejores fotógrafos que conozco, nos prestó con toda generosidad una de sus tomas del Mt. Tam.
En cuanto la puse en la app me enamoré. Tenía justo esa sensación de calma y naturaleza que le daba el tono correcto al resto de la app.
Una app aparte
Una de las decisiones de diseño más grandes fue hacer una app separada dedicada a correr. Quería ver la palabra “Running” en mi pantalla de inicio y entrar a mi contenido al instante.
A medida que sumáramos más cosas en el futuro, como ciclismo o natación, cada quien podría instalar solo lo que quisiera. Quería evitar llenarla de cosas y de niveles de navegación.
El feed de actividad
Casi todas las otras apps de running necesitan que el registro esté al frente, pero como nosotros no lo teníamos podíamos hacer que el contenido siempre mandara. Todo lo que no fueran las carreras recientes quedaba escondido en una barra lateral.
Jugamos con distintos estilos y metáforas para cada carrera. Podían ser tarjetas apiladas o un montón de mosaicos. Después de probar varios niveles de densidad de información, los más grandes terminaban ocupando demasiado espacio. Tras usar la app unos minutos me di cuenta de que estaba demasiado cerca y no tenía la vista general que quería. La vista del sitio web funcionaba bastante bien, así que terminamos reutilizando esas mismas barras, con color según el ritmo.
Probé poner la carrera más rápida y la más larga en el encabezado, para tenerlas siempre a mano sin bajar. Sería un desafío amistoso: cada vez que abriera la app tendría la oportunidad de romper mi propio récord. Y si alguien corrió un maratón o hizo algo impresionante, siempre lo tendría a la vista.
El contador de edad que sube todo el tiempo en el sitio era una función muy popular, así que agregamos un cronómetro parecido para marcar el tiempo desde tu última carrera. Cuanto más subiera ese número, más motivada estaría la gente, o eso esperábamos.
Capítulo 4
El contador de donas
Este verano trabajábamos desde la oficina de True Ventures en San Francisco. Un día alguien llevó un par de cajas de donas. Después del almuerzo, alguien, Phil Black si mal no recuerdo, las cortó en octavos y dijo que no contaba si solo comías pedacitos. Aunque yo sabía que eso no era científicamente cierto, empecé a probar los distintos sabores.
Ahí sentado, trabajando en una app de running y comiendo un cuarto de dona glaseada, me dio curiosidad cuánto tendría que correr esa noche para compensar el antojo. Después de googlear un rato descubrí que una dona genérica tiene unas 200 calorías, y que las calorías de una carrera son más o menos (peso × 0.75 × distancia).
Las carreras sin datos de mapa, como las de cinta o las que venían de Fitbit, nos estaban dando muchos dolores de cabeza. La app dependía de los mapas para todas las vistas, pero necesitábamos una alternativa más flexible.
Ahí sentado, haciendo las cuentas de mis distintas carreras, me di cuenta de 2 cosas: no tenía ni idea de cuántas donas había en la mayoría de mis carreras, y averiguarlo era bastante divertido.
Y así nació el contador de donas.
Haríamos unas cuentas para calcular un número aproximado de donas, desde una carrera corta de apenas 1 dona hasta una larguísima. Pasé el resto del día buscando fotos de stock de donas bonitas en distintas cantidades, del 1 al 6.
Capítulo 5
Pruebas beta
Cuando tuvimos una versión básica de la app andando, mandé invitaciones a los que más corrían en el sitio, gente con más de cien carreras registradas. Me sorprendió e impresionó ver que unos cuantos tenían miles y miles de carreras acumuladas en su cuenta.
A mí me gustaba correr, pero no estaba ni cerca de su nivel. Sus comentarios y sugerencias eran justo lo que necesitábamos para hacer un gran producto.
Al principio mandaba emails a mano. La gente respondía con errores o sugerencias y yo trataba de llevar la cuenta de lo que decía cada uno.
Después alguien sugirió armar un grupo de Facebook, algo que había hecho en otras pruebas beta y le había servido mucho. Creé un grupo privado nuevo y mandé el enlace a algunos de nuestros mejores testers. Con el tiempo creció a más de cien personas, muchas de las cuales corrían a diario y usaban la app.
No solo nos llegaron un montón de reportes de errores y sugerencias: algunos incluso empezaron a maquetar las cosas que querían.
Podíamos pensar funciones nuevas, lanzarlas a todo el grupo y verlas enseguida con contenido real.
Capítulo 6
Herramientas y trucos
En Gyroscope tenemos un gran equipo que trabajó durísimo para que esta app existiera (¡gracias Mahdi, Eric, Robbie!), pero también tuvimos mucha ayuda de afuera. Aquí van unos cuantos recursos y productos que nos parecieron valiosísimos y nos ahorraron un montón de tiempo de desarrollo.
React Native
Viniendo del mundo web, usar Javascript y un sistema de maquetación estilo CSS/Flexbox se sentía muy intuitivo. Yo había diseñado apps de iPhone antes, pero nunca había escrito código para una. Si React Native no existiera, habría tenido que esperar a que alguien más hiciera el desarrollo. Un proyecto paralelo como este probablemente nunca habría arrancado.
Brent Vatne, que fue uno de nuestros primeros beta testers, también colaboraba con React Native y nos ayudó muchísimo cuando nos trabábamos o teníamos dudas que todavía no estaban en la documentación. ¡Gracias Brent!
Desde que empezamos, React mejoró mucho. Cada versión nueva, desde la 0.3 más o menos hasta la 0.12 cuando lanzamos, mejoró el rendimiento y arregló problemas con los que veníamos peleando.
Todavía le falta (ojalá el rendimiento de las animaciones fuera mejor), pero avanza muy rápido. Al menos para nuestra aplicación, que es muy simple, cumplió y nos ayudó a movernos mucho más rápido de lo que habríamos podido de otra forma.
La recarga en vivo por red de React Native nos dejaba iterar rápido sobre ideas nuevas o hacer microajustes en pocos minutos. Ahora no me imagino tener que recompilar y esperar para ver los cambios.
Mapbox
Mapbox hace herramientas de mapas increíbles que usamos por todo el sitio. Su editor permite personalizar el estilo y el color. Lo usamos para crear varios estilos distintos, entre ellos este juego de teselas oscuro y minimalista.
Al principio jugamos con su implementación GL para iOS, pero nos dimos cuenta de que en realidad no queríamos que la gente pudiera mover ni acercar el mapa. Para mantenerlo simple decidimos reutilizar nuestra implementación web dentro de un webview, lo que nos dejó conservar el código que ya habíamos pasado meses probando y mejorando.
Imgix
Una de las funciones únicas de nuestra app es adaptar el estilo de la tarjeta a la foto. Imgix nos ayuda a analizar la paleta de colores para poner el texto y los demás elementos en colores que combinen.
También usamos Imgix para efectos especiales, como realzar y difuminar la imagen. Usar una solución en la nube para las fotos significa que hay algo de tiempo de preparación, porque el usuario tiene que subir la foto en vez de hacer todo en el teléfono, y a veces tarda un minuto en subir y volver a bajar la foto procesada, pero valía la pena por el tiempo que nos ahorra y por las funciones extra que ganamos.
Fabric, de Twitter
Empezamos a usar Fabric/Crashlytics para seguir los cierres inesperados. En los primeros días de la app se caía muchísimo. Con el tiempo arreglamos todos los fallos, pero igual seguí usando el panel para ver nuestros datos de uso.
Tenía pensado montar analítica, pero resultó que casi todo lo que necesitábamos ya estaba en ese panel. Lo que más me gustaba ver eran los usuarios activos en ese momento, pero otros datos como los usuarios activos mensuales (MAU), la relación DAU/MAU y las tasas de retención decían mucho.
A medida que cambiábamos la app durante la beta, podíamos ver cómo cambiaban el tiempo por sesión, las tasas de retención, etc. Sumar notificaciones push con Parse mejoró mucho el reenganche y logró que la gente volviera en el momento justo.
Parse
En las primeras versiones de la app, había que abrirla a mano para ver si la última carrera ya había cargado. Cuando empezamos a usar Parse para mandar una notificación push cuando había carreras nuevas, la retención subió muchísimo.
Capítulo 7
77 donas
Un día estaba mirando nuestras menciones en Instagram. Había un par de fotos de atardeceres y de pronto vi a alguien que parecía haber hecho una carrera de 77 donas.
Seguro había un error en mis cálculos de calorías, o alguien había subido datos falsos. ¿Tal vez una salida en bici quedó marcada como carrera por error?
Hice clic y googleé el “Fat Dog” que mencionaba Nate. Resulta que era un ultramaratón de 120 millas en Canadá, del que dicen que es uno de los más duros del mundo. ¡Guau!
Compartí su publicación con nuestro grupo de beta testers. Ver la carrera brutal de Nate me dio ganas de tener una forma de destacar estas carreras especiales para que las viera todo el mundo.
Agregamos un par de cosas a la barra lateral de la app: un feed de carreras destacadas y una lista de amigos que corrieron hace poco.
El récord de Nate sigue invicto: 77 sigue siendo la mayor cantidad de donas que alguien registró en Gyroscope. Aun así, desde que empecé este proyecto aprendí a nunca subestimar a la gente. La próxima versión va a soportar tres dígitos, por las dudas.
Capítulo 11
¿Qué sigue?
Publicamos esta app en la App Store y mucha gente la ha estado usando para registrar y compartir su vida.
Tatiana bajó casi 40 libras registrando todos sus pasos y compartiéndolos.
Dan Grant anda en bici por toda Inglaterra para recuperarse y mantenerse sano después de un infarto.
Tomamos lo que aprendimos con Running y lo usamos para construir la nueva app de Gyroscope, que muestra la historia completa de tu vida. También está hecha en React Native: puedes leer cómo la construimos o bajar la app desde la App Store.