Friday, March 7, 2014

UI/Website Design for Teach TCI

Sarah Osentowski and I created this mockup for the student experience for our K-12 curriculum based website for Teach TCI.  We wanted to implement the idea of progress bars, as well as key navigation elements per section as well as within the lesson.

The right purple bar not only is a navigation bar, but as you scroll within the isolated box in the center of the screen, shows progress throughout the section between Student Text, Interactive Tutorial, and Interactive Student Notebook.  

The purple bar on the bottom is to show the progress throughout the lesson itself, with tic indications of the different sections that make up the entirety of the lesson.  We really wanted to push the concept of mapping out the progression through the elements within the student environment.

The image blurred behind correlates with each individual grade's textbook cover image and designed the colors of the lesson bar, under the main navigation, to be the same as well.  We wanted to have a correlation between the printed materials for Teach TCI as well as on the website.  This helps clarity between grades for students and teachers.

No comments:

Post a Comment