Enhancement

Scroll-to-Hide Navigation

Catching design debt before it became a bigger problem.

Observation

Over time, our individual decisions to make various navigation patterns sticky caught up with us.

In one of our weekly sessions with our internal pilot users, I noticed the amount of screen real estate they had available when completing the shipment entry form.

We noticed that this group would reduce the width of the window when sharing their screen (which is consistent with how other agents have used the product in the past). Since we'd previously made the horizontal navbar, route, and creation patterns all sticky, the space left for the form itself shrank. Fields you'd already completed higher up the page were covered by the stacked sticky elements, so you lost visibility into your own progress.

Exploration

During a lull, I proposed a ticket to resolve this issue for all screen sizes.

This issue was already annoying on desktop, and after testing it some more myself, I determined that it would be even worse on mobile. Since the horizontal navbar was a means to exit a task and didn't help with completing the shipment entry form, it should hide and only be visible when a user needs it. I chose a ubiquitous pattern found in editorial content: hide the navbar when scrolling down and have it show up when a user scrolls up. It was direction-based. I liked this solution because usually our users completed forms going up to down and if they are going up then they are likely correcting something. Using this behavior I proposed we figure out the logic for how long the navbar should remain visible.

To be honest, I don't do a lot of interaction design nowadays, and this was something I hadn't specifically thought about. I used Claude to find out what's common out there for this kind of interaction, and had it show me live examples so I could see for myself how the timing actually felt. Afterwards I would test out the interaction myself on Figma to see how it rendered.

Resolution

Solving this for one screen created work that needed solving everywhere.

I felt like if we established this treatment for one screen, we should examine whether it made sense across all of them. Hence, I looked at how this behavior may affect other screens in our system. I did this for all screen sizes. I'm glad I did this examination because for screens where we only use what's in the viewport height (no scrolling, usually a table), this behavior wasn't necessary. It was only necessary for screens that scrolled, and this did apply to table screens once they were reduced to mobile size. Since the table automatically converts to cards on mobile, the page begins to scroll.

Additionally, I took this as an opportunity to solve a related space problem: the side navigation. On mobile, we'd previously reformatted the anchor side navigation into a horizontal stepper for the shipment entry form, where it doubled as a sequence indicator.

But on the shipment detail page, that same treatment created confusion: the page already used a stepper to show shipment status (Pickup, In Transit, Delivered), and a second, similar-looking stepper for page sections read as a duplicate of the same pattern with a different meaning. So on shipment detail, we'd instead hidden the side navigation on mobile entirely. You'll notice that these two artifacts don't look the same.

I had conceived a solution where we can still have that interaction pattern without creating the stepper confusion or losing the navigation entirely. I proposed we could nest the interaction in a button, letting users jump to any part of the page instead of only the sections the mobile stepper had room to show. Since jumping between sections meant editing (since most form fields were completed linearly), this made sense to have the button sticky to the header.

Outcome & Reflection

We updated all screens with the new scroll-to-hide interaction.

While the scope of it seemed small, I believe these types of small interactions reduce those micro frustrations users experience on a product. It also established a new behavior for how we treat our long scrolling screens going forward, and the side navigation button became the new standard for how users navigate a long page on mobile.