DESIGNING FOR KIDS
ED TECH COURSE DESIGN
The company developed a new educational program that was different from its usual coding courses.
We wanted to create a new look and feel for it, but still keeping it colorful and fun for the young audience.
As part of the design we had to develop a new header that allowed the students to track their progress in different parameters.
We wanted to keep a template that was similar enough but different in order to help users keep oriented in the section they were currently in.
WIREFRAMES
COURSE GALLERY
Accessed just like any other game in the system, yet acts the same to allow user to enter the different lessons in the course.
Ability to track progress, each lesson has a unique thumbnail, the big button acts as a CTA.
LESSON PAGE
The navigation modes have current completed and locked states
each section is clickable and leads to the first game in the section.
A generic frame design is minimal so users focus on the content.
Game designs will be more “fun” and different from the course its self
REVIEW PAGE
All Review questions will be multiple choice
Once submitted it will notify student that the answer was submitted
Defining answer states and their behavior
LESSON PAGE
Notify the user the answer was submitted
Allow user to see progress
Allow user to navigate between courses
SURVEY PAGE
Wanting to check the experience the students are having
How well they are understanding the content
Defining the survey behavior and when it appears
SURVEY PAGE ANSWERS
The results will be displayed along with the response of other students backed on percentage
DESIGN
COURSE GALLERY
This section is similar to the main section in that we offer a card view of all the course chapters.
Each chapter completed changes in color and shown with a star to show its completed
Chapter progress is showen with the gray star filling in with yellow, allowing the student to see their progress.
All chapters are numbered and named for easy navigation.
TRACKING PROGRESS
Users can easily track their progress with a progress bar that displays on the main page and a CTA button to get them to progress in the course and earn rewards.
SECTION NAVIGATION
Closed sections will display the progress of the student numerically.
Once opened the section will open and the other will close (accordion style)
COURSE ORIENTATION
Students can track the lesson they are on
The next lesson wont unlock until the previous one is complete.
Completed lesssons are marked with a star
COURSE LAYOUT
All course content will be displayed on the main screen.
The background color correlates to the section the student is in: course, game or exam
Student can navigate between course chapters easily