BOTH Initiative Website

BOTH Initiative is a nonprofit organization focused on uplifting African communities through food security, infrastructure, economic empowerment, and capacity development for low-income earners.
The goal of this project was to design and develop a website that clearly communicates the organization’s mission, showcases its programs, and allows people to easily get involved through volunteering or donations.
The website needed to reflect compassion, credibility, and professionalism while remaining simple enough for easy navigation.

Role

UI/UX Designer & Developer

Tools

Figma, FigJam, Webflow, Trello, Cloudflare

Collaborators

Graphic Designer, Stakeholders, Business Analyst

Timeline

2 weeks

Impact

Complete digital launch for the BOTH Cities brand and stronger online credibility and buyer confidence.

Link

Website link

The Challenge

The organization needed a digital identity that could inspire trust and encourage participation. The challenges were to:

Communicate diverse initiatives clearly without overwhelming visitors.

Design a warm yet modern interface that aligns with the mission.

Build a responsive and functional website that works for all audiences.

Balance storytelling with structure to encourage donations and volunteer sign-ups.

My Role

As the Product Designer & Webflow Developer, I led the project from planning to launch. My responsibilities included:

Mapping user journeys and information flow in FigJam.

Designing the full website layout and visual identity in Figma.

Developing the website in Webflow, ensuring responsiveness and accessibility.

Collaborating with stakeholders through Trello for feedback and approvals.

Integrating call-to-action sections for donations and contact forms.

Design Process

Research & Planning

Reviewed nonprofit website structures to balance emotional storytelling with functional clarity.

Wireframing & UX Design

Structured the site to present key areas; About, Programs, Get Involved, and Contact, in a simple, scrollable flow.

UI Design

Created a friendly, inspiring design system using warm colors, clean typography, and meaningful imagery and video.

Development

Developed the full site in Webflow, added interaction and motion to bring the story to life, and ensured responsive layouts.

Launch & Setup

Tested performance and mobile optimization, reviewed accessibility, and prepared for public launch.

The Solution

The final website included:

A strong website summarizing BOTH Initiative’s mission and values.

Dedicated sections for programs like Food Bank, Empowerment, and Infrastructure.

Get Involved” section with volunteer and donation pathways.

Responsive, accessible design for users across all devices.

Brand consistency across the website.

Results

BOTH Initiative gained its online presence.

Clear storytelling improved understanding of the organization’s purpose.

Easier volunteer onboarding and donor communication.

Stronger credibility with partners and sponsors.

Key Learnings

Designing for social impact requires empathy and clarity.

A minimalist approach improves focus on mission-driven content.

Colour and imagery play a major role in emotional engagement.

Collaboration with stakeholders helps align tone and message.

Closing

This project helped me explore the intersection of design, storytelling, and social impact. I created a website that not only represents BOTH Initiative’s mission but also provides a functional and engaging experience for donors, volunteers, and community partners.

Other Projects

Gingerthon

Agribusiness Platform

View Project

Firmgate & Associates

Business Development and Advisory Company

View Project

View All