Company: Manulife Insurance
Project: Manulife design system
Area of expertise: Product design, Branding
Background
Manulife Financial Corporation is a Canadian multinational insurance company and financial services provider. As of 2020 the company had more than 35,000 employees, over 98,000 agents, and thousands of distribution partners, serving almost 30 million customers. Manulife’s principal operations are in Asia, the United States, and Canada where they have served customers for more than 155 years.
Challenge
Manulife's strategic goal is to become a digital leader in the insurance world. In order to make this happen, the company needed a single source of reference for unifying, adapting, and maintaining all of its 200 websites, in other words, a functional design system.
The first step was to define who would be using the design system and how. We mapped platforms, tools, and libraries used by all cross-functional teams to understand the big picture. Secondly, we organized and equipped the core team with tools necessary to run the design system as a product (agile framework, core team structure and responsibilities, tool stack).
When the team was set up, we divided our work into two major phases. First, we turned several existing separate sketch UI libraries into one which could serve all of Manulife’s 200 websites. Then we transformed the sketch UI library into a fully functional design system, accessible to cross-functional teams (development, publishing, business, etc.).
The cross-platform differences were affecting our effectiveness. To address that, we conducted an audit of component libraries used by AEM (publishing team) and MUX Storybook React (development team) to eliminate discrepancies in naming conventions and component characteristics.
After the audit we proposed a flexible structure to serve all the tools and platforms used in the development process. Our focus was on simple yet intuitive hierarchies and naming conventions.
Brand Style Guide to Design System
One key challenge was to rigorously translate basic brand assets (colours, typefaces, icons, etc.) into the digital realm – with accessibility in mind.
Manulife’s colour palette is bright and bold. However, it mostly serves printing needs. We worked with the global branding team in adjusting the colours to meet Ontario’s accessibility regulation (AODA). The outcome was a distinctive design system palette – fully accessible and on brand.
We conducted an audit of the new bespoke typeface Manulife JH Sans and concluded that it needed optimizing in order to enable better legibility and coherent rendering in different browsers. As a benchmark we used Google’s Roboto.
Icons posed a similar challenge like colours. They were more like wayfinding pictograms in a traditional sense than modern UI icons. To make them consistent we did a bit of graphic refinement.
We structured icons in two categories to better distinguish their roles: “Information” covered all decorative icons meant to support textual content; “action” covered all interactive icons.
Impact
Our approach yielded intuitive UX patterns, balanced voice, clear visual hierarchies, and minimalist UI.
In addition, we organized simple yet effective guidelines around design and tech particularities to provide better understanding for business stakeholders.
Credits: Manulife design team
“Jovan quickly impressed us with his thorough, considered yet creative approach to design and became a valuable colleague as well as the ‘go to’ for questions, feedback or advice. He has contributed substantially to our design system.”
— Richmond Sedcole, AVP, Human Centred Design at Manulife