Escolha o nível de detalhe
Café Wealth Management
Conduzi o novo site do briefing à publicação: organizei o conteúdo, desenhei e apresentei a interface, implementei as páginas principais e criei uma integração para atualizar a performance automaticamente a partir de uma planilha.
Visão Geral
- Time
- Projeto realizado na Dois Palitos · 2P Growth Lab, em contato direto com o cliente e em colaboração com os times comercial, estratégico, de atendimento e desenvolvimento.
- Métodos
- Briefing, benchmark, arquitetura de conteúdo, prototipação, apresentação ao cliente, validação e QA.
- Ferramentas
- Figma, WordPress, Elementor, Google Sheets, Apps Script e JavaScript.
- Principal resultado
- O site passou a apoiar as conversas do time comercial, ganhou uma página de performance atualizável pela planilha e continuou evoluindo com a implementação do blog.
O desafio não era só publicar um site mais profissional. Era traduzir confiança para a web e deixar a estrutura pronta para continuar evoluindo depois do lançamento.
1. Um site que já não representava o negócio
A Café Invest chegou à Dois Palitos com a necessidade de um novo site institucional. A versão anterior havia sido construída pelo próprio cliente e estava hospedada no HubSpot. Ela cumpriu um papel importante no início, mas já não acompanhava a forma como a empresa queria se apresentar ao mercado.
O negócio entrava em uma nova fase, agora com o posicionamento Café Wealth Management. Essa definição veio do cliente. Minha responsabilidade foi traduzi-la para a web de forma clara, confiável e coerente com o nível de serviço que a empresa queria comunicar.
O site precisava explicar rapidamente quem era a Café, quais serviços oferecia, por que o visitante poderia confiar na equipe e qual seria o próximo passo. Também precisava funcionar como uma apresentação que o time comercial pudesse abrir durante uma conversa e enviar depois dela.
Usei o site anterior como ponto de partida. Ele ajudou a identificar quais informações já existiam, o que precisava ser reorganizado e quais lacunas deveriam ser preenchidas na nova estrutura.
O ponto de partida:
- Nova direção: posicionamento Café Wealth Management definido pelo cliente.
- Objetivo do site: elevar a presença institucional e apoiar as conversas comerciais.
- Implementação: construir a nova experiência no WordPress com Elementor.
- Evolução: criar uma base capaz de receber novas páginas e conteúdos depois da publicação.
Há um registro parcial da versão anterior no Wayback Machine. Como nem todos os arquivos foram preservados, uso esse material apenas para contextualizar o ponto de partida.
2. Clareza e confiança antes da aparência
Comecei pelo que precisava ser comunicado. Nas reuniões de briefing, reuni informações sobre os serviços, a equipe, os diferenciais, as credenciais, as dúvidas recorrentes e a forma como a Café queria se posicionar.
O conteúdo foi construído de forma colaborativa. O cliente era a fonte de conhecimento sobre o negócio; eu organizei esse material, eliminei repetições, adaptei os textos para leitura na web e transformei informações dispersas em uma arquitetura compreensível.
Também fiz um benchmark de empresas do segmento para observar como serviços complexos, independência, certificações e equipe eram apresentados. O objetivo não era copiar uma fórmula, mas calibrar a hierarquia e evitar que o novo site parecesse genérico ou excessivamente técnico.
Meu papel foi além de desenhar as telas. Eu precisava decidir o que apareceria primeiro, quais informações mereciam destaque, onde uma prova sustentava melhor uma afirmação e como cada seção conduziria à próxima.
Como transmitir seriedade sem transformar o site em um bloco de texto financeiro?
- Explicar antes de aprofundar. O visitante deveria entender a atuação da Café sem precisar dominar o vocabulário do mercado.
- Aproximar afirmação e evidência. Credenciais, experiência e equipe precisavam aparecer no contexto em que geravam confiança.
- Mostrar as pessoas por trás da gestão. A relação com o cliente era parte importante do serviço e não deveria ficar escondida.
- Dar um próximo passo claro. Os CTAs precisavam acompanhar a leitura sem competir com o conteúdo.
3. A Home definiu a direção do restante do site
Em vez de desenhar todas as páginas antes do primeiro alinhamento, usei a Home para validar a direção do projeto. Ela concentrava as decisões mais importantes de conteúdo, hierarquia, linguagem visual e navegação.
Montei a primeira versão no Figma e preparei uma apresentação para explicar o raciocínio por trás da tela. Não mostrei apenas o resultado: percorri a estrutura, contextualizei as escolhas e abri espaço para o cliente comentar antes que a solução fosse replicada nas outras páginas.
A Home antecipou os serviços, colocou credenciais e autorização em contexto, apresentou equipe e diferenciais, respondeu dúvidas frequentes e distribuiu CTAs ao longo da jornada. A intenção não era colocar tudo no topo, mas responder à próxima dúvida no momento certo da rolagem.
Depois dos ajustes e da aprovação, essa página virou a referência para o restante do site. Tipografia, componentes, ritmo visual, espaçamentos e padrões de conteúdo passaram a formar uma base comum para as páginas seguintes.
Decisões que organizaram a Home:
- Proposta de valor e ação principal logo no início.
- Serviços apresentados antes do discurso institucional mais longo.
- Credenciais, autorização e experiência usadas como sinais de confiança.
- Equipe visível, com funções e certificações em contexto.
- Diferenciais e FAQ para reduzir dúvidas antes do contato.
- CTAs recorrentes, sem interromper a leitura ou criar caminhos concorrentes.
É possível consultar o deck usado na apresentação e o projeto no Figma.
4. Do Figma ao WordPress, com colaboração e QA
Com a direção aprovada, levei o projeto para o WordPress com Elementor. Implementei as páginas principais e traduzi para o navegador a hierarquia, os componentes e o comportamento responsivo definidos no Figma.
Tive o suporte de um estagiário(Nicolas), que desenvolveu as páginas derivadas. Nessa etapa, meu trabalho também passou por orientação, suporte e controle de qualidade: revisei a implementação em relação ao protótipo, ajudei a resolver dúvidas e acompanhei os ajustes necessários antes da publicação.
Esse fluxo permitiu dividir a produção sem perder consistência. A Home aprovada funcionou como referência visual e de conteúdo, enquanto o QA manteve as páginas construídas por pessoas diferentes dentro da mesma experiência.
O projeto foi colaborativo desde a entrada na agência. Aramis Magwitz trouxe a oportunidade comercial, Leonardo Santos orientou as decisões estratégicas e Palloma Louzada conduziu o atendimento com o cliente. Minha responsabilidade foi manter a continuidade entre briefing, conteúdo, Figma, implementação e qualidade final.
Ponta a ponta não significa trabalhar sozinho.
- Aramis Magwitz: condução comercial da oportunidade.
- Leonardo Santos: direção estratégica do projeto.
- Palloma Louzada: atendimento e comunicação com o cliente.
- Nicolas Moraes Oliveira: desenvolvimento das páginas derivadas, com meu suporte e QA.
- Meu papel: briefing, arquitetura de conteúdo, interface, apresentação, páginas principais, suporte à implementação e controle de qualidade.
No vídeo abaixo, apresento o site publicado e as principais decisões do projeto:
5. Performance sem reconstruir a página todo mês
Depois do lançamento, surgiu uma necessidade diferente das páginas institucionais. A Café precisava publicar a evolução de uma carteira e compará-la com indicadores como CDI e IPCA. Como os dados seriam consolidados mensalmente, editar indicadores, tabela e gráfico no Elementor criaria retrabalho a cada atualização.
A melhor interface para o cliente já existia: o Google Sheets. Em vez de criar um painel administrativo novo, transformei a planilha em uma fonte estruturada para aquela página.
Organizei os dados no Sheets, criei um Web App com Google Apps Script para expor as informações e implementei o consumo no WordPress com JavaScript. Quando a página carrega, ela busca os dados, preenche quatro indicadores, monta o histórico mensal em tabela e exibe o gráfico publicado pelo Google Sheets.
Na prática, a planilha passou a funcionar como um pequeno CMS para esse recorte do site. O cliente atualiza a fonte que já conhece, e a página recebe os novos dados sem que seja necessário reconstruir o layout no WordPress.
- Google Sheets O cliente mantém os dados mensais na fonte que já conhece.
- Apps Script O Web App organiza e disponibiliza os dados para consulta.
- WordPress A página consulta e apresenta indicadores, histórico e gráfico.
O ganho estava no fluxo, não em criar mais uma ferramenta.
A atualização acontece a partir da planilha quando a página é carregada. Ela consulta a fonte e passa a exibir os dados disponíveis sem exigir uma nova montagem no Elementor.
O relatório em PDF permanece um download separado e não fez parte dessa automação.
A solução foi aprovada e adotada pelo cliente porque preservou uma rotina simples de atualização e manteve o resultado integrado ao site.
A melhor interface para atualizar os dados já era a planilha. Meu trabalho foi conectá-la ao site sem transferir a complexidade técnica para o cliente.
6. Um site comercial que continuou evoluindo
O site foi publicado no segundo semestre de 2025 e passou a representar a Café Wealth Management nas conversas com o mercado. Pelo retorno do cliente, o time comercial começou a usá-lo como cartão institucional e apoio para apresentar os serviços.
O projeto não ficou congelado depois do lançamento. A estrutura recebeu a página de performance e, em julho de 2026, um blog que também projetei e implementei. A mesma base visual e técnica conseguiu absorver novas necessidades sem romper a experiência já construída.
Não havia instrumentação disponível para atribuir conversão, tráfego ou receita ao redesign. Por isso, sustento o resultado no que é verificável neste projeto: adoção pelo comercial, simplificação da atualização de performance e capacidade de evolução depois da entrega inicial.
O que este projeto reforçou na minha atuação:
- Uma boa entrega não termina no layout. O resultado depende da continuidade entre conteúdo, interface, implementação e manutenção.
- Apresentar também é parte do trabalho. Explicar as decisões ajudou o cliente a avaliar a proposta para além do gosto pessoal.
- Colaboração exige referência e QA. Dividir a implementação funcionou porque havia uma direção aprovada e acompanhamento de qualidade.
- A solução técnica precisa respeitar a rotina. Integrar a planilha foi mais útil do que obrigar o cliente a aprender um painel novo.
Neste projeto, atuar como Product Designer significou preservar a mesma intenção do briefing ao navegador e continuar cuidando dela a cada evolução do site.
Conhecer o site publicadoCafé Wealth Management: do briefing ao WordPress, com performance atualizada pela planilha
O Desafio
A Café Invest tinha um site construído pelo próprio cliente e hospedado no HubSpot, mas a presença digital já não acompanhava o novo posicionamento Café Wealth Management. O novo site precisava transmitir confiança, explicar os serviços com clareza e servir de apoio para as conversas do time comercial.
Presença digital
Do site anterior à nova direção institucional
O registro anterior é parcial porque o Wayback Machine não preservou todos os assets.
Meu Papel e a Execução
Atuei como Product Designer do briefing à publicação. Conduzi reuniões com o cliente, organizei e adaptei o conteúdo, fiz benchmark, desenhei a interface no Figma, apresentei a proposta e implementei as páginas principais no WordPress com Elementor.
Tive ajuda do estagiário Nicolas, que desenvolveu as páginas derivadas com meu suporte e QA. O projeto também contou com Aramis Magwitz no comercial, Leonardo Santos na direção estratégica e Palloma Louzada no atendimento.
A Integração de Performance
Para evitar que a página de performance precisasse ser reconstruída a cada atualização mensal, transformei o Google Sheets em uma fonte estruturada. Um Web App em Apps Script disponibiliza os dados, e o JavaScript no WordPress monta indicadores e tabela e exibe o gráfico publicado pela planilha.
Assim, o cliente mantém os dados em uma ferramenta que já conhece, enquanto o site funciona como camada de visualização. A atualização é automática a partir da planilha; o PDF permanece um download separado.
- Google Sheets Fonte de dados mantida pelo cliente.
- Apps Script Ponte que disponibiliza as informações.
- WordPress Camada que apresenta indicadores, histórico e gráfico.
O Resultado
O site passou a ser usado pelo comercial como cartão institucional e apoio para apresentar os serviços. Depois da publicação inicial, a estrutura continuou evoluindo com a página de performance e com o blog, projetado e implementado em julho de 2026.
Sem métricas disponíveis de conversão ou receita, o impacto é apresentado pelo que o projeto permite comprovar: adoção comercial, uma rotina mais simples de atualização e uma base capaz de receber novas necessidades.
O trabalho não terminou quando o layout foi aprovado. Ele continuou na implementação, no QA e na forma como o cliente mantém o site depois da entrega.
Conhecer o site publicado