Curricula Builder
A redesign for a linear, legacy creation flow focusing on efficiency and standardization of patterns.
2024
Admin Experience
LMS
Redesign
Curricula Builder
A redesign for a linear, legacy creation flow focusing on efficiency and standardization of patterns.
2024
Admin Experience
LMS
Redesign
Role
Lead designer
Timeline
1 month
Role
Lead designer
Timeline
1 month
Role
Lead designer
Timeline
1 month
The Context
Our platform serves 10,000+ Learning Management Software (LMS) admins, who spend around 70% of their time creating and curating content. Every minute saved equates to about $3,000 in annual savings per admin, making efficiency a key factor for increasing the company's Annual Recurring Revenue.
Main pain points of the legacy curricula builder were:
long and linear workflows (stepper)
unlimited nesting causing admin error and learner confusion
excessive scrolling and whitespace
unclear settings and wording
How might we streamline curricula creation to minimize admin effort and improve workflow efficiency?
Our platform serves 10,000+ Learning Management Software (LMS) admins, who spend around 70% of their time creating and curating content. Every minute saved equates to about $3,000 in annual savings per admin, making efficiency a key factor for increasing the company's Annual Recurring Revenue.
Main pain points of the legacy curricula builder were:
long and linear workflows (stepper)
unlimited nesting causing admin error and learner confusion
excessive scrolling and whitespace
unclear settings and wording
How might we streamline curricula creation to minimize admin effort and improve workflow efficiency?
The Outcome
The redesigned experience reduced the admin creation time by 30%, by implementing:
a non-linear creation flow
new template feature
support for bulk and duplicate actions
The redesigned experience reduced the admin creation time by 30%, by implementing:
a non-linear creation flow
new template feature
support for bulk and duplicate actions
Before
Before
After
After
The Process
Discovery
Partnering with Customer Service Managers and analyzing the database with 5+ years of customer feedback revealed key issues that contribute to the high error rates and long creation process:
No feature allowing to copy or duplicate existing curricula
Unlimited nesting and sectioning creating excessive vertical and horizontal scrolling & whitespace
The stepped flow restricted admins from navigating to known areas
These insights shaped our architectural direction.
Discovery
Partnering with Customer Service Managers and analyzing the database with 5+ years of customer feedback revealed key issues that contribute to the high error rates and long creation process:
No feature allowing to copy or duplicate existing curricula
Unlimited nesting and sectioning creating excessive vertical and horizontal scrolling & whitespace
The stepped flow restricted admins from navigating to known areas
These insights shaped our architectural direction.
Iteration 1 : Keep the stepper
Assumption: A stepped flow could reduce scrolling and whitespace.
Result: It failed to address user flexibility, specifically when editing existing curricula, still mirroring the same linear process.
My Decision: Move toward a single-page edit view for full navigation transparency and faster drafting.
Iteration 1 : Keep the stepper
Assumption: A stepped flow could reduce scrolling and whitespace.
Result: It failed to address user flexibility, specifically when editing existing curricula, still mirroring the same linear process.
My Decision: Move toward a single-page edit view for full navigation transparency and faster drafting.
Iteration 2: Drag-and-drop structure
Assumption: A non-linear node-based builder would maximum creation flexibility.
Result: This particular design had some accessibility issues with multiple drag and drop zones, and created additional horizontal scrolling with nodes being ever-present.
My Decision: Expand to full screen width, remove draggable add node sidebar, and limit nesting to 6 layers, which covers 99% of use cases and reduced horizontal scrolling by 50%.
Iteration 2: Drag-and-drop structure
Assumption: A non-linear node-based builder would maximum creation flexibility.
Result: This particular design had some accessibility issues with multiple drag and drop zones, and created additional horizontal scrolling with nodes being ever-present.
My Decision: Expand to full screen width, remove draggable add node sidebar, and limit nesting to 6 layers, which covers 99% of use cases and reduced horizontal scrolling by 50%.
Final Iteration
The final structure introduced:
A non-linear creation approach
Smaller line items to maximize space
Expandable sections and nodes to reduce visual noise and scrolling
6-level nesting limit to reduce learner navigation error & excessive horizontal scrolling
Final Iteration
The final structure introduced:
A non-linear creation approach
Smaller line items to maximize space
Expandable sections and nodes to reduce visual noise and scrolling
6-level nesting limit to reduce learner navigation error & excessive horizontal scrolling
Validation
After we cross referenced he final proposed design solution with dev feasibility, we tested the new experience with 8 internal customer-zero users. The feedback confirmed we were solving the core issues while improving usability. We heard that:
The new flow was “much easier to navigate” — 4.8/5 satisfaction
Users appreciated sequence visibility and wanted it surfaced by default
The layout significantly reduced confusion and cognitive load
Validation
After we cross referenced he final proposed design solution with dev feasibility, we tested the new experience with 8 internal customer-zero users. The feedback confirmed we were solving the core issues while improving usability. We heard that:
The new flow was “much easier to navigate” — 4.8/5 satisfaction
Users appreciated sequence visibility and wanted it surfaced by default
The layout significantly reduced confusion and cognitive load
Final Mocks
The Impact
The Impact
On average, this project saved our admin users 30% of time spent creating curricula, as compared to the previous legacy version.
In addition to the project specific success, this project contributed to the larger design team, in both patterns and components further unifying our platform's visual language. We proposed and designed an accessible drag-and-drop component added to our team's design system which has since been used in 5 ongoing redesign projects.
On average, this project saved our admin users 30% of time spent creating curricula, as compared to the previous legacy version.
In addition to the project specific success, this project contributed to the larger design team, in both patterns and components further unifying our platform's visual language. We proposed and designed an accessible drag-and-drop component added to our team's design system which has since been used in 5 ongoing redesign projects.
Key Learnings
Key Learnings
Key Learnings
My personal learning from this project was that regular dev feasibility checks throughout the design process are key for maximum design efficiency. It helped us cut down on iterations that were out of current development scope and grounded us in reality to deliver quickly.
My personal learning from this project was that regular dev feasibility checks throughout the design process are key for maximum design efficiency. It helped us cut down on iterations that were out of current development scope and grounded us in reality to deliver quickly.
