Published on

When Software Solves Student Struggles: Creating the Units Planning Tool

Authors
  • avatar
    Name
    Jack Qin
    Twitter

As a Master of Information Technology student at the University of Western Australia, I quickly discovered a significant challenge that affected nearly everyone in my program: the complex, often confusing process of planning courses across multiple semesters. This complexity stemmed from the program's flexible structure—offering numerous elective courses across different specializations (AI, Software Systems, and Applied Computing), each with their own prerequisites, semester availability restrictions, and specific unit requirements.

Understanding the Problem

The course selection process presented several interrelated challenges that made it difficult for students to optimize their study journey:

Students were struggling with fundamental questions that significantly impacted their educational experience:

  • "Which courses should I take first to access the advanced AI courses I'm particularly interested in?"
  • "How can I fulfill all core requirements while still exploring specialized topics that align with my career goals?"
  • "If I select these specific courses in Semester 1, will I still be able to complete my degree within my planned timeframe?"
  • "What's the optimal balance between conversion units and option units to satisfy program requirements?"

I observed firsthand how my peers were resorting to makeshift solutions—complicated spreadsheets, hand-drawn diagrams, and frequent consultations with academic advisors—just to chart their path through the program. These approaches were not only time-consuming but often resulted in less-than-optimal study plans due to overlooked prerequisites or misunderstood requirements.

The absence of a specialized tool meant that students were essentially recreating the same planning process individually, leading to duplicate effort across the cohort and increasing the likelihood of course selection errors.

The Conceptual Solution

During our software engineering coursework, I was particularly struck by a core principle: the most valuable software solves authentic, well-defined problems. This realization sparked the idea for what would become the UWA MIT Study Planner.

I envisioned an interactive web application with these core capabilities:

  1. Visual Semester Planning: A clear, semester-by-semester visualization that would allow students to see their entire degree path at once.

  2. Intelligent Validation: Real-time feedback on prerequisite requirements, with the system automatically identifying and alerting students to potential issues.

  3. Requirement Tracking: Continuous calculation of progress toward degree requirements, showing students exactly where they stand regarding core courses, specialization requirements, and total credit points.

  4. Specialization Support: Customized guidance for students pursuing specific concentrations within the MIT program, with tailored course recommendations.

  5. Shareable Study Plans: The ability to export, save, and share completed study plans, facilitating discussions with advisors and peers.

What started as a personal tool to address my own planning challenges quickly revealed its potential to benefit the entire student community. I realized this could transform a source of stress into a streamlined, intuitive process.

Technical Challenges and Architectural Decisions

Transforming this concept into reality presented several complex technical challenges, each requiring careful consideration and strategic decision-making.

Modeling Complex Course Relationships

The first major hurdle was developing a data structure that could accurately represent the intricate web of course relationships. Each course in the MIT program had multiple attributes that affected its placement in a study plan:

  • Prerequisites: Some courses required completion of one specific prerequisite, while others accepted one of several alternatives, creating a complex dependency graph.

  • Semester Availability: Certain courses were offered only in specific semesters (Semester 1 or 2), which significantly constrained planning options.

  • Unit Classifications: Courses needed to be properly categorized as Core, Conversion, or Option units to track degree requirements accurately.

  • Credit Point Values: Most courses carried standard credit values, but some variations existed that affected the overall credit calculation.

  • Specialization Relevance: Courses had different significance depending on a student's chosen specialization track.

After several iterations, I developed a comprehensive data model that could represent these relationships while remaining performant enough for real-time validation. This model formed the foundation of the application's intelligence:

interface Course {
  id: string
  code: string
  title: string
  credits: number
  category: 'Core' | 'Conversion' | 'Option'
  prerequisites: Prerequisite[]
  semesterAvailability: ('Semester 1' | 'Semester 2')[]
  relevantSpecializations: Specialization[]
  description: string
}

type Prerequisite = { type: 'course'; courseId: string } | { type: 'or'; options: Prerequisite[] }

This structure allowed me to represent complex prerequisite scenarios, such as "CITS5501 OR (CITS4401 AND CITS5502)," which was essential for accurate validation.

User Interface Design Philosophy

The user experience was perhaps the most critical element for adoption. My guiding principle was that the interface should be so intuitive that students could use it effectively without needing instructions or documentation.

I chose a drag-and-drop paradigm as the primary interaction method because it closely mirrors how students mentally approach course planning—moving courses between semesters until finding an optimal arrangement. This natural interaction model significantly reduced the learning curve.

For the visual design, I selected Shadcn/ui components and Tailwind CSS for several reasons:

  1. They provided a clean, modern aesthetic that aligned with contemporary web applications.
  2. Their built-in responsive capabilities ensured the planner would function well on various devices—from desktop computers in the university library to tablets and smartphones that students might use during informal planning sessions.
  3. The component-based architecture facilitated consistent styling and behavior across the application.

To enhance user feedback, I implemented:

  • Color-coding to indicate course categories and validation status
  • Subtle animations to reinforce the results of user actions
  • Clear, contextual error messages that explained why certain course placements were invalid
  • Tooltips that provided additional information without cluttering the main interface

State Management Architecture

The interconnected nature of course planning presented significant state management challenges. When a student adds a course to a specific semester, this action potentially affects:

  • The validity of other planned courses (by fulfilling prerequisites)
  • The availability of additional courses (by meeting prerequisites)
  • The calculation of completed unit requirements
  • The visual feedback presented to the user

After initially experimenting with React's Context API, I determined that the application's complexity warranted a more robust solution. I ultimately selected Redux Toolkit, which provided:

  1. Predictable State Changes: Using a single source of truth with clearly defined reducers made the application's behavior more consistent and easier to debug.

  2. Performance Optimization: Redux's ability to prevent unnecessary re-renders became crucial as the application grew more complex.

  3. Developer Tools: The Redux DevTools extension proved invaluable for tracking state changes during development and troubleshooting.

  4. Middleware Support: This facilitated the implementation of complex features like undo/redo functionality and persistence.

This state management architecture was particularly beneficial when implementing the "auto-suggest" feature, which analyzes a student's current plan and recommends logical next courses based on completed prerequisites and program requirements.

The Development Journey

Prototype Phase

I began with low-fidelity wireframes to validate the core concept, focusing on the fundamental user flow rather than visual polish. After sharing these early designs with several classmates, their enthusiastic feedback confirmed the tool's potential value.

The initial prototype, built with basic React components and minimal styling, demonstrated the core drag-and-drop functionality and simple prerequisite checking. Even in this rudimentary form, the prototype clearly illustrated how different course selections would impact a student's overall study plan.

Iterative Development Process

Rather than attempting to build the complete application at once, I adopted an incremental approach, adding features in order of priority:

  1. Core Drag-and-Drop Framework: Establishing the foundational interaction model
  2. Basic Prerequisite Validation: Implementing the fundamental logic to prevent invalid course selections
  3. Semester Compatibility Checking: Ensuring courses were only placed in semesters when they're actually offered
  4. Requirement Tracking: Adding real-time calculation of progress toward degree requirements
  5. Specialization Support: Implementing personalized recommendations for different MIT tracks
  6. Plan Export and Saving: Adding functionality to preserve and share study plans
  7. Visual Refinements: Enhancing the interface with animations and improved feedback

After implementing each major feature, I conducted informal testing sessions with fellow students, gathering feedback that directly informed subsequent development. This user-centered approach led to numerous refinements that might otherwise have been overlooked.

Technical Implementation Highlights

Creating an Accessible Drag-and-Drop System

The drag-and-drop system—the core interaction method for the planner—proved more challenging than anticipated. Beyond basic functionality, I needed to ensure:

  • Accessibility: The system needed to be usable with keyboard navigation and screen readers
  • Touch Support: Many students would access the planner on tablets or touchscreens
  • Visual Feedback: Users needed clear indication of what was happening during drag operations
  • Validation During Dragging: The system should indicate whether a potential drop location was valid

I built this system using React DnD as the foundation, but needed to extend it with custom implementations to address these requirements:

// Example of custom drag preview component with validation feedback
const DragPreview = ({ course, isValid }) => (
  <div className={`drag-preview ${isValid ? 'valid' : 'invalid'}`}>
    <CourseCard
      course={course}
      isDragging={true}
      validationMessage={!isValid ? 'Prerequisites not met' : null}
    />
  </div>
)

// Usage with React DnD
const [{ isDragging }, drag, preview] = useDrag({
  type: 'COURSE',
  item: { id: course.id, type: 'COURSE' },
  collect: (monitor) => ({
    isDragging: monitor.isDragging(),
  }),
})

// Creating a custom drag preview
useEffect(() => {
  if (preview) {
    preview(getEmptyImage(), { captureDraggingState: true })
  }
}, [preview])

This approach allowed for highly customized drag behavior and feedback, significantly enhancing the user experience.

Prerequisite Validation Algorithm

The prerequisite validation system needed to handle several complex scenarios:

  • Courses with multiple alternative prerequisites
  • Prerequisites that could be taken concurrently
  • Special cases where prerequisites might be waived based on previous experience

I implemented this using a directed graph approach, represented using adjacency lists, to model the prerequisite relationships. The validation algorithm recursively checks prerequisites while avoiding infinite loops that could occur with circular dependencies:

function validatePrerequisites(courseId, plannedCourses, semesterIndex) {
  const course = coursesData[courseId]

  // Base case: course has no prerequisites
  if (!course.prerequisites || course.prerequisites.length === 0) {
    return true
  }

  return course.prerequisites.every((prereq) => {
    // Handle OR conditions
    if (prereq.type === 'or') {
      return prereq.options.some((option) =>
        validateSinglePrerequisite(option, plannedCourses, semesterIndex)
      )
    }

    // Handle single course prerequisites
    return validateSinglePrerequisite(prereq, plannedCourses, semesterIndex)
  })
}

function validateSinglePrerequisite(prereq, plannedCourses, currentSemester) {
  // Check if the prerequisite is planned in an earlier semester
  return plannedCourses.some(
    (semester, index) => index < currentSemester && semester.includes(prereq.courseId)
  )
}

This validation system provides immediate feedback as students build their study plans, preventing impossible course combinations while explaining why certain selections aren't valid.

Responsive Design Implementation

To ensure the planner was useful across various devices, I implemented a responsive design that adapts intelligently to different screen sizes:

  • Desktop View: All semesters are displayed in a grid layout, providing a comprehensive overview of the entire study plan
  • Tablet View: Semesters are arranged in a scrollable horizontal layout with optimized touch targets
  • Mobile View: A single semester is displayed at a time, with swipe navigation between semesters

This responsive approach required careful management of component sizing and context-aware rendering decisions. Rather than simply scaling down the desktop interface, I reimagined the interaction model for each form factor to ensure an optimal experience regardless of device.

Deployment and Community Adoption

After thorough testing and refinement, I deployed the UWA MIT Study Planner as a web application and shared it with my course cohort. The response exceeded my expectations:

  • "This tool just saved me hours of planning and potentially a meeting with my advisor!"
  • "I finally understand how all the prerequisites fit together for the AI specialization."
  • "The visual layout makes the requirements so much clearer than just reading the handbook."

Word spread rapidly within the student community, and within weeks, students from different enrollment years were using the planner to map their entire degree paths. Perhaps most surprisingly, even some faculty advisors began recommending the tool to incoming students, integrating it into their orientation materials.

Continuous Improvement Through Feedback

Based on ongoing user feedback, I've continued enhancing the planner with additional features:

  • Template Study Plans: Pre-configured plans for common specializations and situations
  • Course Description Integration: Detailed information about each course available directly within the planner
  • Performance Optimizations: Improved rendering for larger study plans
  • Accessibility Enhancements: Expanded keyboard support and screen reader compatibility

Each of these improvements emerged directly from observing how students were using the tool and listening to their suggestions.

Impact and Lessons Learned

What began as a personal solution to my own course planning challenges has evolved into a valuable resource for the entire UWA MIT student community. This journey has taught me several valuable lessons about software development and problem-solving:

  1. Start with a genuine problem: The most valuable applications address real pain points that affect real people. By starting with a problem I personally experienced and observed in others, I created something with inherent utility.

  2. User feedback is invaluable: Many of the most important improvements came not from my initial vision but from observing real users interacting with the application and struggling with aspects I hadn't anticipated.

  3. Hide technical complexity: The most sophisticated parts of the system—prerequisite validation, state management, data modeling—are completely invisible to users, who experience only a simple, intuitive interface.

  4. Modern web technologies enable rapid iteration: The combination of React, TypeScript, and modern UI libraries allowed me to build and refine a complex application much more quickly than would have been possible with previous technologies.

  5. Community needs drive organic adoption: No marketing was necessary—the tool spread naturally because it addressed a genuine need in the student community.

The UWA MIT Study Planner represents more than just a technical achievement—it's a demonstration of how software can transform a frustrating, error-prone process into something simple and even enjoyable. I continue to maintain and improve the planner, with plans to eventually transfer stewardship to future students who can carry the project forward and ensure it evolves alongside the MIT program itself.

Technical Implementation

For those interested in the technical details, the UWA MIT Study Planner is built with:

  • React 18 and TypeScript for type safety and improved developer experience
  • Redux Toolkit for state management
  • Shadcn/ui components and Tailwind CSS for UI design
  • React DnD for drag-and-drop functionality
  • Framer Motion for subtle, purposeful animations

The application architecture emphasizes:

  • Separation of concerns with clearly defined components and services
  • Strong typing throughout to catch errors at compile time
  • Responsive design principles for cross-device compatibility
  • Accessibility as a core requirement rather than an afterthought

The full source code is available on GitHub for those interested in exploring the implementation or contributing to its ongoing development.