**Integrations Framework**

D3 Security | Revamping how D3 managed integrations within the span of a week.

Project Overview

The average user may understand integrations as connecting the tools you use frequently with other tools to make your life easier. The same concept applies to the Integrations module within the D3 SOAR Platform; our team’s task was to analyze and improve the overall UX and UI of the Integrations framework. We had four days to hash out a solution to present to internal stakeholders.

My Tasks:

User Flow Analysis
Wire-framing
Prototyping

Tools Used:

Pen & Paper
Figma

Background Info

The Integrations module is the hub for users to configure third party tools with the D3 SOAR Platform. Issues arose however when development created a new iteration of the framework with a focus on convenience. The convenience was defined by the efficiency of testing the functionality, not necessarily the convenience of an actual client/user. Our team conducted a four day design sprint to analyze, brainstorm and present a holistic solution to the Integrations module.

The past Integrations module framework showcased all information at the same time. It was convenient to test, but for non-technical clients, the overload of information was too much to process at once.

Day 1: Find the Pain Points

We spent the first day map out the user flow and potential pain points from within this flow. Needless to say, our work was cut out for us; there were a lot of pain points. We needed two whole white boards to fill out most of the issues.

Day 2: Wireframe AND Decide

Since we were short by a day, we had to sketch out potential solutions and decide on the same day.

A sketch of the list of available integrations/tools in a marketplace like style.

Other sketches we did during the first few hours of the day.

Day 3 & 4: Prototype, then Present

After deciding on the wireframes to flesh out as prototypes, we took on the divide and conquer approach. I did high-fidelity mockups for the Integrations list, the scheduling function and the connection parameters.

Since my team member was going on vacation, I was also tasked to speak on the team’s behalf and present the solution to our architect and development managers.

The key to communicating this new design was to outline the initial framework, the user flow and explain the pain points. Then, I presented our solution and showcased how we could address those pain points.

The team readily accepted our design overhaul as it not only addressed the granular pain points and details, but also the holistic solution offered a more complete understanding of integration configuration.

Though it’s not built out yet, it’s now on the roadmap to being developed!

The high-fidelity mockup of the Integrations List (wireframe sketch in above section).

Below are some comparisons of the “Before” and “After” of the Integrations module. The “Before” images are on the top row. The “After” are on the bottom row.

Starting from the left, the UIs shown are: