Telenet - WINK Design System

Situation

Wink, Telenet & BASE's multi-brand design system, required migrating its component library from legacy Figma styles to a scalable architecture using design tokens and Figma variables. This was key for maintainability, future scalability, and enhancing consistency across diverse products and multiple platforms.

Each component underwent rigorous review for:

• Necessity: Validating its essential role versus existing patterns.
• Documentation: Ensuring clear, comprehensive usage guidelines.
• Accessibility: Meeting WCAG AA/AAA for an inclusive, user-friendly experience.

Key challenges

Key challenges included achieving UI designer alignment, meeting diverse user and brand needs across product ecosystems, and balancing component complexity (variants/properties) for optimal usability.

My approach & actions

My iterative process, centered on collaboration and user-centricity, ensured the evolved design language met high standards through:

Audits & Stakeholder Collaboration

Conducted design audits (production usage, Figma analytics) and collaborated with UI designers via interviews to gather insights, identify pain points, and define component requirements.

Documentation

Ensuring clear, comprehensive usage guidelines.

Research & Ideation

Benchmarked leading design systems and best practices for UX and accessibility, informing ideation to enhance component functionality, flexibility, and alignment with our design language.

Figma Design & Prototyping

built responsive components in Figma using variables linked to design tokens (contributing new tokens as needed) for precise theming and ease of use (auto layout, essential properties only). Developed interactive prototypes for complex interactions to validate usability.

Accessibility

Ensured WCAG AA/AAA compliance by integrating accessibility (semantic structure, color contrast, keyboard navigation, ARIA) into component design for inclusivity.

Engineer Collaboration

Partnered with front-end engineers for technical feasibility and performance. Provided detailed specs for complex interactions and conducted post-development testing to ensure design fidelity and quality.

Comprehensive Documentation

Authored clear usage guidelines, do's/don'ts, accessibility notes, and token mappings, empowering teams to efficiently build solutions using the design system.

Result

This modernization yielded significant improvements:

• Cohesion & Quality: Achieved superior visual and functional consistency across diverse products via design tokens and Figma variables, contributing to high-quality, user-centric interfaces.
• Accessibility: Ensured WCAG AA+ compliance, simplifying the creation of inclusive products.
• Efficiency: Streamlined workflows with a predictable, user-friendly library and clear documentation, reducing ambiguity and time-to-market.
• Scalability: Established a token-based foundation for continuous evolution and efficient support of growing product ecosystems.

Responsibilities

• Responsible for the end-to-end design of components for Telenet & BASE, optimizing for accessibility, usability, and performance.
• Create new UI components with the necessary documentation about the component to make sure designers and developer know how it should be used.
• Collaborate with component developers to ensure feasability, consistency and improve the way of working.
• Collaborate with designers who are using our design system and ensuring their needs are met.
• Present achieved work and designs during the sprint review meetings.
• Review requests for new UI components and discuss if they should be added to the system or if there is an existing component that can be used instead.
• Organise workshops to improve the way the design system is structured. Resulted in the creation of add-on libraries next to our core component library.
• Contributed to the roadmap of the design system.
• Created and maintained a changelog for the component library.
• Contributed to an improved way of working in the team with designers an developers. We started working with a fixed release schedule each sprint where we published new components and notified designers and developers on what's new.
• Teach designers and developers from other teams at Telenet about the design system.