Accessible web design for a non-profit

a laptop computer sitting on top of a round table, showing Neon's homepage.

Project overview

Neon is a British non-profit organisation that supports campaigners and activists across various social movements through training, consultancy, and networking.  I joined a team of freelancers to give Neon a fresh look and create a new website that would better explain their wide range of activities, while ensuring accessibility for all.

I worked closely with brand strategy and graphic design experts to seamlessly incorporate Neon's new visual identity into a fresh website built on Webflow. The goal was to maintain consistent branding throughout the site, while ensuring accessibility.

The project presented an exciting challenge of making the most of Webflow's CMS to meet Neon's specific needs while giving them control over future updates. It was a rewarding journey that combined design expertise with sector-specific knowledge to create an impactful online presence for Neon.

an ipad showing the sitemap of Neon's website in Figma.

The strategy

Neon offers a variety of training and support options to their members. However, the original site had a lack of clarity in presenting these resources. My first task was to reorganise the content into a logical sitemap, ensuring easy navigation for users. I also compiled a comprehensive list of the technical features required by Neon and devised strategies to simplify their website maintenance process.

Thanks to Webflow's powerful CMS (content management system), Neon's website automatically generates most of its content across the necessary pages. I customised templates and added special features, like dynamic event pages that display upcoming events and disappear once they're over. I also built a flexible structure for the resources section, making it easy to add, update, and organise new items. This saves them time, maintains the design integrity they invested in, and simplifies the updating process.

a laptop computer showing Neon's team members on their about page.

The design

Organisations like Neon understand the importance of including everyone and are committed to investing in improving accessibility. Throughout my design process, I focused on making the website accessible at every stage.

When working with Neon's new brand identity, I made sure to match colours that were easy to read for all users.I also took the time to explain to Neon why I made certain design choices to improve accessibility. We discussed the importance of features like keyboard navigation, high contrast between colours, and clear headings.

Thankfully, Webflow's built-in accessibility features made it simple to incorporate these elements into the design. By prioritising accessibility, Neon shows that they value inclusivity and want to make sure everyone can access their website.

Our collaboration, combined with Webflow's accessibility tools, allowed us to create a website that meets accessibility standards. This commitment ensures that Neon's website is welcoming and easy to use for all users, now and in the future.

an ipad showing a grid of Neon's brand colours with their contrast ratio and accessibility score.
an iphone showing Neon's training page. There's an event picture with people doing a workshop and a title "who is this training for?"
Sunitha Dwarakanath
Project and office assistant at Neon

“Tamara has been really easy to work with, producing an incredible professional and accessible website. It has transformed our ability to engage with people in our network, improved our internal processes through automation, saving us time and resources. I would definitely recommend her for future work and look forward to our continued relationship.”

two ipads showing bits of a page from Neon's site, with people in training for "broadcast media interviews training".

Next case study