Ingenium

UX Design project to discover usability problems with the current website and provide solutions through user testing and rapid prototyping.

The Ingenium website has not been updated with my proposed designs. They are still being developed.
BACKGROUND

What is Ingenium?

Ingenium is a Canadian organization that represents three museums in Ottawa (Science & Technology, Farming & Agriculture, Space & Aviation). All three of the museums are organized within the Ingenium website.

Why did I work for them?

They had acknowledged that their current website was not meeting their expectations or leaving all of their users satisfied. Through user research, and testing I was asked to discover where the pain points were on the website to resolve them by proposing new designs and testing them.

CONTEXT

How were people getting to the site?

Tools like HotJar were used to determine how users navigate the website based on where they click and how they scroll through the page, and Google Analytics was used to see the most common navigational paths that people took within the website, and how people entered the website. With this information it was determined that more than three quarters of the people that entered the Ingenium website, were entering via one of the particular museums.

Out of 478,000 visits to the site

31%
were landing at one of the museum pages
3%
were landing at the Ingenium homepage

I had also, along with my colleague, completed a heuristic analysis, which determines the usability of a website by comparing it to a defined list of design principles and deciding whether or not the website is following those principles. Some of the critical issues found from this will be discussed below.

PROBLEM ONE

Users were uninformed of relationship between Ingenium and museums

Defining the problem.

Through user testing it was discovered that a lot of people did not understand what Ingenium is and how it is related to the museums. The website was structured with the expectation that people understood that the 3 museums were all related under one organization. This lack of understanding as to how the museums and Ingenium are related, caused confusion among many users.

Old navigation bar

New navigation bar

Newly added about section

How was it addressed?

To emphasize the relationship between the museum and Ingenium, the logo for the museum and for Ingenium were included next to each other based on the section of the website. The relationship was intended to represent the hierarchy between the two. Additionally, an about section was added as a component on the main Ingenium home page, and each of the museum home pages. These additions alone did not fix the issue of helping users understand the relationship between Ingenium and the museums, but it was the first step, along with another step that is explained below.

PROBLEM TWO

Location within website structure was unclear

Defining the problem.

The navigation bar on the website did not help promote understanding as to where the user was on the website. Users most commonly entered the site from Google into a section within a museum, and expected that they were only viewing and navigating between information that was related to that particular museum.

However, if they used the navigation bar with the intention of exploring more areas within this museum, it often brought them to a page where they were able to see information about all three museums. The navigation bar was not informative as to their location on the website, and it brought users to areas of the website that they did not anticipate.

Old navigation bar
New navigation bar

How was it addressed?

Instead of having the navigation bar of the website be identical on every section of the website, I proposed having the navigation bar be split into two parts. The top half represents the overall Ingenium organization’s navigation, and the bottom half represents the section of the website the user was within (like a specific museum). The primary color in the navigation bar was the same as the one that existed in the museum logo. When a user changes between different museum sections on the website, the colour scheme on the navigation bar changes to help reinforce the notion that they are now in a different section.

PROBLEM THREE

Information architecture different from many users expectations

Defining the problem.

In addition to modifying the navigation bar to be different based on the section of the website, we modified the information architecture of the links within the navigation bar. Through the usage of Hotjar and user testing it was determined that the information architecture of the website was not always what the users expected it to be. We surveyed many museum goers, and asked them to organize different sections of the website (based on existing links in the navigation bar and their headings) into different categories, and give each category a title. This helped dictate the restructuring of the information architecture to be more reflective of the mental models of the people that were attending the museum.

PROBLEM FOUR

Critical information was too difficult to find

Defining the problem.

With Hotjar it was determined that many people were coming to the website often to find three key points of information: the address of the museum, the entry price, and its hours of operation. Most of this information could be found within the "Visitor Information" (highlighted in red in the image below). This information was often missed by many users due to a lack of visual hierarchy and separation.

Old website - museum home page
New solution - museum home page

How was it addressed?

The visitor information was brought into the main navigation bar and was placed under the heading “Visit”, based on data from the people we had surveyed on where they would expect it to be. Additionally, it was included on the page as a button with a contrasting colour to give users two different opportunities to discover this information.