QIC Connect: A Unified Web Design System

To support Qatar Insurance Group’s digital transformation and transition into InsurTech, I led the creation of QIC Connect, a comprehensive web design system. Designed to unify and streamline the development of QIC’s digital products across Qatar and the UAE, QIC Connect ensures consistency in user experience, visual design, and functionality while accelerating product development timelines.

Challenge

Before QIC Connect, QIC’s web interfaces suffered from:

• Inconsistent Visual Styles: Disjointed designs created confusion for users and inefficiencies for developers.
• Fragmented Component Libraries: Recreating components increased development time and complexity.
• Scalability Issues: Adapting to new features and markets was resource-intensive and time-consuming.

Solution

QIC Connect is more than just a collection of components—it’s a structured design system that integrates:

• Visual Language: A cohesive brand identity tailored to regional and cultural contexts.
• Reusable Codebase: Shared component libraries that simplify development.
• Comprehensive Documentation: Guidelines to ensure consistency across design and development teams.

Personal Contribution

• Design System Creation: I led the design and development of QIC Connect, crafting a scalable structure that supports diverse regional needs.
• Component Design: Developed reusable UI components (e.g., buttons, forms, dropdowns) and ensured alignment with brand standards.
• Documentation & Collaboration: Created detailed documentation in Confluence to guide designers and developers, fostering cross-team efficiency.
• Figma Analytics Integration: Implemented analytics to track component usage, enabling data-driven improvements.
• Testing & Implementation: Applied QIC Connect to high-impact areas like policy payment pages, contact pages, and product pages, transforming user experiences.

Key Features of QIC Connect

• Flexible Design Approach: Components and templates are customizable, allowing for regional adaptations without compromising consistency.

  

• Multi-Level Structure: • Brand: Represents different regions or segments. • Product Group: Categorizes products for the market. • Product: Focuses on unique features of individual offerings.

  

• Centralized Documentation: Housed in Confluence for easy navigation and access across teams.

  

• Data-Driven Improvements: Figma analytics tracks component usage to prioritize updates and improvements.

  

Results & Impact (Q2 2024)

QIC Connect delivered significant outcomes:

• Improved Consistency: Unified design and functionality across all web products in Qatar and the UAE.
• Accelerated Development: Faster feature rollouts and reduced time-to-market using reusable components.
• Enhanced Team Efficiency: Streamlined collaboration between designers and developers, improving productivity and work quality.

Reflection

The development of QIC Connect was a pivotal step in advancing QIC’s digital ecosystem. This project reinforced the importance of creating scalable systems that not only enhance user experiences but also empower teams with better tools and processes. By integrating analytics and fostering collaboration, QIC Connect has become a cornerstone of QIC’s digital transformation, paving the way for future innovation and success.