BitNinja
Server Security
Server Security

Incidents screen redesign

UX/UI design

Research

Incidents screen redesign

UX/UI design

Research

PROJECTS Celestial Server Security Siteprotection RESUME ABOUT CONTACT

About the company

BitNinja is a multi-layered security software suite with several modules built to identify threats and perform tasks to curb them. It is a very complex tool with a lot of information heavy interfaces for advanced tech users. I was the sole product designer for countless projects for this product. One of the biggest and most important was the redesign of the network attacks screen aka the incidents page.
Why was a redesign needed?
The incidents page (which was previously called "network attacks") is the most viewed screen of the product so we wanted to make it more streamlined and user friendly.It is one of the most information heavy screens but provides useful intel for the user if presented correctly.It was crucial to avoid and reduce confusion and increase user retention.
Before
After

Personas

We've previously created personas that we could use for this part of the interface redesign as well.
How did we create our personas?
First with the help of the customer success, customer support and product team we gathered all the previously known information and experience about our users. We also conducted an online survey.Next we organized all the information we gathered by user behaviour, motivation and possible problems.Finally we made behavioural pairs and an affinity map and formed our personas based on that.

competitor analysis

I researched the two biggest competitor for BitNinja in the cybersecurity industry and compared the pages that has a similar function to BitNinja's "network attacks". These were my findings.

user behaviour

I observed how the users behaved on the page by using a tool called LiveSession. With this tool I could see rage clicks, heat maps and watch session replays.
Main findings
There are too many and too long technical descriptions
The icons are misleading and the users don't understand them
It's unclear that the user is not required to block the incidents here
They can't filter easily
The table can't be exported
The descriptions of the firewall rules are not clear
The name "network attacks" is misleading

prototyping

I considered all the previous findings and consulted with the product team and the agent team to stay up to date with the technology on which the cybersecurity part is based. After understanding how the modules work and what value the company provides for the users I made a rough wireframe that I perfected in a few iterations. The prototype was made in high fidelity. I first conducted hallway testing with some colleagues, and then, with the help of the customer success team, I tested it with real users as well.

user testing

Fortunately there wasn't any major problems with the interface but there were several smaller things that could be improved for the better user experience.
Main findings
The firewall rules were still confusing
The buttons weren't easy to use and clear
There were a few numbers that the users didn't understand the meaning of
The statuses were unclear
There was confusion between the meaning of malware and infections
Some important information about the incidents wasn't shown
There should be CTAs for the knowledgebase page of the product
Icons were confusing
The countries from which the attacks originated should be visible
It should be easy to find where to quarantine a file and block an IP

finalization

We built a completely functional and muiltilayered design system from the ground up beforehand. We used it for this project as well as many others.
We renamed the whole menu item to "Incidents" from "Network Attacks".
We provided a short explanation about the page's function at the top where it's easy to find.
We added a time filtering function and a working timezone picker.
We added diagrams with relevant data so the users can be informed about the state of their servers more easily not just from a data heavy table.
We made the table more customizable with columns that can be turned on/off and we added the option to save the contents in CSV and refresh only the table without refreshing the whole page.
The table has been heavily modified. We highlighted the IP addresses and added a copy icon to them because the users often copies these for research purposes. We added incident types based on BitNinja's modules. By clicking on the info icons a popup appears with the detailed description of the module and a CTA to the documentation page. In the actions column the user can add the IP to the block/allow or challange list.

follow up

The user feedback was positive on the new incidents page. After an extensive LiveSession research we had to fix a few things but the project was a success overall. The users navigated on the page without any major problems and found the new functions and diagrams very useful.
BitNinja SiteProtection SiteProtection was a completely new product under the BitNinja company umbrella. BitNinja SiteProtection is a hands-free security solution for website owners against targeted cyberattacks. We had to build everything from the ground up, but we had to take into consideration the previous product's look and feel as well.

Learn More