ICS Websites
Design System

ICS Websites
Design System

Client

International Card Services (ICS)

Year

2025

Collaborators

UX Design: Anneloes ter Harmsel, Herald Boer

Contributed to the restyling of core website components and the development of a multi-brand web design system, building on ICS’s existing multi-channel Figma foundation to support a large-scale platform migration.

Web

Web

Design System

Design System

Commercial

Commercial

As part of a broader platform migration, multiple ICS-owned websites were consolidated into a single technical and design framework—creating the need for visual consistency across brands without disrupting established user flows. The migration created an opportunity to introduce the newly defined brand identity to the web channel, where it had not yet been applied, while carefully managing risk within a live commercial environment.

My role focused on translating the new brand identity into the existing web component structure, ensuring a cohesive visual update while maintaining continuity throughout the migration process.


An initial concept presentation was used to align stakeholders by visualizing how key brand elements could be applied consistently across web components, setting clear direction before system-level implementation.

An initial concept presentation was used to align stakeholders by visualizing how key brand elements could be applied consistently across web components, setting clear direction before system-level implementation.

An initial concept presentation was used to align stakeholders by visualizing how key brand elements could be applied consistently across web components, setting clear direction before system-level implementation.

1/2

Before and after of Hompage

1/2

Before and after of Hompage

Given the scale of the migration, user-experience changes were intentionally minimal and highly targeted—limited to areas that directly supported conversion and brand values, while preserving existing structures elsewhere.

The homepage refresh demonstrates how brand updates were introduced without disrupting established navigation patterns or content hierarchy.

1/2 Before and after of Hompage

An existing client-owned variable library—covering primitive values for typography, color, and spacing across multiple brands—was used as the foundation to ensure cross-channel alignment and long-term scalability.

New values were introduced only where necessary to support accessibility improvements and the updated brand identity, and were fully documented to support handover and future extension.

An existing client-owned variable library—covering primitive values for typography, color, and spacing across multiple brands—was used as the foundation to ensure cross-channel alignment and long-term scalability.

New values were introduced only where necessary to support accessibility improvements and the updated brand identity, and were fully documented to support handover and future extension.

On top of the primitive foundation, a semantic variable layer was defined specifically for web usage—enabling consistent application of design intent while allowing individual brands to express their identity within shared constraints.

Clear documentation, including visual examples, was created to explain color variables and usage rules as part of the final design system deliverable.

Example pages illustrate how the system supports the main ICS brand alongside multiple sub-brands, demonstrating flexibility without fragmenting the underlying structure.

Page examples of a main brand (ICS) and two sub brands.

Page examples of a main brand (ICS) and two sub brands.