fran
CASA RONALD MCDONALD ABC · ESTUDO DE CASO
Redesign do site de uma casa longe de casa
A Casa pediu um site que mostrasse seu impacto com clareza e facilitasse as doações. Fiz o redesign com o caminho para doar, os números de impacto e os documentos de transparência sempre à vista.
Resumo
CLIENTE
Casa Ronald McDonald ABC (Santo André, SP)
PAPEL
Design de UI/UX
DURAÇÃO
6 meses
AGÊNCIA
Octopus
PLATAFORM
Web
TIPO DE PROJETO
Redesign do site
FERRAMENTAS
Figma
Contexto
A Casa Ronald McDonald ABC é uma casa de apoio localizada em Santo André, na região ABC de São Paulo. Foi fundada em 1994 por voluntários do Rotary Club de Santo André e integrada ao programa do Instituto Ronald McDonald em 2007.
A Casa oferece apoio gratuito a crianças e adolescentes em tratamento oncológico, bem como às suas famílias: alojamento, refeições, transporte para os hospitais e apoio psicossocial. A ideia é ser "um lar longe de casa" durante o tratamento.
A Casa solicitou à Octopus, onde eu trabalhava como designer de UX/UI, uma reformulação de seu site, com maior foco na forma como as informações são apresentadas e nos pedidos de doação.
A Casa encerrou suas atividades em 2025, após anos de apoio a famílias de toda a região.
Para quem é o site?
O site precisa atender a pessoas muito diferentes, e cada uma chega com uma pergunta diferente:
FAMÍLIAS
"A Casa pode nos ajudar?"
Eles precisam entender o que a Casa oferece (hospedagem, refeições, transporte e apoio) e como entrar em contato.
VOLUNTÁRIOS
Como posso participar?
Eles precisam ver que o voluntariado é possível e encontrar uma maneira de se inscrever.
DOADORES E EMPRESAS
Como posso ajudar, e meu dinheiro está sendo bem utilizado?
Eles precisam de uma forma rápida de doar, campanhas como a McDia Feliz, opções de parceria para empresas e comprovação de como a Casa utiliza seus recursos.
O desafio
O site antigo parecia desatualizado e não era visualmente atraente, o que não incentivava as pessoas a permanecerem nele. Informações importantes, como os serviços oferecidos pela Casa, o número de famílias apoiadas e a forma como os recursos são utilizados, eram difíceis de encontrar. O processo para doações também não era claro, embora as doações sejam essenciais para uma organização como essa. A reformulação precisava tornar o site atual e confiável, além de destacar o conteúdo mais importante.
Era difícil visualizar informações importantes e entender como fazer uma doação.
O problema
O objetivo
Alcançar mais doadores e mostrar claramente tudo o que a Casa oferece.
Processo
Organizei o trabalho em quatro etapas:
1. INFORMAÇÕES
2. ARQUITETURA DA INFORMAÇÃO
3. LAYOUT NO FIGMA
Parti do pedido da Casa: apresentar as informações de forma mais clara e facilitar as doações. Esses dois objetivos nortearam todas as minhas decisões.
Organizei o conteúdo em seis seções de menu: Início, Institucional, Notícias, Como ajudar, McDia Feliz e Contato.
Eu projetei as páginas no Figma, começando pela página inicial e depois pelas páginas institucionais e de doações.
4. ENTREGA E LANÇAMENTO
Entreguei as telas finais para desenvolvimento e o novo site foi publicado.
Mapa do site: seis seções no menu principal e 22 páginas. Os botões "Seja voluntário" e "Doe agora" em todas as páginas levam às duas primeiras páginas de "Como ajudar".
Decisões importantes
FAZER UMA DOAÇÃO ESTÁ SEMPRE A UM CLIQUE DE DISTÂNCIA
Um botão "Doe agora" (Doe agora) está localizado no canto superior direito de todas as páginas, em uma cor coral exclusiva. Na página inicial, um cartão explica como doar em três etapas, com uma segunda aba para voluntários.
TRANSPARÊNCIA EM UM SÓ LUGAR
Os relatórios de atividades por ano, as demonstrações financeiras e as certificações ficam reunidos em um único painel, para que doadores e parceiros possam verificar o funcionamento da Casa.
IMPACTO REPRESENTADO EM NÚMEROS
Grandes figuras amarelas com ícones de linha mostram o trabalho da Casa de forma resumida: hospedagem, refeições, deslocamentos para hospitais e sessões de apoio. Os Objetivos de Desenvolvimento Sustentável 3 e 10 da ONU conectam a Casa a uma causa maior.
HISTÓRIAS REAIS
Depoimentos de famílias e as últimas notícias trazem o lado humano da Casa para a página inicial e constroem confiança.
Design System
O layout utiliza faixas de cores fortes para separar as seções: azul para impacto, amarelo para as notícias e o rodapé, e cinza claro para o conteúdo. Títulos grandes em letras maiúsculas marcam cada seção, e fotos de crianças e famílias reais tornam o site acolhedor e humano.
CORES
Azul
#4973AF
Texto
#595959
TIPOGRAFIA · ROBOTO
Aa
Uma única fonte para todo o site. Letras maiúsculas em negrito para títulos de seção e números, e letras normais para o corpo do texto.
Amarelo
#F6CA51
Coral (doar)
#CA5A59
Cinza claro
#F0EFED
Telas finais
FAÇA SUA DOAÇÃO AGORA
Doar em três etapas
-
Mensal ou única, com valores predefinidos a partir de R$ 30 e opção "Outros".
-
Um cartão resumo mostra o valor e o que ele significa: R$ 35 ajudam a garantir um dia de refeições para uma criança.
-
Um indicador mostra onde você está: valor, seus dados, pagamento.
-
Abaixo, oito outras maneiras de ajudar, cada uma com sua própria página.
Fluxo de doações: frequência, valor e um próximo passo claro.
Outras formas de ajudar incluem o voluntariado e doações testamentárias.
HOME
Uma primeira impressão calorosa
-
O site é aberto com uma apresentação de slides em tela cheia, mostrando crianças e famílias reais.
-
"Quem somos" apresenta a missão, a visão e os valores, com um toque especial, à história da Casa.
-
Depoimentos de famílias, as últimas notícias, um apelo a parceiros corporativos e um formulário de contato com um mapa completam a página.
Depoimentos de famílias que usam a faixa amarela.
TRANSPARÊNCIA INSTITUCIONAL
Números e documentos que constroem confiança
-
"O impacto" relaciona a Casa aos Objetivos de Desenvolvimento Sustentável 3 (Saúde e bem-estar) e 10 (Redução das desigualdades) da ONU.
-
O relatório "Casa Ronald ABC em números" apresenta dados de 2018: 14.526 pernoites, 85.686 refeições servidas e 2.616 deslocamentos para hospitais.
-
Relatórios, demonstrações financeiras e certificações são agrupados em um painel sanfonado, com botões de ano para acesso rápido.
Números de 2018 na faixa azul: um ícone, um número e uma etiqueta para cada serviço.
Todos os documentos de transparência em um único formato sanfonado.