Power Full Kids
Interactive Educational Website Design (2022)
My role
Lead UI/UX Designer / Art Director
Project type
Interactive website design
Personality
Playful, engaging, educational, imaginative
Creative Director
Karim Youssef
Lead Developer
Wade Hunter
What i did
Overview
Power Full Kids is a flagship initiative of the President’s Choice Children’s Charity. This program integrates existing food access initiatives aimed at combating childhood hunger and alleviating poverty with proprietary educational content. The educational component focuses on teaching children essential skills in growing and cooking food, thereby advancing their education and promoting self-sufficiency.
Client needs
Problem
Current school programs rely extensively on traditional learning tools such as physical papers, books, and written assessments, requiring educators and students to be physically present in school. While there are digital resources available, such as educational videos and PDFs, they are often scattered, lack engagement, and lack a unified, cohesive platform.
Solution
The proposed solution is a comprehensive online educational platform that allows educators to create and customize lessons and assessments in an interactive and engaging manner. This platform will enable children to log in from anywhere, create individual user profiles, form groups, play educational games, access lessons, and complete assessments—all within a single, unified environment. This approach ensures that learning is accessible, engaging, and effective, regardless of the user’s location.
User stories and Strategy
Userflow and Wifreframes
High-level User flow with Team
IA & Low-fidelity Wireframe
Close up - Meal Planner
Design System
Typography
Noir Std
Mascot
Sunny is a cheerful and carefree bumblebee with a passion for growing and cooking food. Sunny's ultimate dream is to open his own restaurant where he can share his love for delicious, homegrown meals with the world.
Colors
Component library
Key Features
01. Interactive landing page
Users can scroll through various topics on the learning platform, enhanced by engaging 3D animations that create a fun and welcoming experience for kids, encouraging them to sign up.
02. User dashboard and personalized avatars
Users can select from a wide range of unique avatars, allowing for personalized representation. They can access all their groups, learning materials, achievements, and assessments in a single, organized platform.
03. Manage users and groups
Admins can oversee users and groups, while users can create groups and track group activities. This feature enhances collaboration, organization, and oversight of tasks and progress within groups.
04. Achievement badges
Users are incentivized with achievement badges for completing tasks such as creating recipes, finishing lessons, forming groups, adding meal planners, and completing games and assessments. This gamified approach motivates and rewards users for their progress and engagement.
05. Templatized lesson builder
Admins and educators can effortlessly build lessons (themes) using template components to create content. This approach ensures that the output consistently matches the brand's visual identity and maintains a cohesive look and feel.
06. Full-fledged calendar
Users can track and schedule their tasks in their personal calendars. This feature allows them to manage their time effectively and stay organized with their educational activities.
07. Foodways
Users can deepen their knowledge of food by exploring its history through an interactive timeline and a globe with pins highlighting the origins and evolution of different foods across regions.
08. Interactive meal planner
Users can create and customize meal plans for themselves and their groups using the interactive Plate Full planner. Additionally, the planner generates a grocery list based on the meals included in the plan, streamlining meal preparation and shopping.
09. Cloud drive
The platform includes its own cloud storage, allowing users to store their files and build content seamlessly.
What I Learned
Working with real-time 3D animation taught me the importance of balancing visual impact with performance and usability. While 3D elements can enhance engagement, they also complicate the workflow and risk overshadowing core functionality. Prioritizing structure and usability first ensured the platform remained accessible and intuitive—especially for younger users—while allowing room to layer in rich, immersive visuals that supported the learning experience.
