design

CSA Skilljar LMS Redesign

Recast CSA’s Skilljar LMS into a brand-consistent experience across course detail, curriculum, and registration flows.

Visit Live Experience

Key Metrics

  • Templates refreshed30+
  • Duration3 months
  • Capture rateMajor course flows

What happened?

Audited every Skilljar surface, built a brand system in a version-controlled repo, and shipped minified Sass + JavaScript snippets into Skilljar’s custom code boxes to overhaul course detail, curriculum, and registration pages.

Tech & Impact

  • Skilljar
  • Sass
  • JavaScript
  • Git

Turned a sprawling, inconsistent LMS into a cohesive experience—tracking dozens of templates in Git, iterating in VS Code, and shipping minified assets safely into Skilljar’s admin UI without breaking production.

Visual case study

Full-page captures show how the redesign transformed each learner touchpoint. Toggle before/after where available, or skim the refreshed layouts directly.

Knowledge Center landingRefreshed hero layout, added course segmentation cards, and aligned buttons + typography to CSA’s brand system.
BeforeKnowledge Center landing before redesign
AfterKnowledge Center landing redesigned view
Course detailIntroduced metric bar, synopsis sidebar, and responsive call-to-action rail so learners get context before enrolling.
Course detail redesigned view
All courses hubBuilt a grid with filtering, badge styles, and consistent card heights to replace the legacy list view.
All courses hub redesigned view
Specialty cataloguesApplied the same system to CCZT, Audit & Compliance, InfraSec, and CCSK verticals so every catalogue reads as one family.
Specialty catalogues redesigned view
Audit & Compliance curriculumModular sections with progress cues and consistent typography overhaul the long-form curriculum experience.
Audit & Compliance curriculum redesigned view
InfraSec programmesUnified navigation and contextual banners highlight track outcomes while matching CSA color tokens.
InfraSec programmes redesigned view
CCSK registrationStreamlined registration layout adds reassurance copy, pricing clarity, and consistent form styling.
CCSK registration redesigned view

Three-month reskin + systems pass

Took over a fragmented Skilljar instance, catalogued every template, and rebuilt the LMS to match CSA’s brand across the entire learner journey.

Course detail

Before: Default Skilljar layout with narrow columns, generic fonts, and no brand cues.

After: Introduced CSA typography, two-column layout, hero metrics, and single CTA rail with responsive breakpoints.

Curriculum

Before: Long bullet lists without progress context or sectioning.

After: Structured modules with progress pills, estimated time, and sticky navigation for long-form courses.

Registration

Before: Fragmented forms with inconsistent buttons and duplicate fields per pricing plan.

After: Normalized form styling, surfaced pricing options inline, and added trust copy plus support links.

Workflow at a glance

Everything lived in source control so the team could iterate safely and paste minified assets into Skilljar’s admin UI without losing work.

  • Repo-driven workflow

    Created a private Git repo storing Sass, JS snippets, and Skilljar code-box assignments so every change was versioned.

  • Sass compilation

    Wrote pages in VS Code, compiled to minified CSS per template, then pasted into Skilljar’s custom code blocks.

  • Component tokens

    Built a design token sheet for colors, spacing, and typography to match CSA brand across dozens of templates.

  • Page-by-page QA

    Tracked every course page in a spreadsheet, toggled new styles per box, and verified on desktop + mobile before shipping.

Supplement this case study

Add richer artefacts when you are ready—these prompts call out what future readers will want to explore.

Before / after gallery

Embed full-page screenshots or interactive sliders comparing legacy layouts with the redesigned versions.

Implementation repo

Link to sanitized Sass/JS snippets or a Gist showing how the minification workflow is structured.

Metrics overlay

Share LMS analytics callouts (time-on-page, conversion rate) after the redesign shipped.

Ops playbook

Highlight documentation you handed off so future contributors can safely update Skilljar templates.