The Arctic Institute

The Challenge

Our client, The Arctic Institute, brought us on to improve the usability of their website. Specifically, our client's primary concerns were:

Visitors are primarily coming to the website to view and read publications, so these need to be accessible quickly and easy to find.
Visitors use the Backgrounders to look up global policies, but these can be difficult for new users to find and it's sometimes unclear what they are.

Our client also stressed that they wanted to improve the website's usability for both new and returning visitors.

Role: UX Researcher / UX Designer

Product: Website and Information Architecture Redesign (Client)

Status: Ongoing

Our Solution

We redesigned the information architecture and user flows of the site, as well as the visual hierarchy and design of high-priority pages, to create a seamless website experience that clearly communicates the work of the The Arctic Institute and ensures that valuable content is accessible and understandable to visitors.

Design Process

User Interviews
Competitive Feature Analysis
Sitemap (Current)

Persona
User Flow
Problem Statement

Moderated and Unmoderated Usability Testing
Tree Testing
Heuristic Analysis
Issue Prioritization

Design Studio
Mid-fidelity Figma Prototype
Proposed Sitemap

Usability Testing
Task Analysis

Style Guide
High-fidelity Wireframes
Sitemap

DISCOVER

Who is Currently Using the Site?

After conducting a feature analysis of comparative websites, we wanted to learn more about the people who were currently using ours. Through our client, we were able to interview a myriad of arctic researchers, artists, and other enthusiasts involved in arctic issues. We initially set out to learn about how they were currently using the website and how it fit into their goals, needs and interests.

We discovered that our current audience were actually not visiting or utilizing the website - rather, they had subscribed to the weekly newsletter.

As such, they had little knowledge of the content the website contained or the extent of TAI's work.

Early in our interviews, an interesting trend started to emerge. Our current audience were not actually visiting or utilizing the website - rather, they had subscribed to the weekly newsletter and most of their digital interaction with The Arctic Institute was relegated to opening the newsletter in their email and then clicking out to third party news articles.

Based on this finding, we sought to understand what our arctic enthusiasts valued in the newsletter and their broader goals, needs and pain-points so we could ensure that our website redesign addressed these and communicated its value to our visitors.

What do our Arctic Enthusiasts Value?

In order to identify underlying trends and develop insights, we synthesized our data from user interviews through affinity mapping. (Click to enlarge)

Arctic enthusiasts like that TAI curates Arctic news for them.

Are involved in professional or philanthropic work focused on the Arctic.

Use a variety of channels to source news, but don't like digging for information.

Want to engage with others who are interested in Arctic issues.

Have a personal connection to the Arctic.

Insights from Interviews

EMPATHIZE

How Can We Help?

In order to visualize and empathize with our target audience, we created Sophie - our primary persona. Sophie is an amalgamation of the primary research data that we gathered and synthesized during interviews. We initially considered creating two personas - a researcher and a filmmaker - but given that one of our research insights was that people involved in Arctic issues tended to be both personally and professionally focused to the Arctic, and that they often participated in Arctic discourse in multiple ways, we decided to reflect these layers by combining the personas into Sophie.

Sophie

The Arctic Academic

Goals

Keep up-to-date on Arctic news and politics without having to dig.
Connect with experts and other voices on Arctic Issues.

Needs

Centralized information hub to keep up with Arctic issues.
Gain quick overview of information, with option to dive deeper into analysis.
Conduct primary research and interviews for her projects.

Researcher and Filmmaker

28 years old

Lives in Alaska, USA

Painpoints

Feels guilty when she 'should' stay updated.
Difficult and time consuming to consolidate different sources.

Full Persona

How might we help Sophie stay on top of Arctic discourse and engage with other members of the Arctic community?

EVALUATE

How Well Does the Current Site Help Sophie?

Based on Sophie's goals, needs and pain-points - and our client's primary concerns - we developed a set of tasks in order to test the usability of TAI's current website. We wanted testers to use the site as Sophie would, so we could gain insight into her user experience.

We decided to conduct both moderated and unmoderated forms of usability test, so we could gain rich feedback from testers as they completed tasks, but also see how they interacted with the website autonomously. In both cases, we asked for additional feedback about their perceptions of The Arctic Institute's mission and work, as well as their overall experience with the website.

Since we also wanted to evaluate the information architecture of the current site, we created a site map and conducted tree testing using the tasks applicable to Sophie.

Based on Sophie's goals and our client's primary concerns, we developed a set of tasks to test the usability of the current website.

In-Person Testing: What We Learned.

Moderated testing was conducted via Zoom screen share. For each participant, the team recorded time on task, success rate, and easiness rating - as well as any participant comments, behaviours and feedback. We also asked about testers initial general impressions of the website, if there was anything that drew their attention/they wanted to click, and what type of work they thought The Arctic Institute did.

Takeaway #1: The mission of The Arctic Institute was unclear to testers before and after completing the tasks. 5/5 testers were unsure and guessed incorrectly based on the hero image and/or featured articles.

Takeaway #2: Testers didn't expect to find 'country backgrounders' under 'research' and discovered this key content by accident while hovering.

Takeaway #3: Filters and links on the 'publications' page do not follow convention and were not recognized by testers. Tags, while unorganized, were usable to testers.

Takeaway #4: Main navigation labels had overlapping meanings to testers, resulting in many mis-clicks - (Research/Publications, Experts/About Us/Contact Us).

Success Rate

Avg. Time on Task

Task 1

You've just landed on this website because you're interested in Arctic issues. You'd like to learn more about recent findings in this subject. Find a recent post that keeps you updated.

50%

66.8s

Task 2

You've read this article and you're curious about learning more about this particular subject. Find another piece about this issue.

100%

38.2s

Task 3

You are interested in learning about how specific nations are involved in Arctic issues. Find out more about China's plans in the Arctic regions.

90%

42.0s

Task 4

You're impressed by how this website. Find out more about the people that run The Arctic Institute.

50%

75.2s

Full Scorecard

The current website does not effectively communicate the mission and work of the Arctic institute, making it difficult for the user to get oriented.

Language and visual design of the navigation - both global and faceted - does not clearly guide the visitor to the website's high priority content. This is reflected in low direct success rates and long time on task scores.

What Happens When We're Not Around?

In-person testing provided rich feedback and impressions from our testers, but we also wanted to learn how users would interact with the current website if they encountered it in a more natural setting - alone browsing the internet.

We created a prototype of the current site and used Maze to launch our tests asynchronously with autonomous testers. Using the same set of tasks and questions, we were able to learn how the current website functions in the real world.

Takeaway #1: Testers are drawn to the tab menu below the hero image and often miss the main navigation - and therefore the majority of the website content.

This heat-map of the homepage during task 1 reveals that testers overwhelmingly used the tab menu (under the hero image) while attempting to navigate the site - some entirely missing the main navigation at the top.

As a result, 9/11 testers were unable to locate the task content showing a bounce rate of 63.6%

In fact, in task 3 they could not locate 'Countries' under the 'Research' label, nor did they look for this content in the main navigation.

When tasked to find information on China's arctic policies, this heat-map shows that testers largely ignored the main navigation leading to 0/11 testers locating the country backgrounders - content deemed high priority by our client!

This confirms our observations from in-person testing that users discover this content accidentally by hovering over the main navigation labels rather than intentionally looking for 'countries' under the label 'research'.

The font size of the main navigation labels is also small for standard web design, which may contribute to its lack of use among testers.

Takeaway #2: Similar to in-person, testers appeared to ignore the publications faceted navigation.

The faceted navigation on the right side on the page was not used by testers, confirming the findings of moderated testing.

The buttons are a combination of filters and links, which is unconventional and potentially confusing - visually identical elements should not have different functionalities. As well, they do not permit the user to filter by subject, author, date etc. - common ways of organizing articles and other publications.

We found that the tab menu on the Homepage attracted visitors away from the main navigation, causing them to be unable to locate the majority of the website content.

More prominent on the visual hierarchy of the page, most visitors attempted to navigate the website using the tab bar - leading to a 63.6% bounce rate.

How Functional is the Information Architecture?

Having observed how testers interacted with the current website, we wanted to hone in the site's information architecture and understand how it functioned for the user regardless of element placement or visual hierarchy.

In order to visualize the structure of the current site, we created a sitemap. We then used Tree Testing to evaluate how well users could locate content through the website's current navigation hierarchy and labels.

Tree Testing showed us that navigation errors and mis-clicks persists even when controlling for visual elements and hierarchy.

Overall results from 10 testers showed direct success rates of less than or equal to 50% - notably, indirect successes and indirect failures indicate that testers tried multiple times through various navigation routes, revealing that the navigation is unclear and may contain too many primary options.

Testers were asked to find a summary of this week's Arctic headlines - content our interviewees expressed was very valuable to them. However, nearly three quarters of testers were unable to locate the primary navigation label housing this content - representing first clicks on nearly all main navigation labels. This demonstrates significant lack of clarity and overlap in navigation labels, and questions the efficacy of the secondary navigation label 'Take Five' in communicating this content.

Testers were asked to locate information of China's arctic agenda. More than half of testers were unable to identify the primary navigation label that housed this content (though those that did easily navigated through the secondary navigation to locate the content). This confirms that barriers in locating 'Countries' is not only due to visual hierarchy on the current site, but also reflects a labeling problem in the primary navigation.

Navigation problems persisted when controlling for visual design and hierarchy, suggesting that the Information Architecture is unintuitive and the navigation does not adequately communicate the website's content.

Does the Website Meet Best Practices in Design?

To evaluate the current website against best practices in web design, we conducted a Heuristic Evaluation. We chose to analyze the home page and a selection of primary pages containing high priority content - using Abby's Heuristics we scored the webpages and identified areas where best practices could be implemented.

Through the Heuristic Evaluation, we identified specific areas and elements where the website fell short of best practice and proposed solutions to address each issue. We further prioritized the issue from high - low so we could focus the redesign where the most impact could be achieved.

THE REDESIGN

With our prioritized list of issues in hand, we set out to design a website that would communicate the work of The Arctic Institute, address the usability problems we identified and help Sophie achieve her goals.

Home Page and Main Navigation Redesign

Current Site

Mid-Fidelity Redesign

High-Fidelity Redesign

Overlapping main nav labels were consolidated to avoid confusion, and label font size was increased to give the navigation visually hierarchy and readability. We made the decision to keep the label 'Research' for now since it is central to TAI's work, and test to see if consolidating primary options fixes the nav issue.
We put The Arctic Institute's mission front and center on the hero image to orient visitors.
We eliminated the tab menu that was distracting visitors from discovering the site's content.
We featured the content that our visitors value the most above the fold on the home page.

We designed a more extensive drop down secondary navigation to make the website's deeper content more accessible.
We used descriptive language to help visitors understand the content secondary nav labels contained.
We included links to valuable tertiary pages in the global navigation.

Publications Page and Filter Redesign