Footer Redesign
Old Mobile Footers
The updated footer has a more structured layout with distinct sections, improving readability and user experience. The links are divided into categories such as "About SAMHSA," "Resources," and "Connect With Us," making it easier for users to find relevant information.
The new design features consistent, modern typography with clear font hierarchy, making it easier for users to scan and locate information. Headings are distinct, and text sizes are more balanced.
Uses higher contrast for better readability and accessibility, with a clear differentiation between background colors and text. Links are now more prominent and distinguishable from the body text
Links now have hover states and clear visual feedback, improving interactivity and guiding users on what’s clickable. This enhances the overall usability, especially for users with limited technical knowledge.
New Mobile Footer
New Desktop Footer
The updated design is fully responsive, with a mobile-friendly layout that stacks sections neatly and ensures links are easy to tap on smaller screens.
Also much more compact, the re-design makes it especially good for mobile users, shortening the scroll length.
The new footer follows best practices for accessibility, ensuring it is navigable with screen readers, clear contrast for low-vision users, and larger clickable areas for touch devices.
Lastly, it has a well-defined visual hierarchy with clear headings, subheadings, and organized sections, allowing users to navigate more efficiently.
The old footer had a cluttered layout with links grouped together in a single, long column. It lacked clear sections, making it hard to navigate.
The typography was inconsistent, with varying font sizes and styles that contributed to a less cohesive visual design.
The old footer had low contrast between text and background, making it harder to read, especially on mobile devices.
Links were static and didn’t provide clear visual feedback when hovered over, leading to a less engaging user experience.
Did not adapt well on mobile devices, with links getting squished and difficult to tap. It was also excessively long on mobile, increasing scroll height and reducing visibility of links and mission statement.
Did not prioritize accessibility, with issues such as small clickable areas and poor contrast.
The old footer lacked a clear visual hierarchy, making it hard to quickly identify important sections or information.
Solution
Problem
Old Desktop Footers