Northwestern Mutual
Annuties Output for clients
In Aug 2022, my director and I were leading the vision for a more dynamic and presentable artifact that prospects can view and make actionable insights with their life insurance policies.
When users fill out a product form, they can generate output pages in the presentation app. I was responsible for:
Designing data visualizations for products: Portfolio Deferred Income Annuity (PDIA), Portfolio Immediate Income Annuity (PIIA), Variable Annuity, Variable Income Plan (VIP) , Fixed Income Plan (FIP), Portfolio Income Plan (PIP)
Developing the Figma design library for engineering and designers.
Establishing UI usage guidelines for future state and upcoming projects.
Role
In August 2022, I took over as the main UX designer on this project from my Director. Worked with Risk and Legal, Project Managers, Business Analysts, Content Strategists, and other stakeholders. Focused on solving for the client while balancing business rules and legal requirements.
Mission
Migrate Annuity products from NIS to NGIS. Establish Output Design using the Design System framework for several product lines (PDIA, VA, PIIA, VIP, PIP, FIP).
Timeline
March 2022 - March 2023
Existing product and challenge
This is the first project for Illustrations OX pages. As the first project, requirements were not established and changed over time. This changed our templates for OX pages and library. Through refinement, design continued to evolve and develop a toolkit which caters to specific needs in Illustrations and our users.
-
Output Experience or OX is the artifact created from the Illustrations Experience. After the illustration is presented to the client, a PDF of the OX is presented to the client of all the information in the proposal. The PDF artifact can be thought of as a digital leave behind for the client or printed. Because the PDF can be printed on 8.5 x 11 printer paper, understanding that the PDF can be printed (and preferred), is essential to understanding how the OX pages are designed.
-
An illustration is a presentation or depiction provided to prospective or new policy owners that shows how the policy should perform under specific circumstances set out in the illustration. In other words, it’s a prototype of a policy.
Goals
Primary
Design Illustration OX pages for Annuities and LTC product line.
Secondary
Set guidelines of OX page layout for future state and upcoming projects that start concurrently with the phase 2 of this project.
Illustrations OX Figma Library
This is a collection of components with details on page anatomy, footer treatments, and overall structure. This allows for testing of functionality and puts everything together for an easy developer handoff. Communication is essential and emphasized with a toolkit, this ensures that everyone on a project is kept up-to-date with progress and changes.
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in the visuals below.
-
Before
Output pages in NIS are in portrait orientation and display a variety of tables, disclosures, and line graphs.
-
After
Rebranded NM output pages, increased utilization by ~40%, generated more usage with FRs, and invested functionality in the presentation experience for live views.
Final Designs
The new output pages are in landscape orientation and have designated areas to display information. The placements for the header and footer is shown as default for most pages across the Output Experience. Placing content within the grid with data density in mind, the new and future pages will stay consistent with the new templates.
In order to create a better experience for users and improve usability, I worked closely with Risk, Product, Legal/Compliance, and Content Strategy.
Changes from collaboration:
Reduce redundancy in content and strategize placement/hierarchy of information.
Comply with risk/compliance/legal requirements for each product (PDIA, PIIA, VA, LTA).
Establish a foundation and create a cohesive experience familiar to the users.
After rolling out this library, I realized our designers and developers needed a little roadmap. That's where the 'OX guidelines' came in. Think of it as a friendly guide that spells out exactly how to use OX in our illustrations and products – everything from how it behaves to all the ways you can tweak it. To make things even easier, I also put together an 'OX toolkit' packed with ready-to-go, interchangeable pieces and design patterns.
Final thoughts
Building this library, inspired by the whole 'atomic design' strategy, was an invaluable experience and a bit of a rollercoaster – exciting, nerve-wracking, especially since I got to team up with my director, engineers, risk/compliance, legal, product managers, content, CX and PX design teams.