Q2 2024- Q3 2024
Developing an ISMS Module
Prior to my relocation to Florida, marriage, and career transition into Product Design, I honed my expertise as an Information Security Specialist in the Netherlands. During my tenure at renowned organizations like T-Mobile the Netherlands and the Dutch government, I was deeply involved in implementing the ISO27001 security standard. A crucial component of my work involved frequent utilization of Statements of Applicability (SoAs).
Reflecting on my recent job application with a compliance services provider, I was surprised to discover that many companies still rely on outdated methods like Excel for SoA management. This revelation, combined with my background in security and my current role as a Product Designer, inspired me to develop a proof of concept aimed at streamlining and modernizing the SoA management process.
To foster transparency and gather valuable insights, I embarked on a #buildinpublic journey, sharing my progress and seeking feedback from the design community on platforms like Twitter (X) and LinkedIn. This collaborative approach proved invaluable in refining the design and ensuring it met the evolving needs of users.
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
Despite the increasing complexity of compliance standards like ISO27001, many businesses continue to rely on spreadsheets, such as Excel, for creating and managing Statements of Applicability (SoAs). This reliance introduces significant challenges, including:
Ownership and Accountability: Determining who is responsible for maintaining and updating the SoA can be ambiguous, leading to potential gaps in coverage.
Version Control and Consistency: Manual updates to spreadsheets can introduce errors and inconsistencies, making it difficult to ensure that the SoA remains accurate and up-to-date.
Inefficient Workflow: The manual process of creating and managing SoAs can be time-consuming and error-prone, hindering overall efficiency and compliance efforts.
This reliance on spreadsheets not only hampers compliance efforts but also increases the risk of non-compliance and potential regulatory penalties.
Why I'm Doing This
Following the conclusion of my long-term contract in February 2024, I've been actively seeking new opportunities in a challenging job market. To stay engaged, continue learning, and enhance my skills, I've been focusing on personal projects that allow me to apply my newly acquired knowledge.
Given my previous experience with SoAs and their associated challenges, I believe this is an ideal opportunity to demonstrate my growth and expertise. My goal is to create a proof of concept that showcases my understanding of tokenized design systems, living documentation, and working with complex, data-heavy systems. While this project is not intended for production, it will serve as a tangible demonstration of my capabilities and progress.
Foregoing extensive research
While I typically conduct thorough research at the outset of a project, this endeavor was primarily focused on enhancing my skills in design systems. Inspired by a Vanta video and leveraging my prior professional experience, I decided to jumpstart the process with ideation.
To supplement my ideation, I conducted competitive research and analyzed existing products to inform the dashboard layout. This approach allowed me to draw inspiration from industry best practices and identify effective design patterns.
My initial ideation phase involved analyzing and transforming the Excel overview presented in the Vanta video into a Figma design. As I worked on this conversion, I began considering potential development paths, limitations, implications, and file management strategies. To capture these thoughts, I created sticky notes within Figma, a common practice during my ideation process. This approach allows me to jot down questions and initial ideas as I progress through my design work.
Development
Phase 1
In the first phase of development, I focused on breaking down the table structure into its constituent components to ensure flexibility across various screen resolutions. By creating reusable components, I aimed to facilitate easy swapping and customization. Additionally, I considered other essential aspects such as access management (roles), content display, and page layout.
Through this initial phase, I gained a deeper appreciation for the complexities involved in constructing tables within a tool not specifically designed for that purpose. Drawing on my previous experience at ZOLEO, I realized that providing developers with a clear understanding of the header, row, and bottom (if necessary), along with the associated components, is sufficient for achieving the desired outcome.
Building upon this insight, I iterated on the design to reduce the overall table width. By applying logical thinking and combining certain elements or relocating them to different areas, I was able to achieve this goal. While further validation would be necessary in a production environment, this approach was sufficient for the proof of concept and allowed me to proceed with the project.
Phase 2
In the second phase of the concept, I focused on enhancing the design system's flexibility and adaptability. By investing in a robust and scalable design system, I aimed to create a project with long-term viability that I could revisit and expand upon in the future.
Design system & tokenizing it
Leveraging Tokens Studio's Graph Engine, I was able to streamline the color palette creation process. This powerful tool employs sophisticated mathematical algorithms to generate color palettes with customizable scaling. By requesting 16 scale levels, with scale-8 representing the original color, I was able to create a diverse range of colors.
Once generated, I seamlessly integrated the color palette into the Tokens Studio plugin. This allowed me to apply the corresponding tokens directly to my design elements, ensuring a cohesive and visually appealing color scheme.
To streamline the development process and achieve finer-grained design control, I incorporated global tokensets from a previously contributed white-label tokenized design system. By leveraging these pre-existing tokens, I was able to significantly expedite the creation of individual design elements. This not only improved my overall efficiency but also enabled more precise and nuanced design decisions. As a result, I was able to eliminate earlier-generated tokensets that had been used in my designs.
Through this experience, I identified a potential improvement for the Tokens Studio plugin for Figma: the lack of a clear-all function. When importing tokens from a different system, it can be time-consuming to manually remove tokens that are not required for the current project. To address this issue, I submitted a feature request to the Tokens Studio team, suggesting the inclusion of a clear-all function.
By adopting a systems thinking approach, I was able to significantly enhance my implementation of design tokens and token sets. This mindset helped me recognize the importance of considering the broader context and potential future implications of my design decisions.
Initially, I approached the project with a "less is more" mentality. However, my experience working on a white-label tokenized design system led me to understand the value of planning for future expansions. By establishing a comprehensive set of global tokens and then tailoring them to specific projects, brands, or systems, I was able to create a more future-proof and adaptable design infrastructure.
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.
