Ymove: Redesign do app de fitness e da landing page do treinador
Setor
SaaS
FitTech
Serviços
Design UX/UI
Design de app móvel
Design de landing page
Site
ymove.appVisão geral
O Ymove é uma plataforma impulsionada por IA que permite a coaches de fitness lançar apps totalmente personalizados para iOS e Android sem conhecimento técnico. A plataforma cuida da infraestrutura: os treinadores se concentram nos seus programas e clientes.
Dois elementos centrais do produto precisavam de redesign: os templates de tela padrão exibidos aos novos treinadores no cadastro, e o template de landing page usado para converter o tráfego das redes sociais em clientes. Ambos influenciam diretamente se um treinador lança seu app com sucesso e se seus clientes se engajam — sendo, portanto, críticos para o crescimento da plataforma.
Problema
Os templates padrão definem a primeira impressão de cada app criado no Ymove. As telas existentes eram genéricas, não cobriam todos os estados da interface e não se alinhavam visualmente com a diversidade de marcas dos treinadores na plataforma.
No lado do app, um único layout rígido atendia treinadores de nichos completamente diferentes — força, yoga, longevidade, HIIT — sem nenhuma diferenciação significativa.
- Os estados vazios não ofereciam nenhuma orientação aos usuários.
- As estatísticas do dashboard exibiam por padrão consumo de água e calorias, independentemente de o treinador oferecer suporte nutricional.
- As visualizações de programas não tinham estrutura para cenários com múltiplos programas.
No lado da landing page, os treinadores captam clientes quase exclusivamente pelo Instagram.
- O template existente pressupunha fotos de qualidade profissional e textos elaborados — algo que a maioria dos treinadores não produz.
- Os layouts quebravam com conteúdo real: biografias curtas, imagens de proporções variadas, fotos tiradas com o celular.
- A página não conseguia reter a atenção do tráfego vindo das redes sociais nem comunicar o valor do treinador com rapidez suficiente para converter.
Solução
Estruturamos o projeto em duas frentes de trabalho paralelas, ambas orientadas por um único princípio: o resultado deve parecer profissional antes mesmo de o treinador fazer qualquer personalização.
Objetivos do projeto
O briefing exigia dois entregáveis distintos:
Parte 1 — Templates de tela do app: desenvolver a V1 (tema escuro) para todos os tipos de tela principais, cobrindo cada estado relevante que o cliente de um treinador pode encontrar. Entregar também duas variantes de tema claro.
Parte 2 — Landing page do treinador: redesenhar o template de landing page para desktop e mobile. O layout deve se manter visualmente sólido com conteúdo imperfeito gerado pelo próprio treinador e se adaptar a qualquer cor de marca.
Pesquisa
Antes de iniciar o design, mapeamos toda a superfície de telas do produto e identificamos todos os estados que precisavam de cobertura.
Para a landing page, analisamos o funil de captação de treinadores — Instagram → landing page → cadastro — e identificamos as variáveis de conteúdo em torno das quais precisávamos projetar: fotos de baixa qualidade, imagens de proporções variadas, textos curtos ou excessivos, e uma única cor de marca sem paleta secundária.
Abordagem
1. Templates do app
Atividade, não suposições. O bloco de estatísticas do dashboard foi renomeado de «Estatísticas» para «Atividade» e reconstruído com um sistema flexível de valores alternativos. Quando um treinador não oferece acompanhamento nutricional, o bloco exibe Recordes Pessoais — Recorde Pessoal do Exercício 1, Recorde Pessoal do Exercício 2 — mantendo o dashboard relevante para qualquer disciplina esportiva.
Estados vazios com contexto. As telas vazias foram redesenhadas como estados de orientação. Quando o usuário tem um programa pessoal atribuído, a agenda o apresenta diretamente: Seu programa de treino — [Fase do treinador], com tom conversacional, como se fosse uma mensagem do próprio treinador. Quando o usuário está em um plano padrão, o estado exibe recomendações inteligentes: Recomendado para você porque [motivo] — reduzindo a fricção e incentivando o início de programas sem exigir intervenção do treinador.
Visão geral do programa no dashboard. O status e o progresso do programa são exibidos diretamente no dashboard, eliminando uma etapa de navegação e dando ao usuário orientação imediata ao entrar.
Variantes de navegação. Foram desenvolvidas duas abordagens para a barra de navegação: uma barra inferior clássica (familiar para a maioria das plataformas) e duas variantes de cabeçalho — com logotipo e sem — para treinadores que priorizam sua identidade de marca.
Variantes de tema. Além da V1 em tema escuro: uma variante mista claro-escuro e uma completamente clara, voltadas para treinadores de wellness, lifestyle e yoga.
2. Landing page
Projetada para conteúdo real. Cada decisão de layout foi testada em condições de pior caso: uma biografia de três frases, uma foto principal tirada com o celular e um cartão de programa com título longo. O design se sustenta em todos esses cenários.
Sistema de uma única cor de marca. Com uma única cor definida pelo treinador, construímos um sistema de gradientes e acentos que gera profundidade e coerência visual de forma automática, sem necessidade de paleta secundária. Botões, acentos e a seção CTA derivam todos dessa única cor.
Lógica de recolhimento de texto. Se a biografia do treinador ou o texto de uma seção ultrapassar um limite de caracteres, ele é recolhido automaticamente com um controle «Leia mais». A integridade do layout é mantida independentemente de quanto ou quão pouco o treinador escreva.
Flexibilidade do cabeçalho. Compatível com versões do logotipo em preto e branco sobre a cor de marca do treinador, sem ajuste manual necessário.
Estrutura da página: desktop + mobile:
-
Hero: Nome do treinador · 3 pontos principais do título · Biografia de 2–3 frases (com recolhimento) · CTA da App Store / Play Store ou botão «Começar» · Três telas de celular lado a lado
-
Elementos de funcionalidades flutuantes: 3–5 funcionalidades definidas pelo treinador, posicionadas ao lado das telas do celular, coloridas automaticamente a partir da paleta de marca
-
Sobre o treinador: Retrato ou até 5 imagens de avatar · Biografia breve
-
Bloco Antes / Depois: Comparação lado a lado ou carrossel · Robusto para imagens de proporções diferentes
-
Bloco de programas: Grade de cartões · Título · Duração · CTA por cartão
-
Bloco de vídeo: Player incorporado ou miniatura com ícone de reprodução
-
Depoimentos: Até 5 imagens de avatar com citações · Rolagem horizontal no mobile
-
Seção CTA: Gradiente da cor de marca · Uma única ação
O que entregamos
1. Templates do app
Desenvolvemos um conjunto completo de templates padrão que cobrem cada etapa da jornada do cliente de um treinador: do primeiro acesso ao uso ativo de múltiplos programas. Cada estado é intencional: sem becos sem saída, sem suposições sobre o que o treinador oferece.
- Mais de 10 estados de tela para 6 telas principais
- V1 tema escuro completamente desenvolvido
- 2 variantes de tema claro (misto e completamente claro)
- Bloco de atividade flexível com exibição alternativa de recordes pessoais
- Estados vazios com contexto para fluxos de usuários pessoais e padrão
- Visão geral do programa integrada ao dashboard
- Duas variantes do sistema de navegação
2. Landing page
Redesenhamos a landing page do treinador para funcionar nas condições reais em que trabalham: uma cor de marca, fotos tiradas com o celular e textos escritos em cinco minutos entre sessões. Desktop e mobile, oito blocos, totalmente adaptável.
- Versões desktop + mobile entregues no Figma
- Cobertura completa de seções — 8 blocos
- Sistema adaptável de uma única cor de marca com lógica de gradiente automático
- Recolhimento de texto para conteúdo gerado pelo treinador
- Desempenho sólido com conteúdo de baixa qualidade e formato misto
- Compatibilidade com logotipo em preto e branco no cabeçalho
Resumo: soluções entregues para equipes e setores
A plataforma do Ymove tem sucesso quando os treinadores lançam com confiança e seus clientes se engajam imediatamente. Ambos os resultados dependem da primeira impressão que a plataforma controla: o template padrão do app e a landing page que o treinador compartilha com sua audiência.
O redesign garante que, independentemente de quanto conteúdo um treinador faça upload, da qualidade das suas fotos ou do nicho em que atua, o resultado reflita qualidade profissional desde o primeiro dia. Desenvolvido com a expertise da Toimi em design de produto e desenvolvimento mobile.
Os templates parecem profissionais desde o primeiro dia — nossos treinadores podem lançar com confiança sem mexer em nenhuma configuração de design.
Tosh Koevoets, CEO e fundador, Ymove
