A horizontal navigation concept for report-dense products. A horizontal navigation concept for report-dense products.

I wanted to explore what horizontal navigation could bring to a report-dense product such as Time Doctor.

The page uses an HR B2B product as its setting, but it is a mockup rather than a redesign of a specific product. The goal is to explore the navigation concept and make it feel tangible.

The interaction is about timing and disclosure. Panels open with enough time for the hierarchy to feel clear, while the interface stays calm and easy to scan.

Icons help first-time users understand where they are going. Labels can fade away as users become familiar with the product, leaving a more compact navigation for people who use it every day.

Power users can move through the navigation with keyboard shortcuts. A few key combinations make it possible to switch sections, move through a layer, and adjust the sidebar without reaching for the pointer.

The shortcuts support the same structure as the visual navigation, so the interface becomes faster with familiarity.

Each layer has its own shade: the main navigation, the submenu, and the content area. Colour helps establish the hierarchy before anything is clicked.

The visual system keeps the navigation easy to understand while giving every level a clear place in the interface.