01 / Product experience
Explain the community
As a prospective member, I want to understand the programme before deciding to join.
The public site establishes the mission and gives visitors context before the account journey begins.
All workSelected work / 06
Interface studyAfrican Girl Guide
01 / Context
The idea
A public website and a learning web app for African girls. The public experience explains the community; the app turns that promise into account onboarding, structured learning, progress, and mentorship.
My contribution
Lead Developer
Freelance
Built with
Next.js · Firebase · Motion · Tailwind CSS
Platforms
Web
Inside African Girl Guide
Product walkthrough02 / The problem & the approach
What the experience needs to solve
A community’s public story is only the first step. A learner also needs to know where to begin, what to do next, and where to find guidance after joining.
The approach
The landing site introduces the programme, account flows establish access, and the web app provides a personal dashboard, learning modules, and a route into mentorship.
The story, screen by screen.
03 / User journeys02 / Learning web app
Create a path into the programme
As a new participant, I need a clear route from interest to an account.
The web app has its own signup flow, separate from the public website, with dedicated sign-in and recovery screens.
03 / Learning web app
Know where to begin
As a learner returning to the app, I want a personal starting point instead of a generic landing page.
The dashboard brings the participant into the learning environment. The captured account is seeded with fictional profile data and learning progress.
04 / Learning web app
Continue a learning journey
As a learner, I want to see the modules and continue from my current point.
The module catalogue connects the course structure with saved progress, making current and completed work part of the same experience.
05 / Learning web app
Find guidance beyond the content
As a participant, I want a route to mentorship as well as self-directed learning.
A dedicated mentorship area makes guidance a visible part of the product rather than an external instruction.
04 / Behind the interface
Engineering the experience
The public site and authenticated web app are separate surfaces with different responsibilities: explain the programme, then support participation.
Firebase identity and user records carry role and learner state into the app. Module progress personalises a shared course structure rather than duplicating course content for each user.
Signup supports distinct participant roles; the learner journey includes learning content and progress while mentorship has its own navigation.
Web platforms
