Mutual of Omaha Digital Design System

Tyson D. Reeder
Mar 4, 2018 · 3 min read

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.

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

Tyson Reeder’s Case Studies

Case studies of Tyson Reeder’s work

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store