Project type: Concept project / Portfolio piece
My role: Web Design & WebflowDevelopment
Deliverable: Multi-pagewebsite with Webflow CMS
ARISE is an education-focused non-profit organisation operating across twelve countries. It runs three core programmes - scholarships, one-to-one mentorship, and community workshops - and has, since opening its first classroom in 2001, supported over 47,000 students and contributed more than 156,000 volunteer hours across its network.
The goal of this project was to design and build a website that could carry all of that - the scale, the history, the evidence, and the individual stories - without making a visitor feel like they were being pitched at. The site needed to be the kind of place where a first-time visitor instinctively trusted what they were reading, and where that trust translated naturally into action: a donation, a partnership inquiry, a programme application.
The final outcome is a four-page Webflow site with a Webflow CMS powering the testimonials. The design language is restrained and intentional. Every structural decision traces back to a single question: what does a visitor need to see, feel, and understand before ARISE earns the right to ask them for something?
ARISE came with a genuine content problem. There was a large amount of information that needed to live on the site and the temptation with that kind of volume is to try to fit everything onto every page. The result of that approach is always the same: a site that feels overwhelming and, paradoxically, communicates less than a leaner one would.
The information challenge was compounded by an audience challenge. The site needed to speak to four distinct groups at the same time. Potential donors arrive looking for transparency and proof that their money goes somewhere real. Students and scholarship applicants arrive looking for clarity on what support is actually available and how to access it. Institutional partners arrive doing due diligence - evaluating whether ARISE is operationally credible enough to work with. Volunteers and community members arrive looking for emotional connection and a sense of purpose. None of these visitors have the same question, and none of them should have to wade through content that isn't relevant to them to find the part that is.
The third challenge was tonal. ARISE's work is genuinely important and the stories it carries are genuinely moving. Those stories deserve to be told properly. But there's a version of non-profit storytelling that leans so hard into hardship that it starts to feel manipulative, and donors and partners have learned to distrust it. The site needed emotional weight without emotional pressure.
Five goals shaped every decision made on this project.
The first was immediate clarity. Within the first few seconds of landing on any page, a visitor should know exactly what ARISE does and who it serves. No ambiguity. No jargon.
The second was earned trust. The site shouldn't ask for trust. It should build it, incrementally, through specific language, verifiable numbers, and named voices from real people with real contexts.
The third was emotional resonance without manipulation. The stories needed to be present and genuinely felt without the experience tipping into guilt-driven fundraising.
The fourth was audience-appropriate depth. Each page needed to go just as deep as its specific audience required, no deeper and no shallower. The Programs page needed more operational specificity than the homepage. The About page needed more institutional depth than the Impact page.
The fifth was content scalability. Testimonials are the highest-trust content on a non-profit website and also the content most likely to change as new students graduate, new partnerships form, and new countries are reached. The site needed to be built so that updating that content was straightforward enough that it would actually happen.
Before opening Webflow or Figma, the first stage was mapping what the site actually needed to communicate and to whom. Three themes emerged from working through ARISE's programmes and content: education as transformation, community-led support systems and long-term measurable impact. Those themes became the structural foundation of the site.
The key strategic decision made early was to position ARISE not as a charity asking for help, but as an active system creating opportunities. That positioning shift changes everything about how content is written and sequenced. A charity asks you to give. An active system invites you to participate in something that's already working. The latter is a more honest framing of what ARISE does, and a more persuasive one.
The audience work shaped the information architecture directly. Rather than building separate experiences for each visitor type, the strategy was to build one coherent site where each audience could quickly orient to the content most relevant to them. Donors are served by the impact stats, the specific outcomes language, and the FAQ section that pre-empts common hesitations. Students are served by the Programs page's plain-language explanation of what each programme actually provides. Partners are served by the About page's history, team, and values sections. Volunteers and community members are served by the testimonial voices that represent the full range of who ARISE works with. Not just university scholars, but secondary school students, parents, teachers, and adults attending community workshops.
The navigation was deliberately reduced to four items: Home, Programs, About Us, and Our Work. No dropdowns. No nested pages. The decision was based on a simple observation. A visitor who can't immediately understand the structure of a site will leave rather than explore it.
The footer extends the navigation with anchor links that allow visitors who reach the bottom of any page to jump directly to a specific section. Footer navigation is often treated as an afterthought. Here it functions as a secondary sitemap, particularly useful for visitors who arrived mid-page via a shared link and need to reorient.
The separation of Programs and Our Work into two distinct pages, rather than one combined experience, was one of the more important structural decisions on the project. Visitors who go to Programs have intent. They want to understand what's available or how it works. Visitors who go to Our Work want evidence of what's been accomplished. Combining those two needs would have required it to do a job it wasn't built for, and it wouldn't have done its job well.
The homepage was structured as a progressive narrative rather than a static information page. The sequence follows a deliberate rhythm.
The hero opens with "Creating a Better Future Through Education." That line does several things at once: it establishes purpose immediately, it avoids the vagueness of taglines like "changing lives" or "building hope," and it sets an aspirational tone without overclaiming. Two CTAs sit in the hero, directing visitors toward the two most common next steps from a cold landing.
The impact statistics section follows immediately: 12,847 students supported, 3,421 scholarships awarded, 89 communities reached. Placing these numbers early, before any deeper storytelling, was a conscious trust-building decision. Credibility established through specificity, particularly through non-round numbers and made everything that came after easier to believe. Round numbers feel estimated. Specific ones feel counted.
The personal story section introduces Maya, a student who came to ARISE uncertain, carrying her family's hopes, and is now studying medicine as the first in her family to reach university. This story sits between the statistics and the programme breakdown intentionally. Data alone doesn't move people to act, but data followed immediately by a grounded personal story creates the connection that data can't. The story is told briefly and without sentimentality, which makes it more effective than a longer version would be.
The programme section introduces the three core areas with enough specificity to be meaningful but not so much that it replaces the dedicated Programs page. The homepage version of each programme is a direction sign. The Programs page is the destination.
The testimonials carousel near the bottom of the homepage features six voices selected with deliberate range. Together, these six voices represent every programme ARISE runs and span several countries and contexts. A testimonials section that featured only university scholarship recipients would have misrepresented what the organisation actually does. The range was intentional.
The FAQ section near the bottom addresses the specific hesitations most likely to prevent a potential donor from acting: where donations go, how students are selected, whether individual sponsorship is possible, what differentiates ARISE's approach, and how impact is measured. These questions close the gap between someone being interested and someone being willing to give. Addressing them on the homepage means fewer visitors leave to find answers elsewhere and don't return.
The Programs page opens with a hero that establishes intent before introducing the three-pillar structure through a visual overview of Scholarships, Mentorship, and Workshops.
The central design decision on this page was using a tab layout rather than an accordion to hold the three programme sections. Accordions are read sequentially, items lower in the list feel less important by position alone. Tabs signal equal access regardless of order. On a page where three distinct programmes need to feel equally available to visitors with different needs, the tab pattern was the right call.
The Scholarships tab carries the most content, and the writing is deliberately direct in a way that's unusual for a non-profit context. "We cover what matters most. Tuition, books, housing, food. The things that keep a student in the classroom instead of working three jobs. That tone and that specificity exist because vague promises about "supporting students on their journey" are exactly what makes people distrust non-profit communications. Telling someone precisely what's covered and backing it with an 87% completion rate is more persuasive than the most beautifully written mission statement.
The Workshops section carries the line "We run workshops in neighbourhoods, not ivory towers". That reflects the programme's design philosophy in a way that supports Miriam Asante's testimonial on the homepage without directly referencing it. The content of the site is designed to reinforce itself across pages.
The About page opens with purpose before history. "We exist to change lives through education" lands before any founding date or organisational context, because purpose is what should orient a first-time visitor. The founding date of 2001 appears inside the historical timeline, where it belongs, not in the opening line.
The four-point timeline positions ARISE as an organisation with long-term consistency. Consistency is its own kind of credibility. An organisation that has been doing this work for over two decades is not taking a risk with a donor's money.
The team section introduces six named, photographed leadership roles. The team section adds accountability and personality simultaneously. It makes the organisation feel run by real, identifiable people rather than a faceless institution.
The values section follows the team section rather than preceding it. Values that appear before the team who holds them can feel abstract. Values that appear after six named profiles with specific roles feel grounded in the people actually carrying them.
The Impact page is built entirely around evidence. It opens with three headline metrics placed at the very top of the page, before any scrolling is required. A visitor who navigated here specifically to verify ARISE's credentials sees the evidence immediately. That's a trust-first decision and a deliberate one.
The milestone markers that follow give those numbers historical context. The detailed growth timeline beneath them traces the organisation's development from 2019 through 2024. It reads like an organisation that knows what it's doing, not one that's performing confidence.
The page closes with a single testimonial from Ogechi Chinedu, a teacher from Nigeria. The decision to close the evidence page with one quiet, specific voice rather than another set of statistics was intentional. Numbers open the page. A voice closes it.
The testimonials section is the site's most persuasive content and also the content most likely to need updating as new voices come in from new programmes and new countries. Building it as a Webflow CMS collection with fields for quote, name, role, location, and portrait image, means the communications team can add, remove, or update testimonials without touching the design or the code. If testimonials are hard-coded they go stale, and stale testimonials start to feel invented even when they're genuine. The CMS decision was made to protect the long-term credibility of the site's most important content.
The milestones on the Impact page were kept as static content rather than a fully managed collection. The reasoning was practical: milestone data changes rarely enough that a fully dynamic collection adds maintenance overhead without meaningful benefit. Keeping them static also made it easier to apply the specific visual treatment each milestone deserved without working around CMS rendering constraints.
The colour palette centres on dark green for primary text and interface elements against a white background. The decision was made for both readability and tone. Dark charcoal on white is calm, legible at any text size, and carries no visual noise. It communicates professionalism without coldness. Colour functions as accent rather than base - the CTAs, icons, and highlights carry the warmth; the base the authority.
Typography throughout the site uses cardo font for headers and DM sans for the body to create a balance between seriousness and emotion. Section labels appear in small, tracked-out uppercase as orienting markers. They tell a visitor where they are in the page without functioning as headings. Primary headlines are large and airy; body copy is compact and direct.
White space was treated as a structural element rather than leftover room. The generous breathing areas between sections reduce visual fatigue, give emotional moments space to land, and create a reading pace that matches the tone of the content. Crowded layout would have worked against everything the design was trying to do.
The ARISE project sharpened something I keep returning to with every non-profit design challenge: the goal is not to make the website look like a non-profit. The goal is to make it work like one. Which means building for trust at every level, structural, evidential, and emotional, all at once.
The decision to sequence evidence before feeling (statistics before Maya's story), and feeling before programme detail (Maya's story before the programme breakdown), and programme detail before social proof (programmes before testimonials) is not arbitrary. It maps to how trust actually develops. You need to believe the organisation is real before you can be moved by its stories, and you need to be moved before you'll care how the programmes work.
