Construindo o app do Gyroscope com React Native
Como perdi 20 libras enquanto construía o nosso app de iPhone
Lançamos há pouco tempo o nosso novo app de iPhone, o Health Tracking by Gyroscope. Ele sincroniza os seus dados do HealthKit com o Gyroscope e oferece um painel para acompanhar tudo sobre a sua vida.
Enquanto testávamos e melhorávamos o novo app, acabei perdendo mais de 20 libras. Eu registrava e sincronizava todos os meus dados havia mais de dois anos, mas só quando passei a ver esses dados em tempo real consegui começar a mudar o meu comportamento e ficar mais saudável a cada dia: o sonho do quantified self.
O nosso objetivo era construir um app que ajudasse as pessoas a usar os seus dados para alcançar metas práticas, como perder peso, ser mais produtivo e compartilhar momentos importantes.
Ninguém tinha criado um app que cumprisse essas metas ambiciosas, mas já existiam ótimos elementos de design em outras experiências que nos deram um bom ponto de partida.
Inspiração
O relatório anual do Feltron
Nos últimos 10 anos, o Nicholas Felton produziu um lindo relatório anual da vida dele. Os dados eram registrados com todo cuidado ao longo do ano e depois analisados e desenhados em torno de vários temas. Dá para ver os anos anteriores em feltron.com ou no SF MOMA.
Os relatórios eram uma janela fascinante para a vida de outra pessoa. A gente tinha um monte de dados parecidos chegando automaticamente todo dia, e eu estava muito animado para ver que tipo de relatório conseguiria sobre mim mesmo, tanto pela diversão quanto para achar padrões úteis e melhorar a minha saúde.
Análise web
No trabalho, tem um monte de painéis e serviços dos quais dependo todo dia. Qualquer coisa crítica ou que gere dinheiro provavelmente tem dezenas de empresas construindo painéis para ajudar a entender e otimizar.
Todos os nossos servidores são bem instrumentados para garantir que estão rodando como deveriam e para nos avisar rápido se algo der errado. Um dia em um futuro (não tão distante), painéis parecidos vão existir para o seu corpo.
Outras ferramentas de análise, como o Google Analytics e o Fabric, nos ajudam a entender o tráfego e outras métricas complexas. Números grandes, sparklines, outliers destacados e outros elementos de design deixam fácil ler rapidamente uma quantidade enorme de dados.
Videogames
Os videogames têm um uso bem mais divertido de análise de dados, e costumam ter um personagem virtual com atributos como níveis, vida e pontos de experiência.
Apresentado do jeito certo, é uma forma bem divertida e intuitiva de entender como você está indo e focar nas coisas certas: continuar vivo, subir de nível, usar uma poção de vida e por aí vai.
As pessoas passam centenas de horas melhorando esses números virtuais, mas não existe nada parecido para a vida real. Ainda…
Codinome Magneto
Todos os nossos projetos têm codinomes de personagens dos X-Men, e este app foi batizado de “Magneto”.
No começo de 2015, o Facebook lançou uma tecnologia nova e legal chamada React Native. O Eric era muito fã de React e começou a experimentar com um projeto básico em React Native, puxando dados ao vivo da nossa API e mostrando na tela.
Mesmo o app rodando pelo XCode, o código da aplicação era quase todo JavaScript, que eu podia editar no Sublime Text ou em qualquer outro editor de texto. Em poucas horas eu já conseguia editar elementos da página e estilizá-los com uma sintaxe parecida com Flexbox/CSS. Era mágico.
Wearables
Mais ou menos na mesma época, o Apple Watch foi lançado e havia muita empolgação e confusão em torno dele. Falava-se muito dos apps e das notificações do Watch, mas o que mais nos animava eram os recursos de saúde.
Assim que comecei a usar um, ele monitorava a minha frequência cardíaca e os meus passos em segundo plano. Eu queria juntar isso com outros dados que também eram parte importante da minha saúde: o peso e a gordura corporal da minha balança Fitbit, a música que eu ouvia no Spotify, quanto tempo eu passava trabalhando por dia.
O app Saúde vinha instalado no celular de todo mundo e media alguns dados básicos, como passos. Havia algumas coisas simples que eu queria conseguir fazer e que eram impossíveis ou muito complicadas com o app Saúde existente.
- Ver o gráfico de frequência cardíaca de um treino recente
- Ver um resumo das informações de hoje sem rolar nem clicar
- Ver facilmente o que fiz ontem, e não só hoje
O Mahdi, que era um dos nossos primeiros usuários e tinha acabado de entrar no time como engenheiro em tempo integral, começou a trabalhar nessa sincronização com o HealthKit em Objective-C.
O app de corrida
Enquanto o Mahdi construía a sincronização do HealthKit, comecei a trabalhar em outro app simples, que deixava você personalizar e compartilhar a sua corrida com vários filtros e layouts.
Quando lançamos esse app de corrida, milhares de pessoas começaram a usá-lo para postar imagens criativas dos seus treinos. Mas muitas outras reclamaram que não eram corredoras e não podiam curtir os mapas dos treinos nem ver quantos donuts de calorias tinham queimado.
Precisávamos descobrir como levar essa mesma sensação de criatividade e motivação para todos os usuários do Gyroscope, não só para os atletas. A nossa solução seria construir experiências parecidas para coisas que todo mundo faz: música, batimentos, sono, atividade no computador, passos, viagens e por aí vai.
Alguns mockups iniciais do app
Começamos a desenhar alguns painéis para celular para condensar todas as informações dentro do app. Para ver os detalhes, decidimos transformar tudo em um card quadrado com uma porção de opções personalizáveis embaixo.
O compartilhamento também ganhou mais destaque na parte de baixo da página, já que uma boa parte da experiência seria postar as suas maiores conquistas no Instagram ou dividi-las com os amigos.
Como essas telas eram muito guiadas por dados, os mockups iniciais eram só um ponto de partida grosseiro. A maior parte dos designs finais foi resolvida com o app de verdade em cima de dados e gráficos ao vivo que vinham dos nossos servidores.
Relatórios semanais
Os cards diários focavam em um único dado, mas os relatórios semanais tinham muito mais informação e podiam mostrar um panorama e destacar padrões.
Enquanto isso, no site…
Com novos recursos como a nossa integração com o Fitbit e a sincronização do HealthKit, tínhamos um monte de dados de saúde chegando: frequência cardíaca, passos, pressão arterial, percentual de gordura, mas o site original era mais focado em lugares e fotos. Precisávamos melhorar a experiência web para as pessoas consumirem esses novos dados com facilidade, e começamos a trabalhar em um novo tema de perfil web com um dos meus designers favoritos, o Shane Mielke.
A ideia era que esse novo tema fosse um painel mais sério com todos os seus números, e o Shane fez uma dúzia de mockups antes de a gente se empolgar de verdade com este.
Um dos pontos de virada foi dividir o conteúdo em seções intuitivas, por partes do corpo humano. No começo eu não sabia se a metáfora funcionaria, mas ela pareceu se encaixar bem com todos os dados que tínhamos e nos daria espaço para crescer.
Com um render 3D do corpo humano (o Shane fez uma versão masculina e uma feminina simples), dava para usar o corpo como estrutura de navegação e destacar cada seção quando ela era aberta.
Dados de saúde mental, como sono, produtividade e tempo no computador, iriam para a seção do cérebro. No futuro poderíamos acrescentar coisas como humor ou meditação.
Dados cardiovasculares, como frequência cardíaca e pressão arterial, ficariam organizados na região do peito, enquanto atividades físicas, como passos, corrida e outros treinos, poderiam ficar na área das pernas.
Cada seção era um conceito importante que poderia ser preenchido com mais detalhes depois. Por exemplo, se um dia acrescentássemos registro de comida, isso poderia ir para a seção do core sem precisar redesenhar tudo.
A estrutura de dados funcionou surpreendentemente bem, então decidimos tentar seguir com ela no app. O Shane e eu começamos a brincar com a home mobile, espremendo alguns dos cards de cada seção na tela.
Até então, a maioria disso eram mockups feitos com dados hipotéticos. Quase todos tinham um título grande e fácil de ler e um gráfico mostrando os detalhes dos dados. O próximo passo seria começar a construir de verdade e ver se era útil na vida real com os meus dados de verdade.
Cores por status
O nosso objetivo com esse painel era deixar extremamente fácil bater o olho e entender a informação relevante. Números grandes e cards coloridos dariam um panorama rápido de se uma seção estava “boa” naquele dia.
Por exemplo, se os passos fossem menos do que alguns milhares, o card de fitness ficaria vermelho ou laranja para lembrar você de se mexer mais. Se você batesse a meta ou tivesse acabado de voltar da academia, ele ficaria verde e você poderia tocar a vida. Deixar uma seção verde não é muito difícil, mas o desafio virou achar o equilíbrio certo entre todas elas.
Tela de abertura
Para a tela inicial, eu queria algo futurista mas ainda humano. Tinha tirado esta foto no Japão alguns anos antes e ela parecia ter a emoção certa.
Coloquei o logo do Gyroscope e um texto por cima e tínhamos a nossa primeira tela de login.
Beta
Em meados de setembro, tínhamos um protótipo funcional do app que as pessoas já podiam usar. Tínhamos testado em nós mesmos, mas o grande desafio era que ele fosse igualmente útil para milhões de pessoas no mundo todo, e não feito sob medida só para a gente.
Decidimos mandar para alguns amigos e usuários Pro como início do nosso programa beta. Criamos um grupo no Facebook para postar avisos e receber feedback com facilidade.
Conforme postávamos atualizações, os usuários mandavam feedback e nos ajudavam a achar bugs rapidinho. Tudo isso acontecia em horas ou minutos, e nos deixava iterar rápido. Como era um beta privado, podíamos lançar novas versões quase na hora, sem esperar o processo de revisão da App Store.
Até então tínhamos desenhado com base nos nossos próprios palpites e no feedback de poucas pessoas, mas agora conseguíamos usar mais números e mais retorno dos nossos usuários para tomar decisões.
Foi muito empolgante ouvir as experiências de alguns dos nossos primeiros beta testers.
“O Gyroscope é o único produto que deixa fácil acompanhar a minha vida. Com uma olhada eu sei no que estou indo bem e no que preciso melhorar. Não passo um dia sem abrir o app.”
– Brandon Littell
O teste foi muito mais colaborativo do que só achar travamentos e bugs. Muita gente tinha pedidos e sugestões que nos ajudaram a focar em recursos que as pessoas usariam com frequência.
Mapeando a sua vida
Um dos dados mais empolgantes que temos é a localização, registrada pelo Swarm ou pelo Moves. Corrida, ciclismo e outras atividades também preenchem mais pontos no mapa.
Adorávamos usar o Mapbox no nosso site e decidimos usar a mesma tecnologia de mapas no app. No começo experimentamos mapas com zoom e arraste, mas logo decidimos simplificar a experiência e usar os mapas como um fundo estático. Nós fazíamos a conta e tentávamos descobrir o melhor nível de zoom e a melhor composição para mostrar tudo o que importava.
Quem usava o Moves para registrar os deslocamentos podia ver um mapa de calor de todos os lugares por onde passou e a divisão de como usou o tempo. Do ponto de vista da saúde, é interessante ver quanto tempo se passa andando e quanto se passa dirigindo. Comecei a sair mais cedo e a ir andando para mais reuniões.
Algumas telas davam informações de fitness, enquanto outras eram mais sobre entender viagens ou que tipo de restaurante foi visitado.
Notificações push
Uma das formas de facilitar a vida das pessoas era mandar uma notificação push simples todo dia, com algumas conclusões.
Discutimos e testamos muito o horário e a linguagem da mensagem. No começo eu queria mandar no fim do dia, como um resumo. Mas às vezes os dados demoravam para sincronizar e chegar, e havia o risco de reportar dados incompletos. Escolhemos as 9h da manhã seguinte.
A nossa prioridade é facilitar a vida do usuário, mesmo que isso custe dinheiro ou nos afaste das métricas que queríamos. Em vez de algo misterioso que obrigasse a pessoa a abrir o app, colocamos toda a informação relevante ali, para que ela tivesse valor sem nem precisar abrir.
“Comecei a usar o Gyroscope faz um bom tempo, mas foi só quando tive a minha filha que ele virou algo importante para mim. Adoro como os meus dados para me manter em forma ficam organizados e o detalhamento profundo que recebo. Sem falar que sempre sinto que tem algo novo melhorando na minha experiência. O time se importa de verdade com os usuários.
Além de ter um panorama da minha saúde geral, também fico de olho em como ando mentalmente, monitorando o meu nível de produtividade. Trabalho em média de 38 a 42 horas por semana na Iris (a minha startup) e sou mãe em tempo integral. O Gyroscope me ajudou a administrar essas horas de trabalho para conseguir um “equilíbrio” de verdade e sou muito grata por isso. O resultado? Produtividade extrema. Antes, 40 horas de trabalho eram consumidas por enrolação. E agora? Você nunca sabe como o dia vai ser com um bebê, então aproveito de verdade cada minuto…”
– Cat Noone
Relatório mensal
Uma vez por mês haveria um novo relatório mensal, e queríamos usar esse momento para revisar o progresso e olhar mais para dentro. Havia algumas perguntas simples que esperávamos responder com esses dados.
Você se moveu o suficiente?
Você dormiu o suficiente?
Quão produtivo você foi?
“Como estudante universitária, manter um equilíbrio saudável é a chave do sucesso. O Gyroscope me ajuda a visualizar os dados da minha vida para eu equilibrar sono, exercício e produtividade. Visualizações lindas e um app super útil!”
– Victoria Spiegel
Perda de peso
Desde que comecei o Gyroscope, mais de um ano antes, eu vinha ganhando bastante peso aos poucos. Não era grande mistério: a combinação de estresse, pouco sono e muitas madrugadas trabalhando e beliscando anulava com folga o pouco exercício que eu fazia.
Um dos meus objetivos com o app era que ele me ajudasse a perder peso. Todo dia de manhã eu subo na minha balança Fitbit Aria para ver o meu peso e a minha gordura corporal.
Ao longo do dia, o Gyroscope me lembrava desses números. Criei alguns layouts para me manter honesto e mostrar o meu histórico recente em contexto. Perceber rápido e se corrigir era a chave.
Até então, era fácil tirar isso da cabeça até os relatórios semanais ou até eu abrir o site de vez em quando. Nesse meio-tempo eu podia tomar um monte de decisões ruins: pegar um Uber em vez de ir andando, pedir sobremesa ou mais um cookie com o café e por aí vai, o que ia se acumulando com o tempo. Uma consciência constante ajudou a segurar a vontade de comer doces gostosos todo dia.
Seis meses depois, quando o app estava prestes a ser lançado, foi ótimo ver que eu tinha perdido cerca de 20 libras e 5% de gordura corporal. Eu não tinha feito nada muito diferente, mas um monte de mudanças e decisões sutis a cada dia tinha me deixado muito mais saudável. Os meus passos diários estavam mais altos porque eu tentava ir andando para tudo, e toda vez que eu abria o app e via o meu progresso ficava mais motivado a manter o ritmo.
Muitos dos nossos outros beta testers tiveram histórias parecidas. Mesmo ainda querendo acrescentar e melhorar muita coisa, lançamos o app na App Store para que todo mundo pudesse começar a usá-lo para melhorar a própria vida.