Empowering the Frontline: A Modular Learning System

Standardizing professional development for 5+ industries through a scalable, mobile-first design framework.

Overview

Role: UX/UI Designer

Timeline: May/June 2025

Tools: Figma, HTML/CSS, Skillsoft DLS

Deliverables: Modular Template System, Responsive UI, Design Documentation

The Challenge & The Solution

The Problem: Fragmented Learning for a Busy Workforce Frontline workers in industries like Manufacturing and Retail don’t have the luxury of long training sessions. Traditional e-learning is often too wordy, desktop-centric, and disconnected from the physical reality of their jobs.

The Solution: A Pedagogical Blueprint Working within a strategic framework established by my Team Lead, I executed a 7-screen modular system. This system allows for the rapid creation of consistent, high-impact learning modules that are optimized for mobile consumption and “on-the-go” knowledge retention.

The Strategy: Collaborative Frameworks

To meet diverse learning needs, I implemented four distinct Template Sequences (A, B, C, D). My role was to ensure that regardless of the sequence chosen, the user experience remained intuitive and the visual hierarchy stayed intact.

Sequence A & B: Focused on “Why” vs. “Practice First” approaches.
Sequence C & D: Designed for “Deep Mastery” vs. “Direct Application.”

The Execution: The 7-Screen Blueprint

I designed a standardized flow that guides the learner from an emotional “hook” to a practical “takeaway” in under 10 minutes:

The Hook: Clickable cards surfacing real workplace obstacles.
The Big Idea: Bridging the obstacle to a skill-based solution.
Skill Breakdown: “The How” and “The Benefit” delivered via interactive popups.
Knowledge Check: Application-based questions (Sorting, Sequencing, or MCQ).
OTJ Examples: Real-world scenarios across Retail, Healthcare, and Logistics.
Reflection: Personalizing the information.
Key Takeaways: Reinforcing essential points for long-term retention.

The Constraints: Design Discipline at Scale

Success in this project was measured by adherence to strict technical and content “Non-Negotiables.” I acted as the guardian of these standards during the UI phase:

Word Economy: A hard cap of 900 words per module to prevent cognitive overload on small screens.
Content Precision: Exactly 2 sentences per industry example, with the “Lesson Learned” in bold for instant scannability.
Accessibility: All content maintained an 8th-grade reading level, ensuring the training was accessible to workers of all educational backgrounds and technical abilities.

Impact: Universal Application

By centering the design on Universal Workplace Language in the early screens and only branching into industry-specific examples in the middle, we created a system that feels “custom-made” for every worker while remaining highly efficient to produce.

Iteration: Refining the Friction

Enhancing the Key Takeaways The final “Key Takeaways” screen underwent the most significant transformation. Initially, it served as a simple summary, but I redesigned it into a dynamic “Action Card” system. I leveraged the DLS modular components to ensure that the “Lesson Learned” was not just a sentence to be read, but a persistent tool the user could visualize in their actual workplace. By adhering to the 900-word limit and the two-sentence rule for examples, I stripped away the “corporate fluff” to focus on high-impact, actionable behaviors that empower employees to intervene in harassment situations.

Reflections: Scaling Empathy

This project taught me that high-level UX is often about systemic discipline. It’s not just about how one screen looks, but how a thousand modules behave. By respecting the frontline worker’s time and environment, we turned training into a tool of empowerment rather than a chore.