top of page
starrysky03.jpg

Space has never looked so cool!

In this redesign of the CSA website, I explore and apply UI visuals to the navigation and main page to create a more fun and interactive experience for the user.

View Figma Prototype 

Overview

Role

UI Designer

Tools Used

Figma, Miro, Photoshop

Duration

4 weeks

User Research/Persona

Project Overview

The user is visiting the Canadian Space Agency website (CSA) because they wish to gain more information about Space and Canada’s contributions to Space Exploration. The internet is full of a lot of information and a lot of it is false, so a Government website assures the user that the information is up to date and as accurate as possible. In a World where Space Exploration is primarily dominated by the USA (NASA) and Russia (Roscosmos), the CSA website gives the user information specifically related to Canadian Space Exploration.
 

As a UI designer, I wanted to gain a better understanding of the user's thought process as they navigate their way through the Government Space Agency website in order to identify what areas of the website need improvement.

Part1- Proto Persona_edited.jpg

User Research

Heuristics Evaluation performed

 

4

tasks

After testing was done and a heuristics evaluation was performed, a user persona was created.  Meet Juno:

As a UI designer, I wanted to gain a better understanding of the user's thought process as they navigate their way through the Government Space Agency website in order to identify what areas of the website need improvement.

 

6

testers

Problem

What is the Problem?

After conducting usability testing and a heuristics evaluation of the CSA website, it was concluded that:

Not enough images

Descriptions of the links were inconsistent with information

The same link was present on several pages where it didn't need to be

Doesn’t seem like a Space website (too much association with the official Canadian Government website)

Flow of the website is inconsistent

Too many links all over the homepage

Main Page02.png
Mobile Invite Astronaut.png
Reorganization

Reorganization

A site map was created to further organize information is define where the information would be sorted.

Card sorting was used to organize information presented on the main page of the website. It took A LOT of sorting to narrow down the final information used in the redesign .

Solution

Creating the Solution

The final card sorting was taken and used to create the navigation and layout for the low-fi wireframes.

Usability Testing

Usability Testing and Insights?

5
tasks

8
participants

Why test?

To see whether or not the redesign is easier to navigate and more user friendly then the original design for the CSA.

Point 1

Images should have labels.

Point 2

The text and the input fields are too big.

Point 3

There should be an indicator that the images can be scrolled.

UI Visual

Applying UI Style and Components

Final Results/Thoughts

Final Results

Thoughts?

This project was very difficult and more time consuming then the previous projects. It brought about a new appreciation for UI designers because there is just so much work and thought process that goes into UI design for a website or mobile. That being said, I did enjoy the design process. Being an artist, I always love working with colour and designing new elements. This project also allowed me to dive more into Figma and discover and utilize more features that Figma offers.
I think I had more fun working on this particular project because I love Space. Space and Space Exploration has always been a passion of mine and it allowed me to actually work on something that I truly love.
When you have a passion for your subject, you enjoy your work a lot more.

With Joy, comes Tears
As stated in the other project, this project allowed me to further work on being objective. I identify with subjects and topics by relating to them with something in my life and these projects allow me to look at things from a different perspective and become more objective in my analysis of the information gathered.

After applying the final iterations from the user testing, here is the final result for the desktop.

Click here to view Desktop Prototype

desktop02.png
desktop.gif
mobilenavigation01.gif
mobile01.png
bottom of page