Social impact · Global · 2020
Creating Abilities: an accessible website that doubled volunteer enquiries
Creating Abilities works for disability inclusion across education, employment, healthcare and accessibility. It needed a website that could carry all of that without reading like an annual report, and that worked for every visitor, including the people it exists to serve.
- Client
- Creating Abilities
- Market
- Global
- Engagement
- Nonprofit website build, then Care & Grow plan
- Timeline
- 10 weeks
- In care since
- 2020
- Platforms
- Web
- Capabilities
- Web EngineeringProduct and UX Design
Doubled
volunteer enquiries in six months
40+
countries sending visitors
WCAG AA
conscious build throughout
The context
A big mission with a lot to say.
More than a billion people live with some form of disability. Creating Abilities works on that scale through programmes in education, employment, healthcare and accessibility, with corporate partnerships, mindfulness sessions, resources, volunteering and donations alongside.
Every one of those programmes deserved a place on the website. Put all of them on the first screen, though, and a visitor who simply wanted to volunteer on a Saturday would never find the button.
The challenge
Four audiences, four questions, one homepage.
A volunteer, a donor, a corporate partner and a family looking for support all arrive with different questions: what does this organisation do, where does it work, what is happening now, and how can I help? The old approach answered all four at once and none of them well.
There was a second, sharper test. A website about disability inclusion that fails a screen reader, or hides its buttons from a keyboard, loses trust on the first visit. Accessibility could not be a checklist at the end. It had to shape the design from the first wireframe, on a nonprofit budget.
Our approach
We organised the site around the questions people bring.
A short, focused run through the Ampersand Method, with an accessibility check at every step rather than one at the end.
- 01
Listen & Learn
Conversations with programme leads, volunteers and the people answering the organisation's email, to learn what visitors actually ask and in what order.
- 02
Map & Measure
An audit of every page and document, grouped into programme areas and matched to the four questions. What a new visitor needed first went to the top. The rest waited its turn.
- 03
Sketch & Shape
A page hierarchy that opens with the facts, then gives each audience its own path. One visual language for all four programme areas, with contrast and type sizes set for low vision from the start.
- 04
Build & Break
Reusable page modules the team can edit themselves, tested with a keyboard alone and with screen readers on desktop and mobile.
- 05
Launch & Land
Content migrated, the team trained to publish programme updates without a developer, and a final accessibility pass before go-live.
What we built
A clear path for every kind of visitor.
A public website that leads with purpose, shows the breadth of the work and makes the next step obvious.
Facts first
The homepage moves from the scale of the issue to programme areas, current initiatives and aims, so a new visitor has context before being asked to act.
Programme areas that stand apart
Education, employment, healthcare and accessibility each get their own space, with shared design patterns so the site feels like one organisation.
Projects the team can publish
Project and initiative modules with clear labels and imagery, editable by the team without waiting for a developer.
Volunteering and partnerships
Structured forms for volunteers and corporate partners replaced long email chains, and every enquiry now reaches the right person.
Offices you can find
Office and contact details brought out of the footer, because for a nonprofit, showing where you work is part of earning trust.
Accessibility built in
Built with WCAG AA in mind from the first sketch.
- Colour contrast checked on every template
- Visible focus states and full keyboard use
- A logical heading order and descriptive alt text
- Readable type that holds up at 200% zoom
The outcome
More people found a way to help.
Volunteer enquiries doubled in the six months after launch, and the site now draws visitors from 40+ countries. The programme team publishes its own updates, so the website keeps pace with the work instead of trailing it.
The last change list before launch was not ours. A volunteer who uses a screen reader every day went through the site page by page from home, and her notes were the final fixes we made. More on how we build sites like this on our website design and development page.
Volunteers used to find us by accident. Now the website does the introducing, and it works for the people we serve, which was always the point.
Care & Grow
Still looked after, still accessible.
In our care since 2020
Since launch we have hosted the site, kept it updated and secure, and run an accessibility review whenever a new page template is added. The organisation's team runs the content, and the site has grown with its programmes since the version pictured here.
Work like this is part of how we give back. A share of the studio's time goes to nonprofits and community organisations, and you can read more about that on our studio page.
Who worked on it
- Partner, engineering and delivery
- Content strategist
- UI designer
- Front end engineer
- WordPress engineer
- Accessibility tester
Credits
Content strategy, design, engineering and ongoing care by D&C Studios. Suraj Pawar led the account, with a content strategist, a UI designer, two engineers and an accessibility tester on the team. Creating Abilities supplied its programme content and imagery, and one of its volunteers made the final accessibility check.
The screenshot on this page shows an archived version of the homepage from December 2020. The organisation’s current website may look different.
Building for a mission with a lot to say? Start with the rough version.
Stack and tools
- WordPress
- PHP
- Custom page modules
- Screen reader testing
- Managed hosting