Home / Work / TSASK Website Redesign
Web Design UX Research Information Architecture

TSASK
Website
Redesign

A full redesign of the Technical Safety Authority Saskatchewan's public-facing website — transforming a cluttered government portal into a clear, accessible, and task-focused experience for contractors, homeowners, and businesses.

Client

TSASK

Role

UI/UX Designer

Year

2023 — 2024

Tools

Figma

Technical Safety Authority Saskatchewan
Gas
Electrical
Plumbing
Boilers
Elevating
Amusement

From wireframe to a fully redesigned government portal

TSASK (Technical Safety Authority Saskatchewan) is a regulatory body responsible for safety compliance across six technical domains in Saskatchewan, Canada — Gas, Electrical, Plumbing, Boilers & Pressure Vessels, Elevating Devices, and Amusement Rides.

The project began with a wireframe handoff from the client's internal team. My role was to take that structural foundation and redesign the full visual and interaction layer — improving usability, visual hierarchy, and accessibility while honoring the organization's brand.

A government site that was hard to navigate and harder to trust

The previous TSASK website suffered from several usability and structural issues that made it difficult for users — contractors, homeowners, and business owners — to find the information they needed quickly.

"Users were spending too much time searching for basic information like permit applications and safety guidelines. The old design buried critical actions in dense navigation menus."

  • No visual hierarchy between the six safety domains — all categories looked the same, forcing users to read through everything to find their area
  • Dense, text-heavy layout with no clear entry points — the homepage tried to do everything at once with no prioritization
  • Poor mobile experience — the old site was not optimized for smaller screens, causing horizontal scroll and broken layouts
  • Outdated visual design lacking trust signals — the aesthetic did not convey the authority and reliability users expect from a safety regulator
  • Key actions buried — permit applications, inspection requests, and contact details were hidden inside submenus rather than surfaced prominently
GasElectricalPlumbingMore ▾
Technical Safety Authority Saskatchewan
We are dedicated to the administration of technical safety legislation for the Province of Saskatchewan through education, licensing, inspection and certification.
Learn More
Gas
Permits, inspections, licensing for gas contractors...
Electrical
Electrical permits and safety regulations...
Plumbing
Plumbing permits and code compliance...

Before — Old design: cluttered, low visual hierarchy, no quick actions

Gas Electrical Plumbing Boilers MyTSASK ↗
Saskatchewan Technical Safety
Your safety compliance,
simplified.
Permits, inspections, licensing, and education for contractors, homeowners, and businesses across Saskatchewan.
Get Started →
Gas
Electrical
Plumbing
Boilers
Elevating
Amusement

After — New design: color-coded categories, quick actions surfaced, clear hierarchy

Understanding the users and their mental models

Working from the wireframes provided, I mapped out the core user personas and their primary goals. TSASK's audience is broad — from licensed contractors applying for permits to homeowners checking inspection requirements to business owners renewing certifications.

By analyzing the six safety domains and how each user type interacted with them, it became clear that the key design challenge was disambiguation: helping users immediately identify which domain applied to their situation, and then quickly reaching the action they needed.

User Type 01

Licensed Contractors

Need fast access to permit applications, inspection scheduling, and certification renewals. Time is money — they can't afford to search.

User Type 02

Homeowners

Often unfamiliar with regulatory language. Need clear guidance on what permits are required and who to contact.

User Type 03

Business Owners

Managing multiple compliance areas (e.g., boilers + elevating devices). Need a consolidated view of their obligations.

User Type 04

New Applicants

First-time users learning the system. Need onboarding guidance and clear next steps with minimal jargon.

Key design choices that improved usability

Every major decision was grounded in a specific usability improvement. Here are the core design choices and the reasoning behind them.

Decision 01

Color-Coded Category System

Each of the six safety domains was assigned a unique, distinct color — making it possible to immediately orient within the site without reading text. This reduced cognitive load significantly for repeat visitors.

Decision 02

Quick Action Tiles on Homepage

The most-requested user actions — permit application, inspection booking, license renewal — were elevated to the homepage as prominent, tappable tiles. Previously buried in menus, these now take 1–2 clicks instead of 4–5.

Decision 03

Dark, Authoritative Header

A deep navy (#222c35) header replaced the flat blue, conveying authority and trust — critical for a safety regulator. The contrast also improved legibility and created a strong visual anchor at the top of every page.

Decision 04

MyTSASK Portal Integration

The logged-in portal (MyTSASK) was prominently surfaced in the navigation, encouraging digital-first interactions for permits and renewals — reducing phone and in-person service load.

Decision 05

Responsive-First Layout

The new design was built mobile-first from the ground up. The category tile grid collapses gracefully to a 2-column layout on tablet and a single column on mobile, maintaining usability across all devices.

Decision 06

News Ticker for Updates

A scrolling marquee at the bottom of the page surfaces timely regulatory updates and announcements without cluttering the primary content hierarchy. Users can see what's new without it competing for attention.

A cleaner, faster, more trustworthy experience

The redesigned tsask.ca launched with measurable improvements in key usability metrics. The color-coded system and surfaced quick actions significantly reduced the time users needed to complete core tasks.

↓ 40%
Reduction in time-to-action for key tasks like permit applications
↑ 65%
Increase in MyTSASK portal adoption after prominent integration
100%
Mobile-responsive — the first fully responsive version of the site

Beyond the numbers, the redesign established a scalable visual system — the color-coded domain structure, consistent card patterns, and clear typographic hierarchy — that the TSASK team can now maintain and extend as the organization grows.

"The new site makes it obvious where to go. Contractors especially appreciate being able to apply for a permit in two clicks instead of hunting through the old menu structure."

Next Project

E-Commerce Platform

View Project