Northwestern Mutual Case study - 2022Annuities Output Pages
Portfolio Deferred Income Annuity (PDIA), Portfolio Immediate Income Annuity (PIIA), Variable Annuity, Variable Income Plan (VIP) , Fixed Income Plan (FIP), Portfolio Income Plan (PIP)
What is OX
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.
What is Illustrations
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.
Overview
After a user fills out a product form, they can generate output pages in the presentation app. In Q1 2022, my director and I were responsible for
Designing new data visualizations for Annuities.
Developing OX design toolkit/library for engineering and product.
Establishing UI usage guidelines for future state and upcoming projects.
Finding Solutions to several project challenges.
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 Luna framework to mock up pages for several product lines (PDIA, VA, PIIA, VIP, PIP, FIP).
Timeline
March 2022 - Present
Phase 1 (Version 1 & 2)
Phase 2 (Hand off)
Build (Dev Sprint)
Existing product and problem
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.
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 Toolkit/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.
Current Experience
Output pages in NIS are in portrait orientation and display a variety of tables, disclosures, and line graphs. In order to rebrand NM’s output pages, increase utilization, generate more usage, and add functionality in the future to improve the user experience, design needed to refresh these outdated pages.
Original (NIS Output)
New (OX Design)
New Design of Illustration OX Pages (Annuities)
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. Together, we were able to:
Reduce redundancy in content and strategize placement/hierarchy of information.
Comply with legal requirements for each product (PDIA, PIIA, VA, LTA).
Create a cohesive design experience familiar to the users.
-
![]()
Cover
-
![]()
Table of Contents
-
![]()
Summary
-
![]()
Assumptions
-
![]()
Full Table
-
![]()
Table and Text
-
![]()
Table and Text Variant
-
![]()
Pie Chart
-
![]()
Bar Graph
-
![]()
Line Graph
-
![]()
Glossary
-
![]()
Disclosures
Illustration OX Guidelines
With the page templates, there was a need for guidelines for designers and developers. I developed “OX guidelines” to provide documentation that outlines specific usage guidelines, variatns, interactions, and specifications for OX in Illustrations and its products. This foundation comes with a OX toolkit comprised of ready-made components and patterns.