Enhancing Processes with an Internal Drag and Drop Calendar Feature

NCTCA and GETCA are teacher convention associations in Alberta that allow teachers from across the province to support one another through collaboration, sharing teaching practices, and creating new ways to engage with students. My team worked with NCTCA & GETCA to improve their internal processes from accepting proposals to scheduling speakers. After uncovering our client’s pain points, our solution was to integrate a drag and drop calendar that would improve an otherwise tedious workflow.

This project has been signed under an NDA. All thoughts and opinions in this case study are my own and does not reflect the views of Lift Interactive nor NCTCA & GETCA. All confidential information has been excluded.

PROBLEM AT HAND

How can we improve the process of assigning speakers to rooms in different locations?

As the time of annual teacher conventions are approaching, NCTCA & GETCA usually begin the process of preparing and organizing speakers. During this workflow process, they rely heavily on spreadsheets to assign speakers to rooms. However, using a spreadsheet is difficult to manage, update, and shuffle around. They wanted an overarching view of their speakers across different conference days without clicking between pages.

Through understanding the problem, my team found that having a single visual interface could help NCTCA & GETCA’s admins to do exactly what is desired. Based on our client's pain points and knowledge of the CMS, we designed a drag and drop calendar feature that capitalized on interactions.

SOLUTION

Increasing Efficiency in Internal Tools!

To solve the problem mentioned above, we had to determine what information does an admin need to see to make a decision? what is the first-level? second-level? third-level? From here, I was able to play with several ideas before settling on the final solution.

Drag n’ Drop Calendar (Integrating with FullCalendar)

The notion of a drag n’ drop calendar allows admins to see all the information that is needed to make an informed decision. Having a single interface view allows admins to see if any speaker sessions are remaining and if there is a balanced number of sessions per location and room. Our team also decided to use FullCalendar to save development costs and time.

Sessions Column

To dissect the calendar, the first column held all the sessions from speaker proposals that were approved. Session cards had high-level information that if hovered upon would reveal subsequent information to make a further decision if necessary. This allows our clients to make quick decisions without checking on additional information in another view.

Session Planner

To dissect the calendar, the second area is the session planner which will showcase the assigned sessions on their specific conference day, location, and room. The scrollable calendar view and toggles allows our client’s to stay in this view without clicking through pages. Once session cards are plotted, they can easily be moved and deleted.

RETROSPECTIVE

Designing My First Dashboard!

When I first started my internship at Lift Interactive, this was one of my very first projects. I didn’t have any prior experience creating a dashboard that had development constraints so this was quite the challenge.

Guidance From Manager

For my first project and dashboard, I had plenty of guidance from my manager. He explained the reasoning to why things were done, why it was a better experience, and how I could improve my ideas. This was a super fun design focused project that I worked on!

Prototyping Handoff

As this calendar had a few interactions, I used Figma’s prototyping feature to quickly illustrate what would happen if users hovered over cards or clicked over an element. This gave developers a better understanding of what I imagined would go on for interactions.

Go to next project >