NB Defense

Content

Improve the Python code scanning experience on Jupyter Notebooks.

Protect AI is a cybersecurity startup focused on AI applications & ML systems that helps customers build a safer AI-powered world by delivering innovative security products. NB Defense is an open source tool for detecting security issues in JupyterLab Notebooks. These issues can range from leaked PII (personal identifiable information) in your notebook output to vulnerable versions of installed dependencies.

I organized user feedbacks and identified the design issues we could solve based on our limited resources. I focused on one of the design options, refined it with the senior designer and development team, and oversaw the implementation process.

Challenge

Difficulty navigating between the documents and scan results.

The team built the first version of the extension to conduct usability testing with data scientists. In general they had difficulty navigating between documents (main work area) and scan results (left side bar).

1. Are the scan results outdated?

2. Difficult to read the scan results.
‍
3. Which detected issue should I fix first?

4. How do I find the codes that contain issues?

Solution

Apply severity grouping logic so that users know which cell should fix first.

We initially grouped the detected issues by types (PII, secrets, dependencies, licenses), but it didn't indicate which issues should be fixed first. Therefore, we introduced severity levels and used them to prioritize issues based on user feedback and validation by backend engineers.

Add relative timestamp for better scan status immediacy.

Informing users about the notebook's status is important, as they frequently view the code outputs in JupyterLab. 

Relative timestamps provide better immediacy, enabling users to easily determine the time difference since the last scan.

Post-launch

Apply style guide to the design for visual consistency and further improved readability.

The user feedback highlighted navigation issues with severity levels and cells. I improved the readability and applied the style guide we later established for visual consistency.
‍
1. Reorganize notebook file info.
‍
2. Enhance the focused state for the issue cell.
‍
3. Apply WCAG 2.1 to severity colors (requires a contrast ratio of 3:1 or greater for graphics and user interface component).

Reflection

The exciting journey of redesigning an MVP for an early-stage startup.

This is my first UX project that has allowed me to collaborate with engineering teams and has provided me with a proper introduction to real-world app development. The journey of building MVP products for an early-stage startup was quite challenging for me because the process was never linear, and mentorship was limited. However, it also offered me the opportunity to learn how to be an adaptable designer.

The Impact
- Reduced the total time of the code editing process by an average of 20%
- Increased the company's LinkedIn followers by 33% in a month 
- Contributed to raising $35M in series A funding
‍
What I Learned
- Design process was never linear
- Understanding domain knowledge from users is much more effective for solving design problems
- Communication of the design > the design itself

How I Can Improve
- Push for more user testing
- Establish a design system across the products for style consistency & development efficiency

Content

Challenge

Solution

Outcome

Post-launch

Reflection