SIAT Portal – A Responsive Issue Management System for SFU Students

By: Yushuze, Eric Sun, Yixuan Li, Youcef Missoum
Course: IAT 235 Information Design

Description: This project is a fully responsive academic support platform designed for Simon Fraser University’s School of Interactive Arts and Technology (SIAT). The portal allows students to report, track, search, and review academic and technical issues within a clean, accessible interface.

The design system draws directly from SFU’s official brand identity, utilizing a consistent red-gray-white palette, Inter typography, and modular components such as status tags, navigation headers, and reusable form layouts.

Built with HTML, CSS, and light JavaScript, the system implements key UI patterns like mobile-first responsive layout, Flexbox alignment, and visual hierarchy based on Gestalt principles. Users can submit issues, view instructor responses, filter by type or status, and provide feedback—all within a coherent and scalable design framework.

The project demonstrates the complete workflow from Figma wireframes and tokens to polished frontend implementation, with full accessibility and performance considerations across screen sizes.