56 SECURE
56 SECURE
Forge Design System –
A scalable solution for
Enterprise Security Management
Forge Design System –
A scalable solution for
Enterprise Security Management
Forge Design System –
A scalable solution for Enterprise
Security Management
Role
Lead Product Designer
Team
2 Product Designer
Front End Dev Team
ARMOUR OS
ARMOUR OS
PROJECT CONTEXT
PROJECT CONTEXT
ARMOUR OS is an all-in-one platform built to simplify security management for enterprises by 56 Secure, Designed for business owners and security supervisors, it provides a consistent and coherent user experience, making security operations easier to manage. Forge is the design system established to build Armour OS.
ARMOUR OS is an all-in-one platform built to simplify security management for enterprises by 56 Secure, Designed for business owners and security supervisors, it provides a consistent and coherent user experience, making security operations easier to manage. Forge is the design system established to build Armour OS.
Overview
Overview
Forge was built to establish a unified, scalable design foundation for Armour OS, providing the consistency and reusability needed for its expanding platform. Built in close collaboration with the frontend and QA teams, Forge serves as the single source of truth, streamlining design and development.
Forge was built to establish a unified, scalable design foundation for Armour OS, providing the consistency and reusability needed for its expanding platform. Built in close collaboration with the frontend and QA teams, Forge serves as the single source of truth, streamlining design and development.
User Needs
User Needs
User
Needs
CLEAR & CONSISTENT NAVIGATION
Security teams needed intuitive workflows & straightforward navigation to manage operations without a steep learning curve.
CLEAR & CONSISTENT NAVIGATION
Security teams needed intuitive workflows & straightforward navigation to manage operations without a steep learning curve.
PERSONALIZED & ADAPTABLE WORKFLOWS
The design system had to flexibly support diverse industries, configurations, and future integrations - which would be facilitated by our OS.
PERSONALIZED & ADAPTABLE WORKFLOWS
The design system had to flexibly support diverse industries, configurations, and future integrations - which would be facilitated by our OS.
Business
Goals
Business Goals
Business Goals
Business Goals
SCALABILITY TO BUILD RAPIDLY
Create a reliable foundation to support rapid feature expansion and sustained product evolution of ARMOUR OS.
SCALABILITY TO BUILD RAPIDLY
Create a reliable foundation to support rapid feature expansion and sustained product evolution of ARMOUR OS.
STREAMLINE THE DESIGN & DEV CYCLE
The team needed a system that could streamline development, reduce design redundancy and optimise workflows.
STREAMLINE THE DESIGN & DEV CYCLE
The team needed a system that could streamline development, reduce design redundancy and optimise workflows.
ENHANCE COLLABORATION
Foster seamless alignment between design, development, and QA teams.
ENHANCE COLLABORATION
Foster seamless alignment between design, development, and QA teams.
Key
Challenges
Key Challenges
Key Challenges
Key Challenges
ABSENCE OF AN ESTABLISHED DESIGN SYSTEM
Without a prior design language, the system needed to be built from scratch to avoid inconsistent UI patterns and ensure uniformity across the platform.
ABSENCE OF AN ESTABLISHED DESIGN SYSTEM
Without a prior design language, the system needed to be built from scratch to avoid inconsistent UI patterns and ensure uniformity across the platform.
OPERATIONAL WORKFLOW CHALLENGES
Without clear design standards, the existing handoff process between design and development lacked structure, leading to inefficiencies, misalignments, and delays in bringing new features to market.
OPERATIONAL WORKFLOW CHALLENGES
Without clear design standards, the existing handoff process between design and development lacked structure, leading to inefficiencies, misalignments, and delays in bringing new features to market.
Process
Process
Process
Process
Process
The development of Forge followed a structured and collaborative process, ensuring the design system met the needs of all stakeholders and supported the platform’s growth:
The development of Forge followed a structured and collaborative process, ensuring the design system met the needs
of all stakeholders and supported the platform’s growth:
STEP 1 : RESEARCH & BENCHMARKING
STEP 1 : RESEARCH & BENCHMARKING
We began with a thorough analysis of industry-leading design systems, drawing insights on best practices and trends. Benchmarking against established systems provided a strong reference for Forge’s scalability, consistency, and usability goals.
We began with a thorough analysis of industry-leading design systems such as Google Material Design, IBM Carbon Design System, Untitled UI and
Shadcn UI - drawing insights on best practices and trends. Benchmarking against established systems provided a strong reference for Forge’s scalability, consistency, and usability goals.
We began with a thorough analysis of industry-leading design systems such as Google Material Design, IBM Carbon Design System, Untitled UI and
Shadcn UI - drawing insights on best practices and trends. Benchmarking against established systems provided a strong reference for Forge’s scalability, consistency, and usability goals.
STEP 2 : AUDIT & COMPONENT INVENTORY
STEP 2 : AUDIT & COMPONENT INVENTORY
Next, we conducted audits of concept screens and early prototypes to identify the core components required across Armour OS. This step enabled us to prioritize essential components and ensure cohesion across workflows from the outset.
STEP 3 : ESTABLISHING DESIGN PRINCIPLES
STEP 3 : ESTABLISHING DESIGN PRINCIPLES
We defined core principles such as Modularity, Scalability, Information First, & Consistency. These principles guided the creation of all components, ensuring they were flexible, future-proof, and easy to understand across the platform.
We defined core principles such as Modularity, Scalability, Information First,
& Consistency. These principles guided the creation of all components, ensuring they were flexible, future-proof, and easy to understand across the platform.
STEP 4 : SETTING UP THE FOUNDATIONS
STEP 4 : SETTING UP THE FOUNDATIONS
Typography
Typography
Color Systems
Color Systems
The Forge DS defines a structured color palette with specific roles for each color across Armour OS. Primary brand colors and neutral grays are assigned in varying shades to meet design needs for different components, while maintaining visual consistency.
The Forge DS defines a structured color palette with specific roles for each color across Armour OS. Primary brand colors and neutral grays are assigned in varying shades to meet design needs for different components, while maintaining visual consistency.
Semantics & tokens
Semantics & tokens
Layout & Spacing
Layout & Spacing
The Forge Design System uses a structured 12-column grid with defined gutters and margins to maintain visual balance and consistency across the platform. The modular layout allows components to scale seamlessly across screen sizes, providing a flexible foundation that supports content density for diverse Armour OS use cases.
The Forge Design System uses a structured 12-column grid with defined gutters and margins to maintain visual balance and consistency across the platform. The modular layout allows components to scale seamlessly across screen sizes, providing a flexible foundation that supports content density for diverse Armour OS use cases.
Iconography
Iconography
The Forge Design System utilizes the Phosphor Icon Set v2.0 for its versatile, clean aesthetic, aligning with Armour OS’s visual language. Each icon is selected and customized for clarity across contexts, ensuring consistency and scalability for a cohesive user experience across all screen sizes.
The Forge Design System utilizes the Phosphor Icon Set v2.0 for its versatile, clean aesthetic, aligning with Armour OS’s visual language. Each icon is selected and customized for clarity across contexts, ensuring consistency and scalability for a cohesive user experience across all screen sizes.
STEP 5 : BUILDING THE COMPONENT LIBRARY & TESTING
STEP 5 : BUILDING THE COMPONENT LIBRARY & TESTING
We developed a comprehensive set of components for our OS. Each component underwent thorough internal testing to meet accessibility standards, ensuring a cohesive and inclusive user experience
across the platform.
We developed a comprehensive set of components for our OS. Each component underwent thorough internal testing to meet accessibility standards, ensuring a cohesive and inclusive user experience
across the platform.
STEP 5 : BUILDING THE COMPONENT LIBRARY & TESTING
We developed a comprehensive set of components for our OS. Each component underwent thorough internal testing to meet accessibility standards, ensuring a cohesive and inclusive user experience across the platform.
STEP 6 : SHOWCASE, ITERATION & DOCUMENTATION
STEP 6 : SHOWCASE, ITERATION & DOCUMENTATION
In this phase, we focused on showcasing component designs to the team, iterating based on their feedback, and then building comprehensive documentation for future use. Each component designed, was meticulously crafted with annotations to ensure clarity in implementation.
In this phase, we focused on showcasing component designs to the team, iterating based on their feedback, and then building comprehensive documentation for future use. Each component designed, was meticulously crafted with annotations to ensure clarity in implementation.
STEP 6 : SHOWCASE, ITERATION & DOCUMENTATION
Expected Outcomes
Expected Outcomes
Expected Outcomes
ACCELERATED DESIGN & DEVELOPMENT
We anticipate a 20-30% reduction in development time due to reusable components and a unified design language, enabling faster feature implementation.
ACCELERATED DESIGN & DEVELOPMENT
We anticipate a 20-30% reduction in development time due to reusable components and a unified design language, enabling faster feature implementation.
IMPROVED COLLABORATION
With clearer guidelines and documentation, we project a 25-35% improvement in collaboration efficiency between designers, developers, and QA, leading to faster turnaround times during sprints.
IMPROVED COLLABORATION
With clearer guidelines and documentation, we project a 25-35% improvement in collaboration efficiency between designers, developers, and QA, leading to faster turnaround times during sprints.
ENHANCED USABILITY
With clearer guidelines and documentation, we project a 25-35% improvement in collaboration efficiency between designers, developers, and QA, leading to faster turnaround times during sprints.
ENHANCED USABILITY
With clearer guidelines and documentation, we project a 25-35% improvement in collaboration efficiency between designers, developers, and QA, leading to faster turnaround times during sprints.
BONUS OUTCOME - DARK MODE
BONUS OUTCOME - DARK MODE
Since we built everything from scratch, we leveraged Figma’s new Variables feature to easily implement dark mode for the entire system with minimal effort. This addition further enhanced the system’s usability and appeal to end-users.
Since we built everything from scratch, we leveraged Figma’s new Variables feature to easily implement dark mode for the entire system with minimal effort. This addition further enhanced the system’s usability and appeal to end-users.
Conclusion &
Learnings
Conclusion & Learnings
Conclusion & Learnings
BUILDING FOR SCALABILITY
Prioritizing scalability from the start has set Forge on a path to accommodate future growth, positioning it to support Armour OS as it expands and new products are integrated.
BUILDING FOR SCALABILITY
Prioritizing scalability from the start has set Forge on a path to accommodate future growth, positioning it to support Armour OS as it expands and new products are integrated.
THOROUGH DOCUMENTATION
Creating comprehensive documentation has proven invaluable for maintaining alignment across teams, helping to establish consistent practices as new components are added.
THOROUGH DOCUMENTATION
Creating comprehensive documentation has proven invaluable for maintaining alignment across teams, helping to establish consistent practices as new components are added.
CROSS TEAM COLLABORATION
Strong collaboration between the design, QA, and frontend teams has been a standout aspect of the project. The alignment and motivation across teams fostered a productive environment, allowing us to make steady progress on Forge’s development.
CROSS TEAM COLLABORATION
Strong collaboration between the design, QA, and frontend teams has been a standout aspect of the project. The alignment and motivation across teams fostered a productive environment, allowing us to make steady progress on Forge’s development.
Conclusion & Learnings
Current Status
Current Status
Current Status
Current Status
The Forge Design System is still in development, with regular iterations and ongoing collaboration between design, development, and QA teams.
Early internal feedback indicates that the system will significantly improve overall platform experience.
The Forge Design System is still in development, with regular iterations and ongoing collaboration between design, development, and QA teams.
Early internal feedback indicates that the system will significantly improve overall platform experience.