Introducing our new Navigation System

In case you didn't notice, we completely rebuilt Ampwall's navigation system. It launched weeks ago and I simply forgot to post about it. Surprise! Or not a surprise since maybe you saw it.

We introduced the last version of our nav early in 2024. It used a vertical column along the left side of the page to present Artist Administration navigation. Other interactive elements relating to the user -- cart, user profile, search -- were at the top left corner, the idea being to keep dynamic interactive elements centered on the left side of the page. On mobile, the left-hand bar moved into a bottom-of-the-page menu and those same user controls went down there as well.

The last version of the nav was quite cool looking but feedback indicated that it needed work. Users reported it wasn't very discoverable since the buttons lacked text labels. Users with shorter screens (like 13" MacBook Air) reported icons were missing, which would have necessitated overflow logic. We also heard that having things like the user icon and shopping cart on the left side of the screen wasn't where most users expected them to be.

The different versions between desktop and mobile caused challenges for us in the code since were maintaining multiple versions of navigation. Having a bar on the left side of the page but only for logged-in Ampwall Subscribers required some challenging grid logic.

None of this was insurmountable, of course. We worked through a lot of challenges and we could have continued iterating on our nav! We always expect some amount of evolution of features, especially something ambitious like our nav design. But in this case, we decided to go in a different direction entirely.

Our new nav is a complete rebuild. It does a few things.

First, we moved Search, User Profile, and Cart to the top right-hand corner of the screen. There are other conditional items that appear there, like “Join us on Discord”.

Second, we move the Artist Administrative controls to a secondary nav bar that sits underneath the primary nav. This continues the approach of having a strong separation of User Stuff and Band Stuff — the two bars are essentially independent. But by using a single horizontal bar, it reads a bit more easily (especially thanks to the addition of labels next to icons) and it lives in a space where users are most used to seeing navigation elements.

Third, it simplifies the architecture of the entire page by removing the conditional grid logic that would force signed-in subscribers’ content to accept a margin of around 48px on the left side of the screen. The new page layout is substantially simpler from a code perspective thanks to this.

Fourth, pleasing both users and software engineers, our desktop and mobile views share 100% of the same components! You get a consistent navigation experience across all viewports. The Artist Admin controls collapse into a menu as they overflow à la GitHub, which lets us potentially add more options as needed. (We are trying to slim them down, tbh.)

Where the engineering is concerned, the new nav isn’t all that complicated. Ampwall is built with Next.js and our nav is a combination of server- and client-rendered content. The server feeds in data like whether the user is signed in, info about the user to populate menus, list of Artists (“Distros” in Ampwall data model parlance) to present, and then client components render the interactive bits like Menus. The secondary nav menu that creates an overflow menu uses simple screen measuring logic to determine overflow and then enables items in a menu. There’s a little jank on mobile that I want to investigate here but for the most part it’s working well. I went mildly YOLO on this and launched it without a feature flag, just one big cutover from old to new with a single deploy, because the effort to build a separate path with a flag would have extended build time in a way that I didn’t think was reasonable. Good decision? This time, yes, it all worked! But in general we do try to use feature flags for any substantial changes.

So that’s about it. I know this would be a lot more interesting with pictures. We’re going to work on that soon.

Want to talk about this more? Reach out on Ampwall’s Discord! We have a new #codewall channel specifically for our large community of artist + software engineers. You can also find me on bsky as @subvertallmedia.com.