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 May of 2017.
We decided to tackle this problem in phases. First we made the main navigation sticky when the user scrolled.
But I wanted to spend some time on the secondary navigation. I felt we needed to also make the subnav stick to the top of the page to allow the user to quickly navigate between sections of the product. So, I started working on how we could accomplish this.
Some things I had to keep in mind:
- The contact information on the right would need to remain prominent and easy to access.
- Sometimes we use this same area to the right to show the agent’s photo and contact information. So the new design would need to support this functionality.
- I wanted to avoid hiding navigation items as much as possible.
Some of my initial ideas:
While I liked the idea of keeping the contact buttons exposed on the mobile device I knew we would run into a problem because of state regulation. In some states we are not allowed to call our agents “agents”. So there was a potential for “Contact an Authorized Representative” to be the CTA so we would run out of real estate quickly.
Ultimately I came up with the following design and worked with a developer to get it built.
You can see the GIFs below.
Or see it live on www.mutualofomaha.com/life-insurance
My Role on this project
Visual Designer
