Context // Problem // Solution // Core Principles // Outcomes
Context
Irish Life is Ireland’s No. 1 life assurance, pensions and investment management business. It is part of the Great-West Lifeco group, and is the chosen partner for 28 of the 30 largest multinational employers based in Ireland.
I took the lead on the Design System project in 2021 as Lead Product Designer.
Problem
Irish Life’s digital products evolved independently over several years. This resulted in inconsistencies in design and user experience. These disparities were evident in varied button styles, typography, and color schemes across different products, which hindered brand perception and user experience.
Solution
Goals
Develop a comprehensive design system to unify the digital experience across Irish Life’s diverse product offerings.
Improve accessibility across all digital touchpoints.
Research
I reviewed Irish Life’s existing digital products to identify inconsistencies and common elements. I studied design systems from other companies in order to benchmark best practices for design and accessibility. I assessed what range of components would be needed for a complex fintech app.
Building the design language
Based on research, I developed solutions that addressed the identified challenges and met user needs. I designed the following as foundational building blocks of the design system.
Typography
I established a hierarchy for headings, subheadings, body text, and captions to ensure readability and visual coherence.
Colour palette
I developed a primary color palette reflecting Irish Life’s brand identity and secondary colors for functional elements.
I ensured color choices met contrast requirements for accessibility.
Components
I created a library of reusable components such as buttons, forms, cards, and navigation elements in Figma.
I documented each component with usage guidelines, variations, and code snippets in Zeroheight.
Accessibility
I ensured that all components adhered to WCAG’s accessibility standards, making Irish Life’s digital products inclusive and usable for people with disabilities.
Documentation and Tools
Together with the developers, we used the following tools in designing, documenting and coding the design system.
Design in Figma
I designed components in Figma in a methodical, ordered manner. I continue to use the latest Figma features and plugins to build versatile, re-usable components.
Documentation in Zeroheight
I used the Design System documentation platform Zeroheight to host all design documentation and guidelines for internal use.
I included interactive examples and detailed usage instructions for each component.
Component library in Storybook
I worked closely with developers to build a component library in Storybook.
Today, developers from across the business can explore and integrate components easily.
I user tested components.
Core Principles
Based on the research, we established guiding principles for the design system:
- Consistency: Maintain a uniform look and feel across all products.
- Simplicity: Ensure designs are straightforward and intuitive.
- Accessibility: Design for inclusivity, ensuring compliance with WCAG standards.
- Modularity: Create flexible components that can be easily adapted for different products.
- Trust: Reflect Irish Life’s values and commitment to reliability and security.
Outcomes
- Unified Brand Identity: Users experienced a consistent and cohesive interface across all Irish Life’s digital products, enhancing brand trust and loyalty.
- Improved Efficiency: Designers and developers reused standardised components, reducing design and development time.
- Enhanced Accessibility: All products met accessibility standards, ensuring a wider audience could use them effectively.
- Scalability: The design system’s modular nature allowed for easy integration of new features and products.
- Better Collaboration: The design system served as a common language between teams, improving communication and collaboration.