Structuring Site Navigation for Scalability
Overview
Interagency Coordinating Committee on the Prevention of Underage Drinking (ICCPUD)
Client:
Role:
UX Designer
Redesigned StopAlcoholAbuse.gov website navigation so that it will scale as items were added or removed from the site.
Objective:
Problem
The Interagency Coordinating Committee on the Prevention of Underage Drinking (ICCPUD) is dedicated to stopping alcohol abuse including alcohol abuse that occurs with underage drinkers. Their website StopAlcoholAbuse.gov is filled with resources and research to help those dealing with this issue. As more information and resources become available, my client needs to add them to the website. But, the menu has very limited space and runs the risk of becoming cluttered and overwhelming.
Solution
Design scalable mobile-friendly navigation. It will be able to expand and contract with the amount of content on the site. To do that, I focused on Information Architecture and regrouped the site’s content. Then, designed the navigation visuals.
Understand
Time and stakeholder buy-in was not on my side to conduct research. But before I started working on this project, I conducted a quick heuristic evaluation. Conducting the evaluation allowed me to understand the site and its content. Here are some findings:
Finding and re-finding content without using the search was difficult
Some content was only accessible through the homepage
Navigation was not mobile-friendly
There was buried content and it was unclear whether it was still relevant to have on the site.
The only navigation element present for most pages was the global menu and footer
Stop Underage Drinking heuristic evaluation
Design
Sitemap
After conducting research, I proposed a new site structure. This new structure regrouped the content into four categories. This format
Stop Alcohol Abuse original site map
Stop Alcohol Abuse proposed sitemap
Wireframes
With a structure in place, I was able to design the navigation and redesign the homepage to remediate some of the usability and accessibility issues found in the assessment.
For the navigation design, I incorporated some navigational elements to promote wayfinding and findability
Dropdown menus to display and give users a peek into what content they can find in each section
Navigational landing pages
Breadcrumbs for wayfinding purposes
Mobile-friendly navigation design
Better search bar usability
Stop Underage Drinking desktop navigation wireframe
Stop Underage Drinking mobile navigation wireframe
Stop Underage Drinking homepage desktop wireframe
Stop Underage Drinking homepage mobile wireframe
Outcomes
By regrouping the content, I was able to reduce the number of navigation categories. All new pages can get added within the newly created categories, making this site scalable.
This project is ongoing and has the opportunity for further development.