fran
CASA RONALD MCDONALD ABC · CASE STUDY
A website redesign for a home away from home
The Casa asked for a website that would show its impact clearly and make donating easier. I redesigned it with the donation path, the impact numbers and the transparency documents always in view.
At a glance
CLIENT
Casa Ronald McDonald ABC (Santo André, SP)
ROLE
UI/UX Design
DURATION
6 months
AGENCY
Octopus
PLATAFORM
Web
PROJECT TYPE
Website Redesign
TOOLS
Figma
Context
Casa Ronald McDonald ABC is a support house in Santo André, in the ABC region of São Paulo. It was founded in 1994 by volunteers from the Rotary Club of Santo André and joined the Instituto Ronald McDonald program in 2007.
The Casa supports children and teenagers in cancer treatment, and their families, for free: lodging, meals, transport to the hospitals and psychosocial support. The idea is to be "a home away from home" during treatment.
The Casa asked Octopus, where I worked as the UX/UI Designer, for a redesign of its website, with a stronger focus on how information is presented and on donation requests.
The Casa closed its doors in 2025, after years of supporting families from all over the region.
Who the site is for
The site has to serve very different people, and each one arrives with a different question:
FAMILIES
"Can the Casa help us?"
They need to understand what the Casa offers (lodging, meals, transport and support) and how to get in touch.
VOLUNTEERS
How can I take part?"
They need to see that volunteering is possible and find the way to sign up.
DONORS AND COMPANIES
How can I help, and is my money well used?"
They need a fast way to donate, campaigns such as McDia Feliz, partnership options for companies and proof of how the Casa uses its resources.
The challenge
The old website looked outdated and was not visually attractive, so it did not invite people to stay. Important information, such as what the Casa offers, how many families it supports and how it uses its money, was hard to find. The path to donate was not clear either, even though donations are essential for an organization like this. The redesign had to make the site look current and trustworthy, and put the most important content where people could see it.
It was hard to see important information and to understand how to donate.
The problem
The goal
Reach more donors and show clearly everything the Casa offers.
Process
I organized the work in four steps:
1. BRIEFING
2. INFORMATION ARCHITECTURE
3. LAYOUT IN FIGMA
I started from the Casa's request: present the information more clearly and make donating easier. These two goals guided every decision.
I organized the content into six menu sections: Home, Institutional, News, How to help, McDia Feliz and Contact.
I designed the pages in Figma, starting with the home page and then the institutional and donation pages.
4. HANDOFF AND LAUNCH
I delivered the final screens for development, and the new site was published.
Site map: six sections in the main menu and 22 pages. The Volunteer and Donate now buttons on every page lead to the first two pages of How to help.
Key decisions
DONATE IS ALWAYS ONE CLICK AWAY
A "Doe agora" (Donate now) button sits at the top right of every page, in a coral color that nothing else uses. On the home page, a card explains how to donate in three steps, with a second tab for volunteers.
TRANSPARENCY IN ONE PLACE
Activity reports by year, financial statements and certifications sit together in one accordion, so donors and partners can check how the Casa works.
IMPACT SHOWN AS NUMBERS
Large yellow figures with line icons show the Casa's work at a glance: lodging, meals, trips to the hospitals and support sessions. The UN Sustainable Development Goals 3 and 10 connect the Casa to a bigger cause.
REAL STORIES
Testimonials from families and the latest news bring the human side of the Casa to the home page and build trust.
Visual design
The layout uses strong color bands to separate the sections: blue for impact, yellow for stories and the footer, light gray for content. Big uppercase headings mark each section, and photos of real children and families make the site warm and human.
COLORS
Blue
#4973AF
Text
#595959
TYPOGRAPHY · ROBOTO
Aa
One typeface for the whole site. Bold uppercase for section headings and numbers, regular for body text.
Yellow
#F6CA51
Coral (donate)
#CA5A59
Light gray
#F0EFED
Final screens
DONATE NOW
Donating in three steps
-
Monthly or one-time, with preset amounts from R$ 30 and an "Other" option.
-
A summary card shows the amount and what it means: R$ 35 helps guarantee a day of meals for a child.
-
A stepper shows where you are: amount, your details, payment.
-
Below, eight other ways to help, each with its own page.
The donation flow: frequency, amount and a clear next step.
Other ways to help, from volunteering to legacy giving.
HOME
A warm first impression
-
A full-width slideshow with real children and families opens the site.
-
"Who we are" brings the mission, vision and values, with a button to the Casa's history.
-
Testimonials from families, the latest news, a call for corporate partners and a contact form with a map complete the page.
Testimonials from families on the yellow band.
INSTITUTIONAL · TRANSPARENCY
Numbers and documents that build trust
-
"The impact" links the Casa to the UN Sustainable Development Goals 3 (Good health) and 10 (Reduced inequalities).
-
"Casa Ronald ABC in numbers" shows 2018 data: 14,526 nights of lodging, 85,686 meals served and 2,616 trips to the hospitals.
-
Reports, financial statements and certifications are grouped in one accordion, with year buttons for quick access.
2018 numbers on the blue band: one icon, one number and one label for each service.
All transparency documents in one accordion.