OVERVIEW
COMPANY
SFU Course
IAT 235
YEAR
2025
ROLE
UI/UX Design
Front-end Development
TOOL
Figma
HTML/CSS
JavaScript
SIAT Issue Forum is a responsive academic web application developed to provide Interactive Arts & Technology students with a structured platform to raise concerns, propose ideas, and engage in peer dialogue. Designed as a front-end prototype, the app supports issue posting, upvoting, and commenting interactions across desktop and mobile devices.
The project emphasizes clarity in information hierarchy and interaction feedback, transforming informal student discussion into an organized and navigable digital system.
THE CHALLENGE
The primary challenge was designing an interface that encourages open expression while maintaining structural clarity and usability. Student-generated content is inherently unpredictable, requiring a flexible layout system capable of handling varying post lengths, comment threads, and engagement levels.
Additionally, since the deliverable focused on front-end implementation without backend integration, all interaction behaviors — including voting states and comment expansion — had to be simulated using HTML, CSS, and JavaScript. This required careful planning of state logic and visual feedback within a responsive framework.
MY ROLE
This project was completed in a team of two. We collaborated on UX research, wireframing, interaction design, and front-end development.
This project was completed in a team of two. We collaborated on UX research, wireframing, interaction design, and front-end development.
DESIGN SYSTEM
The design system prioritized accessibility, hierarchy, and modularity. We established typographic scale, spacing logic, and visual differentiation between posts, comments, and engagement indicators.
Components such as post cards, vote counters, and comment threads were built as repeatable modules to maintain consistency. Responsive behavior was intentionally designed rather than proportionally scaled, with layouts restructured for mobile to preserve clarity and interaction flow.
VARIANTS & GUIDELINES
Interaction states were defined for hover, active selection, vote toggling, and comment expansion. JavaScript was used to simulate engagement behaviors and provide immediate visual feedback to user actions.
Components such as post cards, vote counters, and comment threads were built as repeatable modules to maintain consistency. Responsive behavior was intentionally designed rather than proportionally scaled, with layouts restructured for mobile to preserve clarity and interaction flow.
MAIN TAKEAWAYS
This project strengthened my ability to design responsive, interaction-driven systems within technical constraints. I developed a deeper understanding of how front-end architecture, state logic, and layout adaptability intersect in real-world web applications.
SIAT Issue Forum reinforced my capacity to translate abstract community needs into a structured, responsive digital system that balances usability, clarity, and technical feasibility.
