In the business software industry, standing still means falling behind. That’s why we always strive to evolve. Sometimes we change small things - tweaks or bug fixes that are hardly visible to you as an end user. Other times, we change visual items that drastically impact your experience. Since 2012, however, one thing remained largely unchanged: our navigation menu. And there was room for improvement, especially in terms of usability.
Why change now? The reason is twofold. On the one hand, our current navigation menu takes up quite some space. Instead, we could use this room to show more information on other levels, for example: the calendar and project planning. A wider view also allows us to display more information for both these features. A navigation bar that takes up less space, in return, leads to more clarity and less clutter all around.
On the other hand, Teamleader was initially launched as a tool with limited functionality. We added new features along the way, but we often placed these where we thought they belonged - at the time. This was bound to impact the user experience eventually. To give you an example: Contacts and Companies are both clicked very often. But to get to Companies, you need two clicks. Splitting this up into two separate sections is the logical thing to do: it’s one less click our user needs to make.
The new navigation bar wasn’t just a tiny visual adjustment - and we didn’t want to skate on thin ice. The design is the result of months of careful deliberation, tweaks left and right, or even letting the whole thing rest for a while. We’re happy to give you a quick insight into our way of working.
The psychology of a navigation bar
Lots of questions had to be answered when determining the new look of our navigation bar. How do people use it today? How can we help them save time tomorrow? What would be the most logical way to approach this new navigation bar?
Learning from user data
Mixpanel (i.e. a tool to track anonymous user behaviour) helped us investigate how and how often the previous navigation menu was clicked. We gathered data over the course of one month, to determine how often the navigation bar was used in correlation with Teamleader modules. Depending on how many people use certain features (e.g. CRM, project management, ...) a percentage was calculated - giving us the relative usage of those menu items. You can find the results of our research in the chart below:
This shows us some great insights:
- Many users have Products enabled, but they don’t use it often. This led us to conclude Products are something you set up once - which doesn’t need a lot of maintaining afterwards. That’s why we could move Products to Settings, for instance.
- The most visible outlier by far, was Ticketing. Not all our customers use it, but those who do, use it extensively. This means it should be easily accessible to those users in particular.
- Every user starts with the Dashboard, and people clearly go back to it pretty often. That’s why we just renewed the dashboard and why we will feature it again prominently in the new navigation bar.
- Subscriptions aren’t used nor activated very often, so we could move this to a secondary navigation level.
Defining the order of the navigation menu
With those (and other) insights in mind, we worked out 3 levels on the main navigation:
- Main menu: items you’ll use on a daily basis
- Secondary menu: functionality that is linked to a topic on the main menu, but isn’t used on a daily basis. This will be shown as a new level at the top of your screen. E.g.: credit notes for the invoicing topic.
- Tertiary menu: used for additional functionality that doesn’t fit with the secondary menu. This mostly only happens for Stats or Settings, for example, to drill down further on a certain aspect.
Eventually, we followed these priorities to determine the order of the navigation:
- Me vs Company
- Which items are for personal use only?
- What are elements that are used on a company scale?
- How can I get fast access to 'my personal space'?
- What is the most logical order for items to be displayed?
- Which functions aren't frequently used?
- Which of those can be listed secondary or tertiary?
- What would be a logical way of grouping?
After all of this data crunching, it was time for some actual design work. Our Product Design team went all out, and these are the first results.
The screenshots above give you an idea of what the new navigation menu will look like. Bear in mind that this design isn’t final yet as we want to improve it based upon your feedback.
Be the first to try it out!
As we’d love to hear your thoughts, we’ll be launching this for a small but representative group of beta users first. Once we’ve processed your feedback, we’ll start rolling out the new navigation menu gradually towards everyone else.
Keep in mind: this is just a first design, and we’ll use your input to improve further. But to do that…
We need your feedback. How do you feel about this new navigation menu? Sign up for the beta and give us your thoughts!