Polaris

First Prototype For a Code Security App

Quality of the code is the first thing an IT business should care about. And the security of the code is the second. Or is it the other way round?

In the last few years, some of the biggest global scandals broke out because of the information leakage from unprotected databases or confidential system hacking.

Increased threat to data security is projected to be one of the biggest challenges that the software market will face in the following years. To cope with  that, developers need to assess the risks at the very start of the work and constantly monitor the safety of the code.

Polaris is a security app that helps find vulnerabilities in code. There are lots of security apps on the market, but they often sacrifice usability to provide the best technical solution. Polaris does not want to compromise here. The objective is to make a product that is comfortable to use and easy to understand.

image
image
image

Polaris wanted us to make the first prototype of the product to show it to potential investors.

We had to prepare the prototype from scratch, designing all the most important screens. Our objective was to present the idea and make it visually appealing. The main challenge was to make a quality prototype in a short period of time, presenting complicated technical data in an accessible and comprehensive way.

We have spent lots of time with the founders to understand how the app should work and what is the best way to arrange the functions and make them easy to use. They transferred some of the back-end code into the front-end, so we could use it as a basis of the structure.

For the very first prototype, we focused on content and kept the style minimalist. Both design and prototype were developed in Figma.

Maximum security

The dashboard has two versions: full access (only for the admins) and limited access (for all the team). Each developer can see the information related to the repositories that they are working on.

The general dashboard shows overview of the selected time period: the number of new vulnerabilities, fixed ones, executed workflows, coverage of repositories, automated actions.

A graph visualizes recent changes in the number of vulnerabilities, divided into different levels of danger. Below is the table of repositories showing data vulnerability, which can be sorted by any property.

Browsing through the huge mass of data can be complicated, so we focused on creating various filtering options in order to make the search as specific as possible.

Full access dashboard dashboard has more data and options for managing risks, such as creating tickets, changing assignments, resolving issues, etc.

Prioritizing numerous vulnerabilities

Entire list of vulnerabilities is shown in a table. However, big projects often have so many that it gets complicated to find something in the list. To ease the navigation, we included the heatmap: a set of tiles representing projects, repositories, or teams.

Each tile has a different color, based on the level of risk. Red is reserved for the “hottest”, most vulnerable parts, to draw more attention to them. Colors change when the vulnerabilities get fixed.

Seeing the whole picture

One of the tasks was to make a visualization of the projects and their elements, repositories, vulnerabilities, etc. We developed a custom structure of the intelligence graph: each project is a root and the branches are repositories, teams, developers, and vulnerabilities. It shows both vertical and horizontal connections. We made the graph zoomable and created various options to find and highlight certain elements.

Workflow optimization

The focus of Polaris is on automatizing the processes of scanning and finding new vulnerabilities. Repeated algorithms tailored to different situations are called workflows. Each workflow launches with a specific trigger.

For each trigger, you can set specific actions, such as run a scanner, prioritize certain vulnerabilities, delay the processes, change data formatting, or filter.

Workflows can split into paths. Each path has its own rules, e.g. running only for code written in Python.

Connect external tools 
to the workflow

The reactions to the triggers and rules include actions from integrated services. For example, a workflow may result in setting a build status in Jenkins and sending a Slack notification from a bot.

Polaris has many integrations with different services, including popular apps like Jira, GitHub, Slack, and more specific ones such as Jenkins, Bandit, Zap, Nessus, etc. When you set the Scanner process in a workflow, you can choose out of a variety of different scanning software options.

Setting up the actions using external apps is as easy as possible. We made all the options appear on the same screen, so there is no need to open the page of the app separately.

Ready for presentation

We did the prototype with all the main functions in one month. Complex code security processes are visualized in a simple and accessible way, making this technical service truly user-friendly.

Polaris is now negotiating with the investors and we are looking forward to continuing working with them on further development.

Let's design something special

If it feels like our UI/UX design company is a good match, but you still have questions about our work process, we can give you a free 3-day trial working with one of our designers.

Let’s talk
image
image
image