- People
- Leadership & Staff
- Research faculty
- Gabriela Aceves-Sepúlveda
- Alissa N. Antle
- Sheelagh Carpendale
- Parmit Chilana
- Jon Corbett
- Steve DiPaola
- Halil Erhan
- Brian Fisher
- Diane Gromala
- Marek Hatala
- Kate Hennessy
- Alireza Karduni
- Sylvain Moreno
- Carman Neustaedter
- Will Odom
- Philippe Pasquier
- Niranjan Rajah
- Bernhard Riecke
- Gillian Russell
- Thecla Schiphorst
- Chris Shaw
- Wolfgang Stuerzlinger
- Ron Wakkary
- Ö. Nilay Yalçin
- Teaching faculty
- Emeritus
- Adjunct Faculty
- Alumni
- Work at SIAT
- Opportunities
- Research
- Programs
- News & Events
- Spaces & Equipment
- StudioSIAT
- Media
- Showcase
- Showcase Submission Form
- Spring 2025 Project Showcase
- Fall 2024 Project Showcase
- Summer 2024 Project Showcase
- Spring 2024 Project Showcase
- Fall 2023 Project Showcase
- Spring 2023 Project Showcase
- Fall 2022 Project Showcase
- Spring 2022 Project Showcase
- Fall 2021 Project Showcase
- Spring 2021 Project Showcase
- Fall 2020 Project Showcase
- Contact
- Staff & faculty resources
SIAT Portal – A Responsive Issue Management System for SFU Students
Web prototype
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 91ÅÝܽ’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.
Demo: