Back to All Work

Mutual of Omaha Digital Design System

Something that my team has maintained as a passion project is a Digital Style Guide which we referred to as the Design Guide.

As the amount of digital properties expands at Mutual of Omaha it became very apparent that we needed more than just a Bootstrap system. From versions 1-3.1 we had a list of components and code examples, but this left the door too open and we noticed inconsistencies in what was being created using it. We decided we needed something more going forward. We needed a Digital Design System.

In late 2017 a group was put together to work on building out the Digital Design System. The team consisted of a Product Owner, a lead designer that was also an Interaction Designer, two developers and two visual designers. I was one of the visual designers.

The main goal of the Digital Design System was to create a tool for developers and designers to be able to reference when designing and building that would help keep things more consistent and match the new design standards set in place with MutualofOmaha.com.

At this time the Design Guide was in version 3.1.

We had a few goals with the new system:

We started by auditing many of our larger projects to see what was out in the wild.

Button UI Audit

This was a great exercise because it showed us how things were being used and how many variations were out there.

After we had done the audits we started working our way through the list of items we needed and what we could get done for the MVP.

Around this time I became very busy with another project and wasn't able to help much other than answer questions and guide some decisions.

After my project wrapped up I jumped back on the Digital Design System Team to help them build out the site.

I worked on the layout of the site and helped get sections built out.

You can see the Digital Design System here.

Thankfully, a team will be dedicated to maintaining and evolving the Digital Design System. So this is only the beginning.

My Roles on this project

Visual Designer and pseudo-Copywriter (helped write some of the documentation).

Other Case Studies

MutualofOmaha.com Sticky Navigation Enhancement

Detail about the design decisions that went into the global navigation on Mutualofomaha.com.

Medicare Advice Center

The creation of the Medicare Advice Center. A tool that allows anyone to learn more about Medicare and what solutions what might be best for them.

Sales Reporting Web Application

A tool that allows sales representatives to access important business metrics while they are on the road.