Tyson Reeder UX Designer / Visual Designer
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.

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)

Mutual of Omaha Digital Design System was originally published in Tyson Reeder’s Case Studies on Medium, where people are continuing the conversation by highlighting and responding to this story.

Other Case Studies

Medicare Advice Center

In Q3 I heard about a Senior Health initiative to create an “Advice Engine” for Medicare. The project was an enterprise initiative to give our customers unbiased information about Medicare...

Mutual of Omaha.com Redesign

On May 15th 2017 Mutual of Omaha was set to launch a brand new marketing campaign. Complete with a television commercial, billboards, digital ads and radio ads the campaign was...

MutualofOmaha.com Sticky Navigation Enhancement

When the redesigned Mutualofomaha.com was initially launched there were no sticky navigation elements. Below is a GIF that recreates what the site looked like when it was release in...