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