essential
essential

Anorma Project

Simplifying NIS2 Compliance for SMBs.

Hero

Project Overview

Role: Senior Product Designer & Design System Architect
Team: : 2 Designers, 1 Product Managers

Tools & Methods:
Figma (Design System with Variables), Business Model Canvas, User Interviews, Journey Mapping, LinkedIn Pivot Testing, Iterative Prototyping

The Challenge

Understanding NIS2 and the Market Opportunity

In 2025 the European Union approved the NIS2 Directive (Network and Information Security Directive 2), a comprehensive cybersecurity law requiring thousands of companies across Europe to implement strict security measures, incident reporting, and compliance documentation.

The problem: While large enterprises have dedicated compliance teams and budgets, small and medium businesses (SMBs) face a perfect storm of challenges:

  1. Complexity Overload
    • Stringent Incident Reporting
    • Supply Chain Documentation
    • Personal Liability and Accountability
    • Vague Scope and Interpretation
    • Documentation Overload
    • Cross-Border Inconsistency
  2. Resource Constraints
    • SMBs lack dedicated IT security teams
    • Can’t afford enterprise compliance solutions (€50K+ annual licenses)
    • Don’t have time to interpret 100+ page regulatory documents
  3. Market Gap
    • Existing solutions target enterprises, not SMBs
    • Manual compliance (spreadsheets, consultants) is expensive and error-prone
    • No affordable, self-service tools existed

Our hypothesis: There’s a significant market opportunity for a compliance platform designed specifically for SMBs—something that guides them through NIS2 requirements without requiring cybersecurity expertise.

Why This Matters

Business Impact:
Non-compliance with NIS2 can result in operational shutdown, reputational damage. For SMBs operating on thin margins, this could be existential.

Market Size:
The NIS2 Directive affects over 100,000 to 160,000 entities across Europe, significantly increasing the scope from NIS1 by including medium-sized businesses (50+ employees, >€10M turnover) in essential/important sectors. While many SMBs are included, the exact number is hard to pin down because, although they make up a large portion of the 100,000+ total, many small, low-risk firms are exempt.

User Impact:
Business owners and IT managers were overwhelmed, desperate for guidance on how to become compliant without hiring expensive consultants or dedicating months to learning cybersecurity regulations.

My Role & Responsibilities

As Senior Product Designer, I led the end-to-end design process from market research through final UI delivery:

Discovery & Strategy:

  • Co-led market research using Design Thinking methodologies
  • Conducted user interviews with SMB owners and IT managers
  • Developed Business Model Canvas to validate market fit
  • Created customer journey maps identifying pain points and opportunities

Product Definition:

  • Translated complex NIS2 requirements into user-facing workflows
  • Designed information architecture for compliance guidance system
  • Defined feature prioritization based on user needs and business goals
  • Created LinkedIn pivot product landing page to test market demand

Design Execution:

  • Designed complete UI for all core features and workflows
  • Built comprehensive Design System from scratch (DS_Anorma.fig - 5.8MB, 95 components)
  • Implemented three-layer variable architecture in Figma
  • Created wireframes, high-fidelity designs, and interactive prototypes

Developer Collaboration:

  • Structured Figma files for seamless design-to-development handoff
  • Created detailed component documentation and usage guidelines
  • Customized export plugin synchronized with Git for developer access
  • Maintained design consistency across all features

Research & Discovery

Design Thinking Approach

We approached Anorma as a market validation challenge, not just a design project. Before writing a single line of code or designing any UI, we needed to prove that SMBs would actually use and pay for this solution.

Research Methods:

1. User Interviews

  • Participants: SMB owners
  • Goal: Understand current compliance approaches, pain points, willingness to pay
  • Key Questions:
    • How are you currently approaching NIS2 compliance?
    • What’s the hardest part of compliance for your business?
    • What would make compliance manageable for you?
    • What would you pay for a solution?

2. Business Model Canvas

  • Mapped value proposition, customer segments, channels, revenue streams
  • Validated that SMBs were willing to pay for simplified compliance
  • Identified key partners (consultants, industry associations) for distribution

3. Jobs-to-be-Done (JTBD) Analysis

  • “When [situation], I want to [motivation], so I can [outcome]”
  • Example: “When NIS2 requirements are unclear, I want step-by-step guidance, so I can ensure compliance without hiring consultants”

4. Customer Journey Mapping

  • Mapped current compliance journey (awareness → understanding → implementation → reporting)
  • Identified friction points where SMBs get stuck or give up
  • Designed intervention points where Anorma could provide value

5. LinkedIn Pivot Product Landing Page

  • Created landing page describing the product concept
  • Targeted SMB decision-makers on LinkedIn with sponsored content
  • Results: Engagement numbers

Design Strategy

Product Vision

The Core Idea:
Transform NIS2 compliance from a daunting legal burden into a manageable, step-by-step workflow that any SMB can complete without specialized knowledge.

Key Strategic Decisions:

1. Workflow-Based, Not Document-Based

  • Instead of providing compliance documents (static PDFs, checklists), we designed interactive workflows
  • Each step guides users through specific actions with clear instructions
  • Progress tracking shows completion status across all requirements

2. Contextual Guidance at Every Step

  • Never assume users understand cybersecurity or legal terms
  • Provide explanations, examples, and “why this matters” context
  • Use analogies and plain language wherever possible

3. Compliance as a Journey, Not a Checklist

  • Frame compliance as an ongoing process, not one-time achievement
  • Show progress visually to maintain motivation
  • Celebrate milestones to reduce overwhelm

4. Self-Service with Expert Backup

  • Primary model: Users complete compliance independently
  • Optional: Connect with certified consultants for complex situations
  • Hybrid approach reduces cost while providing safety net

Design System: Building for Scale

Why a Design System for a New Product?

Even though Anorma was a new product, I built a comprehensive Design System from day one. Here’s why:

Reason 1: Speed of Iteration

  • With a solid component library, we could rapidly prototype new features
  • Developers could build consistently without waiting for design specs
  • Design-to-development cycle shortened significantly

Reason 2: Future-Proofing

  • Anticipated product growth and feature expansion
  • Easier to maintain consistency as team scales
  • Reduces technical and design debt

Reason 3: Developer Collaboration

  • Created a shared language between design and development
  • Components mapped directly to code components
  • Reduced miscommunication and implementation errors

Three-Layer Variable Architecture

Following the approach I pioneered at DuskRise, I implemented a three-tier variable structure in Figma:

Layer 1: Primitives

  • Raw values: colors, spacing, typography, shadows
  • Example: #3B82F6 (blue), 16px (spacing), 14px (font size)

Layer 2: Semantic Tokens

  • Purpose-driven variables referencing primitives
  • Examples:
    • color.primary → Primitive blue
    • color.success → Primitive green
    • color.danger → Primitive red
    • spacing.component.padding → Primitive 16px
    • typography.body.regular → Primitive 14px

Layer 3: Component Tokens

  • Component-specific variables referencing semantic tokens
  • Examples:
    • button.background.primary → Semantic primary color
    • card.padding → Semantic component padding
    • input.height → Semantic input size

Benefits:

  • Consistency: Impossible to use arbitrary values outside the system
  • Maintainability: Change one primitive, update entire system
  • Developer Alignment: Figma variables map directly to CSS variables
  • Scalability: Easy to add new components following established patterns

Component Library Highlights

95 components across categories:

Foundational:

  • Buttons (primary, secondary, tertiary, destructive + all states)
  • Form inputs (text, select, checkbox, radio, textarea)
  • Typography system (headings, body, captions, labels)
  • Icons (custom icon set for compliance workflows)

Layout:

  • Cards (standard, elevated, outlined variants)
  • Modals and dialogs
  • Navigation (sidebar, top bar, breadcrumbs)
  • Stepper component (for multi-step workflows)

Data Display:

  • Tables (sortable, filterable, with pagination)
  • Progress indicators (bars, circles, multi-step)
  • Status badges (compliant, pending, non-compliant)
  • Empty states and error states

Compliance-Specific:

  • Requirement cards (showing NIS2 requirements with completion status)
  • Checklist components (interactive todo-style compliance tasks)
  • Document upload zones (for evidence collection)
  • Compliance reports (exportable documentation templates)

Developer Handoff Excellence

Custom Export Plugin + Git Integration:

  • Built customized Figma export plugin
  • Automatically synced design tokens to Git repository
  • Developers pulled latest design specs via Git, not manual handoff
  • Ensured single source of truth between design and code

Component Documentation Template:

For every component, I created structured documentation:

  • Developers rarely needed to ask design questions
  • Implementation matched designs 95%+ of the time
  • Faster development velocity
  • Fewer bugs from design-dev miscommunication

Challenge: Designing for Unknown Requirements

The Problem: NIS2 is a new directive, and interpretation varies across EU member states. We couldn’t design for “final” requirements because they were still being interpreted and implemented.

How I Solved It:

  • Flexible Component System: Designed UI components that could accommodate different requirement types without redesign
  • Modular Workflows: Each compliance requirement as independent module that could be added/removed
  • Configuration Layer: Built admin interface allowing updates to requirements without design changes
  • Content-Driven Design: Separated content (requirements text) from structure (UI patterns)

Outcome:

  • Product could adapt to regulatory changes without UI redesigns
  • Reduced maintenance burden on design team
  • Enabled rapid response to new compliance interpretations

Conclusion

Anorma represents a strategic approach to compliance product design—validating market need before building, systematizing design from day one, and creating flexible architecture for uncertain regulatory landscape.

Core Achievements:

  • âś… Validated market opportunity through Design Thinking research
  • âś… Built comprehensive Design System (95 components) ready for scale
  • âś… Designed complete UI for NIS2 compliance workflows
  • âś… Established design-development collaboration workflows
  • âś… Created flexible product architecture adaptable to regulatory changes

The Broader Impact:
Beyond the specific product, Anorma demonstrates how product designers can contribute to business strategy, not just UI execution. By participating in market validation, business model development, and go-to-market testing, I helped reduce risk and increase likelihood of product success.