A Unified Learning Experience with Docebo

Enhancing an off-the-shelf LMS experience with custom UX and branded design for a cohesive ProAssurance training portal.

process snapshot

the workflow

the tools

Design goals

  1. Align LMS look and feel with the ProAssurance digital identity

  2. Improve clarity and navigation within the instructional portal

  3. Optimize design for video training and learning accessibility

Constraints & Considerations

  1. Docebo's limited customization scope (CSS-only enhancements)

  2. Required use of default LMS structure and UI components

  3. Coordination with Instructional Team’s LMS admin tools

Outcomes

  1. Developed branded CSS styling to bring consistency to landing UI

  2. Created high-fidelity mockups guiding where and how to apply changes

  3. Supported QA and launch, ensuring accessibility and responsiveness

The problem

While the new LMS (Docebo) came with many built-in features, the out-of-the-box UI lacked brand consistency with the broader ProAssurance digital ecosystem. The learning portal felt disconnected from the rest of the platform—and that meant users had to switch contexts often during onboarding and training.

The Solution

I partnered with the Instructional Design team to enhance the LMS experience within the system’s customization constraints. My role was to identify branding opportunities, improve the visual hierarchy, and create high-fidelity designs showing where and how CSS could be used to improve the experience.

UX Highlights

  • CSS Branding Enhancements: I designed and delivered CSS that adapted Docebo’s layout to ProAssurance’s design standards—color system, typography, and spacing.

  • Mockups with Embedded CSS Guidance: Delivered annotated wireframes that showed exact elements where styling could be layered in.

  • Training Design Research: Conducted quick studies into UX for video-based learning—focused on player positioning, screen contrast, and focus states—so content was easy to consume and intuitive to navigate.

  • QA & Maintenance: Collaborated in final user testing and provided ongoing CSS and layout support as the system rolled out across departments.

  • Ongoing Styling Support: Provided continuous CSS updates and refinements post-launch to maintain consistency and adapt to evolving platform needs.

This case study represents a selection of work completed as Lead UX Designer on the ProAssurance Digital Experience Platform between 2022–2025. Most design elements cannot be shown, and business details have been modified or omitted to respect confidentiality. For an in-depth review, please contact me at sarahadi.work@gmail.com