0%
Information Village
Information Village
Where Philanthropy Meets Civil Society
A complete digital transformation from a template-based Squarespace site to a custom-built, interactive web experience with scroll-based animations, data visualizations, and a design that tells the CivSource story.
April 2026
Squarespace
Next.js 16 + PM2 + Nginx
CivSource Africa has grown from a single-country advisory firm into a constellation of five entities across three countries. Their current Squarespace site, while functional, no longer reflects the scale, sophistication, or impact of the organization. The brand has outgrown the template.
A constellation of 5 entities needs a design system, not a template
Static content cannot convey dynamic impact: growing leaders, flowing funds, connecting networks
Modern expectations for donor and partner digital engagement
Performance and SEO limitations of the current platform
Template-based Squarespace layout with standard widgets and stock design patterns.
Custom design with the actual brand palette (purple + orange), fluid typography, glassmorphism, and editorial layouts.
Static pages with basic hover effects. No scroll-based animations or dynamic content.
Pulsing heart visualization, expanding pillar columns, flowing fund streams with SVG animations, auto-cycling carousels, constellation maps.
Information organized in standard page sections. The story is told through blocks of text.
Each section creatively visualizes its message: heart for giving, growth stages for leadership, river flows for funding, constellation for networks.
Logo and colors present but not woven into the experience. Generic feel that could be any nonprofit.
Brand colors, logos, and imagery deeply integrated. Galaxy metaphor, entity logos, African pattern icons all reinforce the CivSource identity.
Squarespace platform with third-party scripts, slower load times, limited optimization control.
Next.js 16 with static generation, optimized images, code splitting, and edge network for sub-second loads.
Traditional navigation with dropdown menus. Standard responsive layout.
Custom cursor that transforms into a heart, smooth scroll, magnetic buttons, preloader with logo, mobile-first responsive design.
Static banner with text overlay
Full-bleed team photo with purple overlay, text reveal animations, animated stats bar
Text blocks with side image
Bento grid: galaxy image, vision/mission colored cards, D.A.R.E. values, timeline, entity logos
Standard grid cards
Interactive expanding columns with background images that reveal on hover, brand gradient overlays
Text list of funds
Flowing stream visualization: pulsing hub with SVG bezier curves to fund cards, hub reacts to hover
Team page with photos
CEO editorial profile + growth journey with auto-cycling stages (Seed/Root/Bloom/Canopy)
Stats in a grid
Pulsing SVG heart with heart-shaped orbit paths, orbiting hearts, heart cursor, Five C's icon carousel
Partner logos list
Interactive constellation map with SVG node connections, hover-reactive lines and expanding cards
Form + address
Connected office nodes with traveling dot, flag emojis, colored contact method cards
Compare the current site with our proposed concept. This is a working build, not a slide, click through and judge the real thing.
Want your own proposal?
Start a Project