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
Role
UI Designer
Tools Used
Figma, Miro, Photoshop
Duration
4 weeks
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.
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
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
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 .
Creating the Solution
The final card sorting was taken and used to create the navigation and layout for the low-fi wireframes.
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.
Applying UI Style and Components
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.
