Responsive Web Application,
Information Architecture
My Role: UX Designer
Creating an information architecture for Transamerica's retirement website to help users access information about their retirement accounts and perform tasks quickly and efficiently
As part of the effort to redesign Transamerica’s retirement website for 401(k) participants, a significant amount of research was done to understand business needs and user problems for the participant retirement website. This effort included user interviews with stakeholders and current Transamerica 401(k) customers, and customer feedback surveys. All of this data was compiled together and analyzed. Navigation was one of the key features identified as an area that could be improved.
The current Transamerica 401(k) website navigation is task based. It is split into 3 main navigation items: Overview, Review, and Manage. The same feature would be found in multiple places. For example, a user could have to go to Review > Contributions to view their contribution information. But if they wanted to change anything, they would have to go into Manage > Update Contributions. Users found this navigation confusing and were frustrated that they were not able to find what they were looking for easily. In addition, it was not easy to see all of the features available to the user because all of the contents were hidden behind the 3 main navigation items.
Next, a competitive analysis was conducted to study competitors’ 401(k) website navigation. Most of the competitors had a feature based navigation, where items were grouped by similar features, rather than a task based navigation like Transamerica’s.
Next, a competitive analysis was conducted to study competitors’ 401(k) website navigation. Most of the competitors had a feature based navigation, where items were grouped by similar features, rather than a task based navigation like Transamerica’s.
From all of the discovery work, we identified our goal, which was to make sure it was easy for users to get to the most common actions using the new navigation through a combination of an improved information architecture and easy to understand menu items.
From the interviews, the team identified that users most often logged onto their 401(k) account to do the following actions:
After identifying the goals, I explored different groupings of pages based on their content, as well as what the navigation might look like on different screen sizes.
We came up with a few different solutions and decided to run tree tests for 3 different sitemaps. The first test was for the original Transamerica sitemap to use as a benchmark. The second and third tests were for 2 new proposed sitemaps, which grouped navigation items by feature, but differed slightly in the groupings and terms used. The tree tests were completed by around 30 participants for each test. Participants were asked where they would go on the sitemap to complete 11 different tasks. They were then asked, at the end of the test, if they found any terms confusing.
The first test (Sitemap A - the OG) had a success rate of 60%. Sitemap B and C had similar success rates, but participants used fewer clicks to complete the tasks. We also analyzed the participants’ click patterns to try to understand where they were clicking first and how many clicks it took for them to complete each task.
Our next step was to conduct a moderated usability test with a clickable prototype to get a better understanding of users’ mental models and their preferences and pain points as it relates to the proposed new navigation. We also wanted to test our assumptions that users have a hard time understanding financial jargon or Transamerica-specific jargon such as Allocations, Rollovers, e-documents, and that users preferred a feature based navigation rather than a task based one.
Our testing prototype had labels that we updated to be more colloquial and beginner friendly, and we moved forward with a feature based navigation that offered more visibility into the contents of the website. The test was conducted with 9 participants.
There are 2 main navigation bars. The top black navigation includes global items such as My Accounts (where a user could navigate to their other retirement accounts), Help, Contact us, and My Profile.
The lower, white navigation, the “meat and potatoes” navigation, allows the user to access the different features of their plan.
We found that users had no trouble navigating to common transactions such as updating contributions, changing their asset allocations, reviewing their recent transactions, or starting a loan request.
However, users had some confusion around the terms “fund transfer,” “rollovers,” and “overview.” They were unclear on what the terms referred to and where they belonged on the navigation.
Users also wanted to see the education content (Planning resources menu) in the white “meat and potatoes” navigation rather than the top global navigation. In fact, 78% of users missed seeing it in the top navigation and went looking for it in one of the sections in the lower navigation.
Based on the results from the usability, I made modifications to the labels and groupings such as:
After the usability test was completed, we did a final round of tree testing with this updated sitemap to further validate it. The success rate of this test was 80%, up from the 60% success rate of the original navigation.
In Q4 of 2020, there were over 18,000 calls due to navigation issues. Each call costs $10. With a 20% improvement rate, based on the tree test results, we would save the company $150k a year just by fixing the navigation!
