ROLE
Product Designer (UI/UX)
TIMELINE
2 weeks
TOOLS
Figma, Figjam
Background
Securing products is a necessity, yet many big companies only run penetration testing once a year. When developers finally receive the findings, they often do not know what to do next. Fuzzing Hero is here to help.
Where existing approaches fall short
Consultants & Bug Bounties
These can be costly, produce findings of inconsistent quality, and leave teams without clear ownership of the work.
AI Solutions
AI is not a viable solution right now. It is very costly, does not follow a set methodology, and uses a deterministic way of testing that produces different findings every time you run a scan.
Current Market Tools
Many commercial and open-source products exist, but they just do not output the high-quality vulnerability details you would get from a human penetration tester.
Beyond the lack of quality findings, the security scanning tools out there right now often come with huge barriers for the consumer:
The Onboarding Barrier
Some tools require users to speak with a salesperson before they can try the product. These extra steps can lead people to give up before they get started.
The Cost Barrier
Expensive scanning tools can put a strain on small companies, independent developers, and penetration testers, making it harder for them to access security testing.
Fuzzing Hero solves these problems
Instant Access
People no longer have to talk to a salesperson and an account executive just to start authorized scanning on their APIs.
Complete User Control
Users can choose exactly how many scans they want right away.
Highly Competitive Pricing
Pricing is well below what the average security company charges organizations for the same service.
The Goal
Design Fuzzing Hero, a cost-effective and robust API security scanning application that bridges the gap between accessibility and power. It empowers developers to confidently test for vulnerabilities while delivering the advanced capabilities required by penetration testers and mature organizations.
Understanding the product and its goal
When I joined the project, the client already had a solid idea of the product he wanted to build and a rough outline of a website. I started by conducting an in-depth interview with the client and the product’s end users.
What I wanted to learn from the interviews
What does success look like?
Getting scan results users can learn from, avoiding false positives and noise, and giving users confidence in the output.
Who I was designing for
Billing Users
Enter payment information and manage the subscription without running scans. This experience will differ for organizations and individuals.
Developers
Get a detailed scan of their app showing vulnerabilities, defects, unexpected behavior, and edge cases. Review their application logs to see what happened during testing, including database errors or anything that broke.
Security Testers
Use Fuzzing Hero to identify vulnerabilities, defects, unexpected behavior, and edge cases in the app they’re testing against.
General Users
Some users may simply want to run a scan and confirm it did what they wanted.Next, I looked at competitor products to understand the current security scanning market. I wanted to see what frustrated users and identify areas for heuristic improvement.
Next, I looked at competitor products to understand the current security scanning market. I wanted to see what frustrated users and identify areas for heuristic improvement.
Major takeaways
Collaboration is key
Users need an easy way to share scans and findings with others in their organization.
High volume
The ability to scan a large number of requests at once is an absolute must.
Accessible results
Scan results need to be easy to understand for developers with less experience identifying security vulnerabilities.
Transparency builds trust
Showing users exactly what was scanned and letting them choose what to scan, rather than just listing vulnerabilities, will set Fuzzing Hero apart from competitors.
Unique value propositions
Fuzzing Hero’s standout features will include easy on-demand entry, flexible pricing (pay-as-you-go or subscriptions), flexible testing, collaboration within organizations, custom directives and validators, downloadable HAR files, and checks for logical and structural tests (like equivalence partitions), rather than just standard vulnerabilities.
User Flow
Using these discovery findings, I created the overall user flow. Fuzzing Hero had a lot of great starting concepts, but it was up to me to fit them together and make sure there were no gaps in the user experience.
Wireframing & Ideation
“How can I make this easier to understand for someone scanning for the first time?”
The pre-authorized screens were straightforward to design, but I kept returning to this question for the logged-in experience. Since I had never scanned an API, I approached it from a beginner’s perspective. I incorporated the technical requirements from card sorting and made heuristic improvements.
To guide my wireframing, I asked myself:
What areas contain heavy jargon that needs to be broken down? How can I make the findings on the scan results page as clear as possible?
Atomic Components
Fuzzing Hero had no branding or component library yet, so it was up to me to create both.
I turned to color theory and chose royal blue as the primary brand color. Blue is widely recognized as a trustworthy color. Since Fuzzing Hero handles authorized API scanning, we needed the interface to make a strong “you can trust us” statement to our users.
Medium to High-Fidelity Design
With a foundation for the component library in place, I started on my medium-fidelity screens, including mobile views. At this stage, I focused on content hierarchy, user flow, and layout rather than perfect pixel spacing.
Once the medium-fidelity screens were ready, I met with the technical lead to review what was feasible within our tight timeline. After getting the green light and adjusting areas that were out of scope, I finalized the component library and moved into high-fidelity design.
High Fidelity & User Testing
After finishing the initial high-fidelity screens and interactive prototype, I ran user testing sessions. While the pre-authorization experience met users’ expectations, the logged-in experience needed revisions around collections, scan results, and a few smaller details that make a lasting impact on the overall user experience.
Key insights and adjustments from testing included
Separating Vulnerabilities and Observations
Users wanted vulnerabilities and observations in separate tabs. Observations provide helpful advice, while vulnerabilities identify parts of the application that need fixing. Separating them reduced cognitive load and made the pages easier to understand.
Streamlining the Scans Page
Based on user feedback, I moved scan statistics out of the header and gave them a dedicated space, creating a cleaner, simpler view.
Polished Body Text Editors
Adding richer text formatting to the body editors was a “nice-to-have” feature that received overwhelmingly positive feedback. It let users style text to fit their needs.
Error Prevention
To help prevent accidental mistakes, I added a way to safely view and reject organization requests.
Mobile Utility
Users confirmed they would not run full scans on their phones, but found mobile views helpful for checking results, tracking scan progress, and handling light admin work.
Conclusion & Reflections
This project had an extremely aggressive two-week timeline, much shorter than I was used to. Despite the fast pace, I delivered a complete high-fidelity design and prototype rooted in real user feedback.
Even though this was a departure from my usual domain of finance, I absolutely loved designing for a complex security tool. The team at Fuzzing Hero still plans to keep me on board, and I’m working on updates to improve the user experience and expand the application’s capabilities.
Explore all case studies