Creating a User-Friendly Navigation

One of the first UX projects I worked on was to redesign Illinois Mutual’s navigation to ease usability and accessibility. The navigation is completely inaccessible on mobile and contains a multitude of bugs on desktop.

First I began with competitive research. How did other insurance companies structure their web navigation? Did they include breadcrumbs? Did they use a megamenu or a drop-down menu? Did they include a search bar? Which style is the best for accessibility?

After answering these questions, along with researching modern best practices for navigation design, I began creating mockups.

I researched what makes a good navigation title. It’s best to be descriptive yet personal. Always ensure that the user has a good idea of what they will see when they click to another page. Or original navigation was left aligned, meaning the user would hover over a right-aligned title, and have to move their cursor all the way to the left in order to select one of the drop-down options.

With the new design, the mega menu would appear right under the title, making the user’s path to the option more direct. Each element in the menu was also color-coded and properly chunked together.

Our tablet and mobile version of the navigation caused the most problems for users. It was slow, unresponsive, and not accessible for users that may need extra support for browsing the web. With the redesign, everything was made larger and easier to understand, utilizing well-known design features that are easy to recognize. For example, carets to open menus and an X to close the menu.

This design is currently still in development. We want to ensure that this new functionality is as bug-free and intuitive as possible before launching.