Case study
Refactoring a legacy feature: How we streamlined program creation flow
Overview
As an established LMS, over time some areas became outdated and broken, especially Programs, a widely used module. The program creation workflow became exceedingly convoluted and frustrating. Through research and refactoring, we modernised the interface while retaining core functionality, eliminated dysfunctional elements, and created a streamlined, harmonious flow.
Background
Escalating customer dissatisfaction highlighted the need to refactor program creation. Originally there were three distinct methods to populate a program with courses. In reality, only one was being used. Another was broken for years, and the third was redundant. The UI was cluttered, resulting in a cumbersome and error-prone flow for L&D administrators.
UI flow: Content editing before refactoring
Research
We conducted customer interviews and analyzed usage analytics. This validated that the only program creation method being used involved manually selecting courses and grouping them into course sets. We could safely retire the other two methods and focus on improving this one.
Design Process
Our goal was to improve the workflow by removing clutter. We explored ideas for a clean, intuitive redesign using modern UI patterns already familiar to users from other areas of the product. We relied on existing components and patterns in order to save development time and ensure UX consistency.
UI flow: Content editing after refactoring
Final Design
Replaced messy nested menus with card navigation for course sets and courses
Added distinct Edit and View modes on course set cards for clear status visibility
Created a new course adder enabling easy catalog browsing to add courses.
Results
Reduced program creation time by 32%
Cut program-related support requests by 57%
Increased customer satisfaction scores by 22 points.
The minimalist interface succeeded in simplifying program creation, resulting in time savings, fewer tickets, and improved satisfaction.
Wireframe: Reordering course sets with drag & drop
Spec: Course card anatomy, states and permutations
Spec: Course adder interactions
Spec: Course set responsive layout
