The next components in Shrimpy's redesign saga were the top and side navigation bars.
I realized while redesigning the application that Shrimpy's navigation was an extreme hinderance for users. This was especially true for the side navigation on tablet devices. The default navigation on tablet takes up unnecessary horizontal screen space.
The mobile also needed a facelift. The menu was very condensed, making it look unintentional and harder to select tab options.
The top bar was in need of improvements. The iconography was inconsistent, and several of the menus were redundant. Let's have a look at the old designs:
Here are the improvements included in the pitch for the sidebar. Many are simply UI updates, but some, like the exchange selector, significantly improve user experience.
One of the most important features of the navigation redesign was the collapsible and expandable functionality.
The details needed to be communicated extraordinarily clearly, because I wanted to place emphasis and importance on the transition from slim to wide side bar. I created a prototype to illustrate the simple but smooth transition effect that would take place on click.
The general theme of the top bar improvements was to make everything larger, clearer, and more organized. Small dropdowns were converted to side sheets to allow for more room on desktop and mobile.
Several items were explained more explicitly. For example, in the past, a green checkmark has represented automation within the context of the application. This is a problem, because most experiences that our user is familiar with will associate green checkmarks with "success". It was replaced with an automation chip that specifically informs the user if an automation is running or not. In the notification center, more white space and consistent iconography were added. Small design details like this add up to a really clean, readable, and more effective experience.
.svg)