top of page

User Test

Design Testing

Before the actual testing began, a test plan was created to lay a solid path of how testing would be conducted. Participants were recruited and to test the design to observe how users interact with redesigned pages and to identify how to further improve the design. The test was conducted on zoom, with 6 participants who fit the criteria I was looking for.

Overview

Objectives

  1. Test if users can easily complete the tasks

  2. Observe the different paths users take to complete the same tasks

  3. Assess areas of improvement for future iterations of the design

 

Participants

  • 6 participants

  • Between 30-45 years old

Home Page Wireframe

Header & Footer Navigation

Prototype

Mid-fi Prototype

Based on the information architecture that was developed, the next step was to create digitized mid-fidelity prototypes, with adequate information for users to be able to navigate through the pages and complete tasks presented to them during usability testing. The mid-fidelity wireframes helped focus on what needed to be improved in terms of redesign, so that the pain points that the users experienced, can be eliminated replacing with new functionalities, which made it easier for the users to complete the desired task. Website, tablet and mobile versions we created to make sure that the design is responsive and effective across any device that users would access the website from.

  • Complicated language and verbiage

  • Too many links and no CTAs

  • Too many repetitions

  • Lengthy descriptions

  • Heading and content mismatch

  • Absence of home button & Navigation baR

  • The career page needs to be simpler

  • The mobile version required too much scrolling

  • Breadcrumbs in the mobile version looked complicated

  • Too much noise and distraction

  • Unhappy with the look and feel. Felt it was bland

  • Too many headings & subheadings

  • Content heavy

  • Relevance of the information was lacking

  • Too much clutter

  • Job search too complicated

  • Language complexity & inconsistency - not adhering to the LATCH principle

Key Focus Areas

Define & Ideate

Data Analysis

Once the test results were derived the data was segregated and summarized into chunks according to different parts of websites where the redesigning would be needed most importantly. This data helped in prioritizing the areas which needed focus and from there on the problem statement was arrived at, which initiated the redesign

DAN

SHEELAM

VIC

Mandy

JEANNOT

I would recommend this website to others

I would return to this website in the future

I enjoyed the visual design and style

Navigating through the website was clear and easy

I was easily able to find the information I needed

Canadian Space Agency

The Redesign

Project Duration

3 weeks 

My Role

User research, Paper and digital wireframe, Hi-Fi Prototype, User testing

Tools Used

Project Goal

The main goal of this project was to ascertain how can navigation be improved. After conducting preliminary interviews on the usability of the original website, the conclusion was that the user were getting overwhelmed with a large amount of information on the website. The task, therefore, involved identifying areas of the site currently causing frustration or confusion and redesigning it to create a great user experience.

Heuristic evaluation

The Design Process

Empathize

Define

Ideate

Prototype

Test

Global Website Rank

  • Global Rank (Worldwide) - 250,754

  • Country Rank – Canada - 13,880

  • Category Rank - Science and Education > Astronomy – 61

Audience Interest

  • News and Media

  • Science & Education

  • Astronomy

  • Careers

  • Technology - Satellites

Top Links

Top Searches

  • Canadian space agency - 5.44%

  • How satellites have changed the world - 1.14%

  • About Astronauts - 1.03%

  • Planets in our Solar system - .85%

  • Space Scientist – Career - .85%

About CSA

A government agency that is

  • Responsible for the Canadian Space Program.

  • Involved in the exploration of space and the development and application of space knowledge.

  • Involved in a range of space activities, which includes: Design, development, and launch of satellites.

  • Development of space rovers used in deep space exploration International Space Station Scientific study and research.

  • Training of astronauts.

  • Involved in several space missions such as:

    • OSIRIS-Rex

    • NEOSSat

    • ExoMars

Method

  1. ​Travellers who seek more information on Northern Light.

  2. Educators, especially primary, middle and high school.

  3. Students who want information for school assignments.

    • About Astronauts

    • About International Space Station – Science, Technology robotics.

  4. Researchers who want information for projects or research materials.

  5. Job Seekers who use the careers' page.

CSA is the government agency responsible for space exploration and aeronautics in Canada. Users navigate the site to find valuable information such as new articles, the latest on space and educational resources available on this site.

​

A usability test was conducted to understand what the users felt about the current website and what changes were required to make the usage of the Website seamless to them. Based on the website Analytics, the pages most visited and the roles of users, we determined. The content of the website attracts many users from varied fields, but the top five are:​​

Initial Usability test

Empathize

Research

To better understand CSA's audience background, their requirements, the actions taken by them on the website, I started by conducting research with the following goals:

​

Research Goals

​

  • Understand the space and scientific research industry better.

  • Identify CSA's target audience category.

  • Understand better the profile of similar websites.

  • Understand how the data on the site helps resolve issues and fulfil the audience's needs.

  • Understand the experiences people have with researching for information.

  • Discover goals, needs, motivations, and frustrations of different types of audiences using the website.

Information Architecture

The groupings from card sorting were then used to finalize the new site map. With information architecture in place, redesigning the navigation was much simpler

Usability Test Results

How Might We

  • Simplify Navigation

  • Set up the hierarchy, to emphasize important elements.

  • Present the site’s large amount of information without overwhelming the user.

  • Identify and declutter the areas of the website that currently cause frustration or confusion.

  • Prioritize what is important for a great user experience.

  • Enhance the look and feel of the website.

Problem Statement

CSA’s website contains a lot of valuable information, but it is not well organized. It would be particularly beneficially for information seekers & researchers to easily access the resources available on this site. However, confusing categories, visually busy layouts and a lack of hierarchy make navigating asc-csa.gc.ca too time consuming. With Information seekers in mind, we created a more organized and intuitive responsive web design.

User Insight

Most Users' who land on the website are typically looking for information that is heavy and is of vital importance such as research material, school projects, educations data and so on. Thus, it is imperative that the information that the user is looking for is easily available, without having to spend too much time trying to track it and use that time appropriately where it is most needed.

Card Sorting

The users to card sort, to get a better understanding of how they liked to group items, to visualize which headings belonged under which sections. This also helped with prioritization of the webpages, and accessibility based on what user considered most important or least important in a specific order 

Design Priorities

Group Similar items together

  • Make labels clear and concise

  • Keep navigation consistent across pages

  • Declutter interface

  • Find ways to enhance curiosity

  • Make information easily accessible

  • Simplify language

  • Use Better images and video

  • Improve the overall look and feel of the website

Aurora Hunter

Educator

Student

Website Prototype

Astronauts

As per SEO results of the CSA website as well as data analytics of most searched keywords on the website, Astronauts tops the list. A loading page was specifically designed, leading to more information on anything related to astronauts within the site

Moodboard

To begin the rebranding process, a mood board was first created for inspiration and to set the tone to move forward with how the brand was envisioned as a final product.

Logo Design

Once the brand attribute was created, the logo redesign process started with brainstorming different ideas related to the main theme of the website, and then the logo was created using Adobe Photoshop.

​

The original logo looked too similar to the logo of NASA, and it was important to give the logo its own unique identity as Canadian Space Agency with its national flag symbol - The maple Leaf. The images that looked the best were digitized. The logo, again, carries colours that has been consistently used across the website, with the maple leaf red and the Space blue.

Style Kit

Using the style tile as a guide, the CSA branding was applied to UI elements on their website to maintain consistency and to convey the brand personality throughout their website. The UI Kit helped to tie the look and feel of the website together and bind all elements of the website with absolute clarity and uniformity.

Iconography

Button States

Add a Title

Calendar

Style Tile

Once the logo and the brand colours were finalized, it was time to compile them together to create the UI STYLE TILE. The font needs to be clean and easy to read as the website is content heavy. Different elements such as colour, typography, imagery, and logos we assimilated that aligned with the attitude of the brand - Professional, Clean, Modern, Accessible and Consistent. Lastly, using the same colour scheme all other elements were designed.

Forms, Tool Tips, Message

Hi - Fi Prototype

Creating the final prototype was all about combining design elements and the wireframe. Using this, the UI design of the website was created, thus leading to the development of a high-fidelity prototype.

Mission

All past, current and future missions of the Canadian Space Agency has been integrated into a single page with appealing images.

Home Page

The Homepage was reorganized as per what the audience showed the most interest in.

  • News and Media

  • Science & Education

  • Astronomy

  • Careers

  • Technology - Satellites

​

Also,  the feedback received during the initial user research was taken into consideration 

Other Pages

Other Pages as per SEO ranking were designed with similar UI elements to match the rest of the website. These pages used all the information that were prioritized during card sorting were accordingly arranged 

Professional

 Clean

Accessible

 Modern

 Consistent

UI Design

The newly defined branding for CSA, helped in crafting  the visual design of the key pages as per the SEO rankings and based off of the wireframes that were created. The branding was rendered into the newly redesigned website and into building a prototype to put to user test.

Thank you for your time

Get in Touch

Thanks for reaching out!

bottom of page