Innovative custom Web App for active learning with HeyKanga

On a mission to promote the idea of fun, active well-being for people of all ages and abilities, the DrumFIT company launched HeyKanga to innovate your everyday PE lesson or activity break with a library of over 1000 inspiring exercise videos. The idea is to revolutionize physical activity for students by giving school-aged children new, exciting things to do while providing teachers (even novice ones) with innovative, accessible, and easy-to-use tools to manage, plan, and report the process.

Tackling the challenge, we follow our design process stages: discovery, defining the problem, ideating solutions, UI design, development, and testing. These stages follow a structured approach and are essential to create an effective and efficient end product.

With the project timelines, you want as much work done simultaneously, without introducing chaos. Each of our process stages has a specific duration. Project Manager oversees the timeline and makes sure each stage is adequately planned and scheduled, ensuring a successful project outcome.

The first of many administration-facilitating features of the HeyKanga project is the Role-Based Access Control (RBAC), which orchestrates specific user roles and permissions based on their function or level of responsibility. This approach is more detailed compared to traditional access control methods, where users are granted access to specific files or folders. With RBAC, system administrators can easily manage user access to different areas of the system, reducing the risk of data breaches and unauthorized access, which is crucial for system security.

Crucial to an app’s usability and functionality, the HeyKanga site map includes a dashboard that provides an overview of the user's activity and progress. Among the most essential features here, are School Management, Video Library hubs, Lesson Plans, and Documents. Finally, reports are an essential part of the site map, enabling administrators to generate customized reports and gain insights into the system's performance.

Wireframes are an essential aspect of designing an application's user interface, functioning as a preview of the different screens and elements that make up the application, which is vital for interface testing. By using wireframes, the development team can ensure that the application's design is intuitive and user-friendly, giving users with a seamless learning experience.

The admin panel of HeyKanga app is a critical component of the platform, giving administrators the much-needed tools to manage and monitor the system's performance. The panel's dashboard provides overview and control over users, content, schools, roles, reports, and many more.

Housing all the user-intended features of HeyKanga is the dashboard panel, which offers access and management of activities, as well as progress-tracking within the platform. The most important features of the platform, such as playlists, my lesson plans, favorites, and my downloads, are prominently displayed as easy-to-navigate tiles. Additionally, the dashboard features a leaderboard of schools and individual users, hinting users towards friendly competition.

Exploring and discovering different types of videos related to physical activity, mindfulness, and overall well-being has been made easier with the categories page. Within each category, users can browse and access a variety of videos that cater to different skill levels and interests.

Through the channels page, users can add videos from outside sources, such as YouTube, and access them within the app. This provides users with even more options for physical activity and mindfulness content, expanding the range of videos available beyond the platform's own library, making excercise sessions even more engaging and relevant to the users' individual interests and preferences.

The ability to view, add, and categorize videos makes the addition of the playlist feature a neccessity. This adds to a highly personalized and customized experience, as users can choose the specific videos that they want to view and arrange them in a way that suits their preferences.

With pre-made lesson plans, administrators can give the users access to high-quality custom-built exercise plans that meets the students' needs. These lesson plans are divided into units, each with specific topics, like "warm-up" or "lion pose". Each unit includes a short description for the teacher and a corresponding video. Teachers can track the progress of their students through each lesson plan, and the plans are categorized by age group.

The schools page in HeyKanga app is specifically designed for school district managers to track the progress of schools and individual users. On the page, managers will find information on usage statistics for each school, including the number of users, completed activities, and overall engagement. Additionally, there's an option allowing customization of the appearance of the app for each school, including the school crests and colors. This feature ensures that users assigned to a specific school will have a personalized experience and a strong sense of identity with the app.

On the schools page, HeyKanga users will also find the option to generate two types of reports: video reports and account reports. These can be customized to show specific fields according to the user's preferences. This feature enables school managers to track the progress of their users and the effectiveness of the app in promoting physical activity and well-being.

The HeyKanga branding was provided by the client, which included navy blue, teal, and orange as the primary colors. To complement the brand's modern and playful personality, we went with Poppins and Inter as the primary fonts. Poppins is a sans-serif font that features round and open letterforms, which create a friendly and approachable vibe. It works well for headings, as it is easy-to-read even at smaller sizes. Inter, on the other hand, is a humanist sans-serif font that features a subtle contrast between its thick and thin strokes. It's highly legible, making it perfect for body text, and its gentle curves give it a warm and inviting feel.


In our projects, we run together, and the Hey Kanga project was no exception. You need a mindful project manager to lead the way, skilled designers who can keep it within the lines, and smart developers to avoid a false start. Needless to say, we made it to the finish line on-time and with the stakeholders happy.