UI/UX Design

Graphic Design

About

Government Website Redesign - CSA

Government Website Redesign - CSA

Government Website Redesign - CSA

UX/UI Design

Timeline: 3 weeks

Read Case Study

The project aims to redesign the official website of the Canadian Space Agency (CSA) to enhance user experience, streamline information dissemination, and reinforce the agency's brand identity. The new design will prioritize accessibility, user-centered design principles, and an intuitive interface, ensuring that visitors can easily access accurate and up-to-date information about Canada's space programs, missions, and advancements.

The project aims to redesign the official website of the Canadian Space Agency (CSA) to enhance user experience, streamline information dissemination, and reinforce the agency's brand identity. The new design will prioritize accessibility, user-centered design principles, and an intuitive interface, ensuring that visitors can easily access accurate and up-to-date information about Canada's space programs, missions, and advancements.

Directory

Part 1: Discover

Problem Statement | Objectives & Goals | User Feedback | Heuristic Evaluation

Part 2: Define

Initial Website Design | Revised Site Map

Part 3: Develop & Design

Website Redesign Process - Desktop (Low-Fidelity Sketches, Mid-Fidelity Wireframes, High-Fidelity Prototype)
Website Redesign Process - Mobile (Mid-Fidelity Wireframes, High-Fidelity Prototype)

Tools Used

Part 1: Discover

Part 1: Discover

Problem Statement

The current Canadian government website lacks user engagement and accessibility. Outdated design, complex navigation, and non-compliance with accessibility standards hinder citizens' access to information and services. Redesigning the website is essential to create an inclusive, user-friendly platform that fosters citizen-government interaction, ensures easy information access, and meets modern accessibility requirements.

The current Canadian government website lacks user engagement and accessibility. Outdated design, complex navigation, and non-compliance with accessibility standards hinder citizens' access to information and services. Redesigning the website is essential to create an inclusive, user-friendly platform that fosters citizen-government interaction, ensures easy information access, and meets modern accessibility requirements.

Objectives & Goals

The objective of this case study is to enhance user engagement, improve accessibility, and provide citizens with a seamless platform to access information and services

The objective of this case study is to enhance user engagement, improve accessibility, and provide citizens with a seamless platform to access information and services

User Feedback

Helder

IT Technician

“Overall flow of the site is confusing and non-linear. It's hard to navigate to specific information and sections.”

“Overall flow of the site is confusing and non-linear. It's hard to navigate to specific information and sections.”

Zoe

Digital Brand Manager

“Too text heavy. There needs to be more clear cut sections and make better use of icons and colour.”

“Too text heavy. There needs to be more clear cut sections and make better use of icons and colour.”

From this feedback, we conducted a heuristic evaluation to revise the structure of the site and interaction points.

From this feedback, we conducted a heuristic evaluation to revise the structure of the site and interaction points.

Current Website Heuristic Evaluation (Desktop)

Current Website

Part 2: Define

Part 2: Define

Initial Website Design

Revised Site Map

Part 3: Develop & Design

Part 3: Develop & Design

Website Redesign Process - Desktop

Low-Fidelity Sketches

Mid-Fidelity Wireframes

High-Fidelity Prototype

Features and Functions

Homepage & Menu

Category Navigation

Category Navigation

View Figma Prototype (Mobile)

Based on the build and architecture of the Desktop prototype, this was then translated to a responsive mobile version.

Based on the build and architecture of the Desktop prototype, this was then translated to a responsive mobile version.

Website Redesign Process - Mobile

Mid-Fidelity Wireframes (Mobile)

High-Fidelity Prototype (Mobile)

Homepage & Menu

Category Navigation

View Figma Prototype (Mobile)

Back to Top