Developing Automated Information Architecture Tree Tests

For even more information about this particular project and experience, check out my blog post on the matter.

Overview

As one of the most important corporate communication priorities of 2016, the HR department at the Inter-American Development Bank went through a website redesign/migration process to modernize their current HR portal and refine their content strategy.

As the technical lead for the project, I wanted to leverage the website’s redesign to also redefine the content strategy of the website and define a robust new Information Architecture (I.A)


Table of contents

  1. Objective
  2. Users and audience
  3. My role in the project
  4. Design process
  5. Outcomes
  6. Lessons learned

Objective

Problem Domain: How might we leverage the HR website redesign process to ensure our content’s IA is usable and intuitive for our users?


Users and audience

1. IDB Users

The employee population was leveraged both as the users of the test and as the audience of the final product being designed. We relied heavily on them to help us refine the I.A., as they would eventually become the users of such IA to navigate the large and dense content found on the HR website.


My role in the project

As technical lead for the HR Migration and redesign project I found it prudent to also consider a non-disruptive restructuring of the old information architecture (IA).

To do this, I used my web development skills to build a low-cost, interactive tree test that would help us measure the effectiveness of our proposed I.A. proposal iterations.


Design Process

1. Define draft I.A.

First, I worked with the rest of the team on the first draft of what we thought would be a logical organization of the content available on the website.

One that draft was defined, it was time to map it onto the interactive test.

2. Develop the interactive tree test

The test application is an interactive quiz, hosted on a webpage, that presented the test-taker with use case scenarios. For instance:

I am an employee looking for a Career Development workshop”.

After reading this use case the test-taker had to use the navigation bar at the top to find the child-level page where he/she thought the content related to the use-case was located.

I built this interactive test using standard web technologies, leveraging CSS and JavaScript frameworks (Bootstrap and jQuery) to reduce development time and costs.

The test was hosted on Codepen.io for easy distribution and deployment.

3. Test the prototype

Once the test was build, we sent it out (with instructions) to a selected sample of target users. We asked them to take the test, and send us back their results “report card”.

As the test-taker clicked around and “digged” for the link that fulfilled the question’s scenario, the application counted the number of clicks a particular user needed to solve the current use-case scenario.

Ideally, the user should have taken between 2-3 clicks to find the right link. Anything above 4 clicks was worth reconsidering, and anything that took more than 5 clicks to find had to be relocated.

As the test-taker clicked around and “digged” for the link that fulfilled the question’s scenario, the application counted the number of clicks a particular user needed to solve the current use-case scenario.

Outcomes

  • We had a successful testing experience. Much of our assumptions were validated, and some were invalidated (which is always great to catch early).
  • A second iteration of testing was done in order to test the improvement of the IA
Heat map results of IA test
After test is taken, a heat map report is shown to the user.

Lessons learned

1

Always test. Even if your gut feeling is making you feel easy about design decisions, it’s always a good idea to run the decision by someone using a prototype.

2

Users appreciate being part of the design process. We got a lot of e-mails thanking us for taking such a user-centered approach in the redesign process of the HR website. Leverage the User-Designer relationship!