New, sleeker top menu

I’ve been wanting to do some work on the old top menu for a while:

Old header

It takes up too much space. It’s too dark - like a shadow over the important part of the app. The green accent under the active submenu item on top of the dark blue background is a little eye-irritating.

Here’s what the new top menu looks like:

New header

Its smaller size means more room for content. This will be especially important for the next version of the Flow Builder.

It has a white background to take as little focus away from the main content.

It has just one row of content. When navigating to a nested resource, such as a flow, the top menu items are replaced with the flow’s navigation menu using a sleek, but subtle, animation. A back-arrow will take the user back to the Flows list.

The Settings page now has a simple side menu, which makes it easier to add more settings pages in the future vs. having a horizontal menu that’s harder to scan with your eyes.

The help menu and user account menu have also been simplified with 2 simple circular components on the top right.

More from Userflow