My role
Senior UX Designer
Company
Years
As ING's design system matured, components alone were no longer enough. Teams knew how to use buttons and menus from the design system, but not always how those pieces should come together to create consistent experiences. To bridge that gap, I introduced pattern documentation—a layer that connects components into complete user journeys. More than documentation, patterns became a shared language for design and engineering, helping teams create familiar, scalable experiences across products, platforms, and markets.
Disciplines involved (A-Z)
Product — Design — Development
The Challenge
As products and teams scaled, the same components were being assembled into different experiences. Navigation, search, onboarding, and other key interactions increasingly depended on individual interpretation rather than shared decisions. Without clear guidance at the pattern level, teams began interpreting experiences differently, making it harder to maintain a unified user experience, achieve design-code parity, and avoid unnecessary variation across products that needed to share an experience.
Growing Up
the System
Problem statement
ING required a solution to ensure that critical user experiences, including navigation, search, forms, and onboarding, consistently functioned across different products, markets, and platforms.
This solution should maintain design-code parity, minimize interpretation during implementation, and transform recurring experience decisions into reusable patterns that can be consistently applied, managed, and scaled throughout the organization.
Challenge #1
Components alone don’t create alignment
The design system provided reusable components, but components alone could not guarantee a consistent user experience. Multiple teams could use the exact same building blocks and still create entirely different navigation flows, interaction models, and content hierarchies.
The challenge was no longer defining individual UI elements—it was establishing shared expectations for how those elements should work together.
Challenge #2
Non-Negotiable Decisions
Critical experiences, like navigation, need a shared foundation. Patterns allow local adaptation but establish common principles, behaviors, and structures. Without agreed-upon patterns, teams create variations that lead to fragmented experiences.
To achieve consistency, key behavioral decisions must be reusable and shared across products and markets.
Challenge #3
Complexity grows fast
Every new product, market, team, and implementation introduces opportunities for drifting. Without a shared framework, organizations gradually accumulate experience debt:
- similar problems solved in different ways,
- duplicate effort
- increasing governance overhead.
Challenge #4
Design Code Parity
While component documentation helps teams build individual pieces correctly, achieving design-code parity requires alignment on how those pieces work together. Behavior, hierarchy, interactions, and responsive adaptations all need to be defined beyond the component level.
Challenge #5
Achieve familiarity
Consistency provides the foundation for creating coherent experiences across products, platforms, and teams. The real outcome is familiarity. Familiar interactions reduce cognitive load, increase confidence, and help users accomplish tasks more efficiently.
The challenge was creating experiences that felt immediately recognizable regardless of where users encountered them.
A System to
Document
Solution
Rather than documenting only components, we introduced documentation for complete user experiences. Patterns document how multiple components work together to solve a recurring user need.
Each pattern establishes shared expectations around structure, behavior, composition, accessibility, and implementation. The framework was built around a predictable information architecture that documents:
- Purpose and intent
- Pattern architecture
- Structure and composition
- Behavior and interaction logic
- Configurable options
- Accessibility considerations
- Best practices and examples
Less chatter, More pattern
Global Header Pattern (web)
The Global Header became one of the first patterns documented using the new framework. Its purpose extends beyond navigation. The pattern helps users understand where they are, where they can go, and how to switch context when needed. The documentation defines how components such as the Utility Bar, Navigation Bar, Flyout Menus, Segment Switcher, Search, and Locale Selector work together as a single system.
By documenting both behavior and rationale, the pattern establishes a shared contract between design and engineering, ensuring navigation behaves consistently regardless of product or market.
Result
Pattern documentation transformed reusable components into reusable experiences. Instead of solving the same interaction problems repeatedly, teams gained a shared framework for designing, implementing, and evolving critical journeys. The result was:
- Stronger alignment between design and engineering
- Design-code parity
- Reduced interpretation during implementation
- Consistency across products and markets
- A scalable foundation for future patterns
The End
Delivered
- Documentation Strategy
- Documenation Library
- Cross-functional collaboration with Design, and Engineering
Personal Note
In large, global companies, it's crucial to recognize that change occurs incrementally and can be challenging to implement. Celebrating small victories is essential to maintain momentum and encourage ongoing progress.
Featured work
UX and EyeCandy.
© All rights reserved. Images belong to the brands.