Aon is a global professional services firm that provides a wide range of risk, reinsurance, retirement, and health solutions. At Aon I updated and maintained the design system, solidifying visual language and documented the guidelines.
Building an effective design system requires more than just creating components. Success depends on establishing a strong foundation through thoughtful token architecture, well-structured sub-systems, clear foundational styles, and positive team relationships.
Unify design across Aon products to provide a harmonious experience that increases efficiency, minimizes error and decreases friction in the user journey.
Provide a source of truth for design, development and QA that uses the same terminology, patterns and components, ultimately resulting in increased efficiency and productivity.
Reduce the number of decisions designers need to make, so we no longer need to search for the right files and elements, deciding if they fit into the new design.
Atomic design allows us to create user UI components in a deliberate and hierarchical manner. In chemistry, atoms combine together to make molecules, the molecules combine together to make organisms and so on. We have applied the same principles to UI elements. The atoms (like typography and color) are combined with other atoms (like input fields) to create a molecule (like a search menu) or an organism (like a contact form).
Basic HTML elements that can't be broken down any further
Groups of UI elements that function together as a unit.
Complex groups of Atoms and/or Molecules, often forming a section within an interface.
An empty page layout that content of a page can be populated with.
A layout made up of atoms, molecules and organisms with product-specific content.
Aon’s Digital Design System relies on the adoption of core foundational elements to achieve consistency within an application and across products
The color palette was created to align with the brand's identity while being versatile enough to accommodate various use cases. We defined primary, secondary, and neutral colors, along with their variations for different states (e.g., hover, active). Each color was carefully chosen for its contrast and legibility, making sure we met accessibility standards right from the start.
8 point layout grid system provides a visual hierarchy to elements and drives consistent scalability with fewer decisions to make while maintaining a quality rhythm.
Design Tokens are the smallest, most basic building blocks of the design system. They include values for color, typography, spacing, and more, which can be reused across all components and platforms. By centralizing these values, I ensured that any updates or changes could be implemented across the entire system with minimal effort.
These foundational elements were documented in our design system's guidelines, making it easy for designers and developers to stay on the same page. With this strong foundation, the design system can grow and evolve while keeping the user experience consistent.
Design Tokens are like saving your favorite design details - colors, spacing, and more. They help your design stay cohesive and clean-cut in all instances of use.
Design Tokens help make sure your designs look the same everywhere, but it can be adapted to suit particular needs. Think of them as pieces you can use again and again, making design both simple and matching.
Other designers can click to adjust parts, easily switch between items, and change words. These features help even those new to design create work quickly
The components in our design system are the real workhorses, bringing all the foundational elements together into reusable, modular pieces that can be quickly assembled to create any user interface. Each component is designed to be flexible, consistent, and accessible.
We started with the most common UI elements—things like buttons, forms, and cards. These basic components, built using our design tokens for color, typography, and spacing, are the building blocks for more complex structures. By standardizing these elements, we made it easier for designers and developers to maintain consistency across different products and platforms.
Beyond the basics, we also created more complex components like navigation bars, modals, and dashboards. These are essentially groups of simpler components working together, but they’re still flexible enough to be customized for different use cases. Every component was designed with adaptability in mind, so it can fit into various contexts without losing its integrity.
Modules in our design system are the larger, more complex structures that combine multiple components to create functional sections of the user interface. These modules are where the real magic happens—taking the foundational elements and components and assembling them into more comprehensive and interactive parts of our product.
Think of modules as the building blocks for key sections of our product. Because they’re made up of pre-built components, these modules are easy to tweak and customize, which speeds up the design and development process.
