Building the John Hancock component libraries
When I joined the John Hancock HCD team, there was a lack of support with the design system being used in the team’s Figma files. There existed a brand hub that detailed out the visual design system, but there was a lack of a corresponding library in Figma that I had access to. I was given the task of organizing all the elements used throughout a variety of platforms across all John Hancock products and turning them into a library file accessible in all JH projects. I collaborated with multiple designers across the US segment to build out a design system and various extensions to support the needs of our digital ecosytem.
My contributions:
UI Designer
Timeline:
May 2023 – January 2024
Documenting existing components
To start, I conducted a comprehensive audit of UI elements used across websites, design files, and projects. This involved identifying inconsistencies, consolidating redundant components, and standardizing styles to ensure a unified and scalable system. To ensure accuracy and alignment with what was live in production, I worked closely with developers to track down components and understand the reasoning behind past UI decisions.
To ensure the long-term scalability and consistency of the design system, I established a governance model that outlined clear guidelines for maintaining and evolving the library. This included defining rules for component updates, versioning, and contribution processes, ensuring that the system remained a reliable source of truth as it grew.
Building the components
I designed each component with variants, allowing for different states, sizes, and themes to accommodate a wide range of use cases. By leveraging Figma’s auto-layout, component properties, and variants, I ensured that elements were not only easy to use but also adaptable to different design needs.
The building blocks of JH design system
The JH design system library has become a scalable, flexible, and widely adopted resource, streamlining workflows and ensuring consistency across projects. By building robust, reusable components with thoughtful variants, defining a governance model, and fostering team collaboration, the system has set a strong foundation for future design efforts. Below is a collection of the UI components that bring this system to life.
