harles
Kuja Design System - Guides and Components for Kuja Ecosystem.
Project summary:
The Kuja Ecosystem is one of the top digital products of ABinBev in Africa. Kuja serves over 5 countries in Africa and is still expanding its reach. The goal of Kuja is to provide sellers (POCs and Bulk-breakers) and buyers (Retailers) platforms to buy and sell ABI products and manage their businesses all in one place. Different Kuja platforms perform different functions and serves some specific users.Kuja Design System is the building block of the Kuja Ecosystem. The Kuja Design System was developed to unify and scale the visual and functional language across the entire Kuja ecosystem. Serving multiple platforms — including Kuja Shop, Kuja Drivers, and Kuja ERP — the design system was created to ensure consistency, efficiency, and scalability as Kuja expands across 5+ African countries.
As a core designer, I created and implemented the design system foundational guidelines and components such as color schemes, typography, buttons, input fields, and icons library. I collaborated closely with the lead designer of Kuja to build the system seamlessly into production, reducing design inconsistencies and accelerating feature delivery across all Kuja platforms.
Role
Snr. Product Designer
Company
ABinBev
Industry
Beverage
Net Worth
$110 billion (2025)
Stage 1. Research and Analysis
- Conducted an audit of existing Kuja products (Kuja Shop, Kuja Drivers, Kuja ERP) to identify inconsistencies in visual design, interaction patterns, and component usage.
- Identified pain points caused by fragmented design practices, which slowed down development and created usability gaps across products.
Stage 2. Foundation Development
- Defined the core design principles guiding the system, including simplicity, scalability, and usability.
- Established foundational styles such as typography, color palette, input fields, and iconography to create a unified visual identity.
Stage 3. Component Library Creation
- Designed a comprehensive library of reusable components (e.g., buttons, inputs, modals, cards, lists, and navigation patterns) to ensure consistency across Kuja platforms.
- Documented usage guidelines and interaction states for each component to maintain visual and functional harmony.
Stage 4. System Integration and Collaboration
- Established a centralized Figma library and conducted design reviews to keep all teams aligned and reduce duplicate work.
- Organized onboarding sessions for designers and developers to ensure smooth adoption of the system.
Stage 5. Expansion and Scalability
- Continuously expanded the library to support new features, product requirements, and market expansions.
- Ensured that the design system evolved alongside Kuja’s growing ecosystem while maintaining consistency and usability.
Kuja Design System Build
- The Kuja Design System covers a list of over 35+ components from basic building elements like typography, colors, grids and layouts to more core design elements like modals, navigation, tables, tooltips etc. However, only a few components are highlighted here. Enjoy.
- Library ListThese are the lists of all the components we have built on Kuja. There’s continuously expansion to ensure consistency in the Kuja ecosystem.
- Date PickerVarious date picker options to be used for different situations in Kuja designs.
- Index FiltersIndex filter are used for filter drop-down options also for dates.
- SearchSearch components are used on different pages of the designs to find specific items or list of items. Search function has different states that are active based on interaction.
- Table ComponentsTable components are used in the creation of tables across the designs. Modified to fit the unique requirements of each table information.
Results
These are some clear, measurable, and actionable outcomes from my work as the primary designer for the Kuja Drivers mobile app:
- Design-to-Development Handoff: By creating a centralized Figma library with reusable components, we reduced the time spent designing and implementing new screens across Kuja Shop, Kuja Drivers, and ERP by 65%.
- 40% reduction in UI inconsistencies: The unified design guidelines eliminated fragmented visuals and interactions, ensuring a consistent user experience across all Kuja products.
- Improved collaboration efficiency: Cross-functional teams (design, product, and engineering) adopted a shared design language, minimizing back-and-forth during development and reducing rework.
- Scalable design foundation: The system was built to support Kuja’s multi-country expansion across Africa, allowing localized customizations without breaking overall visual and functional consistency.
Reflections
Working on the Kuja Design System was a defining experience for me as a product designer. It challenged me to think beyond just screens and flows and approach design from a scalability and consistency perspective.I learned how critical it is to build a flexible system that supports multiple products, teams, and markets. Creating reusable components and tokens saved time and ensured consistency as Kuja expanded across different African countries.Instead of thinking in isolated app designs, I started thinking in terms of ecosystems — ensuring that every touchpoint within the Kuja suite shared a unified visual language and interaction model.Overall, this project helped me grow as a designer by strengthening my skills in system thinking, collaboration, and documentation. It reinforced the value of building scalable foundations that not only meet current needs but also anticipate future growth.
harles
Copyright 2025 by Charles Nwafor
harles
Kuja Design System - Guides and Components for Kuja Ecosystem.
Project summary:
The Kuja Ecosystem is one of the top digital products of ABinBev in Africa. Kuja serves over 5 countries in Africa and is still expanding its reach. The goal of Kuja is to provide sellers (POCs and Bulk-breakers) and buyers (Retailers) platforms to buy and sell ABI products and manage their businesses all in one place. Different Kuja platforms perform different functions and serves some specific users.Kuja Design System is the building block of the Kuja Ecosystem. The Kuja Design System was developed to unify and scale the visual and functional language across the entire Kuja ecosystem. Serving multiple platforms — including Kuja Shop, Kuja Drivers, and Kuja ERP — the design system was created to ensure consistency, efficiency, and scalability as Kuja expands across 5+ African countries.
As a core designer, I created and implemented the design system foundational guidelines and components such as color schemes, typography, buttons, input fields, and icons library. I collaborated closely with the lead designer of Kuja to build the system seamlessly into production, reducing design inconsistencies and accelerating feature delivery across all Kuja platforms.
Role
Snr. Product Designer
Company
ABinBev
Industry
Beverage
Net Worth
$110 billion (2025)
Stage 1. Research and Analysis
- Conducted an audit of existing Kuja products (Kuja Shop, Kuja Drivers, Kuja ERP) to identify inconsistencies in visual design, interaction patterns, and component usage.
- Identified pain points caused by fragmented design practices, which slowed down development and created usability gaps across products.
Stage 2. Foundation Development
- Defined the core design principles guiding the system, including simplicity, scalability, and usability.
- Established foundational styles such as typography, color palette, input fields, and iconography to create a unified visual identity.
Stage 3. Component Library Creation
- Designed a comprehensive library of reusable components (e.g., buttons, inputs, modals, cards, lists, and navigation patterns) to ensure consistency across Kuja platforms.
- Documented usage guidelines and interaction states for each component to maintain visual and functional harmony.
Stage 4. System Integration and Collaboration
- Established a centralized Figma library and conducted design reviews to keep all teams aligned and reduce duplicate work.
- Organized onboarding sessions for designers and developers to ensure smooth adoption of the system.
Stage 5. Expansion and Scalability
- Continuously expanded the library to support new features, product requirements, and market expansions.
- Ensured that the design system evolved alongside Kuja’s growing ecosystem while maintaining consistency and usability.
Kuja Design System Build
- The Kuja Design System covers a list of over 35+ components from basic building elements like typography, colors, grids and layouts to more core design elements like modals, navigation, tables, tooltips etc. However, only a few components are highlighted here. Enjoy.
- Library ListThese are the lists of all the components we have built on Kuja. There’s continuously expansion to ensure consistency in the Kuja ecosystem.
- Date PickerVarious date picker options to be used for different situations in Kuja designs.
- Index FiltersIndex filter are used for filter drop-down options also for dates.
- SearchSearch components are used on different pages of the designs to find specific items or list of items. Search function has different states that are active based on interaction.
- Table ComponentsTable components are used in the creation of tables across the designs. Modified to fit the unique requirements of each table information.
Results
These are some clear, measurable, and actionable outcomes from my work as the primary designer for the Kuja Drivers mobile app:
- Design-to-Development Handoff: By creating a centralized Figma library with reusable components, we reduced the time spent designing and implementing new screens across Kuja Shop, Kuja Drivers, and ERP by 65%.
- 40% reduction in UI inconsistencies: The unified design guidelines eliminated fragmented visuals and interactions, ensuring a consistent user experience across all Kuja products.
- Improved collaboration efficiency: Cross-functional teams (design, product, and engineering) adopted a shared design language, minimizing back-and-forth during development and reducing rework.
- Scalable design foundation: The system was built to support Kuja’s multi-country expansion across Africa, allowing localized customizations without breaking overall visual and functional consistency.
Reflections
Working on the Kuja Design System was a defining experience for me as a product designer. It challenged me to think beyond just screens and flows and approach design from a scalability and consistency perspective.I learned how critical it is to build a flexible system that supports multiple products, teams, and markets. Creating reusable components and tokens saved time and ensured consistency as Kuja expanded across different African countries.Instead of thinking in isolated app designs, I started thinking in terms of ecosystems — ensuring that every touchpoint within the Kuja suite shared a unified visual language and interaction model.Overall, this project helped me grow as a designer by strengthening my skills in system thinking, collaboration, and documentation. It reinforced the value of building scalable foundations that not only meet current needs but also anticipate future growth.
harles
Copyright 2025 by Charles Nwafor
harles
Kuja Design System - Guides and Components for Kuja Ecosystem.
Project summary:
The Kuja Ecosystem is one of the top digital products of ABinBev in Africa. Kuja serves over 5 countries in Africa and is still expanding its reach. The goal of Kuja is to provide sellers (POCs and Bulk-breakers) and buyers (Retailers) platforms to buy and sell ABI products and manage their businesses all in one place. Different Kuja platforms perform different functions and serves some specific users.Kuja Design System is the building block of the Kuja Ecosystem. The Kuja Design System was developed to unify and scale the visual and functional language across the entire Kuja ecosystem. Serving multiple platforms — including Kuja Shop, Kuja Drivers, and Kuja ERP — the design system was created to ensure consistency, efficiency, and scalability as Kuja expands across 5+ African countries.
As a core designer, I created and implemented the design system foundational guidelines and components such as color schemes, typography, buttons, input fields, and icons library. I collaborated closely with the lead designer of Kuja to build the system seamlessly into production, reducing design inconsistencies and accelerating feature delivery across all Kuja platforms.
Role
Snr. Product Designer
Company
ABinBev
Industry
Beverage
Net Worth
$110 billion (2025)
Stage 1. Research and Analysis
- Conducted an audit of existing Kuja products (Kuja Shop, Kuja Drivers, Kuja ERP) to identify inconsistencies in visual design, interaction patterns, and component usage.
- Identified pain points caused by fragmented design practices, which slowed down development and created usability gaps across products.
Stage 2. Foundation Development
- Defined the core design principles guiding the system, including simplicity, scalability, and usability.
- Established foundational styles such as typography, color palette, input fields, and iconography to create a unified visual identity.
Stage 3. Component Library Creation
- Designed a comprehensive library of reusable components (e.g., buttons, inputs, modals, cards, lists, and navigation patterns) to ensure consistency across Kuja platforms.
- Documented usage guidelines and interaction states for each component to maintain visual and functional harmony.
Stage 4. System Integration and Collaboration
- Established a centralized Figma library and conducted design reviews to keep all teams aligned and reduce duplicate work.
- Organized onboarding sessions for designers and developers to ensure smooth adoption of the system.
Stage 5. Expansion and Scalability
- Continuously expanded the library to support new features, product requirements, and market expansions.
- Ensured that the design system evolved alongside Kuja’s growing ecosystem while maintaining consistency and usability.
Kuja Design System Build
- The Kuja Design System covers a list of over 35+ components from basic building elements like typography, colors, grids and layouts to more core design elements like modals, navigation, tables, tooltips etc. However, only a few components are highlighted here. Enjoy.
- Library ListThese are the lists of all the components we have built on Kuja. There’s continuously expansion to ensure consistency in the Kuja ecosystem.
- Date PickerVarious date picker options to be used for different situations in Kuja designs.
- Index FiltersIndex filter are used for filter drop-down options also for dates.
- SearchSearch components are used on different pages of the designs to find specific items or list of items. Search function has different states that are active based on interaction.
- Table ComponentsTable components are used in the creation of tables across the designs. Modified to fit the unique requirements of each table information.
Results
These are some clear, measurable, and actionable outcomes from my work as the primary designer for the Kuja Drivers mobile app:
- Design-to-Development Handoff: By creating a centralized Figma library with reusable components, we reduced the time spent designing and implementing new screens across Kuja Shop, Kuja Drivers, and ERP by 65%.
- 40% reduction in UI inconsistencies: The unified design guidelines eliminated fragmented visuals and interactions, ensuring a consistent user experience across all Kuja products.
- Improved collaboration efficiency: Cross-functional teams (design, product, and engineering) adopted a shared design language, minimizing back-and-forth during development and reducing rework.
- Scalable design foundation: The system was built to support Kuja’s multi-country expansion across Africa, allowing localized customizations without breaking overall visual and functional consistency.
Reflections
Working on the Kuja Design System was a defining experience for me as a product designer. It challenged me to think beyond just screens and flows and approach design from a scalability and consistency perspective.I learned how critical it is to build a flexible system that supports multiple products, teams, and markets. Creating reusable components and tokens saved time and ensured consistency as Kuja expanded across different African countries.Instead of thinking in isolated app designs, I started thinking in terms of ecosystems — ensuring that every touchpoint within the Kuja suite shared a unified visual language and interaction model.Overall, this project helped me grow as a designer by strengthening my skills in system thinking, collaboration, and documentation. It reinforced the value of building scalable foundations that not only meet current needs but also anticipate future growth.
Other projects
Solarlume: web and mobile app design
Solarlume web app and mobile app design.
Kuja ERP - Web App for Back Office and Admins.
ERP web app design for Kuja - BeerTech Africa.
harles
Copyright 2025 by Charles Nwafor