SaaS · Cybersecurity
RoxShield
Designing a cybersecurity SaaS for modern businesses.
- SaaS
- Cybersecurity
- Product Design
- ROLE
- Product Designer & Founder
- SCOPE
- Product Strategy · UX/UI · Design System
The problem
African businesses lack accessible tools to train their teams on cybersecurity and measure their exposure to human risk, the leading cause of security incidents.
Constraints
The product had to work for organizations of very different sizes, in a market highly sensitive to price, while staying readable for non-technical users despite handling sensitive behavioral data.
It also had to remain stable through a major framework migration mid-build, when Next.js deprecated the middleware convention the project was originally built on, forcing a full rewrite of the access control logic without disrupting the product roadmap.
My role
Product Designer & Founder. End-to-end product design: product architecture, design system, admin dashboard, human risk scoring, training modules, phishing simulation, user dashboard, multi-organization management.
Key decisions
Composite risk scoring, not raw metrics.
A single monolithic score would have hidden what actually drives risk. RoxShield's individual score combines two measurable signals: an active one (phishing simulation click rate) and a passive one (training completion rate). Individual scores roll up into department scores, then into a single organization score, mapped to three tiers: Secure, Moderate, At risk.
The dashboard deliberately hides raw metrics such as click counts or module completion logs from the primary view. The person reading this dashboard is an HR director or an executive, not a security analyst. A percentage with a color is actionable. A table of logs is not.
Strict data isolation over shared visibility.
Multi-organization support could have meant a shared backend with permission layers bolted on top. Instead, isolation was built into the data model itself: every entity carries an organization identifier, and no cross-organization view exists at the application level, not even for administrators of other organizations.
Access follows three tiers: super admin sees all organizations, organization admin sees their organization only, employees see only their own training and progress. The hardest call was employee access: rather than restricting by interface alone, employees are structurally blocked from the admin dashboard at the routing level, even with a direct link.
Solution
- Next.js 14
- NestJS
- Prisma
- PostgreSQL
- shadcn/ui
- Starter
- Pro
- Business
- Enterprise
- Landing page
- Authentication
- Admin dashboard with human risk scoring
- Training modules with phishing simulation and quizzes
- User dashboard with progression and badges
- Full multi-organization management
Evidence
Selected into the inaugural Cyber4Africa cohort (UNDP, G7, Cisco), chosen among 430 applications from 18 countries.
14 organizations across 7 countries, spanning finance, technology, education, and NGO sectors, are currently trialing the platform.
Outcome
Selection into the Cyber4Africa cohort translated the project from a self-built product into one backed by a structured institutional program. It is currently moving through the program's onboarding sequence: cybersecurity assessment, training, and individualized support for qualifying startups.
Reflection
Designing RoxShield meant taking on a specific challenge: turning the complexity of cybersecurity into a clear, structured, and accessible experience. My role was not only to create a visually modern interface, but to think through how users could quickly understand their security posture, identify priority risks, and act without being overwhelmed by technical data.
CONTACT
Got a project in mind? Let's talk.
I'm always open to new challenges and exciting collaborations.
Start a project