Designing from MVP to $100k/year SaaS
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.
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.
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.
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.
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.
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.
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:
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.
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.
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.
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.
API Inspect / Discover from a proof of concept into an award-winning $100k/yr enterprise SaaS product with growing sales and customer base
API Inspect / Discover has won multiple industry awards including: