Peter Buley
Experience Designer

Financial services and insurance site overhaul

northwesternmutual.com 2.0

The Problem

Northwestern Mutual (NM) needed "digital to work harder in order to leapfrog the competitive set." Horizontal was engaged for a "deep strategic evaluation of its current digital properties and map a path forward.” Despite 160+ years in business and record dividends payouts NM was unknown to a large number of today's consumers and was having limited success connecting to/with new leads.  

Northwestern Mutual is a privately-held Fortune 100 (#90 in 2020) insurance and financial services company. Per the project scope, “The outcome of this engagement will be a strategic foundation for future implementation, content and design work, all toward the goal of connecting prospective clients to the advisors who can offer relevant products and services.” 


Users & Audience 

We focused on four market segments ranging from new customers that had never worked with NM or any financial advisor to middle-aged customers looking to switch advisors to those on the cusp of retirement. Leveraging NM's extensive consumer insight data we created six personas and journeys spanning these four segments that would account for the vast majority of new NM customers.  

Roles & Responsibility

I was one of two UX designers for this project and in fall 2019 was brought in for a 6-month contract to work with Horizontal’s Senior UX Designer. At various times during the project both of us led portions of the user research (as Horizontal does not have a dedicated UXR role). The overall team consisted of a project lead/strategist, project manager, SEO lead, content strategist, and technical architect.  


Scope & Constraints 

We worked with numerous stakeholders in both Milwaukee and New York. NM had acquired the startup LearnVest in 2015 and a number of the NYC employees had come onboard with the LearnVest acquisition. This meant a wide variety of stakeholder roles and two distinct office cultures. NM's CMO was our primary stakeholder and a number of marketing teams under her were involved in our weekly deliverables.

The project consisted of 4 phases (the deliverables I worked on during each phase are noted in parenthesis):

  1. Kickoff & Immersion (stakeholder interview review, existing research and consumer insights review)

  2. Strategy & Personalization (personas, journey maps, card sorts, tree tests, new sitemap and information architecture recommendations, personalization engine research)

  3. Experience Design (wireframing and prototyping of newly designed financial tools)

  4. Implementation Roadmap

Process & What I Worked On
 Northwestern Mutual site overhaul

Screenshot from LiquidText (segment report on the left; relevant clippings on the right)

Kick-off research  

Most of my first two weeks at Horizontal were spent perusing over 500 pages of NM's consumer insights and various reports provided by the client. After searching for a better way to collate and clip findings across multiple documents I found LiquidText which saved me hours and allowed me to clip relevant data and insights on my tablet. The most useful feature is clicking on a clipping and later being able to return to the exact spot in the source file. A number of findings in this process would inform later design decisions as the project progressed.     

During this time I also listened to all the stakeholder interviews and wrote insights into what part of the site was their focus, some of the lexicon they used, and started to understand more about NM as a sum of the people that worked there.  


 Northwestern Mutual site overhaul

Two of the six final personas

Personas

Based on the stakeholder interviews/consumer insights literature review we set up six personas reflecting four market segments. We referred to them throughout the entire product development process. We spent nearly three revision cycles dialing in the six personas that the stakeholders felt reflected their consumer insights.  

User Journey

I mapped out the user's steps to see how I could simplify their journey to help them reach their most important goals with the product. As our personas varied widely in technologies used, current life stage, and financial resources the journeys would later help us to pinpoint parts of the site that needed improvement. 

 Northwestern Mutual site overhaul

An early (and eventually unused) journey map, which I also used to develop my initial contributions to our persona work

Customer Journey

To understand how customers find and interact with Northwestern Mutual we created Customer Journey Maps for each of our six personas. Some of the longer journeys would play into the content strategy and long-tail customer acquisition. Our personas at earlier life stages would often first experience NM via cross-posted content and with time could become a qualified lead and eventually a customer. 

 Northwestern Mutual site overhaul

The Anxious Striver required a two page journey (which would likely span years)

Card Sorting

We performed two card sorts; a control version using categories from NM's existing site and a test version using additional categories informed by our nascent content strategy. I set up the test in Optimal Workshop but used the client's AlphaHQ account to recruit participants. AlphaHQ provided over 500 participants for both tests in a matter of days, which is way too many and resulted in me spending a day cleaning data for each version. My best practice card sorting recommendation going forward is smaller tests and more iterations of them. 

Some of our findings were:

  • Control validated most existing site categories

  • Deeper Who We Are section surfaced in both control and test sort

  • Pillar Pages within Life & Money supported by various category groupings (family, debt, credit, home, etc.)

  • Your Life was a popular category name for Life & Money

  • Planning remained the deepest category

  • Validated financial planning as a pillar page, family as a high-level L&M category, and content groupings for working with an advisor.

Overall the participant's groupings were in agreement with our early-stage pillar page and topic cluster content strategy. I began to reflect this in the information architecture (early revision work of the sitemap) and would attempt to validate it again in the tree test. Some of the findings deck can be seen in the carousel below.  

Tree test 

We took a few weeks to adjust before launching the tree test due to the March 2020 stay at home transition. During February and March, my tree test plan was reviewed by the client a number of times; I ended up submitting three drafts of the research plan.  In previous years NM had carried out an impressive number of tests/research and it took multiple rounds for all the stakeholders to align on a plan that reflected past research yet was augmented by the new content strategy and proposed information architecture.  We carried out remote testing in Optimal Workshop's TreeJack and the results would inform our revised sitemap proposal. Similar to our control vs test methodology used in the card sort we tested a version that reflected NM's research and a version that reflected our proposed strategy. Some slides from the tree test findings report can be seen below.  

Sitemap 

Our objectives for the sitemap recommendations were as follows:

  • Rooted in the content strategy and highlights pages that need to be changed or moved based on that strategy 

  • Takes into consideration key insights from the card sort exercise

  • Reflects what pages should live in the top navigation

  • Current version updated to reflect tree testing

I used FlowMapp to create a visual representation of the sitemap as well as a spreadsheet that detailed the navigation hierarchy. The spreadsheet was also useful for quickly importing 100+ categories into Treejack as well. Our most drastic changes were reflected in the Life & Money section. We expanded it into eight high-level categories (pillars) with a number of new Level 2 and Level 3 offerings below each Level 1 category. The cluster topics in L2 and L3 pages would allow some cross-pollination between related pages (both within the Life & Money category itself and say between a financial services article under Life & Money that could be cross-merchandized in the bigger Financial Services L1 category).  

 Northwestern Mutual site overhaul

FlowMapp screenshot showing expanded Life & Money (NM's content hub) categories.  

Our final sitemap presentation entailed both a visual representation and a spreadsheet version to appease various stakeholders.  

 Northwestern Mutual site overhaul

Scrollable Find a Financial Advisor Tool Wireframe 

Wireframes

After wrapping up the tree testing and multiple sitemap versions I was put on pause to work on another client (GCI's COVID response page and 5G launch) for most of March. By early April I was back to working on NM tool wireframes. I worked on wireframing the following tools:

  • Find A Financial Advisor

  • Visitor Account Page

  • Financial Tutorial

  • Goal Setting Tool

  • Quiz Tool

We used XD to create our low-fidelity wireframes and presented two rounds of annotated wireframes to the client.  After the second round of client feedback, the wireframes were stitched together using Sketch/Invision and the client tested the prototypes using their AlphaHQ audience. The prototype can be found here

Outcome

NM has a massive IT department and the site will be revamped in house sometime in late 2020. Stay tuned. . . 

Takeaways

I worked on this project for six months and COVID most likely will mean a number of our recommendations will not be implemented and some could possibly be revisited.  The most interesting part of working on this redesign endeavor for me was collaborating with a content strategist.  In the future, I'd love to work in an organization that fully utilizes content strategy and has a dedicated UX Content Strategist (and even a Content Engineer role if we are getting dreamy). Involving a content resource early on (even while we worked on personas) was a new experience for me. Exploring and learning more about personalization strategy and engines/platforms was also eye-opening for me.  

One thing this project could have benefitted from would have been a number of workshops/design sprints.  Aligning with stakeholders took quite a while and I believe prototyping earlier and more frequently would have both improved our work and reduced some of the long revision cycles.