Strides 4 Africa Case Study

A person looking for support and a person considering a donation can arrive at the same website with very different needs. One may need a contact immediately. The other needs to understand the organisation, the work it does and what a contribution supports. The site has to welcome both without making either search through the other's journey.

That distinction shapes the first screen. The hotline sits above the headline, while Get Support and Stand With Us sit together below the introduction. The organisation's purpose is visible, but acting on it does not depend on reading the full page. Navigation offers the slower route through the story, the programmes, the impact and the media.

The visual language stays warm and direct: deep brown, chalk-white surfaces, rounded panels and photographs rooted in the community. Running introduces the organisation's setting and identity. The words around it explain the work plainly enough that the visitor does not have to know its founder or its history to take the next step.

For a site discussing gender-based violence, leaving can be as important as arriving. Quick exit stays in the bottom-left corner rather than hiding inside navigation. On a phone its label shortens as the visitor scrolls down, then expands when they scroll back up. The position and one-tap action stay consistent.

The implementation replaces the current tab with a neutral page and attempts to open a weather search in another tab. The FAQ explains what that does and where its limits are: it does not clear browsing history or hide activity from device monitoring. Describing those limits is part of making the control understandable, rather than asking its appearance to imply a guarantee.

That same care appears in the contact panel. The immediate call route has its own space, away from the fields used for a general enquiry. Someone who needs a quick contact can use it without completing a form.

Prevention, Rescue, Empowerment and Reintegration describe different parts of the work. Presenting them as unrelated services would miss their connection: support can begin before a crisis, continue through it and remain long after the immediate danger has passed.

The programme section makes that structure visible as four numbered cards. Each gives a short, concrete explanation before offering more detail. The deeper panel develops the selected programme in place, with a description, the support it includes and the organisation's reported activity. Visitors can understand the whole model first, then read the part that matters to them.

The section ends by returning to support. That placement matters: a reader who recognises their own situation in a programme does not have to go back to the top of the site to find a contact. The same vocabulary also carries into the impact panel, so the explanation of the work and its reported results stay connected.

The impact section separates the wider problem from the organisation's own activity. The context comes first. A second panel then lets visitors choose a pillar and read the figures attached to that part of the work. A school visit, a counselling relationship and a route back into work should not become one undifferentiated total.

The selected pillar changes both halves of the panel: the explanation on the left and the labelled measures on the right. Prevention shows schools, students, police officers and churches. Rescue changes the discussion to women rescued, counselling and the police partnership. The layout stays still while the content changes, making comparison easier without a new page load.

Medical camps get a separate treatment. The chart groups attendance by county and gives cataract surgeries their own visual measure. Labels explain what is counted and name the partners involved. These are figures reported by Strides, presented as part of its public account of the work; they are not results attributed to the website.

A headline total can communicate reach, but it cannot explain how that reach is distributed. The medical-camp view gives the annual total a structure: three counties, one day in each, and a repeated visual unit for attendance. A separate field counts cataract surgeries rather than folding them into the same display.

The larger figures animate into view, but the labels, county names and unit legends carry the meaning. The result can be read at two speeds: a visitor gets the scale at a glance, then looks closer to understand the geography and the type of care. The surrounding copy lists services and acknowledges the partners, keeping the visual connected to the practical work.

The donation invitation follows the explanation of the programmes and their activity. It gives the organisation's published allocation across rescue and safe housing, prevention and education, empowerment, and operations. Each category has its own line and percentage, so the invitation sits beside a concrete account of how support is intended to be used.

The donation form continues in the same visual language as the site. A donor chooses an amount with presets or a custom value, can switch between KES and USD, and sees a summary beside the controls. Donor details follow below. Grouping the contribution, the summary and the contact fields gives a long form a readable order before the handoff to checkout.

On a phone, that sequence remains vertical and readable. Buttons and currency choices keep their labels rather than relying on icons. The aim is a considered, understandable next step: the person who has just read about the work should recognise the organisation when they begin supporting it.

The visible form is one part of the donation flow. The implementation creates a donation intent on the server, validates the amount there and hands the donor to Paystack. KES is the checkout currency; the USD option provides a converted amount before that handoff. A display choice should not leave the backend guessing what was contributed.

Payment events then connect to the donation record. The source includes signature checks for incoming Paystack webhooks, duplicate-event handling and a verification route for reconciliation. Receipt work has its own status and retry handling, because a confirmed contribution and a successfully delivered email are related events with different failure modes.

That distinction also shapes the return pages. A donor returning from checkout needs a payment status and a next step, with the contribution linked back to its record. The interface and the record describe the same journey, from choosing an amount to understanding what happened after checkout.

The site connects an introduction, a route to support, an explanation of the programmes, reported activity and a way to contribute. Its consistency comes from the relationships between those parts: the same programme names in the cards and the impact panel, a contact action where a question arises, and a donation journey that continues the visual language of the story.

The quieter details carry just as much weight as the large photographs. A hotline that does not require a form. An exit that stays in one corner. Figures with labels and units. A payment record that is distinct from an email receipt. Together they turn a broad mission into an interface people can understand and act on, one step at a time.