Protocols4you - MaMLabs
Redesign completo · Material UI · Agendamento criado do zero · App lançado publicamente
10 de set. de 2024
O Protocols4You já existia. Tinha usuários, tinha funcionalidade, tinha uma proposta. O que não tinha era engajamento. E um produto de fitness sem engajamento é um produto que as pessoas baixam e deletam.
O diagnóstico do cliente
O app estava em fase de pivotagem quando o cliente chegou até mim. A percepção deles era de que algo no produto não funcionava, mas o problema não estava claramente mapeado. Meu primeiro passo foi entender o que estava causando o baixo engajamento antes de propor qualquer solução.
O que encontrei foi um problema duplo: visual e usabilidade andavam mal juntos. O design não refletia o mercado fitness, que é visualmente exigente e altamente competitivo. E os fluxos do app ignoravam princípios básicos de usabilidade, criando fricção em pontos onde o usuário precisava de clareza e velocidade.
Dimensão | Problema identificado |
|---|---|
Visual | Design datado, sem identidade, não competitivo no mercado fitness |
Usabilidade | Heurísticas de Nielsen violadas em múltiplos fluxos |
Arquitetura da informação | Hierarquia confusa, usuário se perdia na navegação |
Padronização | Inconsistências visuais e de interação ao longo do app |
O que não podia ser perdido
Antes de qualquer wireframe, mapeei o que já funcionava no app. Nem tudo precisava ser jogado fora. A lógica de protocolos de treino, o núcleo do produto, era sólida. O problema era a camada de apresentação e os fluxos ao redor dela. Redesenhar não significa apagar. Significa entender o que vale e refinar o resto.
Entendendo o público antes de qualquer pixel
O mercado fitness é um dos mais saturados do mundo em apps mobile. Para redesenhar o Protocols4You de forma competitiva, precisava entender quem era o usuário real e o que ele esperava de um app de treino. Conduzi pesquisas, formulários e conversas com o sócio para traçar o perfil do público-alvo, seus objetivos dentro do app e o tom que a marca precisava ter para ser levada a sério nesse segmento.
Uma descoberta ficou clara desde o início: usuários de fitness são visuais. Aplicativos como Nike Training, Hevy e Strong não têm alta adesão só porque funcionam bem, têm porque parecem premium. A identidade visual não era um detalhe do Protocols4You, era parte do problema de engajamento.
A escolha do Material UI como base
Para o processo de alta fidelidade, utilizei o Material UI como sistema de design base. Essa foi uma decisão deliberada com dois objetivos: acelerar a entrega sem comprometer a qualidade e facilitar o desenvolvimento posterior pelo time de engenharia, que já conhecia o sistema.
Um bom Design System não é sobre componentes bonitos. É sobre decisões que o time inteiro consegue executar com consistência. — princípio que guiou a escolha do Material UI para esse projeto.
Trabalhar sobre uma base validada pelo mercado permitiu que a criação de componentes novos fosse cirúrgica: só o que o Material UI não cobria foi criado do zero, mantendo o esforço concentrado nos problemas reais do produto.
Do mapeamento ao protótipo
Mapeamento completo de todas as telas e fluxos existentes no app antigo
Síntese dos feedbacks de usuários e análise heurística estruturada
Wireframes por fluxo, validados com o cliente antes de avançar
Protótipo de alta fidelidade com Material UI como base
Criação do fluxo de agendamento do zero, incluindo pré-requisitos e integração com a nova academia
Testes de usabilidade com o protótipo antes da entrega para desenvolvimento
O fluxo de agendamento
Além do redesign completo, o cliente precisava de uma funcionalidade nova: agendamento de treinos integrado à academia que seria lançada junto com a nova versão do app. Esse fluxo foi criado do zero, com pré-requisitos claros definidos antes do primeiro wireframe.
O desafio era criar um fluxo de agendamento que funcionasse para usuários com diferentes níveis de experiência com o app, desde quem estava abrindo pela primeira vez até quem já tinha protocolos definidos. A solução foi um fluxo progressivo que guia o usuário passo a passo sem criar a sensação de formulário.
De funcional a competitivo
O resultado foi um app completamente diferente do ponto de partida, visualmente e funcionalmente. A identidade ganhou linguagem própria e consistente com o mercado fitness. Os fluxos foram redesenhados com base em heurísticas de usabilidade, eliminando os pontos de fricção que causavam abandono. E o Material UI garantiu que cada componente tivesse comportamento previsível e desenvolvimento mais rápido.
Identidade visual renovada
O novo visual do Protocols4You foi desenhado para ser reconhecível no segmento fitness sem cair nos clichês do mercado. Tipografia forte, hierarquia clara, uso de cor com propósito e microinterações que dão feedback imediato ao usuário em cada ação. Um app que parece premium atrai usuário premium.
Fluxos redesenhados com base em heurísticas
Cada fluxo redesenhado passou por revisão das dez heurísticas de usabilidade de Jakob Nielsen. Os problemas mais críticos do app antigo, como falta de visibilidade do status do sistema, inconsistência nos elementos de interface e ausência de confirmação para ações destrutivas, foram corrigidos sistematicamente.
Navegação principal reestruturada com hierarquia clara
Estados de feedback adicionados em todas as ações do usuário
Consistência visual garantida via sistema de componentes
Fluxos encurtados para reduzir o número de taps em ações frequentes
App lançado publicamente
O Protocols4You está no ar. O redesign saiu do protótipo para a loja, validando que as decisões de design foram executáveis pelo time de desenvolvimento e que o produto estava pronto para usuários reais
Os feedbacks dos testes de usabilidade com o protótipo de alta fidelidade foram consistentemente positivos, validando que o redesign resolveu os problemas de engajamento identificados na fase de pesquisa.
Redesign completo de visual e usabilidade em app mobile fitness
Material UI como base de design system, com componentes customizados cirúrgicos
Fluxo de agendamento criado do zero e validado em testes
App lançado publicamente após entrega
