First Prototype For a Code
Security App



UI/UX design



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?

Safety matters

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.

Tromzo 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. Tromzo does not want to compromise here. The objective is to make a product that is comfortable to use and easy to understand.

Tromzo 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 an 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 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 on 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 he “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.

Seeing the whole picture

The focus of Tromzo 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.

Tromzo 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. Tromzo is now negotiating with the investors and we are looking forward to continuing working with them on further development.