Q2 2024- Q3 2024
Developing an ISMS Module
The problem
Before transitioning to Product Design, I spent 10+ years as an Information Security Specialist in the Netherlands, working with T-Mobile and the Dutch government to implement ISO27001 security standards. My extensive experience with Statements of Applicability (SoAs) revealed a critical gap: many organizations still manage these complex documents through basic spreadsheets.
This insight sparked a personal project combining my security expertise with product design skills. I developed a proof of concept to modernize SoA management, sharing my design process publicly on Twitter and LinkedIn to gather feedback and validate solutions with industry professionals.
Figma file can be found here
Role: Sole designer
Projects: ISMS - SoA (Proof of Concept)
Platform: Web
Tool stack: Figma, Notion for Kanban
The problem
Organizations managing ISO27001 compliance still rely heavily on spreadsheets for Statements of Applicability (SoAs), creating critical vulnerabilities:
Fragmented Ownership: Unclear responsibilities and accountability lead to incomplete compliance coverage
Data Integrity Risk: Manual spreadsheet updates create version control issues and introduce errors that compromise accuracy
Process Inefficiency: Time-consuming manual management reduces team productivity and increases compliance costs
This outdated approach threatens both regulatory compliance and operational efficiency, exposing organizations to potential penalties and audit failures.
Why I'm Doing This
During my job search in early 2024, I launched this project to showcase my evolving expertise while bridging my security background with current product design capabilities. This proof of concept demonstrates my proficiency with tokenized design systems, living documentation, and complex data architecture. While not intended for production, it serves as a portfolio piece highlighting my ability to solve real-world challenges I've encountered firsthand.
Foregoing extensive research
Rather than extensive initial research, I leveraged my direct experience with SoA management and insights from Vanta's implementation to accelerate the design process. My approach centered on:
Competitive analysis of existing dashboard solutions to identify effective patterns
Direct translation of Excel-based workflows into modern interface designs
Rapid ideation in Figma, using sticky notes to document technical considerations and development implications
This experience-driven approach allowed me to focus on advancing my design system skills while building on proven solutions in the compliance space.
Development
Phase 1
Phase 1 — focused on decomposing the table architecture into reusable components that adapt across screen sizes. Key considerations included:
Component modularity for easier customization
Role-based access management
Optimized content display and layout
Developer-friendly structure separating headers, rows, and footers
Drawing from ZOLEO experience, I streamlined the table width through strategic element combination and relocation. While this approach would require validation in production, it effectively demonstrated the concept's viability.
Phase 2
Phase two centered on building a future-proof design system architecture. I established a comprehensive token structure and component hierarchy to ensure:
Scalable design patterns adaptable to new features
Consistent visual language across all interfaces
Efficient component updates and maintenance
Simplified developer handoff and implementation
This foundation enables continuous iteration while maintaining system integrity.
Design system & tokenizing it
I utilized Tokens Studio's Graph Engine to create mathematically precise color scales. The system generates 16 scale levels from each base color, with scale-8 as the reference point. These color tokens were then integrated directly into component styles via the Tokens Studio plugin, ensuring systematic color application throughout the interface.
I leveraged global tokensets from a white-label design system to accelerate development and gain granular design control. This improved efficiency and precision while eliminating redundant tokensets.
During this process, I identified and submitted a feature request to Tokens Studio: adding a clear-all function to streamline token management when importing from external systems.
Systems thinking transformed my approach to token implementation. Drawing from white-label design system experience, I shifted from minimalist to strategic token architecture. This enabled a more comprehensive global token foundation that supports future scaling while maintaining project-specific adaptability.
Improving the designs
As I implemented enhancements to my tokens and design system, I continued to iterate on the product itself. During this iterative process, I prioritized efficiency by incorporating text molecules and applying tokens to components.
Additionally, I focused on simplifying and reducing the table that contained the standard's clause and control details. While streamlining the table, I also aimed to enhance the way information is displayed when a user seeks more details about a specific control. This approach ensures a more intuitive and user-friendly experience.
During phase 2 I also spend time working out how to handle additional users, which meant creating access management. Using my 10 years of experience as an information security specialist I was able to create a simple yet effective Admin dashboard.
Once I was satisfied with the overall design, I focused on iterating the roles and their display mechanisms. By sharing my progress publicly on platforms like Twitter and LinkedIn, I was able to gather valuable feedback from the design community and effectively conduct user testing on these designs. This community input played a crucial role in refining the user experience and ensuring the roles were presented in a clear and intuitive manner.
