Mobile Menu Redesign

Problem

The SAMHSA mobile menu was outdated and difficult to navigate. The site has a multitude of pages, sections, subsections, and the menu did not make navigating the immense site any easier. The user is unable to know which section they are currently on through the menu, and each subsection has its own menu, which made exploring the menu a long and tiresome process.

Solution

I was tasked with creating a mobile menu that would allow for a smooth and efficient user-experience by rethinking the process of navigating the site menu in order to explore user needs. Through my brainstorming, I came up with a few solutions to create a better menu:

  • Simplify the overall design by adjusting colors, typography, padding, arrows, and line thickness

  • Move the menu over to the right instead of the left for the user’s convenience

  • Rethink the organization of subsections and their menus

  • Highlight the current page within the menu

Ideation Sketches

Flow and Prototyping

Visual changes include:

  • Menu moved to the right instead of the left to help with user-friendliness

  • Adjusted padding and line height to help with readability and design

  • Updated colors to allow for a cleaner and brighter look

  • Overall, the aesthetic changes simplified the original design and helps provide a smoother user experience

Nested menu drop-downs

A design challenge for this project is the sheer size of the SAMHSA site; there are many, many subpages, with each having its own menu. This means lots of clicking if the user wants to navigate to every sub-section. With the redesign, the new menu utilizes nested menus on an odd/even basis, which keeps things organized but not overwhelming. Subsections are now viewable under their parent section, organized into their own nav bar to avoid overcrowding.

Highlights current site page

With the SAMHSA site being so large, it is more important than ever for the user to be told where they are within the site, especially if they want to explore the site through the menu. In the older design, there was no indication of where the user lies in the site. In the redesign, the section is highlighted in blue to clearly specify the current section.

The previous interface also defaulted to the parent menu instead of the section menu, which can be confusing. The new menu defaults to the current site page the user is on.

Section tap vs arrow tap

The user can easily navigate to sections simply by tapping on the section title, and can tap on the arrow to view subsections.

Before and after

The mobile menu is now much smoother and quicker to navigate with the sleek, new look, the addition of nested subsectioned menus, and the blue highlight indicating the current site page.