Team
1 Product Manager
4 UX Designer
Role
Senior UX Designer
User Research, Usability testing, Documentation, Interaction, Visual design
Background
Manulife is a trusted insurer rooted in tradition dating back to 1887 when it was founded. Throughout time, we have always looked for ways to better serve our customers. With the rise of the digital age, we saw an opportunity to fully embrace change and deliver value for our customers' ever-growing demands and needs.
Challenge
With a global presence spanning multiple franchises and regions, our brand identity was fragmented and often confusing. Simply put, our websites and apps, ranging from Asia to North America, were inconsistent, outdated, and unresponsive. Our challenge was to bring everything under one umbrella and achieve unity across the inconsistencies.
Goals
- To gain consistency and trust
- Create strong value
- Increase speed and scale
- Measure impacts
Process
- Audit existing components
- Research on other design systems
- List out components
- Plan a timeline
- Research and discuss components
- Create components
- “Design” the design system
- Documentation
Audit Existing Components
- We audited every single component from every page, app, and internal application, and identified the component type.
- We listed down the different components and patterns that we identified.
- We took screenshots of pages and organized them under the respective component type (also organized by application).
- We added page links as comments for ease of access.
- By using this method, we can easily identify design inconsistencies.
Research
The following design systems were researched to shape the Connected Design System. Our favorite systems are in ❤️.
- Atlassian ❤️
- Ant Design ❤️
- IBM
- Zendesk
- Workday
- HubSpot
- Salesforce
- Shopify
- Bootstrap
- QuickBooks
Atlassian
What we liked
- Atlassian categorizes the design system into Brand, Marketing and Product
- They provide extremely clear guidelines for each component, from its different styles and variations on its use cases and best practices
Ant Design
What we liked
- Ant Design categorizes its components into different sections.
- This organization makes it easy to find components.
- Component styling is shown upfront, and the components themselves are interactive.
- Code is displayed, and there are quick actions for developers to copy code or open it in various environments.
List Out Components
- List all patterns and components in FIGMA based on the audit.
- This document provides an overview of the completed and in-progress items, helping to track and plan time accordingly.
- Organize components based on their function.
Plan Timeline
- Each sprint cycle was saved as a project in FIGMA.
- Sprint planning meetings were scheduled to discuss the components and patterns that needed to be completed.
- Each sprint is divided by component type, and progress made is recorded and discussed.
Research and Discuss Components
- The ultimate goal was to discuss the design of each component, along with its properties and states.
- We researched best practices by reading articles and examining how other companies are using similar components.
- Initially, research was conducted during meeting sessions, which took up a lot of time.
- We utilized the commenting feature on FIGMA to initiate discussions, gather opinions, and vote for multiple options.
- Usability testing was done for components in cases where there might not be a clear winner.
Create Components
- Created text and layer style libraries and components in FIGMA, while ensuring their states and variations were properly catered for.
- Examined the naming conventions of other design kits and how nested components were created.
- These components are accessible to users who sync with the CDS library.
Design the Design System
- Identify a tool that can be integrated into our existing workflow.
- The comparison table created by uxtools.co helped in identifying the tool.
- Zeroheight was the selected tool.
- Pages and sections were created within each page for different components and their variations, such as types, usage, behavior, theming, anatomy, and specs.
Documentation
- All zero-height illustrations are broken down into sections in FIGMA.
- Zeroheight, with FIGMA integration, helps import artboards.
- Content is updated in Zeroheight and final reviews are done.
- Animations of components are uploaded as GIFs in Zeroheight.
How it works
Impact
Feedback
- “It would easily take me 3 to 4 times longer to create a web page without CDS”
- "Working with the CDS library takes the guesswork out of font sizes, margins, colors and element sizing”
- “The system is very helpful and gives me peace of mind when designing, knowing all the different products we will be working on will be unified"
- “Saves so much time!"
Before
After
