NaFFS WebApp

Client: NaFFS (National Fellowship of Foursquare Students), the student arm of Foursquare Church in Nigeria

Project: NaFFS WebApp — a centralized platform for managing fellowship activities across every campus in the nation

Deliverables: Full UI/UX Design, User Flow Architecture, Motion Explainer Video

The Core Challenge: Building a web application that could unify the administrative operations of dozens of student fellowships scattered across Nigerian campuses, replacing fragmented manual processes with a single, structured digital system.

NaFFS operates fellowships on campuses across Nigeria, each running its own activities, reporting, and administration. Before the web app, coordination between the national secretariat and individual fellowships was manual, inconsistent, and difficult to scale. There was no centralized way to track what was happening across all campuses at once.

The organization needed a system that could handle two distinct user types: Admin (national secretariat level, with full oversight) and Fellowships (campus-level operators managing their own activities). The Admin side needed to be robust enough to monitor the entire network; the Fellowship side needed to be simple enough for student leaders to actually use.

I designed the complete interface and user flow architecture in Figma. This was pre-AI tooling, so every screen, flow, and interaction was hand-designed.

User Type Mapping: I mapped out the full permission and workflow structure for both user types (Admin and Fellowship), ensuring each had the right level of access and functionality without overwhelming either.

Flow Architecture: Before touching any screens, I built out the complete user flow for both sides of the app, identifying every decision point, data input, and administrative action.

Interface Design: Clean, functional UI designed for clarity over decoration. The priority was making complex administrative tasks (reporting, activity tracking, fellowship management) feel straightforward for student leaders who aren't tech-heavy users.

Motion Explainer Video: After the app went live, I produced a motion video walkthrough using Adobe After Effects and Adobe Premiere Pro to onboard fellowship users and show them how to operate their end of the platform.

72 fellowships across Nigerian campuses now actively using the platform

Two fully functional user types (Admin and Fellowship) with distinct dashboards and permissions

The app went live after overcoming development setbacks, with the motion explainer video serving as the primary onboarding tool for fellowship operators

I produced the motion explainer video end-to-end in Adobe After Effects and Adobe Premiere Pro. The video walks fellowship operators through the platform's core features, serving as the primary onboarding tool after launch. Below are screenshots from the After Effects timeline showing the production process.

Designing for organizations with distributed teams across dozens of locations requires getting the permission architecture right before a single pixel is placed. The NaFFS WebApp proved that a well-structured flow and clean UI can turn a fragmented national operation into a unified digital system.