nwm-3

A Design System
and Site Architecture

The life insurance application was slated for NM Connect, the platform for all new digital tools and services for business users. When we launch our design efforts, NM Connect lacked a design system and toolkit, so we built one to allow our work to scale efficiently and consistently.

color cover

Overview

Problem
Our design system was specifically designed for input forms and work management for the business users. More than anything, it needed to create the most efficient process for them to complete applications, gather documentation, submits, and track progress.

Process
We began with a new grid system for dense form designs, identified the range of input types, and translated many of the paper form designs into more digitally-friendly patterns.

Outcome
A toolkit that our engineering teams could easily pull from and a system that could easily upgrade to the bigger NM Connect toolkit (Luna) which came a year later.

Role
Senior UX Designer

Strategy, UX Design, QA

Duration
Jan 2018 - July 2019

The Dream Team
Visual Designer - Gavin Bardic
Design Lead - Alex Wilcox Cheek 

Duration

Building a UX 
Component Library


The toolkit not only created efficiencies for engineers but for our design team, too. By establishing patterns, we didn’t have to create wires and screens for every single application scenario. With 1,400 questions, multiple user types, and 50 state variants, every application that’s submitted is different.

design library fields

Changing Bad Habits


Our users were power users: tabbing through the application with experienced knowledge of what information is expected of them. But traditionally, users would often submit applications with incomplete fields. In fact, they were incentivized to. Getting applications in quickly meant that they would get paid sooner. Our system was designed to help them enter clean and structured data.

Messaging Strategy Included 2 types of errors

Auto-Filled Fields


Our system also auto-filled as much information as possible. For instance, starting with a zip code meant that they could skip the city and state fields. When our application integrates with other data systems, more and more fields will be pre-populated.

Basic Information

Prior State


This, times a thousand. Here is a sample of a few of the forms that required analysis. The biggest challenge for our team was the translation of these forms into a digital language that could be repeated and scaled.

select forms
Edit Forms

Visual Design System


One Platform with Interconnected Workflows


In conjunction with a broader redesign of NM Connect, I helped align Applications with other products under a new Insurance tab. The new architecture also introduced landing pages where users could monitor applications and servicing needs across their entire business. Rather than our system operating in a silo, it was designed to connect across bigger workflows.

insurance-landing

Product Journey Map


Mapping the end-to-end digital experience for the company’s life insurance products, building a foundation for all of its insurance products and services.

HO map

Other Projects

BMW - Thumb SupportProof of concept

Mini CooperProof of concept

Training Toys for DogsFinal Bachelor Year Project