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.
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.
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
All Review questions will be multiple choice
Once submitted it will notify student that the answer was submitted
Defining answer states and their behavior
Notify the user the answer was submitted
Allow user to see progress
Allow user to navigate between courses
Wanting to check the experience the students are having
How well they are understanding the content
Defining the survey behavior and when it appears
The results will be displayed along with the response of other students backed on percentage
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.
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.
Closed sections will display the progress of the student numerically.
Once opened the section will open and the other will close (accordion style)
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