top of page
pexels-anniroenkae-3435249.jpg
Menu Open.jpg

Pru Global Header

A header concept to simplify a complex, multi-tiered navigation.

Key Requirements

  • Must not upset the "political applecart"

​​

  • Follow established internal design and brand practices

​​

  • Flexibility in adding and removing links

​​

  • ADA compliance

​​

  • Legal compliance

Proposed Solution

  • Reduce exposed interactions to log in, search, and the menu

​​

  • Create an interactive "mega menu"

​​

  • Search field includes FAQs

​​

  • Relabel primary links and add content for user/customer clarity

Indended Results

  • Reduction in overall header height on the page

​​

  • Increased legibility and usability

​​

  • Reduction of user confusion by at least 50%

​​

  • Greater flexibility when adding more links

When I arrived at Prudential in 2015, I was given the task of rebuilding the public-facing website, with one very crucial rule: don't touch the homepage, and don't touch the header.  After two years of adding more pages, links, and features, it became necessary to reevaluate the header.

original-pru-home (1).png

The original Prudential.com header, prior to 2015.

In the beginning, I was fine with this since I was a "design island" (i.e., only designer) at the time and had a backlog of work on day one (though it went against every designer instinct I had since I generally started with the header and navigation). However, the more I (and eventually the rest of the UX/UI department) worked with it, I realized the idea of allowing a customer to navigate to any level of navigation from anywhere on the site was an interesting design problem to solve. As much as I was told not to touch it, I felt that there had to be a better way of creating a mega navigation menu.

 

For the record, the rest of the UX/UI, marketing, and analytics all felt the same way. The analytics team had heat maps where users were clicking on tabs and not getting the response they wanted (in one case, for 45 minutes). So, within a year of launching the site, there was a discussion about redesigning the navigation. Our largest issues were user confusion (labeling was done before a content team was established) and flexibility - secondary and tertiary navigation was always in a state of flux, and there were times we were dangerously close to wrapping both second and third levels.

pru_current_header.png

The Prudential.com header with the "for" labeling update and open account CTA, late 2019.

I was never officially told to redesign the header (I would become involved with the team that was responsible in late 2018/early 2019 in an advisory capacity) but since I can’t leave well enough alone - and the fact that the colors were off-brand - I took a stab at it (this was mid/late 2017). Here’s what I knew going in:

​

  • This was going to be a hard sell from C-suite level leadership down to my direct manager. A lot of politics and negotiation went into the hierarchy of the navigation.

​

  • I couldn’t dump any navigation. Some of the corporate links had to be there for legal reasons, although there were no users going to these pages.

​

  • The idea that “any user can navigate anywhere” had to be at the forefront of the design, meaning a user needed to be able to get from a "Tier 1" page to a "Tier 3" in as few selections as possible.

​

  • Search and log in had to remain visibly prominent to the user.

​

  • Labeling (despite that I am not a copywriter) for primary navigation had to change to decrease user confusion.

​

  • The colors had to be updated to correct brand standards, as well as be ADA compliant. 

​

Since I was re-working the UI aspect of our design system, I decided to accomplish two tasks at once - propose not only a new header but also show what the updated design system could look like when applied to our actual layouts and projects.

The proposed updated header with menus open, and breadcrumb state.

While I received positive feedback from my fellow designers and my manager, the higher-level leadership, despite being presented with evidence of user confusion, was unwilling to consider a redesign of the navigation. It wasn't until late 2018 or early 2019 that a team was formed to rework not only the header but also the entire homepage. I was brought in to consult because the vice president of UX was aware that I had been redesigning the header for the past few years.

 

However, even after I presented strong arguments supported by analytical data, the decision was made to abandon the redesign of both the header and the homepage. The only concession reached was the addition of the word "for" to the primary level navigation to help alleviate user confusion.

 

Thank you for reading.

bottom of page