Construyendo la app de Gyroscope con React Native
Cómo bajé 20 libras mientras construía nuestra app de iPhone
Hace poco lanzamos nuestra nueva app de iPhone, Health Tracking by Gyroscope. La app sincroniza tus datos de HealthKit con Gyroscope y te da un panel para seguirle el rastro a todo lo de tu vida.
Mientras probábamos y mejorábamos la app, terminé bajando más de 20 libras. Llevaba más de dos años registrando y sincronizando todos mis datos, pero recién al tenerlos a la vista en tiempo real pude empezar a cambiar mi conducta y a estar más sano cada día: el sueño del quantified self.
Nuestra meta era construir una app que ayudara a la gente a usar sus datos para lograr cosas concretas: bajar de peso, ser más productivos y compartir momentos importantes.
Nadie había hecho una app que cumpliera metas tan ambiciosas, pero ya existían buenos elementos de diseño en otras experiencias que nos dieron un punto de partida.
Inspiración
El reporte anual de Feltron
Durante 10 años, Nicholas Felton hizo un precioso reporte anual de su vida. Registraba los datos con obsesión durante todo el año y después los analizaba y los diseñaba por temas. Puedes ver los años anteriores en feltron.com o en el SF MOMA.
Los reportes eran una ventana fascinante a la vida de otra persona. A nosotros nos entraban solos muchos datos parecidos todos los días, y me moría por ver qué reportes podía sacar sobre mí mismo, tanto por diversión como para encontrar patrones útiles y mejorar mi salud.
Analítica web
Para el trabajo dependo a diario de un montón de paneles y servicios. Cualquier cosa crítica o que genera dinero seguramente tiene decenas de empresas construyendo paneles para entenderla y optimizarla.
Todos nuestros servidores están bien instrumentados para asegurarnos de que funcionan como deben y avisarnos rápido si algo falla. Algún día, en un futuro no tan lejano, van a existir paneles así para tu cuerpo.
Otras herramientas de analítica como Google Analytics y Fabric nos ayudan a entender el tráfico y otras métricas complejas. Los números grandes, los sparklines, los valores atípicos resaltados y otros recursos de diseño hacen fácil leer rápido montañas de datos.
Videojuegos
Los videojuegos usan la analítica de una forma más divertida, con personajes virtuales que tienen atributos como niveles, vida y puntos de experiencia.
Presentado de la forma correcta, es una manera divertida e intuitiva de entender cómo vas y de concentrarte en lo que importa: seguir vivo, subir de nivel, usar una poción de vida, etc.
La gente pasa cientos de horas mejorando esos números virtuales, pero no existe nada parecido para la vida real. Todavía…
Nombre en clave: Magneto
Todos nuestros proyectos llevan nombres en clave de personajes de los X-Men, y a esta app le tocó “Magneto”.
A principios de 2015, Facebook lanzó una tecnología nueva buenísima llamada React Native. Eric era muy fan de React y empezó a experimentar con un proyecto básico en React Native, trayendo datos en vivo de nuestra API y mostrándolos en pantalla.
Aunque la app corría por XCode, el código era casi todo JavaScript, que yo podía editar en Sublime Text o en cualquier otro editor. En unas horas ya podía editar elementos de la página y darles estilo con una sintaxis parecida a Flexbox/CSS. Fue mágico.
Wearables
Más o menos al mismo tiempo salió el Apple Watch y había mucha emoción y mucha confusión con él. Casi todos hablaban de las apps y las notificaciones en el reloj, pero a nosotros lo que nos entusiasmaba eran las funciones de salud.
Cuando empecé a usarlo, medía mi ritmo cardíaco y mis pasos en segundo plano. Yo quería combinar eso con otros datos que también eran parte importante de mi salud: el peso y la grasa corporal de mi báscula Fitbit, la música que escuchaba en Spotify, cuánto tiempo trabajaba cada día.
La app Health estaba instalada en el teléfono de todo el mundo y medía datos básicos como los pasos. Había unas pocas cosas simples que yo quería hacer y que con esa app eran imposibles o muy engorrosas.
- Ver la gráfica de ritmo cardíaco de un entrenamiento reciente
- Ver un resumen de los datos de hoy sin desplazar ni hacer clic
- Ver fácil qué hice ayer y no solo hoy
Mahdi, que era uno de nuestros primeros usuarios y acababa de sumarse al equipo como ingeniero a tiempo completo, se puso a construir esa sincronización con HealthKit en Objective-C.
La app de running
Mientras Mahdi construía la sincronización con HealthKit, yo empecé otra app simple que te dejaba personalizar y compartir tus carreras con varios filtros y diseños.
Cuando lanzamos esa app de running, miles de personas empezaron a publicar imágenes creativas de sus entrenamientos. Pero muchas otras se quejaron: no eran corredoras y no podían disfrutar los mapas de sus entrenamientos ni ver cuántas donas de calorías habían quemado.
Teníamos que llevar esa misma sensación de creatividad y motivación a todos los usuarios de Gyroscope, no solo a los atletas. Nuestra solución fue construir experiencias parecidas para cosas que hace todo el mundo: música, latidos, sueño, actividad en la computadora, pasos, viajes, etc.
Algunos bocetos tempranos de la app
Empezamos a diseñar paneles móviles para condensar toda la información dentro de la app. Para ver los detalles decidimos que todo fuera una tarjeta cuadrada con un montón de opciones personalizables debajo.
También le dimos más protagonismo a compartir en la parte de abajo de la página, porque buena parte de la experiencia iba a ser publicar tus mayores logros en Instagram o mandárselos a tus amigos.
Como estas vistas dependían tanto de los datos, los bocetos iniciales eran solo un punto de partida aproximado. Casi todos los diseños finales se resolvieron con la app real sobre datos y gráficas en vivo que venían de nuestros servidores.
Reportes semanales
Las tarjetas diarias se centraban en un solo dato, pero los reportes semanales tenían mucha más información y podían mostrar un panorama y resaltar patrones.
Mientras tanto, en el sitio web…
Con funciones nuevas como la integración con Fitbit y la sincronización con HealthKit, nos entraban muchos datos de salud nuevos: ritmo cardíaco, pasos, presión arterial, porcentaje de grasa corporal. Pero el sitio original estaba pensado más para ubicaciones y fotos. Teníamos que mejorar la experiencia web para que la gente consumiera esos datos sin esfuerzo, así que empezamos un tema nuevo de perfil con uno de mis diseñadores favoritos, Shane Mielke.
Este tema nuevo iba a ser un panel más serio con todos tus números, y Shane hizo una docena de bocetos antes de que nos entusiasmara este.
Uno de los giros clave fue dividir el contenido en secciones intuitivas, por partes del cuerpo humano. Al principio no estaba seguro de que la metáfora funcionara, pero encajaba bastante bien con todos los datos que teníamos y nos dejaba espacio para crecer.
Con un render 3D del cuerpo humano (Shane hizo una versión masculina y otra femenina, simples) podíamos usar el cuerpo como estructura de navegación y resaltar cada sección al abrirla.
Los datos de salud mental, como el sueño, la productividad o el tiempo en la computadora, iban en la sección del cerebro. Más adelante podríamos sumar cosas como el ánimo o la meditación.
Los datos cardiovasculares, como el ritmo cardíaco y la presión arterial, se organizaban en el pecho, y las actividades de fitness, como pasos, carreras y otros entrenamientos, iban por la zona de las piernas.
Cada sección era un concepto importante que después se podía llenar con más detalle. Por ejemplo, si algún día agregábamos registro de comida, iría en la zona del abdomen sin tener que rediseñar todo.
La estructura de datos funcionó sorprendentemente bien, así que decidimos seguirla también en la app. Shane y yo empezamos a jugar con la pantalla principal en el móvil, metiendo en pantalla algunas tarjetas de cada sección.
Hasta ese momento, casi todos los bocetos estaban hechos con datos hipotéticos. Casi todos tenían un título grande y fácil de leer y un gráfico con el detalle de los datos. El siguiente paso era construirlo de verdad y ver qué tan útil resultaba en la vida real con mis datos.
Colores según el estado
Nuestra meta con este panel era que mirar de reojo y entender lo importante fuera facilísimo. Los números grandes y las tarjetas con color darían un panorama rápido de si una sección estaba “bien” ese día.
Por ejemplo, si los pasos no llegaban a unos pocos miles, la tarjeta de fitness se ponía roja o naranja para recordarte que te movieras más. Si llegabas a tu meta o volvías del gimnasio, se ponía verde y podías pasar a otra cosa. Poner una sección en verde no es tan difícil; el desafío estaba en encontrar el equilibrio entre todas.
Pantalla de inicio
Para la primera pantalla quería algo futurista pero humano. Había sacado esta foto en Japón un par de años antes y me pareció que tenía la emoción justa.
Le puse encima el logo de Gyroscope y algo de texto, y ya teníamos nuestra pantalla de inicio de sesión.
Pruebas beta
A mediados de septiembre teníamos un prototipo funcionando que la gente podía empezar a usar. Lo habíamos probado con nosotros mismos, pero el gran desafío era que fuera igual de útil para millones de personas en el mundo y no solo estuviera hecho a nuestra medida.
Decidimos mandárselo a algunos amigos y a usuarios Pro como arranque de nuestro programa beta. Abrimos un grupo de Facebook para publicar anuncios y recibir comentarios sin vueltas.
Cada vez que publicábamos una actualización, los usuarios nos mandaban comentarios y nos ayudaban a encontrar errores rápido. Todo pasaba en horas o minutos, así que podíamos iterar a toda velocidad. Como era una beta privada, sacábamos versiones nuevas casi al instante sin esperar la revisión de la App Store.
Hasta entonces habíamos diseñado a partir de nuestras propias corazonadas y de los comentarios de unas pocas personas; ahora podíamos usar más datos y más opiniones de usuarios para decidir.
Escuchar las experiencias de nuestros primeros beta testers fue emocionante como pocas cosas.
“Gyroscope es el único producto que hace fácil registrar mi vida. De un vistazo sé en qué voy bien y qué necesito trabajar. No pasa un día sin que abra la app.”
– Brandon Littell
Las pruebas fueron mucho más colaborativas que solo encontrar cierres inesperados y errores. Mucha gente tenía pedidos y sugerencias que nos ayudaron a enfocarnos en funciones que se iban a usar seguido.
El mapa de tu vida
Uno de los datos más emocionantes que tenemos es la ubicación, registrada con Swarm o con Moves. Correr, andar en bici y otras actividades también van llenando el mapa de puntos.
Nos encantaba usar Mapbox en el sitio, así que llevamos la misma tecnología de mapas a la app. Al principio probamos mapas con zoom y desplazamiento, pero enseguida decidimos simplificar y usarlos como fondo estático. Nosotros hacíamos los cálculos para encontrar el nivel de zoom y la composición ideales para ver todo lo importante.
Quienes usaban Moves para registrar sus movimientos podían ver un mapa de calor de todos los lugares donde estuvieron y el desglose de cómo pasaron el tiempo. Desde el lado de la salud, es interesante ver cuánto tiempo caminas frente a cuánto vas en auto. Yo empecé a salir antes y a ir caminando a más reuniones.
Algunas vistas daban conclusiones sobre fitness y otras servían más para entender los viajes o qué tipo de restaurantes visitabas.
Notificaciones push
Una forma de hacerle la vida más fácil a la gente era mandar cada día una notificación push simple con algunas conclusiones.
Discutimos y probamos mucho el horario y las palabras del mensaje. Al principio quería mandarlo al final del día, como resumen. Pero a veces los datos tardaban en sincronizarse y llegar, y corríamos el riesgo de informar datos incompletos. Nos decidimos por las 9am de la mañana siguiente.
Nuestra prioridad es hacerle la vida más fácil al usuario, incluso a costa de ganar dinero o de llegar a las métricas que queríamos. En vez de algo misterioso que obligara a abrir la app, pusimos toda la información relevante para que le sirviera a la gente sin siquiera abrirla.
“Empecé a usar Gyroscope hace bastante, pero recién cuando nació mi hija se volvió algo importante para mí. Me encanta cómo están organizados mis datos para mantenerme en forma y el desglose tan detallado que recibo. Y siempre siento que algo nuevo mejora en mi experiencia. Al equipo de verdad le importan sus usuarios.
Además de tener un panorama de mi salud general, vigilo mi estado mental mirando mi nivel de productividad. Trabajo un promedio de 38–42 horas por semana en Iris (mi startup) y soy mamá a tiempo completo. Gyroscope me ayudó a manejar esas horas de trabajo para lograr un “equilibrio” firme y le estoy muy agradecida. ¿El resultado? Productividad extrema. Antes, 40 horas de trabajo se me iban en tonterías. ¿Ahora? Con una bebé nunca sabes cómo va a salir el día, así que de verdad aprovecho mi tiempo al máximo…”
– Cat Noone
Reportes mensuales
Una vez al mes llegaba un reporte mensual nuevo y queríamos usar ese momento para repasar el progreso y mirar hacia adentro. Había unas pocas preguntas simples que esperábamos responder con esos datos.
¿Te moviste lo suficiente?
¿Dormiste lo suficiente?
¿Qué tan productivo fuiste?
“Como estudiante universitaria, mantener un equilibrio sano es clave para que las cosas salgan bien. Gyroscope me ayuda a ver los datos de mi vida para equilibrar el sueño, el ejercicio y la productividad. Visualizaciones preciosas y una app utilísima.”
– Victoria Spiegel
Bajar de peso
Desde que empecé Gyroscope, más de un año antes, había ido subiendo bastante de peso. No era ningún misterio: la mezcla de estrés, poco sueño y muchas noches trabajando y picando comida anulaba de sobra el poco ejercicio que hacía.
Una de mis metas con la app era que me ayudara a bajar de peso. Cada mañana me subo a mi báscula Fitbit Aria para ver mi peso y mi grasa corporal.
Durante el día, Gyroscope me recordaba esos números. Armé algunos diseños para mantenerme honesto y mostrar mi historial reciente en contexto. La clave era darme cuenta rápido y corregirme solo.
Hasta entonces era fácil olvidarme del tema hasta el reporte semanal o hasta que entraba al sitio de vez en cuando. Mientras tanto podía tomar un montón de decisiones poco sanas: pedir un Uber en vez de caminar, pedir postre o una galleta extra con el café, etc., que se iban sumando. Tenerlo presente todo el tiempo ayudaba a contrarrestar las ganas de comer dulces riquísimos todos los días.
Seis meses después, cuando la app estaba por salir, me alegró ver que había bajado unas 20 libras y un 5% de grasa corporal. No había hecho nada muy distinto, pero un montón de cambios y decisiones sutiles cada día me habían dejado mucho más sano. Mis pasos diarios eran más altos porque trataba de ir caminando a todos lados, y cada vez que abría la app y veía mi progreso me daban más ganas de seguir.
Muchos de nuestros otros beta testers tuvieron historias parecidas. Todavía queremos agregar y mejorar muchas cosas, pero la publicamos en la App Store para que todo el mundo pueda empezar a usar la app y mejorar su vida.