The product: a microservices app

The app’s name is Trace. It is a web application for developers working with microservices. Don’t be scared if you don’t know what microservices are, it is actually a very simple concept. Instead of building huge, multipurpose software, developers like to break their apps down into smaller chunks, running individually in the background.

If you use Facebook you have the feeling that it is one app. But on the servers, in the background, it is many smaller services working together. One microservice can handle the chat, the other one can put together your news feed, and a third is responsible for managing events.

If one of these services breaks down, the rest will still work, so it is a more flexible infrastructure. With Trace, developers can monitor those services, and see how they are communicating with each other.

Testing the app

Our UX company tested the app with real developers working with microservices. One of their tasks was to add a new service to monitor. You can see the old design here. If you want to add a service you have to click on the menu button with a profile icon on the top right corner of the page. Nobody found it.

In our new design we introduced a new vertical menu. It takes less space, so we can put out the important functions on the top. So now it’s easy to add a new service.

Developers can also add custom alerts to each service, so they will be notified when something goes wrong. It is an important function, because they don’t want to check the services all the time, they will just come back when there’s an issue with something.

In the old version they had to click on the Alerting menu, hit the Create a new alert button and fill out a form to do that.

Test results

During our tests developers usually clicked on the services in the diagram when they wanted to do something with them. They haven’t looked for alerting in the menu at all. So we added a Setup Alert button into the service details modal. This way, people will be able to add alerts when they click on a service.

Developers set up alerts based on the values they see on the graph. With this new solution they don’t have to go back and forth between the alerts page and the graph view to check the data. Now it is faster and more convenient to set up an alert.

So you shouldn’t hide important functions into the menu. They have to be on the screen when the users need them.

What’s next?

Want to learn more about our UX design process? Download our brand new, free e-book now.

For additional reading, check out our Product Design book by our CEO, David Pasztor.

Are you a designer working on your UX portfolio? We have good news for you. We built uxfol.io, a portfolio design tool that helps you tell the whole story behind your design. It’s awesome, check it out!