Animação: vista de cima, à noite, uma corredora percorre o contorno do Z da Zyla e o rastro de GPS dela acende em magenta até fechar o símbolo. Ela para na chegada.
Zyla
Assessoria de corrida movida por IA.
Fui o único designer dedicado ao app, do código ao handoff.
Product Designer (PJ)
7 km, 46:28 de tempo e pace de 6:38/km.
Resumo do case
Desenhei e codei o sticker de treino. Pesquisei e desenhei o gravador com GPS, e a engenharia construiu a partir do meu handoff.
No Perfil, o fundador montou a versão final, e eu revisei e completei os estados.
- Período
- Junho a outubro de 2026
- Time
- Três devs, marketing e suporte. No design, eu e o fundador.
- Plataforma
- App iOS e Android em React Native
O sticker que sai do app todo dia
Desenhei e codei o sticker de treino, minha primeira entrega. Os modelos são meus; a tela de compartilhar foi redesenhada pelo fundador em agosto.
Dois stories de atletas, repostados pelo @zyla.fit na mesma manhã, com os nomes recortados. A Zyla reposta stories assim todo dia.
Ver no Instagram da Zyla (abre em nova aba)Antes do sticker, quem queria postar o treino printava a tabela branca do app.
A V0 já tinha a rota no sticker, quatro cores, prévia no formato dos stories, um controle para esconder a rota e analytics desde o primeiro dia. Codei em React Native, com o Claude Code, e fiz o merge do PR. Chegou às lojas menos de duas semanas depois que entrei no time.
Réplica no Figma da tela de compartilhar em produção. Tirei uma linha interna com dados de exemplo.
Troque a cor e desligue a rota, como no painel do app.
O Instagram não aceitava o sticker com fundo transparente direto, então salvar o PNG sem fundo virou a ação principal da V0. O nome do relógio no sticker entrou como requisito de design, porque cada marca tem regra própria de exibição.
Na V2, o catálogo cresceu para 14 modelos. Tirei o binóculo que estava no pedido: no tamanho de um sticker, ele parecia um rádio. Para o Instagram da marca, entreguei 74 PNGs de sticker e 6 prévias.
A corrida gravada no próprio app
O app montava o plano de treino, mas não gravava a corrida. Pesquisei e desenhei o gravador com GPS, e a engenharia construiu a partir do meu handoff.
A corrida em andamento, no handoff: tempo, ritmo e distância, com um botão grande de pausa.
A celebração, no handoff. Para o case, troquei a tipografia do título, tirei uma ilustração de terceiros e desenhei a mesma rota da tela ao lado.
O registro de corrida dependia do Strava e dos relógios, e a Zyla pôs um gravador próprio no roadmap.
Antes de abrir o Figma, usei agentes de IA para ler o código, a documentação das plataformas e apps de referência. Em dois dias, propus 18 estados e mapeei 22 riscos. Não entrevistei atletas nem usei dados de uso nessa pesquisa.
Minha recomendação foi começar pelo treino guiado, não pelo GPS.
O GPS veio primeiro
O fundador escolheu o GPS, para a Zyla depender menos de terceiros. A arquitetura de estados da pesquisa, com operação offline, foi a base do gravador que chegou à loja.
No fim da corrida, a celebração mostra a rota que a pessoa acabou de fazer, sem confete nem som. Prototipei a animação em web, com um modo para movimento reduzido, e a engenharia usou o protótipo como referência.
Quando a lista de parciais por quilômetro foi reprovada, fiz seis variantes, e a aprovada saiu em menos de 24 horas. Para abrir o gravador, propus uma pílula "Gravar" no topo; ficou o padrão de mercado, o botão central da tab bar.
Montei o handoff para ser lido sem reunião: um card "Leia primeiro", as telas na ordem do fluxo, o storyboard e a spec de movimento. Antes de entregar, pedi a um segundo modelo de IA que revisasse o handoff.
O estado que a tela escondia
O fundador queria um Perfil social, no modelo do Instagram, e montou a versão final. Eu revisei, completei os estados e achei um defeito de sincronização que o atleta não tinha como ver.
Li o app antes de desenhar. Quando a conexão de uma integração expirava, a tela mostrava a mesma linha de quem nunca tinha conectado, e a pessoa parava de sincronizar sem saber. Desenhei o estado "parou de sincronizar", com a data e a ação Reconectar, e ele saiu na versão 2.23.0.
Antes
Réplica do Perfil antigo: desfoquei o e-mail, cortei a tab bar e refiz o fundo do card. Com a conexão expirada, a linha do Garmin Connect, em destaque, ficava igual à do Zepp, que nunca tinha sido conectado.
Depois
O Garmin Connect mostra desde quando parou e oferece Reconectar; o Samsung Health fica em cinza, sem botão. Retirei duas linhas e os cabeçalhos que agrupavam a lista.
Cinza, sem botão
A integração que só existe no outro sistema fica em cinza, sem botão: evita a tentativa frustrada e ainda mostra que ela existe. A escolha foi do fundador.
Minhas propostas mais minimalistas para o Perfil foram vetadas.
Completei os estados que faltavam para o dev, como atividades vazias, bio vazia e a versão Android. A engenharia implementou a partir das telas do fundador, e no anúncio interno da 2.23.0 fui creditado pelas telas de Apps conectados. O feed de corridas saiu na mesma versão.
O Perfil novo, na versão final do Figma. Editei a bio e a contagem de apps e cortei a tab bar.
O feed de corridas: o primeiro card mostra o percurso, e o segundo não tem mapa. No Figma, a rota ficava sobre um fundo liso; para o case, coloquei atrás dela um mapa escuro, na paleta que a Zyla documentou para os mapas do app. Também editei a bio e a contagem de apps e cortei a tab bar.
Primeiro no código, depois no Figma
Quando entrei, não existia processo de handoff entre o design e os três devs do time.
No primeiro mês, desenhei no próprio código, falando direto com os devs. Fui mais rápido, mas o polimento visual ficava para depois, e o retrabalho aparecia no aparelho.
16/06 a 16/07
Direto no código
260 commits meus na main do app, em React Native.
17/07
Figma primeiro
Para fluxos de várias telas.
24/08
Handoff do gravador
Com card "Leia primeiro" e spec de movimento.
04/09
Formato de handoff do fundador
Seção por tela, setas e notas para o dev.
17/09
Gravador e Perfil nas duas lojas
O gravador saiu do meu handoff; o Perfil, da versão do fundador que revisei.
Começar pelo Figma deixava a implementação mais lenta para o dev. Depois, o fundador propôs um formato de handoff.
- Card "Leia primeiro", que eu já usava no handoff do gravador.
- Uma seção por tela, na ordem do fluxo.
- Setas com o que cada toque faz.
- Notas curtas para o dev.
Esquema do formato, sem as telas da Zyla. Os itens 2 a 4 são o formato que ele propôs.
Usei esse formato em todas as entregas seguintes.
Quer conversar sobre um projeto?
Desenho telas e estados, e monto o handoff para a engenharia implementar.