Introduction
The existing Canadian Space Agency website is an informative, text-oriented website. To improve the user experience, I redesign the Canadian Space Agency website to help users find and understand the desired content more quickly and easily.
Project Context
How long did it take?
3 weeks, work with 3 UX designer
What are my Responsibilities?
UX research, UX design, Wireframing and prototyping, UI design, Usability test
What tools did we use?
Figma, Google Doc, Adobe Creative Suite
The Problem
User frustrated in using the existing Canadian Space Agency because of the text-oriented UI design, and inconvenient navigation system.
How can we help them?
Redesign the UI design of CSA website, streamline the navigation system by using different UI element to recategorized the first layer and second layer navigation.
Discover
Existing User Path
The user are planning her first stargazing trip. He want to search more information through Canadian Space Agency (CSA) website. When she open the CSA site she click "Astronomy", she go to the Astronomy page. After click on the "Tips and tricks for amateur astronomers", she open a new page that show different topic of astronomy. She click on the "Stargazing tips" and arrived to Stargazing tips page.
Usability Test for Original Website
I conducted a usability test with 5 participants, to understand how users browse on the CSA website and the difficulty of finding specific information.
The task to do:
1. Find the stargazing tips page on the website
2. Find a suggested location for stargazing that is located in Ontario
3. Find the Perseids pages, and find the peak season of this year
Usability Test Result
I prioritize my testing results by using a 2x2 matrix. I find that all the user spend a lot of time on scanning the homepage, because there are too many links and information on the page. The text-oriented UI layout and complex categories and navigation system increase the difficulty of finish the task.
Can I reduce the time of user spend on look for desire information by streamline the categories and navigation system, and redesign the UI layout from text-oriented to visual-oriented?
Define
Heuristic Evaluation
I conducted a heuristic evaluation to find out the usability issue of the Canadian Space Agency website by annotating the webpage to show the current usability problem that users may face. It helped me to define what current issue needs to be fixed when I redesign the website.
Card Sorting & Stie Map
To simplify the complex categories and navigation system, I conducted a card sorting activity to find out the practical structure for primary and secondary navigation of the Canadian Space Agency website.
Based on the result of card sorting, I combine some categories that have similarities, for example, combining photo, video, and infographic resources as Multimedia resources; combining study and learning resources as Learning resources, etc.
Here is the Information Architecture diagram-visual sitemaps:
Prototyping, Testing & Iterating
Homepage Wireframe
5-Second Usability Test
I conducted a 5-second usability test to determine the user's first impression of the wireframe, and if it effectively communicated its primary message
The result shows the simplified design helps users find the desired categories more easily, proving that the new UI layout and the new categorize system work effectively.
However, I still received some feedback that pointed out some pain points.
%20(1).gif)
Iteration
First, although most participants successfully located the search button, the button's design made it less noticeable. Participants can locate the button because it is in an expected location.
To make the search button more noticeable, I add a background color to highlight the button, and keep it in the same location.
Second, some of the participants couldn't read the whole page because the "Feature Link" section was too long, some of them didn't even know there was a "Feature Link" section.
I added the "Feature Link" title on top of the section and then reduced the length to make it shorter, so user can read the whole page faster and easier.
High Fidelity Prototype
On the Homepage, I created the top navigation bar based on the site map to replace the existing navigation system. It looks simplified and the image helps the user to understand the link easily.
Besides the homepage, I also redesign some pages of the secondary and third navigation to demonstrate the new UI design of the CSA website.
On the secondary navigation page, I combine all the links and their next layer navigation to the side menu, it can reduce elements on the page, and users can easier to scan the page.
On the third navigation or the article page, I also added a side menu as a table of contents, users can use it to jump to different parts of a long article.
Let's Try My Prototype
Usability Test
Besides the homepage, I also redesign some pages of the second and third-layer navigation to monstrate the new UI design of the CSA website.
To find out how the new UI design element affects the user experience, I conducted another usability test to collect some insight to improve my design.
Here is the usability test plan:
Result
Here is the result of the usability test. I found that there are some issues of the UI element that need to be fixed.
Iteration
First, I changed the layout of the card, increased more space for the image, and moved all the words to the top. Users can easier to scan the card from top to bottom and know the meaning of the cards.
Second, I add a break line between the different links on the side menu, to reduce the confusion for the users
Third, I add a link for users to select different language.
Let's Try My Prototype, Again
Conclusion
Final Thoughts
In this project, I learn more about the UI design process. It is an interesting but also confusing stage, all the research methods, and design principles are new for me, it is a hard time when I try to understand all the things and create a case study in a short time. I wish I could have better time management, so I can spend more time in the research stage to get better and comprehensive results for my design.
During the case study, the most difficult part is to combine and simplify the existing complex navigation link and system. Although the card sorting already helped me to create a simplified site map, it still has some issues that need to be resolved. For example, some users are still confused about the category title on the top navigation bar.
In my next step, I will conduct a open card sorting, to discover the possible title for the category, and improve the site map, make the wording and navigation system easier to use and understand .
