Website Development Case Study for CCI Foundation
We designed and built a hopeful, mobile-first website for Cancer Connect Initiative Foundation: a Next.js site that makes donating simple, tells real stories of hope, and is structured for both Google and AI answer engines.
Live site:ccifoundationbd.org
Our website development- Client
- CCI Foundation
- Country
- Bangladesh
- Services
- Website Development
- Launched
- 2025
A website that feels like hope
Cancer Connect Initiative Foundation (CCI Foundation) is a non-profit, non-political, voluntary and charitable organization in Dhaka that supports cancer patients and their families across Bangladesh through awareness, care, partnerships and direct financial support. The foundation needed a home online that felt like its slogan, Connecting Hope, Changing Life: warm rather than clinical, honest about cancer without leaning on fear, and simple enough that anyone could donate, ask for help or volunteer in a few taps. We designed and built ccifoundationbd.org from the ground up as a fast, mobile-first Next.js website, structured for Google and for the AI assistants people increasingly turn to with their questions.
What the site had to do
Lead with hope, not fear
Cancer content too often relies on frightening statistics. Many visitors are patients and caregivers, so the site had to feel encouraging and supportive from the very first screen.
Make giving effortless and trustworthy
Supporters in Bangladesh give by bank transfer and bKash, some anonymously and some publicly. Both routes needed to be clear, quick and credible.
Show real impact
A young foundation earns trust by showing exactly where support goes: named patients, amounts, events and partners, not vague promises.
Give a growing body of work a home
Awareness events, stories of hope, news, partnerships and a fast-growing podcast all needed a structure that stays easy to update.
Be found, and be the answer
When someone searches or asks an AI assistant about cancer support in Bangladesh, CCI Foundation should come up as a clear, citable source.
How we built it
We built the site in four layers, from the message down to the markup:
- 01
Message & structure
We shaped the voice around courage and compassion and organized the site into eight clear destinations: Home, About Us, Events, Stories of Hope, Resources, News & Updates, Contact Us and Donate.
- 02
Design system
We turned the pink and purple cancer-awareness ribbon into a full visual language of colour, type, radius and motion, applied consistently across every page.
- 03
Engineering
We built the site on Next.js 16 and React 19 with prerendered pages, self-hosted fonts and lazy-loaded images, so it loads quickly even on mobile data.
- 04
SEO & AEO friendly by build
We gave every page its own metadata and wired the whole site into one Schema.org graph, then added llms.txt and an AI-friendly robots.txt.
Hope over fear, on every page
Cancer is frightening, and most sites about it sound that way. CCI Foundation's message is the opposite: cancer isn't the end, and nobody should face it alone. We built the whole experience around that idea, so the first feeling a visitor has is hope, and the next thing they see is a way to help.
- “#Never stop Fighting”Homepage hero
- “Cancer isn’t the end”Our core belief
- “Together we can do”Our commitment
- “Good Charity, Powered by Love.”About Us
- “Together, we can save more lives.”The closing call on every page
Real faces, real smiles
Photography shows patients smiling, holding a peace sign, looking ahead. The emotion is courage, not despair.
Words of courage
Headlines speak of fighting, courage, compassion and collective support, and a small badge on the first photo says it plainly: hope over fear.
Proof, not pity
Impact appears as real numbers and named stories, such as ৳2,00,000+ donated directly and Aiesha's fight against blood cancer, so supporters see exactly what their help does.
Every page ends on hope
Each page closes with the same band, “Together, we can save more lives.”, and two simple next steps: donate now or get involved.
A design system drawn from the ribbon
CCI's identity is the cancer-awareness ribbon in pink and purple. We turned it into a complete design system, so every page feels like the same caring organization, from the glass header to the closing call to action.
Typeface
Figtree
Confident italic headlines with the brand gradient, and clean, readable body text.
Typeface
Noto Sans Bengali
Renders the ৳ taka sign and Bengali text crisply alongside English.
The whole homepage, top to bottom
From the “#Never stop Fighting” hero to the closing call, the homepage moves between light, hopeful sections and deep purple moments of impact. Hover over the frame to pause it.
Glass navigation
A floating, frosted pill header stays readable over photography and keeps the Donate button one tap away.
Pill-shaped actions
Every primary action is a soft pink pill, so “what do I do next?” always has an obvious answer.
One gentle radius
Cards, photos and forms share a 20px corner radius for a calm, friendly rhythm.
Purple for weight
Impact, events and podcast sections shift into deep purple to signal importance without alarm.
Motion with care
Soft reveal animations and smooth scrolling that switch off automatically for visitors who prefer reduced motion.
A tour of the site
Every page has one clear job, and its own look within the same design system.
About Us
Who they are, vision and mission, values, a milestones timeline, team profiles and partners.
Events
Upcoming programmes up front, past events on a year-by-year timeline, each with its own page.
Stories of Hope
Patient stories with photos, the family's appeal and a “story at a glance” summary.
Resources
The Cancer Connect Podcast hub: expert episodes on prevention, early detection and treatment.
Donate
Bank and bKash details with one-tap copy, plus a short form for public donations.
Contact Us
Email, office directions and social links, then a message form that starts with what you need.
Built to make helping easy
Whether someone wants to give, ask for support, volunteer or simply learn, the path is short and obvious.
Two ways to give
Anonymous donors get bank and bKash details with one-tap copy buttons. Donors who want to be acknowledged fill in a short form: individual or company, amount, and how they paid. No account, no friction.
Impact you can see
Totals and named support, ৳2,00,000+ given directly, four ৳50,000 donations, a wheelchair and a fundraiser with the US Embassy, shown as clean stat cards that link to the full story.
Stories of Hope
Long-form patient stories with photos, the family's own appeal and a summary panel of the key facts: diagnosis, age, appeal amount and exactly how CCI helped.
Events timeline
Upcoming programmes lead with how to take part. Past awareness programmes, counselling sessions, concerts and fundraisers are grouped by year, each with its own page.
Help, by intent
Visitors first choose what they need, support, volunteering, a partnership or something else, so every message reaches the team with context. Common questions are answered right below.
Faces of the foundation
Profiles of the president and committee members put real people and accountability behind every appeal.
And the small things that add up
- Sticky Donate button
- One-tap copy for account details
- Searchable podcast episodes
- Breadcrumb navigation
- Newsletter sign-up
- Google Maps directions
- Partner logo wall
- Facebook & YouTube links
Designed for the phone in your hand
Many of CCI's supporters find it through Facebook and YouTube on their phones, so every page was designed for small screens first. A compact glass header keeps the Donate heart one tap away, bank details stack into thumb-friendly cards, and stories read comfortably without zooming.
Modern, fast and easy to grow
A modern React stack that keeps pages fast for visitors and readable for crawlers, and makes adding the next event or story a matter of minutes.
Next.js 16
App Router with pages prerendered as static HTML and refreshed in the background: fast to load and fully readable by crawlers.
React 19
Lightweight interactive pieces: podcast search, forms, copy buttons and the mobile menu.
CSS Modules
Scoped styles for every component, driven by shared design tokens for colour, radius, type and spacing.
Framer Motion
Gentle reveal and transition animations that respect reduced-motion settings.
Lenis
Smooth scrolling that steps aside for visitors who prefer reduced motion.
next/font
Figtree and Noto Sans Bengali, self-hosted with size-matched fallbacks so text doesn't jump while fonts load.
YouTube integration
Podcast episodes from the foundation's channel and playlist, presented in a searchable grid.
Google Analytics 4
Visitor analytics showing how people find the site and which programmes and stories they engage with.
Built to be found, and to be the answer
We built the site SEO- and AEO-friendly from the first line of code, so Google can rank it and AI assistants can understand and quote it.
Search Engine Optimization
A foundation can only help the people who find it. The site was built so Google understands every page from the day it launched.
Titles written for real searches
Each page has its own title and meta description, led by “CCI Foundation – Cancer Support in Bangladesh | Connecting Hope” on the homepage.
Clean, crawlable structure
Server-rendered HTML, canonical URLs, one clear H1 per page, descriptive headings and breadcrumbs on inner pages.
XML sitemap with images
All 21 pages are listed with their key images and last-modified dates, ready for Search Console.
Share-ready everywhere
Open Graph and Twitter cards with a dedicated share image, so links look right on Facebook, WhatsApp and Messenger.
Fast on mobile data
Every image below the first screen is lazy-loaded, fonts are self-hosted and layouts are responsive down to small phones.
Verified and measured
Verified in Google Search Console and measured with Google Analytics 4 from launch.
Answer Engine Optimization
People now ask ChatGPT, Gemini, Perplexity and Google's AI Overviews about causes they want to support. AEO makes CCI Foundation easy for those systems to understand, trust and quote.
One connected entity graph
The foundation is described as an NGO with its founding date, registration number, address, contact point, social profiles, areas of expertise and a DonateAction, and every page links back to it.
Every content type marked up
Event for programmes, Article for stories of hope, BlogPosting for news, PodcastSeries with its episode list, Person for the team, FAQPage for common questions and BreadcrumbList throughout.
llms.txt for AI assistants
A plain-language summary of who CCI is, its key facts, programmes and pages, written for language models to read.
AI crawlers invited in
robots.txt explicitly welcomes GPTBot, ClaudeBot, PerplexityBot, Google-Extended and other AI and search crawlers.
Answer-shaped content
Vision, mission and “What we do” are stated plainly, and common questions, such as how to donate or volunteer, get direct answers.
One connected entity graph
Every page carries Schema.org markup that points back to a single NGO entity, so search engines and AI assistants see one organization with its programmes, people, stories and ways to give, not a pile of unrelated pages.
- Web
SiteThe site - Donate
ActionDonate - Podcast
SeriesPodcast - FAQ
PageQuestions - NGOCCI Foundation
- EventProgrammes
- PersonThe team
- Blog
PostingNews - ArticleStories of hope
Also marked up: WebPage, AboutPage, ContactPage, CollectionPage, ItemList, BreadcrumbList.
User-Agent: GPTBot User-Agent: OAI-SearchBot User-Agent: ClaudeBot User-Agent: PerplexityBot User-Agent: Google-Extended User-Agent: Applebot-Extended … Allow: / Allow: /llms.txt
# Cancer Connect Initiative Foundation (CCI Foundation) > Cancer Connect Initiative Foundation (CCI Foundation) is a non-profit, non-political, voluntary and charitable organization based in Dhaka, supporting cancer patients and their families across Bangladesh … ## Key facts
What CCI Foundation got
A home that feels like hope
Visitors meet courage and compassion first, with a clear next step on every screen.
Giving made simple
Two clear routes to donate, using the methods people in Bangladesh already use every day.
A platform that grows
New events, stories, news and podcast episodes slot into ready-made templates, with their structured data already in place.
Ready for search and AI
Every page is indexable, described and marked up for Google and AI assistants from day one.
Want a website that works this hard for your cause?
We design and build fast, mobile-first websites with SEO and AEO built in from day one.
Frequently asked questions
It is built with Next.js 16 and React 19. Pages are prerendered as static HTML and refreshed in the background, styles are written as CSS Modules driven by shared design tokens, animation uses Framer Motion and Lenis smooth scrolling (both switched off for visitors who prefer reduced motion), and the Figtree and Noto Sans Bengali fonts are self-hosted through next/font.
