Introduction

What was missing from NDTC's first learning management platform?

The National Democratic Training committee offers expert-led trainings for Democrats at no cost. Their platform of choice was WordPress, and was sufficient for many years. Out of a desire for more robust user analytics and optimized learning paths, NDTC decided to switch to Docebo.

I joined NDTC in August of 2021 as a product designer. My role included wireframe design, prototyping, user testing, and research. During this platform transition project and many more, I presented my work in slide decks to my team, as well as NDTC's leadership team.

I specifically designed the navigation, as well as the featured content component sections. I spent this six month process designing elements in Figma, then adapting them in Docebo with their CSSĀ editor. The platform is now live, and my work can be viewed by signing up at traindemocrats.org.

What is the typical structure of NDTC's lessons, and how was that improved?

NDTC's lesson's guide learners with real-world examples so they can form actionable strategies. We improved on this with Docebo's adaptive lesson plan feature, which suggests follow up lessons based on content the learner engaged with previously. Courses are now tailored better to learners.

With Docebo's analytics, NDTC's curriculum team can make data driven decisions about what materials to expand on. Previously, insights like this were gained through an end of course survey. While we still want feedback from learners this feature helps us make decisions based on behavior.

Our curriculum team found the course content entry process far more intuitive than WordPress. Thankfully, importing our content from the previous platform through the API was also painless. Once my team was ready to launch, the curriculum team was able to hit the ground running with new material.

Process

How did I adapt NDTC's visual style from Docebo's default look?

The biggest constraint to our workflow was our lack of an ability to affect html with Docebo. Our changes had to be made through a CSS editor tool, which allowed us to either hide or alter elements. I would design a change in Figma, and consult with engineers on how to implement it.

In image A, the navigation I designed can be seen. We spent about a week trying to make a navigation which did not require a hamburger menu, but discovered this clashed with the administrator editor, and tabled the idea for the future, once we were more confident in editing Docebo's navigation.

Image B shows the featured content banners and course card rows I designed. Initially, we speculated on the necessity of designing these elements in Figma, since they did not need to be built, but adapted from existing elements. This proved fruitful, as I'll elaborate on in the next section.

How did we bridge the gab between signing up and arriving at Docebo?

Prior to Docebo, a user could track their progress in multiple courses at a glance. Though Docebo offers a comparable solution, there was no way to show NDTC's upcoming live events. This concession was impossible, so it was decided that we would design a dashboard separate from Docebo.

My manager helmed the general layout of this page. Since it was built outside Docebo, we were not constrained to CSS. However, we had to reflect our designs on Docebo, so the user was less aware that they were navigating between one site for the dashboard, and another for the courses.

The dashboard's navigation uses my design, and the layout is what we aspired to for Docebo's before we hit a roadblock with the CSS. In future, we hope to implement this navigation on the Docebo side as well. Their marketing team assured us that this was a commonly requested feature.

Conclusion

What I learned, and why this project was important to my development

When my team first learned of the CSS constraint, we found difficulty in putting a positive spin on it. Creating a new and exciting experience for users without being able to affect much of the functionality on Docebo felt limiting, but in short time we found it to be an interesting challenge.

Above all, I learned how to build flexible and responsive elements. Through trial and error, Chatgpt helped me write lines of code to create the changes I wanted. I've come away from the experience with a strengthened interest in front end development, which I plan to hone my skills with further.

Through my experiences at NDTC, I've come to consider adaptability the most important skill a product designer can have. It's important to see challenges such as those we faced as opportunities to improve our adaptability. I now look forward to future challenges, and how I will tackle them.