Bingle Insurance's Transformation to an Atomic Design System

Bingle, the renowned Australian online car insurance provider, is known for offering straightforward and transparent car insurance policies to its customers. Bingle is a subsidiary of the Suncorp Group, a leading insurance group featuring prominent brands like Suncorp, AAMI, GIO, Apia, and Shannons.

During my tenure at Symplicit, Bingle started working with us on a comprehensive redesign of its Figma Design System.

Role: Senior UX/UI Designer

Tool: Figma

Motivation for the Design System Revamp

Bingle Insurance needed to transition from its current platform to AEM (Adobe Experience Manager) to align with other brands under Suncorp. This alignment allowed for quick and easy website management, consistent with all the other brands, such as Suncorp, AAMI, GIO, Apia and Shannons. The project called for an overhaul of Bingle's Design System and its sales website. The goal was to update the design to ensure a smooth, trouble-free migration to the AEM platform.

Bingle Insurance's strategic shift to the Adobe Experience Manager (AEM) platform was the main reason behind this redesign, aligning itself with the overarching Suncorp brand strategy. This move aimed to streamline website management and maintain consistency across all Suncorp brands. The project called for an extensive overhaul of Bingle's Design System and sales website to facilitate a seamless migration to the AEM platform.

Atomic Design Methodology

In this project, the overarching methodology employed to create the design system was the Atomic Design approach, a modular framework conceptualised by Brad Frost. The atomic design process breaks a design down into its minor components or atoms. It categorises design elements into atoms, molecules, organisms, templates, and pages. Collaborating closely with various stakeholders such as Product Owners, Content Producers, SEO teams, and Design Leads, the goal was to create a cohesive system while adhering to Bingle's brand guidelines and accessibility standards.

Source: https://atomicdesign.bradfrost.com/chapter-2/

Suncorp had different naming conventions for the various stages of atomic design but closely mirrored the atomic design structure and process. The structure we followed to create the Bingle design system was base (atoms), components (molecules), patterns (organisms), sections (template) and pages.

Base:

The first step to creating the Bingle design system was defining the base. Described as the foundational backbone, the base is the building block for the entire design system. It consists of elements like typography, colour systems, shapes and shadows.

Colour systems

Shadows

Typography

Components:

Building on the elements from the base, the next step was to start creating components, which is the core of the design system. Components are the most basic and smallest interface elements of the design system, such as buttons, accordions, modals, etc.

Accordion

Buttons

Input

List

Link

Table

Patterns:

Patterns are relatively more complex combinations of components that work together to create a more complex design element. Patterns can function on their own, forming distinct sections of an interface. For example, we combined buttons and headers to create a form.

Banners

Product List

Multi-level navigation

Call to actions

Sections:

Sections are the basic structure of a page that expresses the design's content structure. Sections help you create a consistent layout across the pages. These sections can function independently, forming distinct sections of an interface. The purpose of sections is to create a unified template using base, component, and pattern by arranging them on the page in a particular order.

Header

Footer

Product tiles

Frequently Asked Questions (FAQ)

Page:

Pages are the final step of the design system that utilises the components, patterns, and sections to create a unified and visually consistent user interface. While not technically part of the design system, pages ensure a cohesive look and feel across Bingle's digital presence.

I crafted a fully responsive and visually appealing homepage and product page, ensuring seamless compatibility with Adobe Experience Manager (AEM).

Bingle home page created using the new design system

Benefits of Atomic Design System

1. Consistency in design

With atomic design as the single source of truth, it is easier to see which components are used for different website parts. This reduces the likelihood of creating duplicate components with different looks designed and used for the same purpose, creating a more cohesive user experience.

2. Flexibility

In a well-structured design system with base, components, patterns and sections, it becomes simpler to identify reusable components within the design system and understand how they can be combined to create new patterns or sections.

3. Reusability

Atomic design enhances the efficiency of designers by providing them with a pre-existing library of components to draw from. This eliminates the need to create designs from scratch, accelerating the design process.

4. Scalability

Atomic design is highly scalable, allowing for effortless addition or removal of components. This reduces the amount of design work required to update the design system. It simplifies the process by ensuring that any modifications made to a component are reflected consistently across all other instances.

5. Better maintenance and documentation

With a centralised design system, only one primary component attribute needs to be updated, and the change can be pushed to all other components across the design system and instances across the site. Similarly, the removal of components also can be pushed across the system instantly.