TVO Learn

Delivering learning experiences remotely to students
of Ontario for K-8, and grade 9-12 courses

Role
UX/UI Design, Product Design, Learning Experience Design, Front-End Development

Tools Used
Adobe InDesign, Adobe XD, Adobe Illustrator, HTML / CSS / Javascript, Bootstrap, Angular 5, Gitkraken, MAMP

My Team
20+ web production artists, learning experience designers and course pedagogues

Background
Setting: TVO ILC (Independent Learning Centre), TVO Learn
Target Audience: kindergarten to grade 12 students interested in earning high school credits of the Ontario Secondary School Diploma

Challenge
In response to emerging trends of continuous education and digital learning, TVO ILC is dedicated to offering remote education to anyone interested in earning high school credits of the Ontario Secondary School Diploma. Learning independently, students demand visual aesthetics, intuitive UI and interactive media to suit their unique paces of learning. Without the physical presence of a teacher, some students are in need of remote guidance to pursue their education. In short, content delivery is no longer considered an adequate learning experience.

Solution
One hundred and forty-four bilingual high school credit courses with in-house interactive animations and artwork, launched in the Ontario Ministry of Education’s Brightspace Virtual Learning Environment. Students are able to learn independently with access to a network of administrative and academic support. Ontario-certified teacher-writers, pedagogues, learning experience designers and web production artists (my title) worked closely to ensure these courses provided students a variety of content to engage with. Combined with the ability to update and evolve these courses, TVO ILC continues distinguishing itself from other online / e-learning models in empowering students to take ownership of the learning journey.

In this portfolio piece, I will be presenting an elementary course, Grade 4 Social Studies, SSHI4 Heritage and Identity, Learning Activity 4, as demonstration of my design process.

Explore the final learning activity here.

User Flow
Based on this overarching user flow generated by pedagogues, learning experience designers and web production artists, there were 5 major sections in each learning activity: learning goals & success criteria, introduction to the learning activity, knowledge & understanding, application and conclusion. User flows may vary depending on the course, however, the team made an effort to keep these 5 sections consistent throughout.

Coding Grid used in Elementary courses

ILOs — Integrated Learning objects UX/UI Explorations
One of my favourite discussions in the process of designing learning activities was creating the ILOs. The team and I explored a wide variety of ILOs and some usability issues of its elements: french ILOs and how the text in buttons would be integrated differently, image and text styling inside each, activity colour and style, the text display on mobile versus desktop size as well as the button language. The following examples are: the “ten frame”, “money tray”, “hundreds chart” and “numberline”.

Example of a matching ILO

Example of a multiple choice ILO (without images)

Example of a fill in the blank ILO

Style Guide

Locker docs
Locker docs are external PDF activities that can take the form of either a fillable PDF, or of an article. For the elementary courses, locker docs had specific styling surrounding the kindergarten to 6, compared to grade levels 7 to 8.

Secondary Course Example
In this portfolio piece, I will be presenting an elementary course, Grade 10 Business, BBI2O Introduction to Business, Learning Activity 2, as demonstration of my design process.

State 2: