Good Eyes

Optimizing navigation and headers for ideal display at across desktop and mobile devices.

 Tell Me More

Site navigation at goodeyes.com suffered from large containers and link blocks that forced a mobile menu pattern to display at sizes larger than standard tablet devices. To resolve the issues and increase navigation usability, both primary and utility navbars were redesigned with an economy of space in mind for desktop and mobile devices. Decreasing the amount of space required to show the same amount of content and presenting it in a way that fits into the existing brand, responsive breakpoints now comply with expected resolutions across a wider variety of devices. Additional changes to standard headers provide greater uniformity in styling sitewide in conjunction with on-page navigation that also received a reduction in size while appreciating a revamped style for ease-of-use. Together, these adjustments are the foundation for a future redesign.

Completed at Skyhook Interactive







An image of the redesigned menu and header for the Good Eyes website.



Existing site with complex navigation that forces mobile breakpoints on average size screens.







An image of the existing menu and header for the Good Eyes website.



Redesigned primary and utility navigation for more flexible display and breakpoint sizing







An image of the redesigned on-page links container and default header for the Good Eyes website.



Redesigned default header image and page titles reduce overall height of the hero element and avoids poor contrast issues. Just below, an on-page navigation container aggregates anchor links to help users quickly navigate to the content they need.