Crafting Hope Through Design: CANA Foundation

Ben Ajaero
3 min readFeb 3, 2024
CANA Foundation

When I first took on developing The CANA Foundation’s website, I knew this project was about more than just checking tasks off a list. This was an opportunity to use my skills to create a digital lifeline that could empower youth across Africa through access to education and healthcare.

It was an immense challenge to take on alone, but I knew that careful planning and strategy would be my best tools to navigate such a complex endeavour. Clickup became my trusted ally, helping me break the work down into clear milestones that marked our steady progress.

Technical Foundation and Design

Photo by James Tiono on Unsplash

The first step was laying a solid technical foundation. Pug (JS) ’s templating capabilities streamlined the frontend development process. Meanwhile, the Node and Express stack provided a robust yet lightweight backend environment. Vercel’s global edge network and serverless functions ensured users from all over the world would have fast, reliable access — a crucial consideration given the foundation’s mission.

Designing the interface in Figma allowed me to bring the vision to life through iterative wireframes and prototypes. Collaborating with others to incorporate their feedback into the designs helped ensure the final product would be both visually appealing and intuitively usable. Every aesthetic choice, from the color palette to the imagery selected, was made deliberately to resonate with users and convey the foundation’s spirit of resilience and hope.

Accessibility and Performance

Accessibility was never an afterthought but a core priority. Rigorously testing against WCAG standards and refining details based on specialized tooling helped guarantee the site would feel welcoming and informative to all. Optimization techniques like lazy loading and responsive images worked to streamline performance across a variety of devices and connections. We got a 98 Accessibility Score.

When it came time to unite the various components, SASS and BEM maintained scalable, modular styles while ES6 syntax refined the underlying scripts. Git proved invaluable for safely and efficiently managing changes as features were built out.

Seeing real users easily accessing opportunities for support after launch was tremendously rewarding. The technical achievement felt meaningful knowing it was serving the higher purpose of empowering lives through education and healthcare worldwide.

Looking back

Looking back, I’m proud to have played a role in this story of transformation through code. The CANA Foundation’s website demonstrates how technology can be harnessed to uplift communities and drive positive change. It will always stand as a symbol of the impact one person’s efforts and skills can make.

You can check out the website at https://www.thecanafoundation.com

Dialogue with me on X: @benajaero

--

--

Ben Ajaero

Hello, I'm Ben, a passionate Full-Stack Developer and UI/UX Designer deeply committed to crafting user-centric solutions. Founder & Managing Director @ Cox Code