SPSA Website on laptop

UX / UI Design · Case Study

SPSA
Website

Your Voice. Your Campus. Your SPSA.

Role
UX/UI Designer & Developer
Tools
Figma · HTML · CSS · JS
Type
Website Redesign
Status
Live ✓
View live site

The Project

A student association
that needed a voice online.

The Saskatchewan Polytechnic Student Association (SPSA) represents thousands of students across four campuses — but their digital presence didn't reflect that energy. I redesigned the website from the ground up, starting with a Figma prototype and building it into a fully live, multi-page site.

The goal was clarity and accessibility — students needed to find events, benefits, services, and campus information fast, without friction.

Client
Saskatchewan Polytechnic Student Association (SPSA)
Pages Designed
Home · Student Services · Student Benefits · About
Key Features
Events listing · Services cards · Benefits grid · News section · Campus locations

Process

Figma first, then built.

Figma prototype
01
Research & Content Audit

Mapped out all the content SPSA needed to communicate — events, services, benefits, campus info. Identified what students actually needed to find quickly vs what was secondary.

02
Wireframes & Figma Prototype

Built a full desktop prototype in Figma covering all four pages. Focused on clear hierarchy, accessible colour contrast, and a consistent teal brand identity throughout.

03
Build & Deploy

Translated the Figma designs into hand-coded HTML, CSS, and JavaScript. The site is hosted live at jezart.com — fully responsive across desktop and mobile.

Design Decisions

What makes it work.

🎨
Consistent teal identity

The mint and teal palette was kept consistent across all four pages, reinforcing SPSA's brand identity without being heavy-handed. White cards and clean typography keep it approachable.

Scannable layouts

Events, services, and benefits are all displayed as visual card grids — easy to scan at a glance. Students can find what they need without reading walls of text.

📍
Four-campus footer

A detailed footer includes addresses, phone numbers, and hours for all four campuses — designed so any student regardless of location can find their local contact quickly.

See it live

Visit the
live site.

Open live site All projects