Visual Course Catalogue
Project Overview
A redesigned course catalogue for an enterprise cybersecurity Learning Management System, built to help organisations browse, assign, and manage training more efficiently.
As the course library expanded, the existing experience made it difficult for admins to find relevant content quickly. The goal was to create a more intuitive, scalable interface that improved discovery and made the platform easier to navigate during both day-to-day use and client demos.
Inspired by familiar streaming interfaces, the catalogue introduces a more visual and structured way to explore content, organised by topic, skill level, and compliance requirements.
My Role
Outcome & Impact
Both internal teams and sales functions experienced measurable improvements after launch:
x2
Streamlined internal processes made day-to-day tasks significantly quicker.
45%
Admins found and managed courses 45% faster due to improved search, clearer categorization, and reduced duplication.
55%
Onboarding completion rates and upsell conversions increased by 55% as sales teams could clearly demonstrate course value and relevance during client conversations.
Research Phase
Competitive & UI Benchmarking
To inform the design of the visual course catalogue, we reviewed platforms that excel in either enterprise training, learning management, or intuitive content browsing. This included Coursera for Business, Pluralsight, Salesforce Trailhead, Udemy Business, and Netflix.
Pluralsight offered a stronger visual UI, using skill tags and category-based navigation. We borrowed their use of horizontal content groupings and labeled thumbnails to help admins explore at a glance. Udemy Business, while simpler in style, reinforced the value of a straightforward, scalable card layout and easy-access filters.
Netflix served as the visual and interaction benchmark. Its use of horizontal category rows, hover states, and thumbnail-based discovery became a core reference point. We used these familiar patterns to make the catalogue feel instantly navigable and engaging, even for first-time users.
Design Approach
01. Structure & Navigation
Content was organised into horizontal category rows, allowing users to scan and explore different areas without losing context.
02. Discovery & Filtering
Dynamic filters and improved search made it easier to narrow down content by topic, role, or requirement, reducing time spent locating relevant courses.
03. Visual Hierarchy
Course cards were designed with clear thumbnails and labels, making key information visible at a glance while maintaining a clean and consistent layout.
04. Interaction Design
Hover states reveal additional details without overwhelming the interface, supporting quick decision-making while keeping the experience lightweight.
Wireframes
Final Designs
The final catalogue delivers a more intuitive and visually engaging way to explore a complex course library. By combining familiar interaction patterns with clear information design, it supports efficient daily use and more effective product demonstrations.
The result is a scalable system that improves usability for admins while strengthening the platform’s value during sales and onboarding.
