The brief
WWF’s website is one of the main ways people learn about its work and get involved. The brief for this concept was to rethink the site with accessibility at the centre, so that people with visual, motor or cognitive impairments, and people on slow connections or older phones, could use it as easily as anyone else.
There was a second, quieter goal. An environmental charity shouldn’t have a heavy, wasteful website. The concept had to show that good design can also mean fewer bytes, fewer requests and less energy used on every visit.
What we did
We produced a redesign concept that concentrated on accessibility, structure and page weight.
- Accessible from the first sketch. We designed to the Web Content Accessibility Guidelines (WCAG): strong colour contrast, readable type sizes, visible focus states, clear headings and labelled form fields. Interactive elements were designed for keyboard and screen-reader users from the start. Retrofitting accessibility onto a finished design is slow and tends to leave compromises behind; designing it in costs very little extra.
- A simpler structure. We reorganised the content around what visitors come to do: learn about an issue, support a campaign, donate or take action. Fewer top-level choices and plainer labels make it easier to find a way into WWF’s initiatives.
- Lighter pages. We specified optimised, responsive images that load only when needed, lean front-end code and sparing use of animation and video. Lighter pages load faster on mobile networks and take less energy to deliver.
Technology
As a concept, the work was design and front-end specification rather than a full build. We produced page designs for desktop and mobile, an interaction and accessibility specification for developers, and guidance on image handling and front-end performance, so whoever built it could do so without losing the accessibility or the efficiency along the way.
Deliverables
- Accessibility-led redesign concept for key page types
- Simplified information architecture and navigation
- Accessibility specification for interactive components
- Performance and image-loading guidance for an efficient build
- Responsive designs for mobile, tablet and desktop
What this project shows
Accessibility is easier and cheaper when it is designed in from the start. We now build every template to WCAG 2.2 AA and aim for Lighthouse scores of 95 or more, whatever the size of the project. Read our guide to website accessibility and UK law, see our UX design service, or get in touch about an accessibility review.
