arik Savage

Accessibility settings

Changes apply right away and are remembered in this browser. Until you choose otherwise, motion follows your device's setting.

Motion
Text size
Reading

Knowledge Direct: The Learner Theme, Rebuilt

The redesigned learner dashboard with the left navigation expanded on hover: Home, Enrollments, Catalog, Community, Guides and Admin labels slide out beside their icons over a softened view of the page. The redesigned course catalog: a “Catalog” heading, a toolbar with the product count, search, grid and list toggle and a sort menu, then large course cards with fruit illustrations, titles and prices. The redesigned leaderboard: a “My Account / Leaderboards” heading, a Harvest Points filter, and a ranked table of learners with rank, avatar, name and points.

Learners spend all their time in Knowledge Direct’s learner theme: the dashboard, the catalog, the course player, their transcripts and achievements. It’s an AngularJS app that ships as its own versioned package, and it looked every bit its age. Over five and a half months I rebuilt it screen by screen, with a new navigation, layout, type and icons, without touching the API behind it or upgrading the framework underneath.

Built and kept current with production, but never released: KD7 is being retired first. The screenshots come from a dev copy filled with made-up learners and courses.

Same app, new clothes

The old theme worked, but it showed its years: a big dark banner on every page, a chunky labeled sidebar, cramped cards, and styles that had grown one fix at a time. Colors, sizes and shadows were defined over and over, slightly differently each time.

The rule I set for myself was that only the theme changes. Same API, same data, same AngularJS 1.7 and Webpack 3 build, so every client could switch over without anything changing behind the scenes. That meant the redesign had to come from structure and styles, not from a shiny new framework.

Before and after

Same tenant, same data, same moment. Use the toggle to swap the redesign in over the original.

Dashboard

The original learner dashboard: a dark “Dashboard” banner with a search box, an enrollment-code field, and a carousel of enrolled courses, beside a wide sidebar with labeled icons.
The redesigned learner dashboard: a plain “Hello, Eric!” greeting over Recent Activity course cards, with Recent Achievements and Leaderboards panels below, a slim icon sidebar and search moved into the header.
The dashboard went from a page you pass through to one worth landing on: what you were working on, what you’ve earned and where you rank, with search always in the header.

Catalog

The original course catalog: a dark “Course Catalog” banner with a search box, an enrollment-code field, and a narrow grid of course cards with price tags in the corners.
The redesigned course catalog: a light “Catalog” heading, one toolbar with the count, search, view toggle and sort, and wider course cards with the title and price beneath each illustration.
Search, view and sort moved into a single toolbar, and the cards got room to breathe.

Learning path

The original learning path page: a dark banner with the path title “Have a Happier Harvest”, a Complete badge and a certificate button, then Learning Path Info and a course set listing its courses.
The redesigned learning path page: the path’s fruit-basket cover beside its title, Complete badge and certificate button, then Learning Path Info and a course set with each course’s illustration and a completed check.
Paths now lead with their own cover image, and every course in the set shows its artwork and progress at a glance.

Leaderboard

The original leaderboard: a dark “My Account” banner, a centered “Leaderboards” title, and a narrow ranked table of learners beside a point-type radio list.
The redesigned leaderboard: a “My Account / Leaderboards” page heading, a point-type filter above the table, and a wider ranked table with rank, avatar, name and points.
Account pages lost the banner in favor of a simple heading that tells you where you are.

Under the hood

Most of the work doesn’t show in a screenshot:

  • Reorganized the app around pages instead of one big pile of components, so each screen’s templates, styles and logic live together.
  • One set of colors, sizes, shadows and buttons, used everywhere. The SCSS ended up smaller than it started, even with a whole new design on top.
  • A new type face (Epilogue, with an Arial fallback) and Phosphor icons, each icon with proper ARIA attributes or text alternatives.
  • A slim icon sidebar that expands its labels on hover or keyboard focus, and a header with search, notifications and a user menu.
  • Empty states for every list, so a new learner sees a friendly message instead of a blank panel.
  • Audited the translation files for every missing key, so clients running other languages don’t get raw keys on screen.
  • Fixed a race condition in store checkouts that I found along the way.
  • Kept the branch in step with production, porting every feature that shipped to the old theme while the redesign was in progress.

Looking back

Redesigning on a frozen stack was a good constraint. No new framework meant every improvement had to come from clearer structure and a smaller, more consistent set of styles, and that is most of what makes the new theme feel modern. It never reached learners, because KD7 is being retired first. So I seeded a copy with made-up learners and courses and captured both themes from the same data, so the comparison is about the design and nothing else.

Stack & skills

  • AngularJS
  • Redux
  • Sass
  • Webpack
  • JavaScript
  • ARIA
  • UI/UX
  • Angular
  • CSS
  • Accessibility
  • Responsive Web Design
  • Legacy Systems

Related