IMRC IA Redesign

In this client-based course project, my team (3 members) were tasked with improving the International Migration Research Centre's (IMRC) information architecture to improve the site's user experience.


After conducting a content inventory, card sorting, and tree testing, we proposed several key changes to the navigational structure and information design of the IMRC with the intent of better supporting users' information seeking goals.

Role

Researcher

Lead Designer

Timeline

Sep - Dec 2023

Skills

Info Architecture

Tree Testing

Card Sorting

UI Design

Tools

Figma

Optimal Workshop

Background

The International Migration Research Centre

The IMRC website serves as an active and established platform for research and debate, hosting varied media such as videos, peer-reviewed articles, and podcasts regarding the organization’s principal concerns: migration, mobility, displacement, and borders.

Background

The International Migration Research Centre

The IMRC website serves as an active and established platform for research and debate, hosting varied media such as videos, peer-reviewed articles, and podcasts regarding the organization’s principal concerns: migration, mobility, displacement, and borders.

Background

The International Migration Research Centre

The IMRC website serves as an active and established platform for research and debate, hosting varied media such as videos, peer-reviewed articles, and podcasts regarding the organization’s principal concerns: migration, mobility, displacement, and borders.

The purpose of the website is to establish an online presence where users can access scholarly articles written in affiliation to the IMRC, in addition to information about their mission, projects, and events. This gives audiences the opportunity to discover, interact with, and get involved with the organization.

Reasons Users Come to the IMRC Website:

1

To learn more about the IMRC's mission, researchers, and/or projects

2

To find scholarly articles pertaining to migration

3

To listen to the IMRC's podcast or watch their videos

4

To get involved with the organization

Target Users and User Behaviors

Our focus was supporting the informaton-seeking behaviours of students and scholars

The target users of the IMRC are students and scholars, policymakers, community members, and other organizations related to immigration. For the scope of our project, we focused on improving the experience for students and scholars.

Target Users and User Behaviors

Our focus was supporting the informaton-seeking behaviours of students and scholars

The target users of the IMRC are students and scholars, policymakers, community members, and other organizations related to immigration. For the scope of our project, we focused on improving the experience for students and scholars.

Target Users and User Behaviors

Our focus was supporting the informaton-seeking behaviours of students and scholars

The target users of the IMRC are students and scholars, policymakers, community members, and other organizations related to immigration. For the scope of our project, we focused on improving the experience for students and scholars.

To gain a better context of the user behaviours of students, we conducted a review of several peer-reviewed research studies, finding that the main information-seeking behaviours used in this context were berry picking, foraging, and pearl growing. Thus, we knew that our changes to the website needed to fundamentally support these behaviours.

Information-seeking Behaviours We Need to Support:

Berry Picking

  • Where you do a query and get a long list of results


  • Then you click on a link, look around, and then come back to the results page


  • Then look again, and come back, look again, read more, etc.


  • You essentially go "picking and tasting berries" at each result to find the best ones

Foraging

  • Instead of nibbling berries at random, users optimize the clues (scent of information) in order to get to the juiciest food fast


  • Hunting for the best food (results) by looking across the plains and picking up on the clues that tell you where the best food is

Pearl Growing

  • When you find one result and it’s good but its not enough - you need more like it


  • "I found this, how do I get more like it?"


  • Just like how pearls grow by having more and more layers added

The Problem

A content inventory uncovered that the site was not organized effectively, labelling was inconsistent, and navigation was unclear

To begin diagnosing the problems at hand, we conducted a content inventory of the entire site to get an understanding of the content itself, site organization, and navigation. After combing through the entire site, we narrowed down the problem to three glaring issues.

The Problem

A content inventory uncovered that the site was not organized effectively, labelling was inconsistent, and navigation was unclear

To begin diagnosing the problems at hand, we conducted a content inventory of the entire site to get an understanding of the content itself, site organization, and navigation. After combing through the entire site, we narrowed down the problem to three glaring issues.

The Problem

A content inventory uncovered that the site was not organized effectively, labelling was inconsistent, and navigation was unclear

To begin diagnosing the problems at hand, we conducted a content inventory of the entire site to get an understanding of the content itself, site organization, and navigation. After combing through the entire site, we narrowed down the problem to three glaring issues.

1

The site was not organized effectively

Some sections of the site felt hidden while other sections were outdated. For example, the News section of the site was unnecessarily difficult to navigate to, being hidden at the end of the spotlights section, while outdated sections of the website had entire top-level categories.

2

Labelling was inconsistent

The site often used various names for the same content, which can be misleading for users. An example was “News” and “Spotlights” being used interchangeably.

In other instances, labels did not match page titles. For example, clicking on “Projects Map” brought users to a page titled “IMRC Around the World”. While it may not seem like a large issue, inconsistent labels like these can make it difficult for users to find their way through the site. They might even question if they were brought to the right page.

There was also the issue of ambiguity for some labels. The label “Student Opportunities” sounded like a way for students to get involved; however, the content under it was actually about a scholarship award.

3

Navigation was unclear

Some of the site’s top-level categories had their own page and were thus clickable while others did not. This made the site’s navigation unclear.

Another problem was that breadcrumb trails were misleading, showing that users had clicked through more pages than they actually had.

User Research

To understand how users thought content should be grouped, how they expected the site’s navigation to function, and what labels made the most sense, we conducted a card sort with 13 users

We conducted 2 open card sorts: one with university students (n=9), and one with IMRC board members (n=4). This was done to understand how users grouped information and what they would name those groups. We used the results to inform improvements to the site’s labels and navigational structure.

User Research

To understand how users thought content should be grouped, how they expected the site’s navigation to function, and what labels made the most sense, we conducted a card sort with 13 users

We conducted 2 open card sorts: one with university students (n=9), and one with IMRC board members (n=4). This was done to understand how users grouped information and what they would name those groups. We used the results to inform improvements to the site’s labels and navigational structure.

User Research

To understand how users thought content should be grouped, how they expected the site’s navigation to function, and what labels made the most sense, we conducted a card sort with 13 users

We conducted 2 open card sorts: one with university students (n=9), and one with IMRC board members (n=4). This was done to understand how users grouped information and what they would name those groups. We used the results to inform improvements to the site’s labels and navigational structure.

Similarity Matrix (representation of how often content was grouped together)

Similarity Matrix (representation of how often content was grouped together)

Similarity Matrix (representation of how often content was grouped together)

What is a card sort?

Card sorting is a user research technique that helps us understand how users group content. These findings can the be used to inform information architecture.

How does it work?

Users are given cards with the titles of the site's content. Users arrange these cards into groups in a way that makes sense to them and then give those groupings a label.

Dendrogram (hierarchical representation of how users grouped content)

We learned that users primarily grouped content into 3 clusters:

1

Content about the IMRC itself

2

Content about the IMRC's research areas/focuses

3

Content about the IMRC's research endeavors (articles, podcasts, projects)

Based on how user’s grouped content, the labels they suggested, and other qualitative feedback, we proposed reorganizing content to fit under the following top-level navigation labels:

Proposed Top-Level Navigation Labels

Proposed Top-Level Navigation Labels

Proposed Top-Level Navigation Labels

About

Our Focus

Research

Events

Get Involved

Contact Us

Previous Top-Level Navigation Labels

Previous Top-Level Navigation Labels

Previous Top-Level Navigation Labels

People

Pillars

Policy Points Publication

Projects Map

Displacements Podcast

Student Opportunities

Tree Testing

Tree testing with 22 participants confirmed our changes yielded improvements

We conducted tree testing to assess the site’s current navigability versus our proposed navigational structure. We designed 2 tasks for users that were representative of how users might actually interact with the site. We tested with 3 groups of participants who had all never seen the site before.

Tree Testing

Tree testing with 22 participants confirmed our changes yielded improvements

We conducted tree testing to assess the site’s current navigability versus our proposed navigational structure. We designed 2 tasks for users that were representative of how users might actually interact with the site. We tested with 3 groups of participants who had all never seen the site before.

Tree Testing

Tree testing with 22 participants confirmed our changes yielded improvements

We conducted tree testing to assess the site’s current navigability versus our proposed navigational structure. We designed 2 tasks for users that were representative of how users might actually interact with the site. We tested with 3 groups of participants who had all never seen the site before.

What is a tree test?

Tree testing is a user research technique that tests a websites navigational labels and structure.

How does it work?

Users are given tasks and then have the ability navigate through the site's navigation labels to the point where they believe the information they are tasked to find would be situated. We can then examine whether users were successful and all the labels they clicked on.

Task 1

You were at a conference and heard about some of the IMRC’s work that they are doing in China. You want to know what other studies they are doing or have done in that area of the world. Where would you look to find this information?

Existing IMRC Navigation Structure PieTree (visualization of paths users took):

Proposed IMRC Navigation Structure PieTree (visualization of paths users took):

Key Results:

Task 1 Success increased from 70% to 100% using our proposed navigational structure

Task 2

You are pursuing a thesis on border issues and attended a seminar where the key speaker was a doctoral candidate studying with the IMRC. Their work has piqued your interest. Where would you look to find information on who they are?

Existing IMRC Navigation Structure PieTree (visualization of paths users took):

Proposed IMRC Navigation Structure PieTree (visualization of paths users took):

Key Results:

Task 2 Success only increased from 20% to 43% using our proposed navigational structure

Where did we go wrong?

From analyzing what labels users pressed on, we had a hunch that because we mentioned "seminar" in the task wording, participants looked for information about a seminar rather than the doctoral candidate.

To test this hunch, we tested Task 2 again with a revised task wording that did not mention a seminar.

Task 2 (Revised Task Wording)

While working on your thesis, you were told about a doctoral candidate studying with the IMRC. You want to find out more about what this person does, but you have forgotten their name. Where would you look to find information on who they are?

Existing IMRC Navigation Structure PieTree (visualization of paths users took):

Proposed IMRC Navigation Structure PieTree (visualization of paths users took):

Key Results:

Task 2 Success increased from 20% to 80% using our proposed navigational structure

This confirmed that the results in our previous test were negatively impacted by task wording, not the navigational structure

Mapping Out the Changes

With confirmation that our improvements were beneficial, we created a sitemap and wireframes to visualize the site's new hierarchy

Before beginning to design, we created a sitemap to understand how the site would function. At this stage, we decided to also incorporate search (and browse) functionality for the site’s articles and projects as it would make it easier for users to berry pick, forage, and pearl grow in the quest for their information needs.

Mapping Out the Changes

With confirmation that our improvements were beneficial, we created a sitemap and wireframes to visualize the site's new hierarchy

Before beginning to design, we created a sitemap to understand how the site would function. At this stage, we decided to also incorporate search (and browse) functionality for the site’s articles and projects as it would make it easier for users to berry pick, forage, and pearl grow in the quest for their information needs.

Mapping Out the Changes

With confirmation that our improvements were beneficial, we created a sitemap and wireframes to visualize the site's new hierarchy

Before beginning to design, we created a sitemap to understand how the site would function. At this stage, we decided to also incorporate search (and browse) functionality for the site’s articles and projects as it would make it easier for users to berry pick, forage, and pearl grow in the quest for their information needs.

Our main improvements to the IMRC website:

A complete navigational restructure and content reorganization that improves navigability, matches user mental models, and maximizes information scent

Before

After

The site's new top-level categories in the navigation bar better match how user's expect information to be organized. This supports the site's navigability and helps users find what they're looking for faster.

Moving key information to the top of the page reduces "Iceberg Syndrome" where users can't tell what a site offers or is about upon immediate landing. In turn, this supports information forging and berry-picking by maximizing the information "clues" visible on the homepage

The incorporation of local navigation menus to support way-finding and user orientation

Before

After

Local navigation menus help users orient themselves in certain sections of the site while also telling them what other content is contained in this section.

In turn, this supports information foraging and berry-picking by providing information scent about the content offered on the site.

The addition of facetted search to make finding IMRC articles and projects hassle-free

Before

After

A search bar and search engine results page enables users to efficiently find articles matching their interests. Search facets also helps users narrow down results to the ones that best suit the user's interests.

This supports both pearl growing and information foraging as facets let users narrow down results according to their needs and results excerpts provide foragers with key information "clues".

A podcast page that supports discoverability

Before

After

Having brief excerpts open about the podcast episodes provides more information scent to be picked up by pearl growing and berry-picking information seekers. Users can quickly determine whether an episode piques their interest or not.

The addition of Get Involved, Events, and Contact pages to promote partnerships

After

After

Qualitative feedback from card sorting revealed participants felt these pages were missing on the site. As the IMRC is also focused on creating partnerships, the addition of these pages helps funnel users into ways they can get involved with the IMRC.

Results

Our redesigned navigational structure improved users' ability to complete tasks

In our tree tests, the average task success increased by 45%, affirming that our redesign made improvements to the site.

Results

Our redesigned navigational structure improved users' ability to complete tasks

In our tree tests, the average task success increased by 45%, affirming that our redesign made improvements to the site.

Results

Our redesigned navigational structure improved users' ability to complete tasks

In our tree tests, the average task success increased by 45%, affirming that our redesign made improvements to the site.

45%

Increase in average task success

Increase in average task success

Reflection and Next Steps

We delivered our final report outlining our improvements, recieving positive feedback

Reflection and Next Steps

We delivered our final report outlining our improvements, recieving positive feedback

Reflection and Next Steps

We delivered our final report outlining our improvements, recieving positive feedback

Things I'd do next:

1

Redefine the existing design system or draft a new design system to match the proposed changes

2

Work on establishing a more consistent button design system across the entire website

3

Create an interactive prototype for usability testing

How I'd measure success:

1

Positive usability testing feedback

2

Successful closed card sorts further validating the information architecture

Successful closed card sorts to that validate the new information architecture

3

A/B Testing results confirming our changes yielded improvements

Let's connect and design cool stuff

Let's connect and design cool stuff

Let's connect and design cool stuff

Back to home

Back to top

Next Case Study