Tyson Reeder UX Designer / Visual Designer
Back to All Work

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 set to be pretty large. Along with the campaign there was to be a new corporate website with an improved IA and a new look and feel on top of existing content. In July of 2016 I was appointed as lead Visual Designer on the project and in August 2016 we kicked off the project.

From a visual and interaction standpoint I had a few things I wanted to make sure were addressed in the redesign. So I worked with the team to set some design principles.

  1. We wanted to reduce the color palette and use color only where necessary. With a focus on high contrast to ensure readability since we were targeting an older demographic.
  2. We wanted clear calls to action and better button hierarchy.
  3. We wanted to design in a way that would meet WCAG 2.0 Level AA ADA requirements.
  4. We wanted to freshen the brand and stand out among competitors.

When we began the project Mutualofomaha.com looked like the image below. We were suffering from an identity crisis. We had our work cut out for us.

Screenshots of different pages on Mutualofomaha.com before the May 15th redesign.

We started by conducting stakeholder interviews and due to timing restrictions it was decided by leadership that we would not have time to interview customers. Even though this was not how my team would of liked things to work out, we pivoted and created proto-personas to help inform decisions.

After we had an idea of who we were building the site for and the stakeholder vision we started working on the information architecture. For this we leaned heavily on an IA specialist at the agency. We met with her and worked through the IA which we used to inform the wireframes.

We tested different versions of wireframes and navigation with customers.

Example of wireframe that was tested

Once the wireframe for the homepage was established we moved to interior pages.

Initial wireframes for interior pages.

This is where things got hairy. We were told the scope of the project was existing content with a new visual presentation and some updated navigation and IA.

It was becoming apparent that this might be a problem so we raised the concern and kept moving on.

Up until this point there hadn’t been much talk of what the new look and feel for the brand was going to be. It had been communicated to us that the commercial would drive the new branding. I quickly realized that we could not wait for the commercial and that we needed to figure out the feel of the brand as soon as possible to be able to move forward. So we got together with the agency and after a little back and forth we landed on a decision right around Christmas.

Please disregard the broken text styles on the buttons.

Now that we had a brand guideline we needed to get homepage mockups ready for presentation to the C-level leadership. We worked with the agency to come up with three concepts to present.

Ultimately we landed on these. Two concepts that were a blend of our design ideas (first two)and one that just my team put together (far right):

Three homepage concepts.

If you go to mutualofomaha.com today I bet you can tell which one won. It was the first one.

From there my team focused on creating internal product pages. We wanted to create templates for the pages so that we could maintain consistency across the site. When trying to do this with the existing content we realized that it was going to clutter the site and that content needed to be discarded and some new content would need to be written.

Due to the short deadline we had to move through product sections fast to get them to states for approval.

We knew traditional ways of moving work through the company for approval would not cut it. If we were going to move through sections fast we needed to get everyone in a room and handle concerns right then and there.

So we started the new workflow. At the beginning of the week we would provide writing templates to the writers for 4 products. We would then take the content they wrote and apply it in the template around the middle of the week. Then towards the end of the week we would have a “pizza party” where we would invite stakeholders, product and compliance into a large room to review the pages. We would handle any easy changes in that meeting and make sure concerns were handled. Then we would finish up getting the sections ready for state approval and send them on their way. The next week the cycle would start over until we got through all the products.

Example of Product Basics template

It was fast paced and there was never a dull moment, but it is what made the redesign such a success.

Once product sections were done we moved on to the other sections of the site. We enlisted another agency to help us build out some of these sections.

As we were designing pages the developers were building them. We all colocated into a room on the lower level and the team grew substantially. We had many long hours and many problems to solve on the fly, but we hit the deadline and launched the site with very few bugs.

You can see the end product of all that work here: mutualofomaha.com

Roles on this project

Lead Visual Designer, Front-End Developer

Mutual of Omaha.com Redesign 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

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...

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...

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...