Similar to any global company, Manulife has business functions with multiple creative teams across different geographical regions. Time-zone differences cause teams to design products in isolation of each other resulting in inconsistencies and misalignments to the greater brand and design company vision.

The challenge that Manulife faces is that significant design and development time & costs is wasted due to the lack of collaboration and communication process which results in multiple teams doing duplicate work. With no standardized design process and tooling, quality control is difficult to maintain. In addition, with no central repository for all designs, design outputs and standards are inconsistent. With multiple versions of similar products, this dilutes the brand image and creates a greatly disjointed customer experience which impacts Manulife’s overall business performance metrics.

The Connected Design System (CDS) aims to eliminate all these inefficiencies. CDS is a tool that provides a single source of truth for all design components while also streamlining the design workflow. Having a centralised location for all design assets, this improves the consistency and quality of design and experience for our digital products. With teams closely connected and collaborating, it transforms the way resources are allocated while optimising costs.

The challenge has been to find a balance between governing design and development without hindering innovation and creativity. With teams being disconnected from each other, Manulife’s strategy was to develop a system and process that reduces design costs and improve the Manulife brand consistency.

The approach to developing the Connected Design System (CDS) involved applying human-centered design principles to ensure all design teams were represented in the creation all foundational design components. Component creation follows an iterative process which ensures that designs are validated by teams who actually use them. CDS also follows an atomic design approach which is a methodology to create components in a hierarchical manner.

CDS also contains the code version of all the same fundamental design components. This library allows developers to easily call required components in code and save the hassle of building components from the ground-up.

CDS is a system that caters towards the challenges from designers because all components are pre-built. Designers don’t have to worry about inconsistencies, they can focus on designing great experiences. With a streamlined handoff process for development, developers also have a library of components they need, so this significantly reduces the operating costs.