Accounts
Redesigning Northwestern Mutual's accounts page to give clients more insight into their insurance policies and investments.
My Role
Sole contributor, UXD
Collaborated With
UX Research, UX Writing, Product, Engineering
Project Duration
8 months, 2023–2024
Status
Live
Net worth tracking was central to the app but peripheral to the business.
Northwestern Mutual (NM)'s mobile app was built around a feature that, ironically, wasn't core to the business model: net worth tracking. Like Mint or Credit Karma, the app allowed clients to connect their external accounts and monitor their wealth over time. NM product information was nested within this tracking interface.
This strategy served two purposes. First, it drove frequent engagement; since people rarely check their insurance details, the net worth tracking feature gave users a reason to open the app regularly. Second, it helped NM's sales team make informed product recommendations based on clients' financial data.
However, concerns about data accuracy led NM's leadership to shift away from net worth tracking. Our team was tasked with reimagining the Accounts page to reflect this new direction.
The Accounts tab was built around net worth tracking.
Clients could connect accounts from other companies.
Clients couldn't see their insurance coverage.
The app's emphasis on net worth created a significant problem: it buried the insurance information, despite insurance being NM's primary business. While clients could find their policies on the accounts page, they saw only a basic list without critical coverage details. Even worse, each policy was marked with "$-", suggesting these policies had no value - exactly the wrong message for an insurance company to send.
Clients couldn't find their investments.
The app was originally designed around net worth to promote NM's investment products. Ironically, clients struggled to access important details about their actual investments. Critical features like portfolio allocation and scheduled transactions were tucked away behind an obscure access point, leaving many clients unaware these tools even existed.
Insurance policies were marked with a "$-".
Investment details were hidden behind this chevron.
The website was outdated and not at parity.
While our primary focus was the mobile app, the website needed attention too. It shared the same problems, overemphasizing net worth and underplaying insurance. The web version of Accounts was also designed years ago using an outdated design system, so I redesigned it to match our current look and feel.
The web screens were visually outdated.
Here's how I redesigned Accounts.
After eight months, four rounds of testing, and countless iterations, we launched the redesigned experience to overwhelming positive response. Investment feature usage surged by 700%, while testing revealed that over 95% of clients found Accounts easy to use. Before diving into our journey, here's an overview of the final designs:
Getting situated in the problem space.
We began this project with three primary objectives: address the Net Worth feature, elevate insurance visibility, and resolve information architecture issues. To better understand these challenges, we started with stakeholder interviews followed by a kickoff workshop.
While the stakeholder interviews provided valuable historical perspective, they left a crucial question unanswered: was leadership concerned about the term "Net Worth" itself, or the entire concept? If the label was the problem, this was a matter of switching out terms where necessary. If the concept was the issue, we would need to rework the entire accounts tab.
The kickoff workshop combined research reviews, journey mapping, prioritization exercises, and ideation sessions. By the end, one thing became clear: we needed to create tangible design concepts to get meaningful direction from leadership.
Journey Mapping
Discussing Target Personas
Early Sketches
Recent Solution Attempts
Our review of two recent accounts page redesigns revealed a pattern. Both attempts had focused on breaking down net worth into its components: assets, liabilities, and their subcategories. However, neither design made it past the handoff phase, likely due to the ongoing net worth controversy.
Discussing these designs uncovered a deeper philosophical divide within NM. Two distinct camps had emerged: one that advocated for enriching the accounts page with data analysis, and another that pushed to keep it as a straightforward list of accounts and policies, moving analytics elsewhere. Both perspectives had strong backing among leadership.
An abandoned concept focusing on assets and liabilities.
More abandoned concepts showing different breakdowns of Net Worth.
Navigating unclear requirements and designing for net worth.
Though we couldn't determine if leadership objected to the term "net worth" or to the concept itself, we knew that we wanted to preserve this feature in some form. Since our OKRs focused on unique sessions, and net worth tracking was proven to drive return visits, maintaining this functionality was crucial for our annual goals.
Working with the UX writing team, I explored alternative labels for "net worth." We landed on "total value," though we acknowledged that "net worth" was both technically accurate and commonly understood.
For our initial round of UX testing, I created designs featuring a prominent "total value" graph at the top. To help clarify, I included assets and liabilities as components of the graph.
The results were disappointing - users struggled to understand not only the "total value" terminology, but also the fundamental concepts of assets and liabilities.
Early iteration with net worth, assets and liabilities.
Tried sorting accounts as assets, liabilities, or insurance.
Removing Net Worth
Having concrete designs helped leadership pinpoint their concern: to them, the execution of net worth was flawed, not merely its labeling. The core issue was data accuracy; external account connections frequently failed because of our vendor, and users often declined to connect external accounts.
In response, I reorganized Accounts into three categories: insurance, investments and external accounts. The external accounts section was necessary to accommodate non-investment and non-insurance connections. This reorganization effectively quarantined the least reliable external accounts data, though it risked discouraging users from connecting accounts at all.
While user testing showed the new design improved navigation and comprehension, a significant minority of users objected to losing the net worth feature.
Completely removed net worth; accounts landed clients on Insurance.
Restoring Net Worth
Leadership recognized that removing net worth tracking would reduce app engagement, particularly among power users who logged in frequently to monitor their net worth. They opted to fund a separate project aimed at tackling the root causes behind data inaccuracy.
After being directed to restore the feature, I took a simplified approach. Research had shown that clients struggled to understand assets and liabilities as concepts, so I eliminated these categories entirely. The tab layout allowed net worth to be a simple tally of accounts and values.
By keeping the same net worth tracking functionality, we avoided alienating our power users. We were able to focus on providing quality-of-life improvements, like cleaner UI, simplified error messaging, and more timeframe options for the graph.
Clean net worth graph with more timeframe options.
Simple list of accounts and their corresponding value.
Bringing insurance to the forefront.
For an insurance company, our previous Accounts designs gave remarkably little prominence to insurance policies. Clients had to dig into individual policy details to find benefit information, and policies without a cash value component displayed only null values on the main accounts page.
The old app particularly failed heads of household, who commonly managed multiple policies for household members; they had no way to quickly determine which policies covered which household members.
Most insurance policies showed $- as their value.
How to summarize insurance?
Initially, I mirrored the website's approach to summarizing insurance policies, but closer examination revealed fundamental flaws in its insurance summary model.
The website's most significant shortcoming was its failure to organize benefits by covered individual. Our testing had consistently shown that heads of household managed policies for multiple family members, yet the website (and my early iterations) pooled all insurance benefits together, regardless of who was covered.
Testing the website's insurance summary on mobile.
Implementing Better Taxonomy
After extensive stakeholder discussions, I secured approval to reorganize insurance summaries by individual rather than category. The revised accounts page's insurance tab now displayed each person's total coverage, broken down by accumulated value, death benefits, disability benefits, annuity payouts and long-term care coverage. Clients could tap individual policies for additional details, while those with multiple policies saw their benefits aggregated.
User testing revealed that clients grasped this new organization within seconds. Several noted they had previously maintained manual records of their policies to achieve what our new design now provided automatically.
Policies were organized by the insured.
Clients with multiple policies recieved summaries.
Making investments easier to find.
The investments feature suffered from poor discoverability, resulting in lower-than-expected usage. With new investment capabilities in development, improving access became crucial.
Initial attempts to solve this through various button designs proved unsuccessful. One prototype performed especially poorly, with more than half of test participants unable to locate the feature.
A tab layout ultimately resolved our findability problems, though implementation required careful coordination. Since the investments team was simultaneously updating their features, I collaborated with their designers and developers to ensure visual consistency without disrupting functionality.
The old investments entry point was hard to find.
Many clients didn't know this page existed.
I tested a few different entry points.
In the end, tab navigation made investments findable.
I updated visuals without changing core features.
Designing inclusively for accessibility.
Accessibility guided our design process throughout, incorporating both formal audits and informal design decisions.
Color accessibility posed particular challenges across light and dark modes. To achieve WCAG AAA compliance, we maintained contrast ratios of at least 7:1 for normal text and 4.5:1 for large text.
Our established design system simplified contrast ratio measurements, but I noticed a critical oversight: our global graph style failed to meet the required 3:1 contrast ratio for meaningful graphics. In response, I designed an accessible graph component and worked with engineering to implement it consistently across the app.
Light mode.
Dark mode.
Clear Communication
Account status indicators had proliferated over the years, creating an inconsistent mix of error, neutral and success states. I developed a unified style to accommodate all statuses, reducing complexity while ensuring every error state included explanatory text.
Large Text
Northwestern Mutual's app supports text scaling up to 200% to accommodate users who need larger type. To ensure both legibility and aesthetics at maximum size, I created reference designs for engineers by doubling font sizes in Figma and adjusting as necessary.
150% text size.
Bringing the website up to speed, on all screen sizes.
The accounts redesign extended to web, where I spent several months improving platform parity and modernizing visuals. This work encompassed updates to Net Worth and Insurance pages, account-level detail pages, and empty states, the latter featuring new visuals and strategic content revisions.
The website's mature design system provided reusable components for most pages. Empty states proved an exception; the site hadn't updated its empty state template in nearly a decade. The new template I designed became our standard for all future empty states.
The net worth page mirrored the mobile app.
A new, modern empty state template.
Tables overflowed and scrolled horizontally.
I designed every screen at multiple breakpoints.
The Accounts redesign made complex financial data clear and accessible.
Impact
The redesigned Accounts launched in fall 2024, driving a 700% increase in mobile app investment page usage while maintaining Net Worth engagement. Early testing metrics suggest the redesign will reduce financial advisor workload by helping clients find basic policy information independently.
What I Learned
This high-visibility project required navigating complex legal, technical and political constraints. Each design decision needed solid evidence to support it. As Accounts touched every part of the business, I represented design to stakeholders ranging from legal and engineering teams to product owners, financial advisors, business analysts, content strategists and financial product designers. The experience strengthened both my design advocacy and my systematic communication skills.
