Creating an enterprise-level design system for unifying Notifed’s product ecosystem.
The Foundry Design System was a comprehensive atomic design system for unifying disparate design languages across Notified’s diverse suite of digital products. The core vision for Foundry was a visually cohesive, accessible, and scalable design system with maximum design flexibility that would enable product teams to create more inclusive and consistent design solutions across the entire Notified product ecosystem. As the Design System Architect and Senior Product Designer, I led the design system strategy and execution from the ground up, establishing design token systems, scalable design patterns, and component libraries to support multiple product teams and roadmaps. I also spearheaded documentation efforts and worked in-depth with front-end engineers to scale and refine design system components, ensuring pixel-perfect, accessible (WCAG-compliant) implementation across web and mobile platforms.
- Client Notified
- Industry Event Technology
- Team Jennergy
- Role Design System Architect, Lead Product Designer
- Product Enterprise Level Design System, B2B Event Management Platform
Designing a WCAG-compliant color system with scalability and flexibility at its core.
The Foundry Design System’s core values—Flexibility, Scalability, and Accessibility—drove the architecture of the color system. We decided on a percentage-based color scale system that used opacities for text and solid colors for backgrounds to support a wide range of color variations and user interface elevations. The percentage system of 1-100 also created a consistent framework for design token naming conventions and was flexible for future needs. Secondarily, using opacities for text and UI elements instead of solid colors ensured that a single color could remain WCAG-compliant across multiple background elevations, expanding the creative flexibility for the various design teams without sacrificing accessibility. This approach also simplified the introduction of new color variables into the system by reducing the number of base colors required to serve multiple contexts, resulting in a system that could quickly scale as product needs evolved.
Meeting the needs of multiple product teams and an existing component ecosystem.
Understanding the needs of multiple product teams was essential for aligning the design system with existing components throughout the organization, so we conducted in-depth collaboration to understand current workflows and product pain points. The two most significant challenges uncovered were wide variances in component sizes across products for essential elements like buttons and inconsistent component usage for similar tasks. To address these issues, we created a consistent sizing framework and a standard set of flexible components to support existing product needs while accounting for edge cases without adding unnecessary complexity. Many of the company’s existing products also loosely incorporated material design in at least some capacity, so we modeled the core structure of components for the Foundry Design after Material Design to reduce rework, enable smoother integration across various teams, and support seamless implementation with existing products.
Scaling up the component system to support core functionalities across various products.
With the overarching goal for Foundry being cross-platform consistency, replacing fragmented, inconsistent, and product-specific design solutions meant that design system components needed to meet or exceed the pre-existing functionality requirements of various features. To achieve this, we began scaling the component system, focusing on creating standardized components that supported core functionalities used consistently throughout the product ecosystem, such as inputs, cards, tables, navigation, dialogue menus, alerts, data visualizations, etc. This work allowed product teams to seamlessly implement these new components into existing features for more consistent design patterns without losing functionality.
Streamlining the development handoff process with comprehensive design system documentation.
With multiple global development teams working across conflicting time zones, documenting component variants, states, and usage guidelines was essential for smooth handoffs, even without the design team. To streamline this process, we centralized all documentation within Figma, creating a single source of truth accessible to all product teams. This approach allowed each product design team to export documentation standards directly from Figma for individual components, ensuring clear, consistent communication with development teams and fostering efficient collaboration.
Creating the Experience 365 events platform using the Foundry Design System.
Although my primary role was leading the design and implementation of the Foundry Design System for Notified's various digital products, my role as the Lead Product Designer for the Experience 365 product helped drive much of the design systems' growth and evolution. The Experience 365 platform was a white-label event and community platform for creating and managing events of every scale on a single platform, from small weekly webinars to large-scale hybrid events with thousands of attendees. Being the lead designer for the Foundry Design System and Experience 365 product team gave me a unique opportunity to use the system in a real-world product design context to create new features. This insight into using the design system in real-life scenarios helped me ensure that new components, patterns, and styles were flexible enough for many situations and were easy to use with design workflows.
