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

At this time the Design Guide was in version 3.1.

Design Guide 3.1

We had a few goals with the new system:

  1. More documentation. We wanted to make it easier for developers to make more informed design decisions when a designer couldn’t be dedicated to a project.
  2. Less layers of navigation to get to what you need. This was something we heard from developers and something we had experienced. It was sometimes hard to find things on the current site.
  3. Help educate about ADA requirements and provide accessible components to give partners a better start.
  4. Provide templates to get projects jump started.

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

Buttons 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)