Como o April Zero foi feito

Como o April Zero foi feito

Parte 1

Este é o primeiro capítulo de como eu desenhei o site original do April Zero. Vou compartilhar alguns rascunhos, conceitos descartados e protótipos antigos, explicando como tudo evoluiu no caminho.

Se você tiver interesse em usar por conta própria, já dá para se cadastrar no Gyroscope.

Março de 2014: inspiração

Get your move on

Eu estava prestes a ir para Paris com o meu colega de apartamento. Ele é um fotógrafo dedicado e, quando a gente viaja, normalmente ele monta um minissite sobre a viagem, cheio de fotos e vídeos bonitos em tela cheia. O anterior foi sobre a nossa aventura no Japão.

Era sempre divertido voltar alguns meses depois e ver a crônica detalhada do que a gente fez, com fotos e vídeos lindos de cada passo do caminho.

Para essa viagem, decidimos usar o app Moves para registrar todos os lugares por onde passamos. Instalei na fila da segurança do SFO, sem perceber que era o começo do que logo viraria uma obsessão.

Algumas pessoas podem ter experimentado o Moves ou apps parecidos no passado e ter tido problemas de bateria. Por muito tempo, qualquer app baseado em GPS ou em movimento (Nike, Find My Friends, Highlight e afins) era terrível, porque acabava com a sua bateria na hora. Aí saiu o iPhone 5S. Mas, com a máquina de boatos girando em torno do futuro iWatch, o lançamento revolucionário do processador M7 da Apple passou despercebido por quase todo mundo, inclusive por mim.

De repente, dava para fazer um monte de coisas com impacto mínimo na bateria. De repente, muito conteúdo rico ficou disponível em tempo real. De repente, uma geração inteira de aparelhos de fitness ficou obsoleta. Problemas de hardware viraram simples problemas de software. O Moves foi um dos poucos a realmente tirar proveito disso.

Batimentos

Mais ou menos na mesma época, alguém me falou de um app chamado Cardiio, que lia a sua frequência cardíaca com a câmera do iPhone. Baixei principalmente porque não acreditava que fosse funcionar. Eu realmente não estava nem aí para a frequência com que o meu coração batia.

Mas depois de brincar com ele por alguns dias, eu estava obcecado. O ótimo dele era que a medição levava só uns 15 segundos, talvez 30 se você contar o tempo de tirar o celular do bolso, desbloquear e abrir o app.

O que me fisgou de vez foi descobrir que atletas bem treinados costumam ter frequência cardíaca de repouso mais baixa. Mais baixo era melhor. Era um jeito bem fácil de ter uma medida objetiva do meu estado atual. E era divertido.

Em uma semana eu reparei que a minha frequência cardíaca estava anormalmente alta, perto de 80 ou 90 quando normalmente ficava mais perto de 60. Será que eu estava estressado com alguma coisa? Fui correr um trecho longo e medi de novo no dia seguinte. De volta aos 60. Fascinante…

Era como se eu tivesse instalado o New Relic no meu corpo. Eu estava acostumado a olhar gráficos e consertar coisas. Só que, em vez de um servidor, dessa vez era o meu corpo.

Corra pela sua vida

O meu hobby anterior era escalada indoor. Eu morava a alguns quarteirões do Mission Cliffs, e ir escalar boulder lá virou a minha rotina noturna. Mas é um esporte bem puxado e logo eu sofri uma série de lesões no ombro.

Comecei a correr no lugar disso. Eu estava saindo de um término pesado e correr foi um jeito ótimo de lidar com aquilo. Já tinha usado o app de corrida da Nike de vez em quando, fazendo uma milha aqui e ali, mas nunca acumulando quilometragem séria. O app com GPS acabava com a minha bateria, então não era muito divertido de usar.

Mas agora, com o M7, os meus joelhos iam desistir muito antes do meu celular. Coisas como os relógios chiques de corrida da Garmin ou os Fitbits que eu pensava em comprar não eram mais necessárias. É fácil arrumar desculpa dizendo que falta alguma ferramenta importante, mas tudo de que eu precisava já estava no meu bolso.

Postar as fotos das minhas corridas no Instagram me manteve motivado e correndo com regularidade depois que comecei. Eles tinham um sistema fácil para sobrepor o mapa, a distância e o logo da Nike em uma foto. Postar no Instagram com a hashtag #nikeplus garantia um monte de curtidas de outros corredores do mundo inteiro.

Aquilo juntava três das minhas paixões: correr, fotografar e chamar atenção. Era genial. Era uma ótima época para ser corredor, entre Runkeeper, Strava, Nike e outros, havia muitas ferramentas e comunidades boas por aí.

Ver todos os meus números de cada corrida me dava algo para tentar otimizar e melhorar. Agora eu podia me dar desafios e metas.

Só que quase nenhuma outra coisa tinha um ecossistema parecido. Eu queria esse tipo de informação e de motivação para todos os aspectos da minha vida, não só para a corrida. Aquilo era só analytics. Eu já tinha construído analytics antes. Era hora de começar a rascunhar.

Níveis no sangue

Eu estava atrasado com o meu check-up anual. Fiz todos os exames padrão e também pedi que me mandassem por e-mail uma cópia dos exames de sangue para os meus registros.

Na semana seguinte, recebi um PDF bem completo. Ele tinha não só os meus números atuais, mas uma explicação das faixas ideais de cada valor e uma análise da minha situação. Fiquei surpreso de ver a minha vitamina D tão baixa, e algumas outras coisas em faixas não ideais. Eram dados incríveis, mas presos em um PDF de texto anexado na minha caixa de entrada. Aquilo merecia ser muito mais.

De lá para cá eu faço exames de sangue todo mês e acompanho as mudanças de perto. Colocar tudo em um painel seria um lembrete constante do que eu precisava tentar melhorar. Eu estava apostando na minha teoria de que só de acompanhar as coisas eu conseguiria melhorá-las. E, se não desse certo, pelo menos eu saberia e poderia me esforçar mais.

Gordura corporal

Em Quatro Horas para o Corpo, Tim Ferriss fala de vários aparelhos e testes que usou para se acompanhar. Um deles era uma máquina portátil de ultrassom USB para medir com precisão o percentual de gordura corporal. Eu já vinha me pesando, mas saber o percentual de gordura me daria uma compreensão ainda melhor do que estava mudando.

O processo do ultrassom é um pouco chato, leva alguns minutos e você precisa usar um gel especial, mas eu percebi que os dados que ele gerava eram muito precisos e fascinantes de ver todo dia. Dava para ver visualmente dentro do próprio corpo, até quantos milímetros de gordura, de músculo e de osso você tinha.

Eu via a gordura corporal disparar nos fins de semana depois de dias épicos de exagero, e depois cair ainda mais na semana seguinte. Os dados que eu tinha eram ótimos, mas a interface e a apresentação do app não.

Eu queria ver como isso se relacionava com tudo o mais que eu estava fazendo.

Eu também acreditava na ideia de que só de acompanhar alguma coisa você já começa a melhorar. Saber o estado atual e a velocidade de mudança permite tomar decisões melhores, iterar rápido e entender o que funciona e o que não funciona. Sem instrumentar tudo o que importa para você, é como voar às cegas.

Percebi que precisava achar o equilíbrio certo entre medições fáceis e frequentes, como frequência cardíaca e peso, e dados mais chatos, mas reveladores, como a minha gordura corporal e os meus exames de sangue. Juntos eles formariam um painel muito bom e contariam uma história completa. Eu também aposto no fato de que a tecnologia vai melhorar rápido, principalmente quando isso ficar mais popular e a demanda aumentar. Se sair a versão de microchip implantado no Kickstarter, ou se a Apple começar a monitorar isso com o Apple Watch, eu só vou ter que mudar algumas linhas de código.

Abril de 2014: primeiros rascunhos

Uma grade de pontos de dados

Eu gostei da ideia e da simplicidade desse design baseado em módulos, com uma grade bonita e elementos que poderiam ser melhorados depois. A maioria poderia ser 100% automatizada por APIs, e as manuais, como a minha escalada mais recente, levariam só alguns minutos.

Mesmo se eu ficasse com preguiça ou muito ocupado, o site ainda assim não ficaria parado. Eu continuaria correndo, ouvindo música ou postando fotos novas no Instagram!

A importância de rascunhar

Eu passo a maior parte dos estágios iniciais de um projeto só rascunhando e pensando. Seja criando designs ou escrevendo código, eu percebo que rascunhar primeiro me deixa pensar com mais clareza.

Trabalhar com rascunhos no papel é poderoso porque permite ir rápido. Provavelmente é o único meio em que dá para registrar as ideias na mesma velocidade em que elas aparecem. Permite apresentar a você mesmo opções visuais em vez de coisas só na sua cabeça, e assim tomar decisões de design mais bem informadas. Muitas vezes colocar duas opções no papel, mesmo do jeito mais tosco, deixa óbvio qual é a melhor.

Mesa digitalizadora Wacom

Depois do papel, rascunhei rápido essa ideia no Photoshop para ter certeza de que ela ainda fazia sentido em um contexto digital. Muitos designs parecem bons no papel, como uma miniatura, mas não funcionam quando são digitalizados. Tem algo no estilo dos rascunhos que faz até uma ideia ruim parecer elegante e refinada. Trabalhando em quadro branco ou no papel, é muito fácil falsear a escala e fazer o texto caber onde ele não cabe, ou deixar elementos ocupando muito mais espaço do que ocupam de verdade.

Às vezes eu gosto de manter um estilo de rascunho nos primeiros mockups. Isso permite continuar pensando como se você estivesse no papel e trabalhar uma variável de cada vez. Como o layout e o conteúdo já estavam resolvidos, agora eu podia adicionar cor e verificar se o contraste e a escala ainda faziam sentido. Textura, tipografia, imagens de fundo e outros detalhes demorados ficariam para depois, se aquilo fosse aprovado.

Essa iteração pareceu bem decente, então mandei para alguns amigos. Eles ficaram bem animados, então continuei trabalhando no Photoshop para criar mockups mais realistas. Aquilo tinha potencial.

Passei mais alguns dias limpando os detalhes e testando variações. Eu estava muito animado com o conteúdo e com a arquitetura de informação, sempre as coisas mais importantes, mas o estilo e o layout não me tiravam o fôlego toda vez que eu olhava.

Era um design sólido e usável, mas não o melhor do mundo.

O styleguide do April Zero

Aquilo era o futuro. O potencial de analisar e compartilhar magicamente tudo sobre você mesmo é quase tão fantástico quanto o voo humano ou a eletricidade. Eu queria que aquilo parecesse tão futurista quanto realmente era.

Quando construo uma marca, eu costumo montar um moodboard para prototipar rápido vários estilos e descobrir os elementos necessários para transmitir aquele clima. As peças podem ser qualquer coisa, trechos de filmes, fotos, outdoors, screenshots de outros apps e por aí vai. Eu costumo tirar muita inspiração de motion design e de publicidade, que têm ótimos orçamentos e artistas incríveis por trás. Também tem muita coisa boa no Dribbble e no Behance.

Existem muitos exemplos de ótimas interfaces holográficas e de coisas com cara de futuro, mas eu precisava reduzir a um subconjunto mais específico. Como na maioria das decisões da minha vida, eu me perguntei: o que o Tony Stark faria?

Alguns elementos recorrentes que eu notei foram: sobreposições holográficas, círculos concêntricos, perspectiva isométrica & linhas finas. Incorporar isso em um produto sem sacrificar a usabilidade seria difícil, mas era um ótimo ponto de partida.

Agora que eu tinha afunilado tanto o conteúdo quanto o estilo, era hora de voltar à prancheta…

Versão 2

Eu queria manter a modularidade e a arquitetura da versão anterior, mas sem um layout tão sem graça. Decidi dividir tudo em “mini-apps” para apresentar os dados em torno de temas específicos. Os dois primeiros poderiam se chamar “Sport” e “Explorer”.

Reduzir cada seção a um contexto único permitiria formar uma história coesa em vez de simplesmente jogar um monte de números e estatísticas no visitante.

E no futuro eu poderia lançar seções novas sem precisar reconstruir as existentes. Alguns exemplos de outras coisas que me animavam eram:

“Aviation”: registrar cada voo enquanto eu tirava a minha licença de piloto

“Underwater”: registrar mergulhos enquanto eu tirava a certificação de scuba

“Digital”: o que eu fazia quando estava no computador (design, código, screencast e afins)

“Finance” : hábitos de consumo, barra de progresso para virar bilionário

“Love”: quantificar a minha vida amorosa e por aí vai

Talvez algumas coisas precisassem de senha…

Desenhando o Sport

A seção Sport teria tudo relacionado a fitness e medicina, mostrando os níveis atuais no sangue e a evolução do desempenho ao longo do tempo.

A primeira iteração era uma visão em feed de diferentes tipos de atividade. Eu gostei muito da apresentação dos níveis no sangue, mas achei que o feed era difícil demais de ler rápido. Eu só conseguia ver os últimos eventos, o que não dava um bom panorama.

Eu queria conseguir ver um ano de dados de relance. Para isso, precisava de mais dados agregados e de deixar tudo mais compacto.

Esse era um layout melhor, mas não parecia muito avançado. Era um problema que dava para resolver durante a construção, adicionando animações e detalhes sutis.

Esta era a versão estática já codada. As colunas laterais mais escuras dão um pouco mais de contraste e ligam a página à home, deslocando a coluna de conteúdo.

Eu queria que tudo fosse explorável e interativo. Passar o mouse em algo mostraria mais detalhes, havia muito dado por trás que poderia ser revelado.

O spinner

Um padrão que eu tinha notado olhando os analytics de sites anteriores é que a maioria das pessoas abre uma ou duas páginas e vai embora. Mesmo que exista um mundo inteiro de conteúdo bom, a maior parte dos visitantes nunca chega lá. Clicar em algo é um compromisso e tanto, e explorar cada seção a fundo simplesmente não acontece.

Eu queria criar um novo tipo de interface, em que você não precisasse se comprometer clicando em nada de cara, e sim pudesse só mover o mouse e explorar, com microinterações leves, fáceis e divertidas.

E assim nasceu esse spinner. Eu queria criar algo tão divertido de usar e tão revolucionário quanto o iPod original.

Ele também permitiria fugir dos layouts retangulares chatos. O moodboard tinha um monte de elementos circulares em movimento, e isso deixaria esses detalhes existirem naturalmente na interface.

Depois de ter um mockup com o qual eu estava suficientemente animado, era hora de começar a codar! Eu já tinha uma base simples em Jekyll de um experimento anterior de blog. Criei uma branch nova e comecei a codar o spinner.

Primeiros protótipos em código

Este é um bom exemplo de situação em que é muito útil desenhar & codar o mesmo problema. Fazer a página ficar bonita era importante, mas como ela se sentia & se movia era igualmente importante de resolver. Para isso, montei um protótipo simples com um Javascript leve, rodando dentro do container Jekyll que eu originalmente ia usar para o meu blog.

A primeira versão não era nada impressionante. A Versão 1 (acima) era bem básica. Fazer tudo girar e se alinhar direito era meio complicado, então usei círculos de cores berrantes enquanto construía e depurava.

A Versão 3 (abaixo) trouxe os elementos de anel e o javascript para mais interações, como girar o círculo quando você passava o mouse no texto.

A Versão 5 trouxe uma animação de entrada, que foi mais desafiadora do que eu esperava, já que eu estava tentando rodar transições em elementos que também estavam animando.

A Versão 8 trouxe uma animação de saída com ajustes diferentes dos da entrada, para clicar em algo dar uma sensação mais recompensadora.

Cada iteração resolvia um problema específico ou trazia um recurso novo para deixar tudo um pouco melhor. Fiquei agradavelmente surpreso com o quanto aquilo estava ficando divertido de usar. Aquilo confirmou a minha ideia de que havia ali algo que valia o tempo investido. Com mais algumas melhorias e detalhes de design, aquilo poderia virar uma ótima experiência.

E assim eu continuei trabalhando nisso, passando horas por dia recarregando a página e tentando deixar as animações mais suaves, mais interessantes, com um tempo melhor.

Eu estava curtindo, mas precisava de mais validação para ter certeza de que não havia problemas de design. Na época eu trabalhava em vários cafés, então recrutei alguns desconhecidos para brincar com o site.

Não dei nenhuma instrução além de “tenta usar isso aqui” e entreguei o meu laptop, observando de perto o que eles faziam. Notei alguns problemas, quase todos envolvendo cliques em partes da interface que não eram links. Rapidamente ampliei as áreas clicáveis para incluir os pontos em que as pessoas mais erravam, e adicionei alguns efeitos de hover para reforçar que dava para clicar. Logo os meus voluntários de teste não tinham mais dificuldade de navegar nem de entender o site.

Acabou sendo tão intuitivo quanto eu esperava. Mais importante, eles pareciam estar curtindo de verdade passar o mouse e clicar nas seções, um pouco surpresos e animados com todas as animações que disparavam.

Satisfeito com o design central da home, era hora de encarar a parte do site que mais me dava medo.

Explorer

Um monte de problemas de tecnologia estava prestes a entrar em cena. As seções anteriores eram bem fáceis de rascunhar e simular no Photoshop com dados básicos, mas para esta eu precisaria de conteúdo real. Criei uma chave de API e comecei a importar os meus dados do Moves.

Depois de passar algumas semanas em San Francisco, percebi que precisava de um conjunto de dados mais variado para trabalhar. Então peguei o meu Macbook e o passaporte e fui para Nova York fazer pesquisa. Eu precisava entrar de verdade no estado mental de exploração e aventura se quisesse transmitir essa sensação nesta seção.

Agora eu tinha que descobrir como mostrar voos, mudanças de fuso horário, corridas no Central Park e a contagem de quanta pizza eu comi. Foi ótimo ter ido, porque logo esbarrei em vários problemas na forma como o Moves lidava com fusos horários e que eu precisava tratar. Se eu tivesse ficado em San Francisco e contado com o material antigo de Paris para o teste internacional, tudo teria implodido na próxima vez que eu cruzasse fusos.

No voo de volta para casa, comecei a processar todos os dados do Moves e a montar uma linha do tempo simples. Era uma bagunça meio ilegível, mas estava funcionando com os dados reais da minha viagem!

Uma das maiores decisões de design foi deixar as linhas do tempo na horizontal, com os dias empilhados uns sobre os outros.

Quase todos os outros designs parecidos as organizavam na vertical, o que convenientemente evitava o problema de sobreposição de texto que eu estava tendo. Mas eu acreditava que poder ver todos os dias comparados entre si era essencial. Eu queria que cada dia fosse um eixo capaz de conter muitos dados ricos depois. O problema de mostrar os rótulos teria que ser resolvido de outro jeito.

Comecei a brincar com um algoritmo para distribuir bem os rótulos em 4 níveis. Ele analisava a diferença de tempo entre os lugares e garantia que sempre houvesse espaço suficiente para o texto aparecer.

A Versão 9 tinha fundo claro, mas na Versão 10 eu troquei por um fundo escuro para os lugares saltarem mais e combinarem com o estilo do resto do site.

Decidi mostrar de início só os lugares significativos, e que passar o mouse revelaria mais detalhes do dia e o texto menor. Também dei menos destaque aos lugares recorrentes, como casa ou hotéis, já que eles não eram tão interessantes quanto os outros, mesmo tendo muito mais tempo.

Aí um dia eu decidi trabalhar ao ar livre no parque. Afinal, a seção se chamava Explorer.

E… eu não conseguia ler nada.

A versão original de fundo branco funcionava bem, mas a nova, com um esquema escuro melhorado, era totalmente inutilizável sob o sol.

É por isso que usar o seu produto no contexto real é extremamente importante. Quanto mais distante você está, mesmo de formas que parecem insignificantes, maior a chance de ser pego de surpresa ou de ter falhas de design. É por isso que eu gosto de trabalhar em aviões, em cafés, de cabeça para baixo e de outros jeitos que rendem olhares estranhos. Isso abre a sua mente para perspectivas diferentes e revela problemas que passariam despercebidos.

Agora eu tinha que decidir: mantinha o escuro porque era o que ficava melhor em ambiente fechado para 95% das pessoas, ou fazia sentido refazer tudo em claro? Se aconteceu comigo, poderia acontecer com outra pessoa ou, mais importante, poderia acontecer comigo de novo.

Às vezes, quando você trava ou bate em um obstáculo, é preciso seguir em frente e insistir, jogando horas no problema até resolver. Em outros casos, é melhor mudar de marcha e atacar por outro ângulo. Fiz uma versão escura (11) e uma clara (12) para o arquivo e decidi seguir para outros problemas.

Representando viagens

A primeira versão colocava a viagem e os lugares na mesma linha. Eu quis tentar deixar aquilo mais intuitivo, representando a viagem de um ponto a outro como saltos.

Números agregados

Eu queria manter o mapa-múndi no topo mostrando a minha localização atual, mas também acrescentar estatísticas gerais à página, dando um resumo rápido sem precisar percorrer 30 linhas do tempo. Decidi adicionar outro nível de estrutura e dividir tudo em meses. Cada mês teria as suas próprias estatísticas, e daria para comparar uns com os outros.

Foi fascinante ver como os meus hábitos mudavam de mês para mês. Alguns meses foram passados viajando e em aeroportos, em outros eu escalei bastante ou passei a maior parte do dia em cafés. Os restaurantes italianos despencaram assim que eu voltei de Nova York, substituídos por burritos.

Ficando responsivo

Quando comecei a trabalhar na versão responsiva, as coisas começaram a desandar. A linha do tempo horizontal, que funcionava muito bem no desktop, não cabia em uma tela pequena. Ela precisava ser vertical, mas eu não queria sacrificar a funcionalidade do site inteiro só por causa da implementação mobile. Comecei a refatorar o código para conseguir rodar as duas orientações e alternar suavemente quando a tela fosse redimensionada.

O código para ter uma versão mobile separada sem bagunçar o desktop estava funcionando. Agora eu podia começar a desenhar para mobile do zero, em vez de tentar espremer a versão maior em um espaço pequeno.

Eu estava ficando cansado de brincar com os mesmos dados de sempre. O design estava evoluindo, mas ainda faltava alguma coisa. Eu precisava de uma mudança de cenário e de uma perspectiva nova.

Eu estava trabalhando em um café (o Coffee Bar, em 6 de maio) quando um amigo me mandou mensagem.

Na hora certa.