Data Theorem

API Secure

Designing from MVP to $100k/year SaaS

Product Design
UI/UX Design

tldr;

When Data Theorem decided to branch out into the Cloud/API security space, they called on me to design a product that could help enterprise security teams monitor and secure their API ecosystems.

Through product design and frontend engineering contributions, I helped Data Theorem turn the concept of API Secure into the award-winning $XXXk/yr SaaS product it is today.

Background

From 2012 - 2018, Data Theorem built its business around providing mobile application security solutions. This strategy led to a very successful flagship product in Mobile Secure but in order to grow the business, Data Theorem began seeking new opportunities.

Based on customer research and market analysis, Data Theorem had identified an opportunity in the API security space around automatically discovering and analyzing APIs. At the time however, entering into this space involved a lot of risk because it meant building out the technology from scratch while defining a brand new category of product.

Execution

When I joined Data Theorem in late 2018, the team had a solid understanding of the problems customers were facing but there was a lot of uncertainty about how to create a product that would address those problems, and so within weeks of joining the company, they called on me to define and design a product that could help enterprise security teams monitor and secure their API ecosystems.

Product Definition: Initial Prototypes & User Research

In the early days of planning the product, I created a series of high-fidelity Figma prototypes of the core product features. Through months of iteration and customer feedback, these prototypes enabled Data Theorem to gather insights that helped steer the product direction and create a validated product roadmap.

These prototypes were both deep (multiple multistate workflows, a filterable data visualization with hover interactions for individual data points) and wide (full product IA, contained all core product features) and, at the time, were the most complex I’d ever created in a design tool. 

API Inspect Discover Prototype Connections1
Interaction connections in the initial product prototype

I wouldn’t necessarily recommend prototyping this way (it’s difficult to even render the sheer number of connections that I created, and it would take about 90 seconds for the prototype to load up each time) but it was interesting to test Figma’s limits and to see just how far it could go.

Building the MVP

Immediately after getting the initial prototypes of API Secure to the point where the team felt like we had validated the initial concept enough to act on, I got to work along with the rest of the frontend team on turning the vision of my Figma prototype into a reality.

A lot happened really fast during this time, especially since I was supporting design efforts across Data Theorem's entire product portfolio while also maintaining my full engineering workload. As a result, much of the "design" work I was doing on API Secure at this time happened directly in code, either by myself or while pair programming with my frontend developer coworkers.

Some of my merged pull requests between May-July 2019.

One particular example of a feature I designed and developed in the MVP phase of the product development is the asset inventory. The inventory page is one of the primary screens in the product, where users can see an overview of all of the different APIs, cloud resources, domains, and more that the product had discovered.

In the very early days of building the product out, we had a lot of competing priorities and were scrambling to release features quickly. As a result the team had shipped version of this inventory page that missed a lot of opportunities. While it was quick to release, it was also:

  • Text heavy, light on meaningful data
  • Inconsistent in presentation of assets & metadata presented about assets
  • Hard to understand and visually recognize important items
Early version of the inventory. Notice how the "Restful API" Cards (top) contain much more information than the API Domain Cards (bottom). The API Domain cards also contain a date - with no label to tell you what it means!

The inventory page had been a big point of confusion and frustration for our early customers, so I was very excited for the opportunity to improve it. I completely rethought the presentation of these assets from the ground up, and designed and developed a new version of this page with a consistent look and feel, consistent information for each asset type, and UI elements that made it easy to visually identify and spot problem assets.

My working design file.
Detail shot of the UI Cards I designed. Clockwise from upper left: Asset type icon, Asset name, Policy Violation Indicators, connected API operations (if applicable), Hosted on Indicator, Discovered Via Indicator, Asset URL
My merged pull request for the inventory redesign

Product Maturation: Real-Time Security Scanning

Around mid-2019 (about a year into the development of API Inspect / Discover) my team and I started looking at ways to make the product more engaging to use and creating opportunities to provide daily value within the product. In order to accomplish these goals, I designed and helped develop Hack and Extract, the first feature in Data Theorem’s history to provide configurable real-time security scanning.

Hack And Extract Config Comp
Hack And Extract Progress Comp 2

This feature was a huge breakthrough for Data Theorem, providing users a new level of control within the product, and helping illuminate underlying functionality that had previously been opaque. The reception of Hack and Extract was so positive that Data Theorem has begun actively developing features across its entire product portfolio based on this approach.

Product Evolution: Design System / Visual Refresh

Since late 2019, I’ve led a team of 3 designers to create and maintain Data Theorem’s design system, Synergy, using the principles laid out in Brad Frost’s Atomic Design. I’ve been responsible for establishing the visual language and UX patterns that form the core of the design system, guiding the team through building components in a systematic and scalable fashion, and collaborating with engineering to align sources of truth across design/frontend code.

As of the time of writing, Data Theorem is in the process of conducting a full visual refresh of API Inspect / Discover based on the Synergy design system. I can't share the full details at this time as it hasn't been publicly released, but a teaser image is available on Data Theorem's API product page.

Results

🚀 Cutting Edge Security Product

API Inspect / Discover from a proof of concept into an award-winning $100k/yr enterprise SaaS product with growing sales and customer base

🏆 5 Awards and Counting

API Inspect / Discover has won multiple industry awards including:

  • Gartner Cool Vendor 2020
  • Big Innovation 2020
  • Cyber Defense Magazine Infosec Awards 2020
  • Big Awards for Business 2019
  • Cloud Security Excellence - Cloud Computing 2019
  • Network Products Guide IT World Awards 2019

Let's create something special

I'm happy to help with your next project