Digital Design System for Manulife/John Hancock

Watch Video

Brief: Manulife/John Hancock launched RADD (Rapid Digital Delivery), a comprehensive engineering and design system featuring standardized digital components for enterprise applications. These pre-built components streamline the design process, ensuring a consistent look across products while enhancing production speed and reducing delivery costs by 60-70%.

My Role:

  • Co-led the development of a digital component library to ensure consistent user experiences across products.
  • Defined interactivity and motion guidelines for components, collaborating closely with developers for user testing.
  • Created a dynamic anatomical design system in Figma, enabling seamless component swapping for designers.
  • Produced an animated video to explain the design system and its advantages for product development.
  • Developed an internal website to educate designers and developers on effectively utilizing the design system.

Problems:

  • Teams initiated projects from scratch, leading to inefficiencies.
  • Outsourcing to third parties resulted in inconsistent branding across applications.
  • Painful design-to-development handoffs due to time constraints on both sides.

Solution:

  • Established a shared library of fully-coded, ready-made components for the entire company, simplifying management and ensuring a cohesive digital experience across all global products.
  • Enabled ongoing contributions and refinements from all team members.

Process:

  • Agile: Formed a cross-functional team, including a Product Owner, System Lead, Engineering Lead, Front-End Developer, and two Experience Designers (responsible for defining interactivity and creating a dynamic system in Figma).
  • Discovery: Conducted interviews with stakeholders across the company to identify pain points and workflows.
  • Explore/Define: Sketched solutions to help users easily access information needed for their tasks.
  • Develop/Test: Conducted usability tests, both formal and informal, using clickable prototypes and experimental code.
  • Delivery/Design: Integrated user feedback into final designs for new components added to the asset library, along with a comprehensive style guide. Tested the internal website to ensure usability for designers and developers.

Comments are closed.