The Roots — Indigenous Language learning for African languages
The Roots is an indigenous learning app designed to help Africans and the diaspora learn, practice, and retain their native languages in a structured, community-driven way. Inspired by Duolingo, the app makes it fun and practical to learn languages such as English, Yoruba, Igbo, Hausa, and Swahili.
My Role
✅ Product Designer
✅ Brand Identity Design
✅ Front-end Developer (React)
TL;DR
“
On The Roots, an indigenous language-learning app for Yoruba, Igbo, Hausa, and Swahili, I led the brand and product design, created the design system, and helped shape all key features. Beyond design, I also coded React UI components and collaborated with the frontend team to ensure a scalable, production-ready interface.
The Challenge
Language-learning apps like Duolingo exist, but none are tailored to African languages with cultural context. We needed to:
✅ Build a modern, engaging product that feels local but has global standards.
✅ Ensure community-driven learning, since native speakers are key to language survival.
✅ Deliver a frontend system that’s scalable and easy for developers to extend.
My Contributions
Brand Design
✅ Developed a visual identity rooted in African heritage but modern enough for global users.
✅ Defined color palette, typography, and iconography aligned with cultural relevance.
✅ Designed the logo and brand assets for digital use.
✅ Built a brand style guide to ensure consistency across the app, website, and marketing.
Product Design
✅ Designed end-to-end user flows and interfaces for onboarding, For You, Community, and Learning.
✅ Created the design system (tokens, components, patterns) for scalability and UI consistency.
✅ Designed UI components (navigation, cards, progress trackers, modals).
✅ Collaborated closely with engineers to ensure pixel-perfect, production-ready execution.
Frontend Development
✅ Wrote frontend code for UI components (in React) used in the production web app.
✅ Worked closely with the frontend team to translate Figma components into code, ensuring pixel-perfect implementation.
✅ Built responsive layouts and interactive components (drop-downs, cards, progress trackers).
✅ Collaborated on component documentation for smoother handoffs and reuse.
Key Features
For You
A personalized dashboard showing progress, daily lessons, word of the day and community conversations.
Community
A social hub where learners interact in their chosen language through chat and forums with other learners.
Learning Modules
✅ Huts: structured modules (like “Greetings”, “Family”, “Food”)
✅ Bubbles: interactive lessons within modules (speaking, listening, matching texts, speak what you hear and other exercises).
Gamification
Levels, streaks, daily goals, learning metrics, and rewards to keep learners motivated. Designed to mirror familiar flows but with African cultural motifs.
Process
Research & Insights
✅ Benchmarked against global learning apps (Duolingo, Nkenne, Busuu) and identified cultural gaps.
✅ Collaborated with product managers to Interview potential learners to understand motivation and barriers.
✅ Mapped out opportunities to bring community-driven features to the forefront.
Design Process
✅ Created wireframes and prototypes for user testing.
✅ Iterated on brand visuals until we achieved a balance of modern tech + African identity.
✅ Consulted with other designers on illustration and mascot design.
✅ Delivered a high-fidelity interactive prototype used by the dev team.
Development Collaboration
✅ Set up design tokens and variables for color, typography, and spacing to align with code.
✅ Wrote UI components (cards, buttons, nav-bars) in React to accelerate build.
✅ Developed UI pages for product implementation.
✅ Paired with engineers during sprints to test and refine implementation.
Outcomes
Even though the app is still in development, we’ve achieved:
✅ Completed design system and UI library.
✅ Brand identity that stands out in the edtech space.
✅ Functional frontend with reusable coded components.
✅ Live website that introduces The Roots to early adopters, and drive conversion of early users in order to estimate adoption.
This project highlights my ability to work at the intersection of design and code; ensuring not only that the product looks good in Figma, but that it’s practical, performant, and production-ready in the browser.
Learnings & Reflection
Lessons
✅ I learned the importance of design tokens and scalable code architecture when bridging design and frontend.
✅ Directly coding components helped me empathize with developers and design with technical feasibility in mind.
✅ Most importantly, The Roots reinforced my passion for building culturally relevant products that solve real problems.
✅ Several AI tools (Claude, ChatGPT, and Figma Make) were instrumental in driving development and enhancing speed.
Next Steps:
✅ Continue collaborating on beta testing with learners.
✅ Expand languages beyond the initial 3 (Igbo, Yoruba, Hausa) in other African languages like Swahili and so on. .
✅ Roll out mobile-first optimizations.
✅ Prepare for a global launch.
See more projects
