Outcome
Major Improvements
Embedded the prerequisite tool into the main UI for a sense of uniformity with its context
Changed from typed input to drag and drop interaction for increased flexibility
Object-oriented, visually-blocked UI simplifies readability
Converted to live error detection instead of making it dependent on a “verify” button.
One-click access to embedded support documentation.
Impact
Prioritized in the upcoming year’s sprint plans
Lowered the barrier of entry for users without a background in boolean logic
Softened usability for new users
Saved users time in creating and updating prerequisite information
Designing Cross-Functionally and Centred on User Research
This redesign aimed to simplify how admins create course prerequisites in an aviation training app, replacing a rigid, keyboard-input-based interface with a more intuitive drag-and-drop model. While constrained by the parent company’s design system and the managerial decision to avoid using modals and taking away from the course context, I had room to reimagine the interaction pattern.
Customer feedback from earlier research, including input from Philippine Airlines and Fiji Airways, had consistently called for a drag-and-drop approach. This redesign is the first implementation of that idea, offering a more visual way to manage prerequisite logic.
If I had more time post-launch, I’d run usability tests with long-time customers to observe learning curves, interaction patterns, and error recovery. I would also track engagement through analytics such as common drag paths or task completion times to inform future iterations and refine the model for scalability.
Ideation
Drag and drop design is composed of:
drag handles and rectangular shape to create foundation for the affordance of dragging
mini tree with shorthand codes as shorthand to represent the activities within this course
written words instead of symbols for the operators - more accessible for users without knowledge on boolean operators
grouping as visually embedded rectangles instead of parentheses for simpler visual representation
The prerequisite building tool is situated inside its own tab within the course, instead of a modal that reduces the context of that course.
Building a Prerequisite Expression
Prerequisite expressions are built by dragging the appropriate activity or block items, as well as operators, into the working area.
The legacy system’s support documentation consisted of 4 example statements explained in plain English.
New support documentation explains all operators and their properties in plain language. Users without foundational knowledge of boolean operations get a succinct explanation on the operators. It also has the option of opening a longer, unabridged support PDF document in a new tab so users can save/share it.
