Handling Malicious Emails

Keepnet Labs' Incident Responder

Introduction
Email-based attacks are responsible for more than 90% of all cyber security breaches. Most successful attacks start with an email. Especially when a person opens the email and gives out private information, or downloads a file. Incident Responder is a product on Keepnet Labs which is a platform with various products to prevent email-based attacks. Incident Responder allows you to recognize and dispose of malicious emails and phishing attacks in your organization’s mailboxes.
Challenge
The project’s goal is to re-design the product that gives the ability to detect and eliminate mal-intended emails sent to your organization’s mailboxes. There was already a working MVP with frequent users, but it was not really user-friendly. I had to keep what works for the user and build a user-friendly experience without having hundreds of users learn a new tool all over again. I conducted all phases of the design process from research to UI design. Most of the products, including the foundations and layout, were designed and developed while I was the only designer in the team. Our team has expanded since, and some additional features are the results of teamwork.

Empathize

Who are these people? And why would they use this?

I interviewed lots of users and my colleagues who work directly with customers and gathered information on user habits, motivations, user feedback, requested features, competitor products, market needs, legal requirements, etc.

Personas and journey maps
I observed users interacting with the product directly in their work environments and hold online meetings to discover what works and what doesn’t for the users. Created personas and journey maps accordingly.

Define

Priority of issues

According to the information I collected over dozens of interviews I defined user goals and business goals. I defined KPIs and metrics that are necessary to achieve these goals

Listing information
I gathered all difficulties that have been mentioned by users on a list to define any pain points and usability issues. This helped us to discover user goals and business goals as well as the most important KPIs and metrics to be tracked and analyzed.
How might we?
Cyber security specialists need intuitive and seamless working tools in order to keep their environment safe and secure without failure. So I started to ask questions like:
How might we present information in an interpretable manner?
How do our users utilize these information?
How might we provide a user-friendly logic creator
How might we make incident response quicker and more efficient?
How might we design more intuitive forms?

Ideate

Seeking solutions

In order to find answers to the questions above, I conducted brainstorming sessions and meetings with dev teams, PM and executives. We ideated solutions on present problems and feature ones to be designed and developed, to discover potential problems and feasibility of our ideas, and avoid any future technical difficulties.

Information Architecture
Created user flow charts to discover the shortest and most intuitive ways for user actions, discovered possible variations before designing any screen or mockups. Defined primary actions and made them the most effortless to reach.
Key Moment
Eliminating threats
Once an email is detected as malicious, cyber-security experts want to find and eliminate any copies of it in the organization’s mailboxes. The investigation by entering desired criteria manually was already a feature in the MVP but starting one directly from a suspicious email was needed desperately. Adding an action on the table row and automatically filling criteria accordingly solved the issue. One simple action lowered effort to investigate a malicious email almost by half.

Wireframing and user testing

Interactions

Based on the ideas and suggested flows that came together in the previous step, I iterated on wireframes to explore layouts and details. I prepared prototypes to test those ideas.  have created a detailed design system with a component library in Figma, I could quickly get together hi-fi wireframes with our UI elements. This abled me to test designs that look really close to final designs so stakeholders and test subjects had a more clear idea of what they see. Tests were conducted by me, testing real users either on one-on-one sessions or as unmoderated user tests over user testing platforms and tools such as Maze.co and Trymyui.com

Presenting Information
Various widgets are designed for users to keep track on incident activity. While top widgets give an overall information for selected date ranges, a widget displays recent email investigation, and a datatable lists all reported emails with their scan results. Here are a few of layout designs for the dashboard.
Key Moment
Automation with visual logic creator
Automating analysis and investigation features were highly requested by our users. Some of the competitors already were capable of automation. The idea is to define trigger conditions, then the actions to be taken if those conditions are met. Many of the examples I could find were using dropdowns to select “and/or” operators. Some of them even used the terms “all/any” instead. I discovered this is confusing for the users through user testing and worked on possible variations. I designed the interaction as a toggle switch and it turned out to be a great idea for getting great results in user tests. Also locating “and”-” or” badges on the lines between helped to indicate selection.

Interface

Visual language

I created a design system for Keepnet Labs platform including typography, colors, a component library, spaces, effects like drop shadows, rules and restrictions for components(such as maximum character limit for form inputs and spacings), modals, forms and wizards, etc. based on Google’s material design guidelines.

Wireframing and UI
Various widgets are designed for users to keep track on incident activity. While top widgets give an overall information for selected date ranges, a widget displays recent email investigation, and a datatable lists all reported emails with their scan results. Here are a few of layout designs for the dashboard.
Interface Elements
I designed the widgets tailored for this dashboard to present overall data and important information such as ongoing processes and queue of suspicious emails.

Results

Thanks to our very talented developers the final product look and works exactly how it is designed. I feel very proud to be a part of this project. This product participates in the efforts of experts for preventing hacking attempts that could cost millions of dollars.We heard a lot of praise and good words from our users. They found new designs much more intuitive and user-friendly compared to our MVP and the product’s counterparts. We keep tracking user behavior via analytics tools and collecting user feedback to continue improving the product.

Takeaway

I learned that even every product has a feature in a certain way, this doesn’t mean we shouldn’t test it and strive for the better.