Catchpoint’s New UI: Building A Frictionless, Intuitive User Interface

At Catchpoint, we care passionately about our customers and their user experience. To this end, over the past few months we’ve been doing a ton of work to build a new user interface, and we are excited to be rolling it out. The best things about the Catchpoint UI are still there, and made even better, including your ability to slice and dice your data. There are also many new options, such as how you now consume and view alerts.

As part of the new design, we analyzed customer data on how our customers are using the UI, but we also hired an independent UX research company to help collect user feedback in an unbiased, thoughtful way.

Control Center, the replacement for Tests in our old UI, has been rebuilt from the ground up to be easier to read and quicker to navigate. Typefaces are larger with higher contrast. Individual tests can be actioned via a menu while bulk actions can be taken by using the command bar above the table. Icons are more visually consistent while also being more distinct.

In this post, we’ll talk you through the changes we have made through the lens of Jakob Nielsen’s 10 Usability Heuristics for interaction design, a set of ten general principles which have guided our work. We’ll also share the advantages of becoming an early adopter and what to look forward to in the coming months. This is a continuous journey to make the most convenient, frictionless UI that lets you do your job in the most intuitive and satisfying way.

“When we’re working with issues and vendors and even just different internal teams, pulling out particular time ranges and data points, as well as drilling down is something I spend a lot of time doing and for me, the new UI works really, really well." Catchpoint User - Business Analyst, Cloud Storage Company

How Jakob Nielsen’s 10 UX Principles Informed the Changes

While Nielsen’s ten UX principles were developed 25 years ago, they became rules of thumb for human-computer interaction and are just as relevant today as they were when first introduced. Ultimately all the principles have been useful guides as we’ve gone through this process, but some of those that most informed our work were:

Flexibility and efficiency of use

“Flexible processes can be carried out in different ways, so that people can pick whichever method works for them.” This principle informed our goal to make the new UI more user-friendly for all the different personas that rely on our platform. It’s our intention to offer you a flexible and efficient UI that addresses your specific set of needs.

Updating our UI has allowed us to move to a more modern design language. In addition by updating the frontend code, we have been able to make the product significantly faster.

Records is everything you loved about our waterfall pages and so much more. We still have all the in-depth details you need but with an easier to navigate interface. Changing between different test runs is now just a click away. The same is true for request header and response information. We even added in an activity overview helping you find exactly where in your waterfall things slowed down.

‍Visibility of system status

The first UX principle: “The design should always keep users informed about what is going on.” Why? This helps build trust through open and continuous communication.

When you’re asked to react to an incident in real-time, you likewise need to understand what is going on with the system status in real time. If a node status changes, you have to know about it immediately. Similarly, if a test is going down, you must instantly understand what’s going on. In the new Catchpoint UI, system status is always clear and visible.

Aesthetic and minimalist design

The goal of an aesthetic and minimalist design is to keep the content and visual design focused on the essentials. When building the new UI, we planned changes with the central idea of making your workflows smoother and more intuitive.

One of our focuses has been to adjust how our users go about configuring their tests. The new UI is a single page application, meaning you always remain on the same page while you are in configuration mode. Now, when you set up a test, all you can see is the request to provide a test name. Everything else is still there, but it’s hidden away, making it a more straightforward process.

We also noted that, when setting up an instant test or node, most of our users were sticking to a tried and tested set of choices. In the new UI, we are excited to offer you a set of default choices to simplify things and allow you to quickly set up your tests.

Explorer replaces several of our old charting tools such as performance and RUM explorer. You now have a consistent interface for charting data regardless of the data source. Controls have been grouped together and ordered in a meaningful way. Labels have been rewritten to be more human readable while color is used to indicate important information. All of this was done while still increasing the screen real estate given to the charts themselves.

‍Recognition rather than recall

“The user should not have to remember information from one part of the interface to another,” reads Nielsen’s sixth general principle.

One of our biggest use cases at Catchpoint is the use of alerting capabilities for triage. If you can look at a screen with no barrier to entry design-wise, it makes the whole workflow quicker and more efficient to help you achieve MTTR. We’ve designed the new UI to enable you to recognize what’s going on from the get-go, so you don’t have to waste time thinking through how to use it first.

Help and documentation

The observability space is evolving at a rapid pace and our system is evolving with it. Sometimes when we introduce something new, our users need some extra help. Instead of suggesting you read a Knowledge Base article, we have included an information icon that tells you exactly what the new element will do for you - in just a couple of sentences. This allows you to become immediately aware of the new functionality and fluidly incorporate it into your workflow.

We are continually working with our Customer Learning team to incorporate the right documentation at the right time, with the goal of helping users understand how to best complete their tasks.

_“I definitely prefer the UI compared to the old one. It gives me a ton of information in a more straightforward manner. The new UI is definitely superior in that regard.” _Catchpoint User - QA & Release Manager, Retail Company

Why Wait? Become An Early Adopter Of the New UI Today

One huge advantage to adopting the new UI now is that the sooner you try it out, the more feedback you can provide us, and the more we can incorporate that feedback into the product. One user, for instance, told us he missed the option of being able to download HAR files in the new UI (he found it to be an easy way to share information). Within a few days, we were able to re-incorporate that option into a new release.

We need you to tell us how to continue to change things to suit your needs. You can do this either by sharing through the Feedback button in the Portal or by talking directly to your CSM.

We are continuing to make changes to the UI, such as bringing in a global change log. Today, you have to go to a particular module to see any particular changes, but we’d like to allow you to easily look at all changes in the system in a single place. The new UI is opening up more and more doors to make these kinds of small but impactful changes.

So… What are you waiting for? Partner with us on this alpha release. Access the portal and toggle over. If you have questions, reach out to your CSM. We’re looking forward to hearing what you have to say!

“Definitely usability has improved, so it’s easier to go find things. It’s basically easier to just get work done.” Catchpoint User - Senior Software Engineer, Travel Technology Company

This blog post was written by Peter Andrews, UX Design Manager, Product and Vandan Desai, Principal Product Manager