ICANN
Design System
Role
-
Senior UX Designer
Team
-
1 PM
-
1 Lead UX Designer
-
1 Senior UX Designer
-
1 Quality Analyst
Duration
-
5 Months
Duties
I created this entire thing, I synced with the lead when I need guidance. However, I was the sole designer doing the work on this project.
Product Overview
The team was tasked with migrating ICANN design files from Sketch to Figma while performing quality assurance reviews and repairing inconsistencies throughout the process. During the migration effort, we identified a larger opportunity to create a scalable design system that could help the organization operate more efficiently and maintain greater consistency across digital products.
​
We audited and organized the existing component library, grouping patterns and assets into structured documentation and reusable system pages. Through multiple rounds of iteration and layout exploration, we refined the system architecture and established a solution that best aligned with ICANN’s operational and design needs.
Base Elements
To establish the foundation of the design system, we first evaluated the experience from a high level perspective to better understand how the system should be structured and maintained at scale. Similar to the framework of a book, the system required a set of core foundational elements that would connect and unify the entire experience, while still supporting more detailed guidance and documentation within individual pages.
​
These base elements created consistency across the system and established the structure needed for ICANN to more efficiently manage, scale, and evolve its digital products over time.
File Structure
Clear organization and labeling throughout the design system helped users quickly locate the components, documentation, and guidance they needed. The structure was intentionally designed to support scalability, improve collaboration, and create a more efficient workflow for both designers and developers working within the ICANN ecosystem.
Key sections of the design system included:
-
Change Log
A centralized area used to document updates, revisions, and system changes to maintain transparency and version tracking. -
Foundation Elements
Core brand and style guidance covering color, typography, iconography, and logo usage. -
Getting Started
Introductory documentation designed to help new users quickly understand how to navigate and utilize the design system effectively. -
Canvas and Annotation
Guidelines for canvas sizing, spacing, gutters, and annotation standards to support consistent design delivery and developer handoff. -
Text Styles
Documentation for typography usage including headers, body copy, links, and supporting text hierarchy. -
Buttons
Standards for button usage, including interaction states such as hover, active, and disabled behaviors. -
Navigation and CTAs
Guidance for headers, footers, navigation patterns, and call to action implementation across experiences. -
Forms and Search
A comprehensive library of form related components and search patterns used throughout the platform experience. -
Tables
Standards and usage guidelines for structured data tables and spreadsheet style layouts. -
Cards
Reusable card patterns ranging from image over text layouts to side by side content structures, along with best use case guidance. -
Multimedia
Documentation covering video, audio, carousel usage, and other rich media experiences. -
Widgets, Social, and Banners
Guidance for hero banners, social components, promotional messaging, and additional modular widgets.
Within each page, content was further organized to improve usability and efficiency. Artboards were clearly labeled with descriptive titles, and components were positioned outside the main working areas for faster access and easier navigation throughout the system.
Foundation Elements
Foundation elements established the core visual language and standards that guided the entire ICANN design system. When thinking about navigation and usability within the system itself, it became clear how critical this information would be for both new users learning the framework and experienced team members needing quick, reliable access to reference materials.
​
Beyond simply displaying assets such as logos, typography, colors, and iconography, the system also provided guidance on proper usage, behavior, and implementation. This ensured consistency across teams while helping reduce ambiguity during design and development workflows.
​
To further improve discoverability and navigation, I introduced clear and highly visible board labeling throughout the system. This created a more organized experience and allowed users to quickly identify sections, components, and supporting documentation within the larger framework.
Getting Started
The “Getting Started” section was designed to help users understand the foundational principles of building within the ICANN design system. This included guidance on the preferred grid system, layout structure, and an overview of the style library to ensure consistency across digital experiences.
​
Because the system was intended to support more than just designers, I focused heavily on accessibility and usability for cross functional teams. Documentation included practical guidance for users who may have had limited experience with design systems or Figma, including workflows for developers needing to inspect components, review spacing, or reference implementation details.
​
The goal was to create a design system that felt approachable, scalable, and easy to use across the entire organization, helping improve collaboration between design, development, and stakeholder teams.
Board Structure
Board structure focused on creating a clear and repeatable framework for organizing information within each section of the ICANN design system. Each board was intentionally structured to guide users through the purpose of a component, the rules governing its usage, and examples of how it should be implemented across experiences.
​
This approach combined documentation, visual examples, and reusable components into a single organized workflow, making it easier for designers, developers, and stakeholders to quickly understand patterns and apply them consistently. By pairing usage guidelines with real world examples, the system became more approachable, scalable, and actionable for teams across the organization.
Components
Components served as the backbone of the ICANN design system, creating the foundation for consistency, scalability, and efficient collaboration across teams. Each component was carefully built with multiple variations and states to support a wide range of use cases while maintaining visual and functional consistency throughout the platform.
Beyond simply creating reusable assets, the system also emphasized best practices and usage guidance to help teams better understand when and how components should be implemented. To improve organization and long term maintainability, each page included a dedicated component housing area at the top, allowing users to quickly locate, reference, and reuse assets.
​
This structure was intentionally designed to support future scalability, making it easier for ICANN teams to create new components, update existing patterns, and maintain organized categories as the system continued to evolve over time.
Rules
Establishing dedicated usage rules helped ensure that components and patterns within the ICANN design system were applied consistently and intentionally across experiences. Beyond explaining what a component was and how it functioned, the documentation also clarified when, where, and why it should be used.
​
This additional layer of guidance helped reduce ambiguity for both designers and developers, creating a more scalable and maintainable system. By defining best practices and usage expectations alongside the components themselves, teams were able to make more informed design decisions while maintaining consistency across the organization’s digital products.
Samples
Samples were used to visually demonstrate the different states, variations, and behaviors of the components within the ICANN design system. These examples provided teams with a clearer understanding of how components should appear and function across different use cases and interaction states.
​
By showcasing real implementation examples alongside documentation and usage rules, the system became easier to understand, reference, and apply consistently throughout the design and development process.
Examples
The examples section focused on showcasing how components and patterns were applied within real product experiences across the ICANN ecosystem. These examples helped provide practical context for how the design system was intended to function within live environments.
​
By demonstrating real world implementation, teams were able to better understand component behavior, layout patterns, and interaction usage beyond isolated documentation, helping reinforce consistency and usability across products.
Complete Board
The complete board structure was designed to create a clear and intuitive documentation flow within the ICANN design system. From left to right, the layout began with rules and supporting samples, pairing these sections together because of their direct relationship. This structure allowed users to quickly understand both the guidance behind a component and its associated visual states at the same time.
​
To improve readability and navigation, a subtle blue divider was introduced to separate foundational guidance from implementation examples. The examples section was intentionally positioned independently to communicate that these were reference applications rather than strict limitations of component usage. This distinction helped reinforce flexibility within the system while maintaining clarity and organization throughout the documentation experience.
Final Design System
