Prerequisite Building Tool for Aviation Training Courses

Full redesign of the official website of a local not-for-profit community garden organization.

Client: Pelesys Learning Systems Inc., subsidiary of CAE

Space: EdTech, Aviation Training

Timeframe: 1 month (2 sprint cycles)

My role: Visual Designer, UX/UI Designer

Team: Product Owner, Developers, QA agents

Context: In the Pelesys Learning Management System (LMS) web application, each course consists of activities, and the order that these activities are interacted with is determined by score-based prerequisite conditions for the trainee to meet.

Problem: Type Input-based UI, Limited Error Feedback, and Lacking Support

Key Usability Issues:
Users did not have the flexibility to easily find, select, and rearrange prerequisite items and their operators
Lack of live syntax validation meant users had to click a button every time they wanted to check their expression, slowing down their workflow.
Insufficient support resources made users rely on trial & error to learn to build prerequisite expressions.

Outcome: A visually-enhanced, drag-and-drop tool with clear error handling

Customers Desire Faster and More Flexible Workflow

This project was originally meant to be done within one 2-week sprint, leaving insufficient time to gather UXR specifically for this project. In previous customer interviews with FedEx and Fiji Airways, they preferred a drag and drop model for a more flexible and customizable workflow experience. This sentiment was shared with internal management during planning stages and shaped the direction of the redesign.

💡How might we redesign the prerequisite building experience to be flexible, legible, and error-resilient?

Colour and Shape Foundation for Improved Interactivity

and

default

A1

A2

and

A1

< 80

A2

is Passed

Simple Expressions

A1 & A2

A1 < 80

A2 = Passed

Interactive States of a Prerequisite Builder Item

and

clicked

and

dragged

Words over Symbols and Visual Grouping for Increased Recognition

Instead of symbols we switched to AND, OR, etc so that users with limited knowledge of conditional operators have a lower barrier of entry to the prereq building tool.

and

or

# of

≤ #

Group

Result

A1

or

2 of

A2

A3

A4

A4 | { (A3 ≤ 80) & (A1 | A6 = P)}

A1 | 2*{A2, A3, A4}

and

A4

A1

A6

A3

or

or

is Passed

≤ 80

Learnings and Takeaways

The transition from the old, uninspired UI to the new, user-friendly design required balancing creative freedom with adherence to a content-heavy UI. A modal-based approach, though not favored by most of the team, could further enhance focus and usability if designed intentionally for this specific context. It would especially be the case if we were to make the LMS application available for tablets.

Let’s chat over coffee and tea, because why not both?

© 2025 Alice Zhang. This portfolio was made with caffeine-fueled focus and a passion for design.