Designing an organised way for KPK to manage their courses.

Kids Power Kids - Admin Panel

I designed an admin panel for Kids Power Kids with which they can edit all their content. Kids Power Kids is a non-profit organization with the goal of teaching computing relating skills to young people.

I started with a very simple elaboration of what exactly is the purpose of the program and what is important so that I have a good understanding of what the user has to do with the program and what the structure of the program looks like.

The challenge:

There are several chapters in each course, several tasks in each chapter and several steps in each task. In short, there is a huge amount of content to edit. The challenge was to make it so that it is still structured and simple to edit.

The solution:

The navigation is structured in such a way that if you are in Course1 you can only see the chapters in that course, if you click on one of those chapters you can only view the tasks in that chapter.

Below the title of the page is a breadcrumb navigation in which you can easily see in which page this page is located. You can also easily navigate back through this navigation.

It was very important to KPK that a developer with no design experience could implement the system. Figma is a very contributing tool, the inspect tab in Figma allows the developer to view the exact CSS properties of every component.

In addition to designing the pages for the developers, I also worked out all the states of interactive components. The design has also been developed in all available responsive formats.