Learning a System: Creating An Interactive Schedule for Tutors

Some background info:

A brief overview: I was working for Sheridan College as a Learn Well Facilitator (LWF). My responsibilities included (but were not limited to) upkeep of the Virtual Communities (VCs), being the first point of contact for tutors, and ensuring students knew how to access the tutors.

The VCs were a part of Sheridan's online learning portal Slate, and the tutor's schedules and booking features were on a separate website - Tutorocean. I was tasked with creating a way for the students to easily find and access a tutor.

Some things to consider:

So there were a few things I had to consider when approaching this:

First, the VCs only include first year Sheridan students who don’t know about the tutoring services or where to ask for them. 

Second, there were some technical hurdles I had to consider - how interactive can I make it? What are the features I can take advantage of?

Finally, this had to be replicated by my coworkers in their own VCs, so I had to make sure it was simple to copy and update while maintaining functionality.

I had to make an interactive schedule that linked to Tutorocean from the VCs using Slate’s built in features, that is simple enough to be replicated by other LWFs.

Tutors, students and LWFs:

I had to consider more than just the students when I was designing this. I designed this primarily so that it would reduce the friction students would face when attempting to schedule an appointment with a tutor, but I also had to make sure that it could be implemented by people with little to no coding experience.

Scope and constraints:

First, it had to actually improve the process of students finding and scheduling and appointment with a tutor. I didn’t want to go around and make something just for the sake of making it.

Second, it had to be done with Slate. For the vast majority of students, their only point of contact with their Sheridan academics was through Slate - unless there’s a specific problem, they won’t go elsewhere.

Finally, it had to be easy to replicate and edit. They would have to be changed up by future LWFs to reflect current tutors, and they might also need to build them without me available.

How did I do it:

First, I designed the schedule on Figma. I wanted the input of my coworkers because this would also be on their VCs and Figma is web-based and collaborative - so no software download needed for the other LWFs. The schedule also had to be functional if later in the process I found out that certain features (such as linking to outside websites, or creating buttons) weren’t possible.

Schedule example

I chose to mimic a “traditional” schedule that anyone who has worked retail would recognize. Since this format is so common, I knew that most everyone would understand it.

These are the three designs I came up with.

Tutoring schedule example 1Tutoring schedule example 2Tutoring schedule example 3

Next, I began researching. I knew that modules on Slate had a place where you could edit the code, so I wanted to see how much I could do with it. Make buttons? Add hover states? Whether I could do this or not would impact the functionality and final design of the schedule. 

I found out that Slate was built using D2L which has a bunch of templates that I could download and use. After downloading them, I found out that they use Bootstrap which made my job a lot easier because I could use button templates. I built the schedule using both Bootstrap and the Slate tools.

My original plan was to have the time slots be the buttons, and they would automatically bring the user to the time they clicked on Tutorocean. However, this had to be replicated by my coworkers and I wanted to reduce the complexity when building it on their own. This led me to changing it to the tutor's name being the button.

In the end, I built an interactive schedule that divided the tutors up by program, and when clicked on would bring the student to their Tutorocean profile where they could then book an appointment. 

There was also written step by step instructions and a video showing the other LWFs how to create and modify their own schedule.

This is an example of what the final product looked like. The orange was changed to blue and was just used when creating the instructions on how to build it.

The final schedule

The end

I designed and built an interactive schedule for tutors, and a guide to help current and future LWFs. I helped the other LWFs with any bugs they came across when they were building their own schedules. I feel like this was a helpful tool especially for first year students.

I feel like the most important thing though was how much I learned. I developed an understanding of Slate that even some of the professors didn’t have. I also learned that I should be more confident in my technical skills. While this wasn’t a code intensive project, I did learn a new system and built something functional in a week.

Let's connect

emilybetts342@gmail.com