There are two ways to find a solution to your software crash with Samebug, via our website or via one of our IDE plugins. Even though the website is the most popular way to search for exceptions, the plugin also plays an important role in how our users interact with us. Therefore the way it works and looks is important for us.

I’m Adam Nemeth, designer at Samebug. In this article I’m going to introduce you how we approached the redesign of our IntelliJ IDEA plugin.

Our original plugin was developed incrementally, we added items step by step as we progressed with our new features. Sooner or later you reach a point where this is not sustainable anymore and you have to focus on your most important user needs. We reached this point in the beginning of the year and decided to start a major overhaul.

How did we approach this redesign process?

From 2016 the Samebug plugin was used by the java development teams of a multi-national corporation. We had two goals with this project:

To see how we can most efficiently help the daily work of their dev teams.

To collect precious user data and feedback from a real production environment.

So we went to our users and started the two month redesign process with testing the existing app. We prepared questions, observed our users and took notes.

The old UI of our plugin looked like this:

Our test resulted in the following:

It was not completely clear what you can see in the different sections.

It was not clear, what kind of information you can find in the top and bottom sections.

It was not clear that there is a solution for a software bug on the page.

The call to action to encourage user activity — “write tip” — was also hidden for the users.

It was clear that we have to simplify the user interface and remove elements which have little (or no) benefit to our users, thus making sure that more focus is on the important features.

Based on this feedback we selected the most important information, discussed the user journeys and structured the data on black and white wireframes.

This is how our first wireframes looked like:

After finishing a set of these layouts, we went back to our users to run a second test with our prototypes. The test showed that we are on a good track, the new layout is a lot easier to understand.

After collecting the feedback, we refined these layouts and started to think about branding. As the plugin redesign was part of a bigger change in the organisation, we handled the project as the initial step in our branding change. First, we had to define colors and typography for the UI elements. Samebug was using the orange color for years as the main branding color, there was no reason to change it, this was our starting point. To structure content on the page with a proper visual hierarchy, we had to introduce new colors. Our most valuable unique content is the solution for the software crash (we call them tips), it was clear that it has to stand out, the user has to be able to identify it immediately. We chose a neutral but friendly light blue, which also works with orange. We also needed one more color to highlight secondary elements and links which can’t be orange. We chose a neutral dark blue, it works on the light blue background and also with orange. We ended up with the following for the tips:

For the typography we chose a modern sans-serif webfont to ensure consistency with the web product and at the same time we reduced the number of font sizes and color variations. After some long discussions and a few weeks of tweaks, this is how the final user interface looked like:

By doing all these changes, we were done with the basics of the plugin redesign… or almost done.

During our tests it also turned out that around 50% of the developers use IntelliJ IDEA with a dark color scheme. Obviously we could not put our light UI into this dark environment. We had to design a dark skin for the plugin. The challenge here was to maintain the brand guidelines and to avoid introducing too many new colors. The orange works well on the dark background, so we only had to translate the rest of our colors and adjust the typography. Finally our dark version looked like this:

Now we were done with the basics. Of course this is just a sneak peak from the whole design process, we created tons of layouts for the different user stories till we were satisfied with the end result.

And we didn’t stop here, the development of the plugin still goes on, if you don’t have it installed yet, give it a try here!