Home e página de performance da Café Wealth Management em um notebook e um tablet

Escolha o nível de detalhe

Meu papel
Designer da Web, do briefing à publicação e às evoluções pós-lançamento
Período
2º semestre de 2025, com evoluções em 2026.
Conhecer o site publicado

Café Wealth Management

Como Designer da Web, 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.
Home publicada da Café Wealth Management, com apresentação institucional e início dos serviços
A presença digital da Café Wealth Management depois do redesign e da implementação no WordPress.

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.

Registro parcial do site anterior da Café Invest no Wayback Machine
Registro parcial da estrutura anterior. O Wayback Machine não preservou todos os assets; por isso, a imagem serve apenas como contexto e não como avaliação visual do trabalho anterior.

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?

  1. Explicar antes de aprofundar. O visitante deveria entender a atuação da Café sem precisar dominar o vocabulário do mercado.
  2. Aproximar afirmação e evidência. Credenciais, experiência e equipe precisavam aparecer no contexto em que geravam confiança.
  3. 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.
  4. 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.

Slide do deck de apresentação explicando a navegação, o hero e o fluxo da Home
O deck transformou as decisões da tela em uma conversa estruturada com o cliente.
Protótipo vertical completo da Home da Café Wealth Management no Figma
A Home usada para validar a direção antes de escalar o projeto para as outras páginas.

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:

Vídeo autoral de apresentação do projeto depois da publicação. Assistir no YouTube.

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.

  1. Google Sheets O cliente mantém os dados mensais na fonte que já conhece.
  2. Apps Script O Web App organiza e disponibiliza os dados para consulta.
  3. WordPress A página consulta e apresenta indicadores, histórico e gráfico.
Página de performance em desktop com quatro indicadores, tabela mensal e gráfico comparativo
A página de performance é alimentada automaticamente a partir dos dados organizados no Google Sheets.
Página de performance em tela móvel com indicadores, histórico mensal e gráfico
A mesma estrutura adaptada para telas menores, preservando indicadores, histórico e contexto.

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.

Comercial O site passou a apoiar a apresentação da empresa e dos serviços nas conversas de venda.
Operação Os dados passaram a ser atualizados pela planilha, sem remontar a página a cada período.
Evolução A base recebeu a página de performance e o blog depois da publicação inicial.
Área de insights da Café Wealth Management com dois cards de artigos
A área de blog integrada à presença digital como uma evolução pós-lançamento.

O que este projeto reforçou na minha atuação:

  • Web design 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.

Ser Designer da Web, neste projeto, foi manter a mesma intenção do briefing ao navegador — e continuar cuidando dela quando o site precisou evoluir.

Conhecer o site publicado