Asido Foundation Website by Michael AdebamboAsido Foundation Website by Michael Adebambo

Asido Foundation Website

Michael Adebambo

Completed work

Frontend Engineer

Web Developer

GSAP

Next.js

Sanity

Healthcare

Asido Foundation — Rebuilding a Digital Home for Mental Health Advocacy

Hero section ; Asido Foundation

Overview

Asido Foundation is a mental health advocacy nonprofit working to reshape Nigeria’s perception of mental health. Through advocacy, education, and empowerment, the foundation is committed to building a stigma-free society—one life at a time.

I worked as a Creative Frontend Developer on the redesign and rebuild of Asido’s official website, commissioned by Slaine Labs. The goal was to create a modern, expressive digital platform that truly reflected Asido’s mission, impact, and growing presence.

Role: Creative Frontend Lead / Engineer Timeline: 6 Weeks

The Challenge: A Digital Identity Crisis

The original platform suffered from three critical issues:

Visual Disconnect: The UI was rigid and failed to evoke the empathy required for mental health advocacy.

Editor Paralysis: Non-technical staff struggled with the WordPress backend, leading to outdated content and "code bloat."

Performance Bottlenecks: Slow load times hindered users seeking immediate resources, particularly in low-bandwidth regions.

Legacy content pages were difficult to navigate and challenging for non-technical editors to maintain.

The previous homepage lacked visual hierarchy and emotional resonance, creating a disconnect with the foundation’s mission.

The Vision: From Static Design to Fluid Experience

The foundation for this transformation was a high-fidelity UI created by the Slaine Labs design team. This new design solved the core identity problems, providing a clean, "stigma-free" visual language.

My role as the Creative Frontend Engineer was to architect the Headless System and conceptualize the motion logic that would breathe life into these designs. My goal was to ensure the digital experience felt as approachable and fluid as the new visual identity suggested.

A modern, stigma-free visual language designed to communicate Asido’s mission with clarity and confidence.

Motion Branding (GSAP & Framer Motion)

I translated the static UI into a dynamic experience by implementing a layered animation strategy:

GSAP: I developed high-end, scroll-triggered reveals and complex timeline-based transitions. These were designed to guide the user's eye through the foundation's impact stories without feeling overwhelming.

Framer Motion: I utilized this for declarative UI micro-interactions—ensuring that every button, hover state, and modal entry felt responsive and immediate.

Purposeful motion adds warmth and continuity across interactions, reinforcing the foundation’s storytelling.

Tailored CMS Experience (Sanity.io)

I architected a custom Sanity Studio to match the new design system. By defining specific schemas for "Publications," "Events," "Success Story," and "Milestones" I empowered the staff to publish rich-text content via Portable Text that automatically adhered to the designer's strict layout constraints.

A custom Sanity Studio setup enables non-technical editors to manage structured content with ease.

Technical Highlights & Decisions

1. Technical Highlight: Interactive Nigeria Map (SVG)

The homepage features an interactive Nigeria map that allows users to explore regional impact statistics by selecting different geopolitical zones. This component became one of the most technically demanding parts of the UI due to the combination of complex SVG structure, interaction design, and performance constraints.

The Approach — Component Architecture & Scalable Interactions

The map is implemented as a single 781 × 642 SVG React component, with each geopolitical zone (Lagos, Abuja, North Central, North East, North West, South East, South South, and South West) defined as an individual <path> element. Each region is treated as an interactive entity with its own event lifecycle.

Key interaction features include:

Hover state pattern fills: On hover, regions transition from a neutral white fill to branded color patterns using SVG <pattern> definitions. This provided rich visual feedback without increasing DOM complexity.

Click-based region selection: Selecting a region triggers an onRegionSelect() handler, opening a contextual slide-in drawer containing region-specific statistics.

Drawer-Based Focus Instead of Map Zoom

Rather than zooming or transforming the main map which often introduces layout instability and usability issues, I adopted a drawer-based interaction model:

The primary map remains fully visible, preserving spatial context.

A Framer Motion–animated drawer slides in from the right on selection.

Inside the drawer, a second instance of the map is rendered with CSS-based scaling applied only to the selected region.

.scale-drawer-map-LAGOS {
  transform: scale(3);
  transform-origin: center;
}

.drawer-map .LAGOS,
.drawer-map .SOUTH_SOUTH,
.drawer-map .NORTH_EAST /* …etc */ {
  fill: var(--region-solid-color) !important;
}

This approach allowed for predictable, per-region control over scale and emphasis—critical when dealing with vastly different region sizes. For example, Lagos (a small, dense state) scales differently from the North East (a much larger geopolitical zone), ensuring consistent visual clarity across selections.

Performance & State Optimization

Because the SVG paths are relatively complex, the component is wrapped with React.memo() to prevent unnecessary re-renders. Additionally, useMemo() is used to compute derived values such as dynamic viewBox adjustments when the component is in show-only-selected mode.

Outcome

The final result is a smooth, responsive, and intuitive interactive map that balances clarity with performance. Users can explore regional impact data with immediate visual feedback, while the architecture remains maintainable and extensible for future data layers or interactions.

2. Technical Highlight: The Migration Engine

The legacy data consisted of hundreds of posts trapped in "spaghetti HTML." Manual entry was impossible within the 3 Months timeline.

The Solution: An Automated ETL Pipeline I developed a custom migration engine in Node.js to handle the rescue mission:

Extract: Programmatically fetched all legacy content via the WordPress REST API.

Transform: Wrote sanitization logic to strip legacy inline styles and map raw HTML into Sanity Portable Text (JSON), future-proofing the data.

Media Rescue: Automated the download and re-upload of hundreds of assets to Sanity’s CDN, ensuring 100% media integrity and SEO preservation.

Load: Batched the cleaned data into the new backend, preserving historical metadata and internal link structures.

Implementation: The full migration pipeline (Node.js scripts, transformation logic, and media handling) is available as a public repository:

Why Sanity CMS over Wordpress

We needed content as data, not as HTML. Sanity was chosen for its flexibility and structured content modeling. It allowed us to:

Create custom schemas tailored to Asido’s programs, posts, and pages

Enable non-technical editors to publish confidently

Support future growth without rebuilding the frontend

Animations & Motion

I used GSAP and Framer Motion to add subtle, purposeful motion:

Scroll-based reveals to guide attention

Staggered text and visual entrances

Results & Outcomes

Workflow Revolution: The content team reduced their publishing cycle from days to minutes.

Performance Gains: Drastic improvements in PageSpeed scores and mobile usability, resulting in better accessibility for users in need.

Identity Rebirth: By combining Slaine Labs' high-end design with a robust technical architecture, the foundation now has a digital presence on par with global non-profits.

Like this project

Completed work

Posted Feb 12, 2026

From legacy WordPress to a Next.js platform—redefining Asido’s digital identity and editorial workflow.

Likes

Views

Timeline

Oct 15, 2025 - Jan 1, 2026