Este post fala do nosso antigo app de corrida, que já foi descontinuado.
Como fizemos o Gyroscope Running
Codinome Quicksilver: o nosso primeiro app de iPhone em React Native
Lançamos há pouco um novo app experimental para iPhone, o Running by Gyroscope. Ele deixa você criar imagens bonitas para compartilhar a sua corrida mais recente. Esta é a história de como desenhamos o app, das ferramentas que usamos para construir ele e do que aprendemos no caminho.
O app é movido por duas das nossas integrações mais populares, Runkeeper e Strava. Elas fazem um trabalho excelente registrando a sua atividade. Depois de uma corrida, o Gyroscope sincroniza os dados brutos automaticamente. Aí você se diverte escolhendo a história que quer contar.
Um mapa de satélite da sua rota cheia de paisagem? Talvez a foto que você tirou daquele pôr do sol de tirar o fôlego? Ou o fato de que aquilo equivalia a 7 donuts? Talvez a sua frequência cardíaca tenha ficado bem alta e você queira destacar isso. A escolha é sua.
Capítulo 1
Março de 2015
Tínhamos acabado de lançar o site do Gyroscope. O sistema funcionava muito bem. As minhas corridas sincronizavam na hora e apareciam no aprilzero.com, com todos os meus números e até informações como a música que eu tinha ouvido no Spotify.
Tínhamos construído um painel bonito, mas a única forma de compartilhar era mandar a coisa inteira para alguém.
Os nossos próximos grandes desafios eram o celular e o compartilhamento.
Numa tarde de março, fui correr no Twin Peaks. Era um dia limpo e bonito, com as duas pontes visíveis ao longe.
Enquanto eu olhava a cidade de cima, queria um jeito de compartilhar aquele momento. Eu tinha registrado e quantificado tudo: a altimetria, a minha frequência cardíaca, o caminho que fiz até ali, a música que estava ouvindo e o que eu estava vendo (com uma foto), mas não havia como recombinar tudo isso de volta na minha experiência.
Imaginei uma visão em realidade aumentada da minha subida da montanha. Me veio à cabeça a ideia de um card compartilhável, sobrepondo os meus sinais vitais e a localização à foto que eu tinha tirado. Todas aquelas informações já estavam no Gyroscope, só faltava desenhar aquilo direito.
Decidi que aquilo daria uma bela foto de Instagram e voltei correndo para casa, animado para testar.
Capítulo 2
Finja até conseguir
Assim que cheguei em casa, abri o Photoshop e joguei lá algumas das fotos que eu tinha tirado. Acrescentei os dados do mapa da minha corrida e juntei com alguns números para criar um infográfico simples. Um dia talvez a gente tivesse uma ferramenta automática bonita, mas naquele momento era mais rápido fazer tudo do zero.
Coloquei os dados básicos, como cidade e distância, no canto. Tirei a cor do texto (azul-esverdeado) da própria foto e marquei o ponto onde a foto tinha sido tirada. Algumas horas depois, a foto que publiquei estava recebendo um monte de curtidas. As pessoas perguntavam como aquilo tinha sido feito.
Decidi continuar essa experiência, fazendo imagens à mão depois de cada corrida e testando designs novos.
Nas semanas seguintes, continuei criando imagens novas para compartilhar depois de cada corrida. Brinquei com estilos diferentes de mapa e fui acrescentando detalhes como música, clima ou frequência cardíaca. Esses pequenos toques traziam mais contexto e mais camadas para a corrida, e as pessoas pareciam gostar.
Passei a esperar de verdade pelo exercício criativo de montar e compartilhar cada card depois de correr. Junto com a endorfina, aquilo acabou ficando bem viciante. Tinha várias camadas novas de criatividade e de narrativa: olhar as fotos que eu tinha tirado, ver diferentes visões da rota no mapa, escolher cores de destaque bonitas e assim por diante.
Aquilo juntava várias das minhas coisas favoritas: fotografia, corrida e chamar atenção.
Tinha alguma coisa em colocar alguns números e um logo na foto que transformava aquilo de uma foto qualquer em design gráfico ou até em arte. A composição e o formato de todos os elementos podiam se juntar e criar algo bem maior que a soma das partes.
Mesmo viajando, eu gostava de trabalhar nisso. Os cards eram uma boa forma de registrar os lugares por onde eu passava, como uma espécie de cartão-postal.
Ligar e desligar dados como música ou mapa contava uma história diferente para o mesmo conteúdo. Numa corrida mais intensa, por exemplo, eu podia colocar a frequência cardíaca. Se o dia estivesse muito quente ou muito frio, o clima virava um número interessante. Se tivesse um pôr do sol ou uma vista bonita, aquilo geralmente dava um bom fundo. Se a geografia fosse interessante, a visão de satélite destacava isso.
Depois de alguns meses fazendo essa experiência, percebi que aquilo daria um produto incrível. Eu queria muito ter aquilo para mim, e várias pessoas tinham demonstrado interesse em usar também.
Comecei a rascunhar alguns conceitos e a consolidar as minhas experiências em alguns dos melhores layouts.
Capítulo 3
Desenhando o app
Quando começo um design novo, gosto de listar os objetivos. Escolher as metas certas costuma ser mais importante e mais difícil do que deixar as coisas bonitas. Para o Quicksilver, havia alguns princípios que eu achava importantes. Eles definiriam cada pixel e cada linha de código que a gente fosse produzir.
- Ganhar o máximo de curtidas possível
- Ver a sua corrida mais recente na hora
- Deixar a personalização divertida
Desenhando para o máximo de engajamento
Para ganhar o máximo de curtidas, a gente precisaria do toque visual, do foco e do contexto certos para aquilo conversar com outras pessoas. Perceber qual era o nosso público, o público geral e não só outros atletas, ajudou a moldar tudo e foi um grande diferencial em relação ao que todo mundo estava fazendo.
A maioria dos apps tinha números detalhados para ajudar a melhorar o desempenho. Só que, para um amigo que não corre, essa informação é bem menos empolgante. Ele provavelmente ia preferir ver que aquilo equivalia a 5 donuts e te dar um joinha. Ou talvez uma foto bonita do alto da montanha que você subiu com muito esforço.
Tentamos construir cada opção de layout como uma marca própria, com nome e ícone únicos. Esse era o recurso central do app, e precisava ser extremamente intuitivo e divertido de usar.
Depois de testar algumas ideias diferentes, acabamos colocando os layouts em uma lista comprida embaixo. Era muito gostoso passar pelos layouts e escolher um.
Parecia um filtro de Instagram para corrida
Tela de abertura
Como fotografia e conteúdo das pessoas eram uma parte importante do app, eu queria que isso aparecesse logo na abertura.
Comecei a procurar fotos bonitas para usar de fundo. O meu amigo Adam, um dos melhores fotógrafos que conheço, gentilmente deixou a gente usar uma das fotos dele do Mt. Tam.
Assim que coloquei aquilo no app, me apaixonei na hora. Era exatamente a sensação de serenidade e natureza que daria o tom certo para o resto do app.
Um app separado
Uma das maiores decisões de design foi fazer disso um app separado, só de corrida. Eu queria ver a palavra “Running” na minha tela de início e chegar no meu conteúdo na hora.
Conforme fôssemos criando mais coisas no futuro, como pedalar ou nadar, as pessoas poderiam instalar só o que quisessem. Eu queria evitar a bagunça e as camadas de navegação por cima de tudo.
Feed de atividades
A maioria dos outros apps de corrida precisa dar destaque ao registro, mas, como a gente não tinha isso, dava para garantir que o conteúdo fosse sempre o rei. Tudo o que não fossem as corridas recentes ficaria escondido em uma barra lateral.
Brincamos com estilos e metáforas diferentes para cada corrida. Podiam ser cards empilhados ou um monte de blocos. Depois de testar vários níveis de densidade de informação, os maiores acabaram ocupando espaço demais. Depois de usar o app por alguns minutos, percebi que estava com zoom demais e não tinha a visão geral que eu queria. A visão do site funcionava bem, então acabamos reaproveitando aquelas mesmas barras, com cores por ritmo.
Tentei colocar a corrida mais rápida & a mais longa no cabeçalho, para elas estarem sempre à mão sem precisar rolar a tela. Seria um desafio amigável: toda vez que eu abrisse o app teria a chance de bater o meu próprio recorde. Se alguém corresse uma maratona ou fizesse algo realmente impressionante, teria aquilo sempre à mão.
O contador de idade que subia o tempo todo no site era um recurso muito popular, então colocamos aqui um cronômetro parecido para marcar o tempo desde a sua última corrida. Quanto mais esse número subisse, mais motivadas as pessoas ficariam, na esperança.
Capítulo 4
O contador de donuts
Neste verão, estávamos trabalhando no escritório da True Ventures em San Francisco. Um dia, alguém trouxe umas caixas de donuts para o escritório. Depois do almoço, alguém, o Phil Black, se não me engano, cortou tudo em oitavos e disse que não valia se você comesse só pedacinhos. Eu sabia que aquilo não era cientificamente verdade, mas comecei a provar os vários sabores.
Sentado ali, trabalhando em um app de corrida e comendo um quarto de um donut glaceado, fiquei curioso para saber quanto eu teria que correr naquela noite para anular o lanche. Depois de googlar um pouco, descobri que um donut genérico tem umas 200 calorias, e que as calorias de uma corrida são mais ou menos (peso × 0.75 × distância).
Corridas sem dados de mapa, como as de esteira ou as registradas pelo Fitbit, estavam nos dando muito trabalho. O app dependia dos mapas em todas as visões, mas a gente precisava de uma alternativa mais flexível.
Sentado ali, fazendo as contas das minhas corridas, percebi 2 coisas: eu não fazia ideia de quantos donuts havia na maior parte das minhas corridas, e era bem divertido descobrir.
E assim nasceu o contador de donuts.
A gente faria umas contas para chegar a um número aproximado de donuts, seja uma corrida curta de apenas 1 donut ou uma bem longa. Passei o resto do dia procurando fotos de banco de imagens de donuts bonitos em várias quantidades, de 1 a 6.
Capítulo 5
Testes em beta
Assim que tínhamos uma versão básica do app funcionando, mandei convites para os principais corredores do site, gente com mais de cem corridas registradas. Fiquei chocado e impressionado ao ver que várias pessoas tinham acumulado milhares de corridas na conta.
Eu gostava de correr, mas estava longe do nível deles. O feedback e as sugestões dessas pessoas seriam o que a gente precisava para fazer um ótimo produto.
No começo, eu só mandava e-mails manualmente. As pessoas respondiam com bugs ou sugestões e eu tentava acompanhar o que cada uma dizia.
Aí alguém sugeriu criar um grupo no Facebook, algo que já tinham feito em outros betas e achado muito útil. Criei um grupo privado novo e mandei o link para alguns dos nossos principais testadores. Com o tempo, ele passou de cem pessoas, muitas delas correndo todo dia e usando o app.
Além de receber um monte de relatos de bugs e sugestões, algumas pessoas até começaram a desenhar as coisas que queriam.
A gente conseguia pensar em recursos novos, entregar para todo mundo do grupo e ver rapidinho como ficavam com conteúdo de verdade.
Capítulo 6
Ferramentas & truques
Temos um time ótimo no Gyroscope que trabalhou muito para este app existir (valeu, Mahdi, Eric, Robbie!), mas também tivemos bastante ajuda de fora. Aqui vão vários recursos e produtos incríveis que foram indispensáveis e economizaram muito tempo de engenharia.
React Native
Vindo do mundo web, usar Javascript e um sistema de layout no estilo CSS/Flexbox pareceu muito intuitivo. Eu já tinha desenhado apps de iPhone antes, mas nunca tinha escrito código para um. Se o React Native não existisse, eu teria que esperar outra pessoa fazer o desenvolvimento. Um projeto paralelo como esse provavelmente nunca teria saído do papel.
Brent Vatne, que foi um dos nossos primeiros testadores, também contribuía com o React Native e nos ajudou muito quando a gente travava ou tinha dúvidas que ainda não estavam na documentação. Valeu, Brent!
Desde que começamos, o React melhorou bastante. Cada versão nova, da 0.3 até a 0.12, quando lançamos, aumentou o desempenho e corrigiu problemas com que a gente vinha lidando.
Ele ainda precisa de trabalho (queria que o desempenho das animações fosse melhor), mas está melhorando muito rápido. Pelo menos para a nossa aplicação bem simples, deu conta do recado e nos ajudou a andar muito mais rápido do que a gente conseguiria de outro jeito.
O recarregamento ao vivo pela rede do React Native tornou possível iterar rápido em ideias novas ou fazer microajustes em poucos minutos. Hoje eu nem consigo imaginar ter que recompilar e esperar para ver as mudanças.
Mapbox
Mapbox faz ferramentas de mapa incríveis que usamos no site inteiro. O editor deles permite personalizar o estilo e a cor. Usamos isso para criar vários estilos diferentes, incluindo este conjunto de tiles escuro e minimalista.
No começo brincamos com a implementação GL para iOS deles, mas percebemos que a gente não queria mesmo que as pessoas pudessem mover ou dar zoom no mapa. Para manter tudo simples, decidimos reaproveitar a nossa implementação web já existente por uma webview, o que nos deixou manter o código que a gente já tinha passado meses testando e melhorando.
Imgix
Um dos recursos únicos do nosso app é personalizar o estilo do card conforme a foto. Imgix nos ajuda a analisar a paleta de cores, para a gente definir o texto e os outros elementos em cores combinando e complementares.
Também usamos a Imgix para efeitos especiais, como realçar e desfocar a imagem. Usar uma solução em nuvem para as fotos significa um tempo inicial de configuração, já que a pessoa precisa subir a foto em vez de fazer tudo localmente no celular, e às vezes leva um minuto para subir e depois baixar de novo a foto processada, mas essa troca valeu a pena pelo tempo que economiza e pelos recursos a mais que a gente ganha.
Fabric, do Twitter
Começamos a usar o Fabric/Crashlytics para acompanhar os nossos crashes. No começo do app, ele travava muito. Com o tempo corrigimos todos os crashes, mas eu continuei usando o painel para ver os nossos números de uso.
Eu estava planejando montar um sistema de analytics, mas descobri que quase tudo o que a gente precisava já estava naquele painel. O que eu mais gostava de ver eram os usuários ativos naquele momento, mas outros números, como usuários ativos por mês (MAU), a razão DAU/MAU e as taxas de retenção, eram muito reveladores.
Conforme fazíamos mudanças no app durante o beta, dava para ver o tempo por sessão, as taxas de retenção e tudo mais mudando de verdade. Colocar notificações push com o Parse melhorou muito o reengajamento e trouxe as pessoas de volta na hora certa.
Parse
Nas primeiras versões do app, as pessoas tinham que abrir o app manualmente para ver se a corrida mais recente já tinha carregado. Assim que começamos a usar o Parse para mandar uma notificação push a cada corrida nova, a nossa retenção subiu muito.
Capítulo 7
77 donuts
Um dia, eu estava passando pelas nossas menções no Instagram. Tinha algumas fotos de pôr do sol e, de repente, vi alguém que parecia ter feito uma corrida de 77 donuts.
Só podia ser um bug no meu cálculo de calorias, ou alguém tinha subido dados falsos. Será que uma pedalada tinha sido marcada como corrida por engano?
Cliquei e pesquisei no Google o tal “Fat Dog” que o Nate tinha citado. Pelo visto era uma ultramaratona de 120 milhas no Canadá, considerada uma das mais difíceis do mundo. Uau!
Compartilhei o post dele com o nosso grupo de testadores. Ver aquela corrida incrível do Nate me fez querer um jeito de destacar essas corridas especiais para todo mundo ver.
Adicionamos alguns recursos na barra lateral do app: um feed de corridas em destaque e uma lista de amigos que correram recentemente.
O recorde do Nate segue imbatível: 77 ainda é a maior quantidade de donuts que alguém registrou no Gyroscope. Só que, desde que comecei este projeto, aprendi a nunca subestimar as pessoas. A próxima versão vai aceitar três dígitos, só por garantia.
Capítulo 11
E agora?
Lançamos este app na App Store & muita gente tem usado ele para registrar e compartilhar a vida.
A Tatiana perdeu quase 40 libras registrando todos os passos dela e compartilhando isso.
O Dan Grant tem pedalado por toda a Inglaterra para se recuperar e se manter saudável depois de um infarto.
Pegamos o que aprendemos com o Running & usamos para construir o novo app do Gyroscope, que mostra a história completa da sua vida. Ele também é feito em React Native, e você pode ler como construímos ele ou baixar o app na App Store.