SAMHSA Mega Menu
Creating a full grid mega menu for SAMHSA.gov
April 2024 - August 2024
Timeline: 5 Months
Role: Designer
Tools: Figma
Project Summary
Goal: Design a mega menu for the SAMHSA website to improve upon the current look, feel, and user experience of the existing main site menu.
​
Function: Display links for Tier 2, 3, and 4 pages, providing easy access to a user's final destination page. This will allow the user to bypass navigational pages and reduce the amount of time necessary to reach their destination page.
​
Style: Using color, typography, and spacing standards that align with SAMHSA's style guide, create visual interest and an inviting atmosphere while retaining legibility and usability. Remain in compliance with section 508 guidelines.
Original Design
Desired Functionality
The functionality of the current main site menu does not match USWDS. The newly designed menu will adopt this functionality. Tabs will need to be clicked to open in order to match USWDS guidelines.
Iterations
Numerous iterations were presented to the client.
Updates to Information Architecture
The new mega menu design was being made in conjunction with sitewide IA updates. This required close collaboration with the content team.
Hover states for the top navigation were made as part of the final prototype:
Mockups were created for each iteration, for each page of the mega menu, and placed over various pages of the site. This would allow the client to see how each iteration looked in the context of the rest of the site:
Design to Development Handoff
A file was created with the finalized styling for each page of the mega menu, at all standard screen sizes:
Final Design Prototype:
