Empower Retirement

Interaction Design, Information Architecture, Wireframes

Empower Retirement contracted with Acclaro Design to updated their website. The wireframes and information architecture took place in October of 2019, followed by UI design in November, with development starting in December.

The Brief

Empower had three main goals for this project: to move the site off the servers where it was hosted, update the design and fix some problems with the information architecture. The site was hosted and maintained by the IT department of a sister company, and it had been built without a CMS. Both of which made it difficult and time-consuming to update the site. One last constraint: we weren’t rewriting any of the text on the site. Doing so would require a legal review of any changes and there wasn’t time in the schedule.

Our Process

I did all of the wireframes and information architecture for the project. Because the site content wasn’t going to change, I started with a content inventory.

Then I did a heuristic review of the site, to identify potential problems. The creative team at Empower had done their own research, and had good handle on what was working and what they wanted to change.

The first two weeks were spent exploring the site navigation, and then we spent two weeks wireframing key pages on the site. The team met several times a week to review the designs. I led these meetings and explained the strengths and weaknesses of the different navigational schemes and wireframes.

After the wireframes and information architecture were approved by the client, we moved on to UI design. During this phase, I reviewed and gave feedback to Mike Moran, the UI Designer leading this phase. Once development started, I did some QA and also helped port the content into WordPress, which mostly involved copying and pasting from the live site.

The site has a responsive design, and we created both mobile and desktop wireframes and designs, but we focused more on the desktop experience. The majority of their traffic is from desktop users. Likely, most individuals want to take their time while researching and setting up their retirement investments, while plan sponsors and financial advisors access the site mostly from the work computers.

Problems We Identified

The site lacked consistent global navigation. On the home page, the header had three main sections: Individuals, Plan sponsors and Financial professionals. Once you clicked into any of these sections, the navigation changed to feature the three top level pages in the section.

the header on the home page

the header on the home page

the header for the individuals section

the header for the “individuals” section

The main drawback to this is approach is that it makes it difficult to switch sections. Once you are in a section, you have to return to the home page, by clicking the logo, to access a different section.

The Empower team weren’t that concerned with this because each section of the site represented one their key audiences. Actual users weren’t likely to need to switch between the sections. While this is true, I wanted to design a navigation scheme that was consistent, if possible.

Awkward Mega Menus

The site used mega menus for navigation, but they didn’t perform very well. And due to the lack of consistent global navigation, the menus weren’t consistent either. You’d get a different set when you drilled into a the indidividuals section, or any of the other sections.

individuals mega menu

the individuals mega menu

plan sponsors mega menu

the plan sponsors mega menu

These menus looked and worked more like small pages. They had too much text, and too few links. They were difficult to scan.

Inflexible Navigation Pattern

Other than the text links, the only navigation used on the site were boxes that looked like this:

navigational boxes

navigational “boxes”

This wasn’t very flexible, and it was poorly designed or implemented. Only the “learn more” links were clickable. Neither the photos nor the headlines, the white text on transparent red, were clickable.

Pages Without Useful Content

There were pages that had very little content other than these navigational “boxes”. The content inventory showed that these pages could be removed without losing any useful information.

site map

site map, with pages to be removed highlighted

simplified site map

simplified site map

Both of these site maps are somewhat simplified. They don’t reflect the number of pages in each section, but show the change to the page hierarchy.

Wireframes

I developed twelve different navigational schemes, before we landed on the one we selected. Most of them we reviewed internally and discarded. We showed maybe five or six version to Empower.

the new individuals mega menu

the new individuals mega menu

the new plan sponsors mega menu

the new plan sponsors mega menu

Because of the poorly designed mega menus on the live site, the whole team, myself included, was somewhat reluctant to explore this approach. But once I was able to convince the team that a level of pages could be omitted, it became clear that this approach worked best.

For example, on the live site, there was a “Planning for your future” page. It had only a paragraph of text, and navigational boxes linking to the following pages:

  • An Experience Focused On You
  • Customized Retirement Strategy
  • Planning Help

Mega menus allowed us to omit the “Planning for your future” page. It was replaced by the header “Your Retirement Plan” in the menu, followed by links to the pages with useful content.

updated plan sponsors mega menu

the sub-nav for the “Your Retirement Plan” subsection

We added sub-navigation to the “leaf” pages of each section. This makes it easy to explore a subsection of the site, without having to open the mega menu. This was one of the problems that the Empower team were keen to solve. On the live site, with it’s hub and spoke design, users had to go back to the previous page, one level up the hierarchy to accomplish the same task. In combination with the mega menu the sub-naviagtion provides a “bet and suspenders” solution, allowing users to easily explore a subsection of the site.

More Projects