Themes: Effortless, On-Brand Visual Customization for the Lesson Experience

Company

WorkRamp

WorkRamp

Category

LMS

LMS

My Role

Research, Design

Research, Design

Main Project Image
Main Project Image
Main Project Image

Designed to give instructional designers more creative control without added complexity, Themes expands visual possibilities while keeping lessons cohesive and effortless to style.

This project began as a broad initiative to modernize and improve the WorkRamp lesson experience (known as Guides) — a core part of the platform that hadn’t been updated in years. To uncover the biggest opportunities, I conducted user interviews with customers and gathered insights from internal teams across Sales and Customer Success.

Across the board, I heard a consistent request: editors want more visual customization, but in a focused, guided way. They don't want to style every block from scratch — they want a predefined, brand-aware palette that makes lessons look professional with minimal effort. Many even referenced another industry-standard tool they wished WorkRamp would emulate.

WorkRamp is known for being intuitive and quick to adopt, so any new functionality had to preserve that simplicity while expanding creative flexibility. After exploring and iterating on multiple approaches to customization, I arrived at Themes.

Themes make it easy for editors to create visually branded lessons without extra work. The system automatically inherits each account’s primary color to generate five ready-made presentation styles: Classic, Neutral Light, Primary Light, Primary, and Neutral Dark. Editors can optionally fine-tune a Guide or individual block using a simple Appearance menu, but no setup is required nor are there any migration issues with this enhancement.

Large Project Gallery Image #1
Large Project Gallery Image #1
Large Project Gallery Image #1


"I could totally use Themes. I would love to be able to just toggle this on instead of going into code mode, starting HTML and then having to make a change to various things. This is so much easier. It covers the scalable part of it with the global changes, and you can make the individual changes… I think this tool does a really good job.

Yeah. I love this."

– Adam G., Instructional Designer


Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1

Before: All white background (undesirable "wall of text"), minimal and inconsistent color customization, stale UI.

Project Gallery Image for 50% width of the screen #2
Project Gallery Image for 50% width of the screen #2
Project Gallery Image for 50% width of the screen #2

After: Refreshed UI, background colors providing visual separation, flexible color theming applied at Guide and content block levels.

Project Gallery Image for 50% width of the screen #2
Project Gallery Image for 50% width of the screen #2
Project Gallery Image for 50% width of the screen #2
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1

The outcome is a flexible, branded theming system that expands the creative range for editors and brings WorkRamp’s lesson experience in line with modern LMS standards.

Some design and scope trade-offs were made to ensure the system remained scalable and efficient to build. For example, Themes were intentionally structured to be systematic, which meant deferring more advanced customization and layout options — such as columns, cover images, continue blocks, and other block enhancements. Establishing this strong foundation of theming and updated UI patterns allows us to gather real-world feedback, validate the direction, and confidently prioritize the next wave of visual and layout improvements in future sprints.

  • The image featured in the carousel #1
  • The image featured in the carousel #2
  • The image featured in the carousel #3
  • The image featured in the carousel #4
  • The image featured in the carousel #1
  • The image featured in the carousel #2
  • The image featured in the carousel #3
  • The image featured in the carousel #4
  • The image featured in the carousel #1
  • The image featured in the carousel #2
  • The image featured in the carousel #3
  • The image featured in the carousel #4