Built with Webflow
Mailata Family Foundation Case Study Development
Uzochukwu Okafor
Mailata Family Foundation
Building a flexible case study experience within a legacy Webflow architecture
Overview
When Avenue West set out to showcase their work with the Mailata Family Foundation, they envisioned more than a standard portfolio page. The new case study featured rich media, dynamic layouts, custom statistics, and a more editorial approach to storytelling that pushed beyond the limitations of their existing Webflow CMS.
I joined the project as the Webflow developer, partnering with the Avenue West team to transform their approved designs into a responsive, production-ready experience while working within the constraints of an established website architecture.
Full-page hero featuring the looping background video and headline.
About the Project
The Mailata Family Foundation is one of Avenue West's featured client projects, created to demonstrate the agency's approach to storytelling through thoughtful design and compelling content.
Rather than simply documenting the work, the page was designed to immerse visitors in the Foundation's story through a combination of motion, imagery, statistics, and carefully paced content.
The challenge wasn't designing the experience. It was building it in a way that respected the existing platform while introducing a significantly richer content model.
Overview of the Hero section of the Homepage
My Role
This project was completed in collaboration with Avenue West.
Creative Direction & Strategy: Avenue West
UI/UX Design: Carsen
Motion Design: Avenue West
Development: Myself
Working closely with the team, my responsibility was to faithfully translate the Figma designs into Webflow while ensuring the final experience remained performant, responsive, and maintainable.
Beyond implementing the interface, I was responsible for adapting the site's existing CMS architecture to support an entirely new style of case study without affecting previously published work.
Figma Design
The Opportunity
One of the biggest constraints wasn't visual.
It was technical.
Avenue West's existing portfolio was built around a relatively simple CMS structure that had served previous case studies well. The new Mailata Family Foundation page introduced a far more flexible content model, with modular statistics, media-heavy sections, alternative layouts, and custom content arrangements.
Rebuilding the CMS from scratch would have required additional time, increased cost, and risked disrupting live projects already relying on the existing structure.
The opportunity was to evolve the platform rather than replace it.
Development Process
Understanding the Existing System
Before writing any code, I spent time understanding how the current CMS was structured and identifying where it could be extended without creating unnecessary complexity.
This allowed new functionality to be introduced while preserving compatibility with older projects.
Building a Flexible CMS
Instead of replacing the existing collection architecture, I expanded it.
New fields were introduced only where necessary, grouped logically within the Webflow Editor to keep content management intuitive for the team.
Conditional visibility allowed the template to adapt automatically depending on the project being displayed, enabling both legacy and modern layouts to coexist within the same CMS structure.
Components Structure In Webflow for SECTIONS
Bringing the Design to Life
With the CMS in place, the focus shifted to faithfully recreating the visual experience.
Every section was developed responsively, ensuring layouts, spacing, and typography remained consistent across desktop, tablet, and mobile devices.
GSAP was used to introduce subtle motion throughout the experience, helping guide visitors through the content without distracting from it.
Page transitions and animations
Solving Media Challenges
The project relied heavily on embedded video content.
During development, Vimeo's privacy restrictions created unexpected issues around embedded playback.
Rather than compromising security settings, I implemented a custom solution that supported private Vimeo embeds while maintaining a seamless viewing experience across all devices.
This preserved both the client’s content security and the intended user experience.
Development Highlights
Flexible CMS Architecture
Extended an existing CMS rather than replacing it, allowing legacy and new case studies to coexist within a single system.
Pixel-Perfect Development
Translated every detail from Figma into a polished Webflow experience while maintaining consistency across responsive breakpoints.
Purposeful Motion
Implemented subtle GSAP animations that enhanced the storytelling without compromising usability or performance.
Performance & Maintainability
Built reusable components and clean page structures that make future updates faster for the Avenue West team.
Collaboration
One of the most rewarding aspects of this project was the close collaboration between design and development.
Working alongside Avenue West's designers meant implementation decisions could be discussed early, refined together, and executed without compromising the creative vision.
Rather than treating development as the final step, it became an extension of the design process, ensuring every interaction, transition, and layout behaved exactly as intended.
Dev Notes from the Designer on Figma
The Outcome
The finished case study introduced a new standard for Avenue West's portfolio.
By extending the existing CMS instead of rebuilding it, the team gained a far more flexible foundation for future case studies while avoiding unnecessary disruption to existing content.
The result is a polished editorial experience that feels immersive, performs smoothly across devices, and accurately reflects the quality of the agency's work.
Scroll triggered svg path animation on the website
Reflection
Projects like this reinforce that good development isn't always about building something entirely new.
Sometimes the best solution is understanding the system that's already in place and finding thoughtful ways to extend it.
Working within those constraints required balancing technical decisions with practical considerations around timeline, budget, and maintainability. It's an approach I enjoy because it focuses on creating solutions that are not only effective today but continue to support future work long after launch.
Project Details
Client Project: Mailata Family Foundation
Agency Partner: Avenue West
My Role: Webflow Development
Timeline: 2 Weeks
Stack: Webflow, GSAP, Lenis SmoothScroll Custom CSS, Vimeo Integration
Scope: Editorial Case Study Experience
Live Site: https://www.mailatafamilyfoundation.org/
Like this project
Posted Aug 6, 2026
Developed a rich case study for Mailata Family Foundation on Webflow.
Likes
1
Views
0
