How the “QIC Connect” Web Design System Is Streamlining Digital Product Development in Qatar and the UAE
Hi, I’m Alex Andreev, Lead Product Designer at QIC digital hub. We are focusing on the digital transformation and the conversion from insurance to InsurTech in MENA. As a part of our digital transformation strategy, we have started a new journey towards the full digitization of our products and services with a customer-centric approach that allows our customers to be in control of all their insurance needs the way they like, anytime and from anywhere.
To maintain these large-scale projects we needed to create a comprehensive design system. In this article, I’m excited to share insights into how our “QIC Connect” web design system streamlines digital product development in Qatar and the UAE. This tool has become an integral part of our work, supporting the look and functionality of web products for different countries and helping us to implement new features for our clients more efficiently.
Why we chose to develop QIC Connect
Our web interfaces had inconsistent appearances and functionality, which created difficulties for both users and developers. To tackle these issues, we created QIC Connect. This solution focused on addressing technical and design problems, while also improving the overall user experience and interface of our web products.
It’s important to note the difference between UX/UI and a web design system. UX/UI is a collection of visual components, whereas a web design system is much more complex. It includes:
- The visual language of the system
- Component codebase for creating design elements such as buttons, forms, and rules
- Documentation to ensure the consistency and functionality of the system.
QIC Connect is not just a tool. It’s a key element of our success, ensuring the quality and consistency of all our products for users in different countries.
Using a unified solution with multiple interfaces will allow us to reduce the number of recreated components. It will also allow us to maintain visual consistency across interfaces. We are currently using our design system in several different contexts. One of the main goals is to integrate it with new pages and features on our official website qic.online, including interfaces for personal profiles. These implementations serve as a testing ground for accessing and improving our component codebase.
How we use QIC Connect in our web interfaces
Let’s closely examine our first version of QIC Connect, which serves as the foundation for our future developments. In the image below, you can witness how QIC Connect is being used in real-life examples of our interfaces.
This image shows the changes on the policy payment page after applying QIC Connect. You can easily see the difference between the previous and updated versions. As well as improving the user experience, this is an essential part of our design system:
Speaking of product pages, the contact page has become our first testing ground for applying QIC Connect. In the first image, you can see the contact page without the application of QIC Connect. This reminds us of the problems we encountered due to inconsistencies in visual style and user experience. For example, some users had difficulty locating offices on the map and preferred to see them in a list format:
However, in the second image you can see the changes that occur after applying QIC Connect. The contact page becomes more visually consistent thanks to our brand standards and user interface design. It also makes it easier for our users to navigate and find their way around the interface:
Let’s look at a few more examples of product pages. In the picture below, you can see the mandatory health insurance page without QIC Connect:
And here is the version with the improved interface design, as we implement new graphics and a more consistent strategy for displaying forms:
Structure of QIC Connect
Our design system is made up of three levels:
- Brand
- Product group
- Product
The Brand level is used to represent different regions or segments, while the Product group level categorizes our products in the market. Lastly, the Product represents individual products and their unique features. This structure allows us to tailor each region’s products and designs to meet specific market needs:
Design approach
The design approach is the foundation of QIC Connect. We aim to make it flexible and customizable in both design and content development. This means that specific components or templates can be modified without compromising the integrity of the system. The hierarchy of patterns, templates, components, and variants ensures the stability and consistency of our design system.
Documentation
We maintain the documentation of our design system in Confluence, which is a simple and inexpensive documentation format that all teams have access to. We have set up easy navigation to ensure that all team members can quickly find the information they need. This helps developers and designers understand both the functional and visual aspects of each component:
Confluence allows us to visualize and manage our component plan, providing a clear overview of our development, design, and implementation plans for new components, as well as their current status. With this platform, everyone can stay informed about the development of our design system:
We utilize analytics in Figma to collect data on the usage frequency of our design components. This helps our design team identify which components require more attention and improvement in the future. By prioritizing improvements to components that have a significant impact on our design, we can ensure better overall design quality:
Outcomes
QIC Connect offers three main benefits to our development process:
- Our clients can expect a consistent and seamless user experience across all our web products in the future.
- Our web products will have faster time for feature development as we will use the same components in both design and code. This will reduce time to market and enable our products to adapt to changes more quickly.
- For designers, it means better tools and guidelines, which should improve the quality of their work.
These outcomes represent just the beginning of our journey with QIC Connect. As we continue to evolve and refine our design system, we’re excited to unlock even more possibilities and drive success for our teams and our customers.
