Data Theorem

Web Secure

Designing a next-generation web security product

Product Design
UI/UX Design

tldr;

Web Secure is the first product to provide full-stack web application security analysis and automated asset discovery.

I helped Data Theorem to enter web application space with a bang, leading the design of Web Secure from its conception to the MVP launch in June 2020.

Background

The true attack surface of any web application extends beyond the web application code and includes any APIs, databases, or other cloud infrastructure that the application relies upon.

Existing web security products only analyze the web application code

Unfortunately, most existing web application security products are only designed to analyze web application code, leaving security teams with blind spots at the API and cloud infrastructure layer.

Opportunity

In order to address this gap, Data Theorem wanted to bring a new product to market that would enable security teams to analyze and secure their entire web application attack surface, from the web application layer down to the API and cloud infrastructure layers.

Challenges

Web Secure was conceived in February and launched in July of 2020.

As part of designing Web Secure, I was also tasked with establishing a new visual design language that could be applied as an update to Data Theorem’s existing product lineup.

During the 6 weeks I spent defining the product and designing the MVP of Web Secure, I did not have the opportunity to conduct formative user research or usability testing.

Against my recommendation, Data Theorem did not provide user research opportunities prior to starting design and needed me to move on to other tasks immediately after completing the MVP design.

Execution

Data Theorem existed for 6 years before hiring its first UX’er (me) and as a result, never really took the time to establish formal conventions or standards for its user experience.

While building the frontend with the popular Material UI library provided a baseline UI style, the lack of standards led to inconsistent application.

Design inconsistencies were all over the product

I had grappled with the effects of this foundational design vacuum for years, so when I was asked by Data Theorem’s executive team to create a fresh new visual design style for Web Secure, I seized the opportunity to establish some standards that could be applied to systematically create a consistent product experience.

Synergy Design System

Working within the constraints of Material Design, my design team and I established a library of reusable styles, components, and patterns for use across all of Data Theorem’s products.

Atoms

Prior to the design system effort, Data Theorem was using the Roboto type family across all of its products because that was Material UI’s default typeface.

Rather than bow to the default effect, my UX team took this opportunity to identify the best typeface for Data Theorem.

Roboto vs. our ultimate choice Lato

To kick off this process, we held a kickoff with marketing to get a sense of Data Theorem’s branding goals.

Based on this conversation, we selected 8 typefaces (including Roboto) as potential candidates that could create Data Theorem’s desired “approachable, expert, and premium” feel, and evaluated each for Personality, Legibility, Readability, Space Economy, and suitability of available variants to our typical use cases. After multiple rounds of elimination, we chose Lato as the primary typeface paired with Fira Mono for monospace text.

Lato is more space-efficient than Roboto, and its humanistic forms create a sense of openness and approachability while still feeling sleek and serious. Fira Mono has sharp lines and engaging geometric angles that convey technical precision and expertise; it also happens to be a favorite programming typeface among Data Theorem’s engineering team.

Collaborating with the front-end team, we created a demo and presented it to the entire company. With executive approval, my design team finalized Data Theorem’s first type system and pushed the change live.

In addition to implementing a standardized type system, we also fleshed out the rest of our design foundation by defining conventions for grid, spacing, alignment, density, elevation, and corner radiuses.

Design system atoms: color palette, grids, spacing, alignment, density, typography, elevation, corner radiuses

Molecules

Building on the foundation of the Atoms, we created a component library and usage guidelines.

Conducting a UI inventory allowed us to discuss patterns and inconsistencies in Data Theorem’s UI.

Different styles of buttons in use throughout the entire product lineup

As an example of this process, we noticed many similar variations of button styles in use, and were able to standardize to 3 styles, eliminating the need for outlined buttons and adopting a convention of always placing the icon on the left.

Organisms

Building up from the usage guidelines and component library, my team and I created more complex elements and full-page templates.

Designing the product pages and templates from atomic components on up enabled us to create a consistent product experience that minimized engineering effort in the months leading up to launch.

Global Navigation

In addition to creating a design system, I also took the Web Secure launch as an opportunity to fundamentally rethink the navigation structure of Data Theorem's product portal.

Prior to Web Secure, Data Theorem was using a top bar for navigation between products and a fixed-width sidebar for within product navigation.

Unfortunately, this UI pattern was problematic for responsive web use, obscuring global navigation items, and crunching down content on smaller screen sizes.

For Web Secure, I proposed combining the global navigation and within product navigation into a single vertical navigation bar as a more efficient alternative.

This single UI element eliminates the need for secondary navigation, takes up 60% less space than the fixed-width side navigation when collapsed (default), can be expanded for full visibility, and provides flexibility through the use of temporary submenus.

With the launch of Web Secure, Data Theorem rolled out this new vertical navigation to all products, resulting in a less cluttered experience with more room for content.

Web Secure

Target Audience

Web Secure was designed to meet the needs of two ad-hoc personas: Security Analysts and Penetration Testers.

Security Analyst (Cathy)

Security Analysts are experts on securing data and managing security risks. They have a strong technical understanding of many aspects of information security, and spend most of their time performing security reviews, monitoring security issues, and partnering with developers to secure their company’s internally developed software.

Because new issues are constantly being discovered as new software is released, and because security analysts don’t have the full context of software architecture that the software development team does, one of the biggest pain points for security analysts is managing and prioritizing the constantly growing backlog of security issues.

As a result, security analysts need tools that can help them easily identify and understand the most important security issues in context so they can work them through to resolution.

Penetration Tester (Arthur)

Penetration testers are the hackers of the corporate world. They use their creativity and advanced technical knowledge to comb through code and identify, demonstrate, and report exploitable security issues within their company’s internally developed software.

Because of the detailed nature of their work and the huge range of potential security issues that may exist, one of a penetration tester’s biggest pain points is that it's difficult to perform a robust analysis at scale. 

As a result, penetration testers have a lot to gain from tools that can automate parts of the penetration testing and reporting process, thus freeing up time to search for more exotic issues and exploits.

MVP User Flows

Security Analyst Task # 1: Understand the full attack surface and security posture of a web application
On Monday morning Cathy, a Security Analyst, wants to check if there are any new issues on Tulano’s most important web application, the Tulano Corporate Website, so that she can give a status report to the team.

From the Web Secure dashboard, Cathy can see details for the 6 web applications with the largest overall attack surface. (For any web application beyond the top 6, Cathy can click on “View All” or navigate directly to the inventory page where all web apps are searchable. ) 

Web Secure automatically inventories web applications, APIs, databases, and other cloud infrastructure that applications rely upon, and maps the association between all of these assets to identify the full attack surface of any web app.

Each web application card shows the name and URL of the web application, an overview of the full stack of connected assets, and a visualization of the aggregate security posture of the full stack.

Clicking the web application’s card navigates Cathy to the Web Application Details page for the Tulano Corporate website where she can see details about the web application, the security posture of each of the connected assets, and any security issues (aka policy violations in Web Secure terminology) that are affecting the application and its full stack.

In this case, there are no open issues, and Cathy is able to report to her boss that the Tulano Corporate Website, and all of its related APIs and cloud infrastructure, are secure.

Security Analyst Task # 2: Understand important security issues in context, work with developers to fix
After checking on Tulano’s most important web application, Cathy’s second task on Monday morning is to review any new security issues that have been identified so that she knows which issues to prioritize for the week.

The Web Secure dashboard provides a pre-sorted list of the most urgent policy violations in the “Fix First” section. Cathy can see the full list of policy violations by clicking view all or navigating to the policy violations page directly, but instead she clicks on the first violation in the list.

Clicking on the violation navigates the Cathy to the Violation Detail page where she can see a description of the issue, the recommended fix, and information about the affected asset and any web app(s) that it connects to.

S3 Bucket Violation Mock

In this case, an S3 bucket that is used by the Tulano Sales Admin web application is publicly readable. Cathy immediately knows that this issue may be important because it relates to one of her most important web applications, so she follows the link provided in the description and sees that user login information is being exposed.

With this context, Cathy is able to quickly determine that this issue is sensitive and needs to be addressed immediately.

In many cases, Cathy’s next step might be to leave a comment and then create a secure link to share the issue with the developer team, but for this specific issue there’s no need to get the developer team involved.

Cathy clicks “Remediate” and is able to automatically fix the issue with just a few more clicks using Data Theorem’s auto-remediation script.

Autoremediation Detail
Autoremediate issues wiht a single click
Penetration Tester Task #1: Test various layers of the web application stack for security issues
A few times each year Arthur, a Penetration Tester, performs a penetration test on Tulano’s most important web applications. Performing a robust analysis of all aspects of the application takes a lot of time, so he wants to use Web Secure to speed up the process.

When Arthur opens the Web Secure Dashboard, he sees that Data Theorem has found a hardcoded token in Tulano Customer Database.

He knows that the presence of hardcoded tokens can lead to large scale data breaches, so he clicks “See All Tokens” on the Toxic Tokens card to learn more.

Toxic Tokens Token Detail

Arthur knows that some tokens are very sensitive and can lead to large scale data breaches while others are not sensitive and bear no security risk at all, so he uses the provided curl script to see what kind of data was being accessed with the token.

Curl Script Detail

Even though the resulting data isn’t sensitive, the token shouldn’t be there so Arthur clicks “triage” and creates a policy violation.

Once the violation has been created he navigates to the Policy Violation Details page and uses the shared link feature to send it off to a colleague

Toxic Tokens Share Violation

This is just one example of how Web Secure makes it easy for Penetration Testers to analyze the security of their web applications.

In addition Toxic Tokens, Web Secure launched with 2 other Hack Toolkits focused on different aspects of web application security:

  • XSS Protection: analyzes web applications to find cross-site-scripting (XSS) vulnerabilities that may be exploited by hackers to bypass access controls and inject code into web pages viewed by other users
  • SQL Injection: crawls web applications to determine if APIs used by those applications are vulnerable to the injection of malicious SQL statements to attack underlying databases.

These Toolkits are designed to make the lives of people like Arthur easier, but because they are so simple to use, we have seen aspects of security testing covered by the toolkits offloaded from Penetration Testers entirely and taken on by other members of the team. 

Toxic Tokens Schedule

Organizations can even schedule scans to run automatically for continuously fresh results.

This is a win for everyone involved because it increases the organization's ability to perform penetration tests that would otherwise be done by hand and creates a state of continuous test coverage for the relevant security issues.


Results

🚀 Product Launch

Web Secure officially launched in June 2020 and at the time of writing is undergoing customer trials. The product is still under active development.

🎨 Design System Launch

The launch of Web Secure was also the public debut of Data Theorem's Synergy design system and the new Global Navigation.

📈 Increased Efficiency

Since adopting Synergy internally in May 2020, Data Theorem has experienced increased design velocity, frontend development velocity, and product consistency.

👌 Fresh Look and Feel

Users loved the fresh new look of Web Secure, and Synergy will serve as the foundation for Data Theorem's product development efforts over the next few years.

Let's create something special

I'm happy to help with your next project