Deliver learning experiences remotely to students across Ontario

Background

• Settings: TVO ILC (Independent Learning Centre)

• Target Audience: anyone 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 was dedicated to offering distance 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 using a math course in English, MCR3U Advanced Function, unit 1 lesson 5, as demonstration of my design process.

See the final learning activity here.

Design Process

My Role

In a team of 20+ web production artists, my knowledge in visual design, prototyping and front-end development came into play when designing each learning activity. It was my responsibility to obtain a solid understanding of the user flow (which varied between courses ex. Math courses vs. French courses), designing visual layouts, compiling a style guide, produce multiple prototypes (lo-fi & hi-fi), and eventually to develop each learning activity using HTML, CSS, Javascript, Boostrap and Angular 5.

This project presented an opportunity for me to consider elements of accessible design in both visual design and coding. It was very important that visual layouts were kept intuitive and inclusive for all students (including those with accessibility needs). I was surprised to learn that something as simple as section tags and headings were essential for in-page navigation used in web browsers, plugins and assistive technologies. Furthermore, I went back and forth in the process of visual and interactions design in making sure interactions in each learning activity (ex. a quiz) did not distract students from course content but still played a role in engaging students while learning independently.

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.

Paper Prototypes

With each learning activity, I design the layout and interaction based on a manuscript. Once draft layouts were completed, they were sent back to pedagogues and learning experience designers for feedback which was organized into 3 categories: UX / Interactions, Visual / Layouts and Content as shown below:

See the full paper prototype here.

Accordions UX/UI Exploration

One of my favourite discussions in this process of designing learning activities revolved the design of accordions. I led the team through an exploration of an accordion and some usability issues of its elements: category titles, the expanded state, the collapsed state, and the icon indicating expansion / collapse.

Style Guide

Digital Prototypes

After several paper prototypes and critique sessions, I moved onto developing mockups and digital prototypes. At this critical stage prior to front-end development, we were extra cautious in validating assumptions by asking these questions:

• Content: Is this piece of content / media relevant? Is it decorative?

• Visual / Layout: Is this piece of information displayed correctly and easy to understand?

• UX / Interactions: Is this interaction distracting students from the course content?

• Overall: Does this learning activity match the user flow for this particular course? Are students able to meeting their learning goals?

See the full digital prototype here.

Limitations and Takeaways

Increased understanding of LXD and UXD

Given the tight deadline of the project, I was unable to generate primary and secondary personas. I relied heavily on talking to pedagogues and learning experience designers to test my assumptions. However, it was through this process that I came to understand how learning experience design (LXD) could intersect with user experience design (UXD):

• Both disciplines require a human-centred approach in the sense that users are expecting to first explore the ‘product’ in the shallow waters and slowly dive deeper to experience greater complexity, not the other way around. In the case of teaching someone how to code HTML / CSS, teaching them about CSS animations right off the bat is probably not the smartest idea since they haven’t had any background knowledge on HTML or CSS. In the case of using Tangerine’s website, the first screen should not be about their investing services.

• Designing a learning experience is the same as designing any other experience: products and experiences should be designed according to users’ needs and goals so they do not feel like their time was wasted.

Becoming a better communicator between the phases of conceptualization, development and implementation

I had the chance to take charge of visual design as well as front-end development for this project. In the lifecycle of a design project, I was situated in the phase of development where concepts were handed off to me to implement, in other words, to make ideas come to life. I had to do a lot of side research on Javascript, CSS and even Python to give better answers to learning experience designers (shortly known as LXDs) and pedagogues (known as PEDs) whenever they asked me ‘Is it possible to display this piece of content clearly and concisely? Can you turn this PDF into an interactive HTML?,’ etc. I learned to be flexible in prompting the LXDs and PEDs for their objectives and visions by asking them ‘what is your objective for displaying this piece of content?’, ‘what’s the target audience of this piece of cotent’, or ‘what interactions do you require?’. Most of the time I was able to generate a simplified solution.

What I might have done more of…

Conduct user interviews

I would generated 4+ personas of grade 9-12 students both those with able-bodied and those with accessibility needs. We had gone as far as selecting accessible colours, choose accessible fonts, etc. in accordance with the Web Content Accessibility Guidelines (WCAG), but it would be a wonderful experience to have our actual target audience participate in a co-creating session with us.

Section the lesson into three webpages instead of one

There were some concerns around students feeling ‘burdened’ by the length of the page. To cope with that, I would have experimented with separating the lesson into 3 webpages and sections, Minds On, Action, and Consolidation. It could potentially aid students in tracking their progress and feeling more accomplished as they complete each section. There may potentially be more back-end issues such as setting up cookies or caches to save the answers students have previously submitted, but it is worth exploring students’ preference between one spread versus three sections (much like a Google Form with sections).