UX Case Study - Uptrends Main Menu

Uptrends is one of the leading SaaS solutions for website monitoring. Uptrends will not only check if your site is available, but also if it works as you expect by following critical user paths. These checks run every couple of minutes, and Uptrends will notify you if something doesn’t work as expected. All this data is stored and presented to you via the web interface or via integrations with third party software. In this case study I want to talk about that web interface a bit more, because we’ve completely revamped that.

Previous situation (2020)

The Uptrends web interface mainly consists of dashboards: different views on all that data from the checks Uptrends executed for your sites. Apart from those dashboards there’s some configuration options for different monitor types, alerts and some other settings. The current main menu reflected that: there’s the “Monitors” menu group, containing links to the complete log of all checks, the list of all your monitors, the current status of all your monitors and a couple of other things. Then there’s the “Dashboards” menu group, containing links to all kinds of dashboards on the current status of your monitor suite, the performance per monitor, some special monitor type dashboards and ofcourse a list of all custom dashboards the user has created. Besides those two menu groups, there’s links to configuration sections like “Alerts”, “SLA” and “Account”; and a “Support” menu group with links to the list of your support tickets and the knowledge base. Why am I writing this all down so explicitly? Well, because it’s a lot of links and frankly a bit too much. There wasn’t any room to grow - and we had to grow.

The 2020 Uptrends web interface main menu, with a long list of dashboards and several action buttons - and that’s just one of the menu groups! The 2020 Uptrends web interface main menu, with a long list of dashboards and several action buttons - and that’s just one of the menu groups!

Reasons for changing

There’s a couple of reasons that led us to start thinking about a revamped main menu. We wanted to be sure these were valid reasons, because every one of our existing users would have to re-learn navigating the Uptrends web interface.

1. There’s more than one product

Uptrends offers three types of monitoring: Synthetic Monitoring, Real User Monitoring and Infrastructure Monitoring. The Uptrends Web Interface is mainly focused on Synthetic Monitoring, and some room has been created for Real User Monitoring, but Uptrends Infra is a totally separate product with its own UI. We wanted to integrate those products more, and the existing menu simply didn’t have the space to accomodate that.

2. There’s different types of users

Getting new users up to speed isn’t the strength of the web interface (the Support team works wonders on this, by the way), and we wanted to change that. We’d like to be able to explain a bit more on what users are looking at, and provide context as to help them get the most out of the product. There’s loads of information in our Knowledge Base, but that information lived on the support website, not in the web interface. The existing menu was ordered based on type: is something a monitor or a dashboard or a setting, et cetera. We wanted to order the new menu by subject instead, and therefore more easily provide context on a subject.

Experienced users, on the other hand, usually already knew what they needed, and had no shortcuts to get to their goal faster. We wanted to provide them with functionality to bypass the rigid navigation structure, and get them where they wanted to be as fast as possible - by allowing them to search for a specific monitor by name, for example. The existing menu didn’t have the space to accomodate that.

3. Things change - and so do accounts

We wanted more options to inform users on their account status. In the current menu, all we could do was show a small banner saying something like “your trial ends in 19 days” or “Uptrends is in maintenance”. These are helpful, but we wanted to provide more information on the users account status. An example that came up during our discovery is this: when configuring certain kinds of checks, the user spends “credits” to have Uptrends execute advanced actions while monitoring, or to get more information out of their checks. We wanted to notify users when they are almost out of credits. The existing menu did not have a place for that.

The king is dead, long live the king

After we decided the change was worth it - involving discussions with the Sales team, Support team and upper management - implementation commenced. And we didn’t want to force something new on all our users immediately, so we thought of a plan:

1. Build a first version of a new menu

There’s quite a list of features we wanted to add to the new menu, but not all of them were critical. A search box, for example, was something we really wanted to add, but not something people would miss, because it wasn’t there before.

2. Gradually allow accounts to be able to switch to this new menu

We wanted to roll this feature out gradually: starting with a private beta (some accounts we selected to try the new menu and provide us with feedback), then a public beta (all accounts could try the new menu, but would be able to switch back) and finally a definitive switch. We used a Feature Flags mechanism to precisely control which accounts could switch between menus.

3. Explain users what is happening

Uptrends is a monitoring product, and users access the web interface to assess issues they’ve been notified of. We didn’t want to get in the way of someone fixing an issue on their site. So we decided that when a user logs in for the first time after we’ve allowed the account to switch to the new menu, we’d show them a popup explaining their options and force them to choose between continue using the current menu or switch to the new menu.

The “menu switch popup”, saying “we’re building a new app menu for easier navigation and finding your stuff more quickly. You can try it now if you want!”, and two buttons: “Yes, try the new menu (you can still switch back)” and “No, keep the old menu (you can try it out later on)”. The “menu switch popup”, saying “we’re building a new app menu for easier navigation and finding your stuff more quickly. You can try it now if you want!”, and two buttons: “Yes, try the new menu (you can still switch back)” and “No, keep the old menu (you can try it out later on)”.

4. Iterate and improve

We are quite excited about the new menu, and we believe it will provide a faster and more optimal way for our users to work with the Uptrends web interface. However, we also know a first version is definitely not the final version. So this is where we are now:

  1. We think of features that we expect to improve the usability of the menu / product;
  2. We measure how our users use the menu;
  3. We listen to feedback from our users;
  4. Based on 1 to 3, we improve the menu to make it the best it can be!
The new Uptrends main menu, with sections for Synthetics, RUM and Infra. The new Uptrends main menu with the Transactions section expanded, revealing links to relevant dashboards and help links The collapsed variant of the new Uptrends main menu, displaying minimal visual clues to allow the user to retain their context.