Brief: Manulife/John Hancock introduced RADD (Rapid Digital Delivery), a powerful engineering & design system comprised of standard digital components for creating enterprise level applications with brand-approved, flexible, easy to use interfaces. Having these ready-made components not only saves time when designing, it provides a familiar look and feel across all products. With this level of modularity, products yielded massive improvements in speed of production and provide rapid delivery, reducing costs by 60-70% over the current process.
My Role:
- Co-led the creation of a digital component library to ensure consistent user experiences across various products.
- Responsible for defining interactivity & guidelines for motion of all components and worked closely with developers to test implementation with users.
- Created a dynamic anatomical design system within the design tools (Figma) so that designers could easily swap one component for another dynamically.
- Wrote a script animated a video to help explain what a design system is and how it can help the company build products.
- Created an internal website to help developers and designers learn how to use the design system.
Problems:
- Teams started from scratch with every new project
- Projects outsourced to 3rd party causing inconsistent look and feel (applications didn't look like they were from the same company
- Handoff from design to dev was painful
- Developers under pressure to build quickly
- Designers pressured to create designs with little time for testing usability
Solution:
- A single, shared library with fully-coded, ready-made parts for the whole company to use keeps everything simple and manageable when everyone uses the exact same digital components.
- Provided continuity and consistency across all global digital products.
- Contributions of new components and refinements extends to everyone.
Process:
- Agile: Using agile methodologies, we formed a team
- Product Owner
- System Lead
- Engineering Lead
- Front end developer
- 2 Experience Designers (I was was responsible for defining the interactivity & guidelines for motion... also making the system dynamic for designers with ability to swap components in Sketch/Figma)
- Discovery (research & user-flows): Facilitated interviews and talked to people from various positions across the company to understand pain points and ways of working; designers, developers, and product owners.
- Explore/Define (ideas & wireframing): Sketched various solutions for helping users discover the information needed to accomplish their goals.
- Develop/Test: Held several usability tests, both formal and informal, using various methods including clickable prototypes and experimental code.
- Delivery/Design:
- Applied user feedback and created final designs for new components which have been added to the new company asset library along with a style guide for how to design and develop with them.
- Tested the website to ensure developers and designers understood how to use the design system.