FAUTOR
Secured $100k in seed captial through execution + delivery of first MVP.
SAST (Static Application Security Testing)
noun—/sæst/
A methodology for testing code early in the software development lifecycle (SDLC). Think of it like proofreading source code for errors before launching a product.
OVERVIEW
I was tasked with designing a full-fledged MVP for Fautor's product, Cytour, starting from scratch.
While other SAST tools use pattern-matching (which is prone to false positives), Cytour uses set theory to mathematically represent programs/calculate outcomes.
This innovative approach requires innovative design and a departure from the clunky, outdated UX plaguing existing SAST tools.
TIMELINE
July 2024 — September 2024
TEAM
1 product manager
3 software developers
1 product designer
MY ROLE
Principal Product Designer
Led end-to-end creation for first MVP, from ideation to delivery.*
Collab with team to align design with business goals and user needs.
Conducted user research to inform prototypes and iteration.
*Product shipped for development.
PROBLEM
Security errors are costly and threatening. SAST tools aim to mitigate this by speeding up manual debugging, but existing tools:
Have outdated interfaces that are not user friendly
Lack helpful stats and data visualization for actionable insights
Use pattern-matching, which is prone to false positives
GOALS
Business
Differentiate from competitors through seamless scanning and simplifying complex data.
Ensure scalability through raising funds for initial development and growth.
User
Scan code seamlessly and have results presented in a compelling, actionable way.
Feel assured that false positives are minimized; be able to trust and rely on the software.
Collaborate with respective teams to quickly share and address issues.
THE BIG QUESTION EMERGED…
HMW improve the usability of SAST platforms so that cybersecurity teams and developers can prioritize vulnerabilities and leverage data to address and mitigate security risks more efficiently and effectively?
SOLUTION
I collaborated with the team to develop the following design direction: corporate, laid back, clean, calming, but still energizing/modern.
To meet the stated goals, the product has the following features:
Dashboard: Simplifying complex data
Users can select which stats to display based on their role and needs
Stats are intentionally selected, data-driven, and go beyond cookie-cutter totals
Scans: Streamlined & Seamless
Tabs for organization are similar to an inbox layout, offering familiarity and clarity (Jakob's Law)
Process for creating a new scan is straightforward and easy
Scan Results: Showing the "WHY"
Clicking into scans provides access to all proofs and recommended solutions, reassuring users of Cytour's accuracy in minimizing false positives
💡 How we got here: the research, the insights, the process…
RESEARCH & INSIGHT-INFORMED DECISIONS
Competitive Analysis
To understand the industry landscape, I first conducted a competitive analysis. I noticed that many existing SAST products lack suffers from outdated, unhelpful interfaces. Features were difficult to find, and results were unclear and prone to false positives.
Snyk members page
Members are not grouped by department, cannot organize or add multiple teams. No option to manage permissions.
Veracode scans (Projects) page
Scans ("Projects") are formatted as a list. Vulnerabilities are not categorized or prioritized. UI is extremely outdated.
Sonarqube analysis page
Analysis provides a grade for the code but does not provide details on issues or remediation/the "why" behind. The analysis also provides a grade, which does not tell the user what to prioritize. UI is outdated and unintuitive.
Checkmarx dashboard
Overview of risks in each project categorized into high, medium, and low risk, but no further stats, insights, customization, etc. Only generic stats, such as total vulnerabilities are shown.
Usability Studies
I conducted user interviews after (lo-fi) wireframing and the competitive analysis since SAST products have similar features and the team already defined key requirements. This allowed me to iterate quickly and prioritize features.
For the usability tests, I conducted a moderated usability test with 6 people, capturing a range of experiences, ages, occupations, etc within the target audience.
Occupations: Software developers, systems engineer, project manager
Experience: ranging from <6 months to 40+ years
Seniority: intern to senior software dev
Ages: 20-64
Genders: 5 male, 1 female
1
"I don't understand the purpose of organizations."
6 out of 6 users were confused about what the Departments page (originally "Organizations") was for and how to use it. After a semantics change and other tweaks, the purpose and process for managing departments and teams became intuitive and clear.
Departments Page
Teams are clearly organized within departments and users can easily add members (Hick's Law). Users have the option to manage permissions.
2
"I love the level of customizability."
Several users mentioned that they loved the customizability options, such as the ability to choose between proof depth and ability to customize the stats shown on the dashboard.
Dashboard
Users have access to a wealth of different data points. Edit feature in top-right corner allows them to adjust what they want to see and drag-and-drop allows users to prioritize what is important to them.
Proofs
Cytour provides proofs for every single error, and users can select their preferred depth of proofs from the get-go in onboarding. This reassures users about Cytour's reliability and accuracy.
3
"I wish onboarding had more visual cues."
In low-fidelity iterations, the text fields in the onboarding form had a generic copy. As I moved toward high-fidelity iterations, I edited the copy to offer visual cues and success messages so users felt reassured and certain.
4
"The way scans are organized confuses me."
Originally, all scans were shown on one page. Users mentioned that they liked how it was formatted like an inbox, but it was not visually clear how they should prioritize issues.
Scans
Scans are organized and information hierarchy within scans is clear. New scans have a white background to indicate that they are "unread"; non-new scans are grayed out. Users can use checkboxes to quickly manage scans. Large button allows users to add new scans easily.
Reports
Reports are easily downloadable from Scans page. Reports are desk-ready, formatted in a readable and clear way.
FINAL PRODUCT
A comprehensive, easy-to-use, and simple tool that allows users to scan smarter—minimizing false positives and providing accurate, tailored vulnerability insights.
Link to Full Prototype
WRAPPING UP
Impact
Secured $100k in seed captial via delivery of first MVP.
Final designs shipped to dev team for development.
Developed and established visual identity for Cytour.
Reflections
LISTEN, LISTEN, LISTEN
Because I had virtually no experience in or exposure to cybersecurity tools, I had to rely completely on user empathy and feedback to understand how to build the product. This minimized my biases and helped me turn my weakness into an advantage, resulting in a truly user-centered product.NO STUPID QUESTIONS
Due to the aforementioned lack of knowledge, I was not afraid to ask questions about everything. This helped me get over the learning curve quickly and immerse myself in the industry.CLIENTS ≠ USERS
In a fast-paced startup culture, I had to be creative about balancing advocating for the user with meeting business goals. I persistently advocated for making decisions based on user research and designing for accessibility by tying them back to Fautor's goals.
Next Steps
I am currently working on building the design system for the product to set a strong foundation and precedent for design as the team grows.
Due to time constraints, I prioritized building the foundation for the most important pages. Given more time, I would focus on developing specific but necessary details: success and error states/toasts, loading pages, and a tutorial/toolkit for onboarding users.
To elevate this beyond MVP, I would build out and test features such as the ability to assign issues to different team members, continue developing dark mode, and create animation for easter eggs.