Começar um projetoComeçar um projetoCliente
Case de estudo IA
Categoria
Automação/IA
Ano
2026
Tags
Este projeto foi desenvolvido como um estudo de caso independente, criado para explorar como inteligência artificial, direção de arte, UX/UI e desenvolvimento front-end podem ser integrados em um processo completo de construção digital.
A proposta partiu da análise do posicionamento da Wellhub como uma plataforma de bem-estar corporativo que conecta empresas e colaboradores a academias, estúdios, aplicativos, serviços de saúde, mindfulness, nutrição e qualidade do sono.
O objetivo foi reinterpretar a experiência digital da marca, criando um hero mais visual, editorial e orientado à conversão, sem perder a clareza comercial necessária para atender públicos distintos.
A Wellhub possui uma oferta ampla, que envolve diferentes perfis de usuários, categorias de bem-estar e jornadas de conversão.
O principal desafio foi organizar todas essas informações dentro de uma interface capaz de comunicar, simultaneamente:
Além disso, o novo conceito precisava evitar uma estrutura convencional de landing page, criando uma apresentação mais contemporânea, dinâmica e coerente com uma plataforma global de tecnologia e saúde.
O processo começou com a estruturação de um briefing técnico e visual.
Foram analisados o site atual, a arquitetura de informação, os principais pontos de conversão, a linguagem institucional, os componentes recorrentes e a forma como a plataforma apresenta suas soluções para empresas e colaboradores.
A partir dessa análise, foram definidos os principais objetivos da interface:
O briefing também definiu requisitos de composição, hierarquia, responsividade, comportamento dos componentes, áreas de conversão e direção de arte.
A etapa seguinte foi dedicada à curadoria de referências.
Foram pesquisadas interfaces de plataformas de saúde, fitness, benefícios corporativos, produtos SaaS, aplicativos de bem-estar e experiências digitais com forte apelo editorial.
As referências não foram utilizadas como modelos para reprodução. Elas serviram para identificar padrões de:
Com base nessa pesquisa, foi definida uma linguagem visual mais sofisticada, com tons neutros, contrastes tipográficos fortes, elementos arredondados, imagens relacionadas a movimento e saúde e componentes capazes de transmitir tecnologia sem afastar o caráter humano da marca.
A direção de arte foi construída para representar o bem-estar como um ecossistema conectado.
Em vez de destacar apenas academia ou atividade física, a composição apresenta diferentes dimensões da jornada do usuário:
A imagem principal foi desenvolvida para funcionar como ponto central da narrativa, conectando diferentes atividades por meio de elementos gráficos, ícones e relações visuais.
O layout foi organizado em três áreas principais:
Área dedicada à captação comercial, com campo de contato, chamada para orçamento e apresentação dos principais planos.
Espaço responsável pelo posicionamento, narrativa visual, prova social, indicadores de resultado e apresentação do ecossistema Wellhub.
Área voltada à descoberta de academias, aplicativos, modalidades, números da rede e acesso aos planos disponíveis.
Essa divisão permitiu apresentar diferentes objetivos de negócio sem fragmentar a experiência.
Após a definição do conceito, o desenvolvimento foi realizado com apoio do Claude Code, utilizando inteligência artificial como parte ativa do fluxo de implementação.
A IA foi aplicada na interpretação do briefing, planejamento da estrutura técnica, criação dos componentes, organização dos estilos, implementação da responsividade e refinamento do código.
O processo não consistiu apenas em solicitar uma página pronta.
O desenvolvimento foi conduzido por ciclos de instrução, validação e ajuste.
O briefing visual foi transformado em uma lista objetiva de componentes, comportamentos e prioridades.
Foram definidos:
Antes da implementação, a estrutura da página foi decomposta em blocos reutilizáveis.
Essa etapa permitiu orientar o Claude Code a desenvolver uma base mais organizada, reduzindo repetições e facilitando futuras alterações.
A primeira implementação foi utilizada como protótipo funcional.
Nessa etapa, o foco estava em validar:
A partir da primeira versão, foram realizados diversos ciclos de correção.
Os prompts passaram a trabalhar problemas específicos, como:
Cada nova instrução foi direcionada a uma necessidade concreta, evitando alterações genéricas que pudessem comprometer o resultado já validado.
A versão mobile não foi tratada apenas como uma redução do desktop.
A estrutura foi reorganizada para priorizar leitura, conversão e navegação em telas menores.
Foram ajustados:
Após a consolidação visual, o código foi revisado para identificar inconsistências, componentes redundantes e possíveis melhorias de desempenho.
A IA também foi utilizada para apoiar:
A inteligência artificial atuou como uma ferramenta de aceleração e apoio técnico, mas o resultado dependeu diretamente da qualidade das decisões tomadas durante o processo.
O Claude Code foi responsável por interpretar comandos, sugerir estruturas e executar partes do desenvolvimento.
A direção do projeto permaneceu baseada em:
O uso de IA reduziu o tempo entre conceito e protótipo funcional, permitindo testar diferentes soluções com maior velocidade.
Ao mesmo tempo, o processo demonstrou que resultados consistentes dependem de briefing detalhado, comandos objetivos e acompanhamento contínuo.
O resultado é uma proposta de hero e interface institucional com abordagem mais visual, estratégica e orientada à conversão.
A nova composição apresenta:
A interface utiliza uma estética contemporânea, com forte contraste tipográfico, imagens humanas, componentes modulares e conteúdo organizado para apoiar diferentes decisões dentro da mesma experiência.
Quer resultado assim?
Vamos conversar sobre seu projeto.
