New Navigation. New Colors. Oh My!

Since our beginning back in 2015, we’ve always grown from listening to the valuable feedback that our customers give us. And when it comes to the UI/UX (user-interface/user-experience) of the Bento app, we take that feedback to heart. Because of this, our team decided to overhaul the interface to deliver a better experience for our users.

Old Version
New Version

About the Previous UI Design

We loved our previous UI design. However, the #1 piece of feedback that we consistently received was that there was a disconnect between the tools sidebar and the content area. 

If you aren’t familiar with Bento, the tools sidebar changes based on the area that you are in. For example, you could be looking at a team, contact, or project, and the tools sidebar will change the available tools.

In our old UI, the toolbar was confusing users because it looked like a completely different area from the content area for which the tools were based on.

Therefore, the goal of this iteration of the UI was to fix this problem. Everything past that goal was icing on the cake. 

Once we identified the problem, our team spent several weeks pouring over different iterations of mockups in an attempt to come up with a solution that corrected the confusion while not being a jarring change for the user (but that didn’t stop us from coming up with some wacky cool designs).

Ultimately, we landed on a simple solution that we feel achieves the goal and is familiar to existing users.

The Solution for the Bento New Look

In order to combat the disconnect of the tools sidebar and the content area, the obvious solution was to change the background color of the tools sidebar to match the content area (white) as well as remove the drop-shadow. 

However, just doing this wasn’t enough. We also added a gap at the top and bottom of the right border of the tools sidebar to visually trick the eye into thinking that the tools sidebar and the content area are connected. 

Second, we added a slight grey background color to the left navigation to distinguish it from the rest of the content. After all, the left navigation is something that stays consistent across the entire application. An active effect was applied to each left navigation item that allows the user to know where they are within the application.

Finally, we pulled the breadcrumbs out of the content area into its own top bar above the entire content area. This further reinforces the concept that the tools sidebar is part of the content area.

What else did we change?

  • Navigation & Content Columns: The left navigation and tools sidebar will now remain the same size no matter how big or small your screen is (mobile excluded) to allow more room for the content area.
  • Portals icon: If you are part of a portal, there is now a new icon in the left navigation that will show a drop-down menu of all of the portals that you are a part of.
  • Tools Sidebar Collapse Button: The tools sidebar has a collapse button that has been moved to the top-right of the sidebar when the sidebar is hovered over. Additionally, the collapse effect is more refined.
  • Colors: We’ve navigated away from the default colors of the Fomantic framework that Bento app is built on. Instead, we’ve hand-picked brand new colors that work in unison with each other. These colors are part of buttons, icons, labels, toast notifications, headers, and much more. Additionally, the primary black as been updated across the entire app.
  • Tabs: Certain tabs, such as tabs on sets and in the collections toolbar, have received a small overhaul with a light blue background and blue text as part of their active state.
  • Buttons: Along with new colors, buttons now feature a subtle hover effect.
  • Notifications: The once yellow notifications alert is now red. Additionally, we’ve adjusted the placement of the notification label to fit above the envelope icon dynamically based on the number of notifications.

What’s Next?

Our plan is to take this current design and adapt it for our mobile experience. Additionally, we want to focus on the content area by having a consistent header design. Apart from that, we have several plans to overhaul the UI/UX of different areas of the application in phases.

How can you help?

Continue to give us feedback. Your feedback really matters to us. We use that feedback to make decisions on future iterations of our UI/UX experience.