- Type
- In-house initiative
- Industry
- Non-profit & community
- Project
- Non-profit resource site (brand, content and web)
The challenge
Talking about an absence is hard at any age, and most of the material that exists is written for exactly one of those ages. A child missing someone they have no memories of, a teenager who cannot start the sentence, and a parent who wants to get closer without pushing all need very different things — yet they usually land on the same long page, in English, or in a clinical register.
The problem was never a shortage of content. It was the threshold: someone opening a site like this is doing it on a bad day, often from a phone, often without wanting to explain themselves to anyone. If the first screen asks them to choose between twelve sections, or the first answer is two thousand words long, they close the tab.
There was an ethical constraint alongside the design one. A place where someone reads about their father’s death cannot be instrumented with advertising pixels, and it should not make anyone dismiss a cookie banner before it will let them read a sentence.
The ALCA solution
ALCA designed and built Fundación ALCA end to end — brand, illustration, copy and code — as its own non-profit initiative. The homepage splits into two paths, "Quiero comprender" (I want to understand) and "Quiero ayudar" (I want to help), so nobody has to describe their situation before finding their section.
Inside, the content is not articles. It is questions: eight in "Para ti" across three topics (feeling alone, missing someone, finding it hard to talk) and six in "Para acompañar" (listening, finding words, understanding). Each one opens on its own, and when it does it shows a headline that already answers, one short paragraph, and a "Un pequeño paso" block with the exact sentence the reader can use as-is — "Hoy me siento solo. ¿Podemos hacer algo juntos?"
Every answer carries an "Escuchar" button that reads it aloud using the browser’s own speech synthesis. There is no recorded audio and nothing to download: the spoken version is generated from the same text on the page, so it cannot drift out of date from the written one. That is the feature that opens the site to readers who are still learning to read, and to anyone who would rather be read to that day.
Nova, the star who accompanies the whole journey, solves a problem of register: she makes the subject approachable for a child without making it childish for an adult, and carries visual continuity between the homepage, the resources and the stories.
Key modules & features
Two-path homepage
"I want to understand" and "I want to help" separate the person living the absence from the person accompanying them, on the first click.
Questions instead of articles
Fourteen questions in total — eight for you, six for accompanying — grouped in six topics, each with its own short answer.
The "small step" block
Every answer ends in a concrete action or a literal sentence the reader can say as-is, instead of advice they have to translate into their own words.
Read-aloud answers
An "Escuchar" button on every answer plays it with the browser’s voice — no recorded audio, no external dependency.
First-person stories
The Story section holds two voices and openly labels as "texto provisional" the one its author has not written yet.
Static site, no tracking
HTML, CSS and a single deferred JavaScript file. No framework, no analytics, no pixels, and no cookie notice to get past.
How it works
- 1Someone lands on the homepage and picks one of two paths, without explaining their situation
- 2They choose a topic — loneliness, absence, finding it hard to talk — and see how many questions it holds
- 3They open a single question; every other one stays closed
- 4They read the short answer, or tap "Escuchar" and have it read to them
- 5They leave with a "small step": an exact sentence they can say to someone they trust
- 6If they want, they cross to the other path from the page footer, or read the story behind the foundation
Architecture & approach
The site is static HTML served page by page, with its own stylesheets and a single JavaScript file loaded with defer. That is not technical nostalgia: it removes the hydration cost on modest phones and eliminates the entire third-party surface from a project whose content is unusually sensitive.
Accessibility is in the foundation rather than bolted on: a skip link, navigation and sections labelled with landmarks and ARIA, topic changes announced to screen readers, and reduced animation whenever the operating system asks for it. Read-aloud uses the browser’s speech synthesis over the same text that is on the page, so no audio version exists that could fall out of sync with the content.
The typeface and icons are served from the site’s own domain — the font is preloaded and the icons live in one SVG sprite — so the first screen never depends on someone else’s network to look the way it should.
Technology & capabilities
What it was designed to improve
- Lower the threshold to entry: two paths, one topic, one question at a time
- Give people exact words rather than general advice when they cannot start the sentence
- Open the content to readers who are not fluent yet, with read-aloud on every answer
- Hold a sensitive subject without tracking anyone or asking permission to read
Status
- Live and publicly accessible at fundacionalca.com
- Fourteen answered questions published across six topics, between /para-ti and /para-acompanar
- Read-aloud available on every published answer
- No analytics and no third-party scripts: the homepage loads a single first-party JavaScript file
Related services
More case studies
Your project next
Want something like Fundación ALCA?
Tell us how your business runs and we'll show you how we'd approach it — scope, timeline and a realistic budget.