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 Yoruba, Igbo, Hausa, and Swahili.
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
- Developed a visual identity rooted in African heritage but modern enough for global users.
- Defined colour 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.
- 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.
- 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 personalised 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
- 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.
- 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.
- Set up design tokens and variables for colour, 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 drives conversion of early users.
"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
- I learned the importance of design tokens and scalable code architecture when bridging design and frontend.
- Directly coding components helped me empathise with developers and design with technical feasibility in mind.
- The Roots reinforced my passion for building culturally relevant products that solve real problems.
- AI tools (Claude, ChatGPT, Figma Make) were instrumental in driving development and enhancing speed.
- Continue collaborating on beta testing with learners.
- Expand languages beyond the initial 3 (Igbo, Yoruba, Hausa) to Swahili and more.
- Roll out mobile-first optimisations.
- Prepare for a global launch.
