QD

About

Project showcase

Move money templates

Overview

Timeline

6 months
(Aug 2024 - Jan 2025)

Role

Product designer

Team

Product design lead

Design system team

Accessibility team

Product manager

Skills

Figma

Design system building

Timeline management

Overview

Context & problem

Money movement features — such as Interac e-Transfer, Bill Pay, and account transfers — drive a large portion of activity on Scotiabank’s online banking platform. Because customers often log in specifically to move money or pay bills, these high-traffic flows are critical to the overall customer experience.

Over time, however, the designs of the money movement flows had become inconsistent due to overlapping updates, evolving requirements, and uneven adoption of the new design system. These inconsistencies created a lot of gaps in the customer experience and lead to confusion for designers working on future feature designs.

Discrepancies found in the Bill pay and Interac e-Transfer features are amongst the many others we found across other money movement flows

Key areas that need attention:

Sub-navigation bar

Branding logo and global navigation

Page title

Floating copy for payment summary (bill pay feature only)

Shortcuts section (seen only in bill pay)

HMW create reusable templates and assets that improve consistency across all money movement flows while making workflows easier for designers?

Approach

Audit move money flows to identify inconsistencies in navigation, visual styling, layout, and information architecture
Propose design initiative to broader teams and leadership (director+) to align on the need for standardization
Explore design direction for shared components, patterns and layouts
Design scalable components and patterns that can be reused across all money movement flows
Present updates to align designers on adopting the new patterns going forward

Outcomes

Final designs

A sample spread of the componets we made which consists of buttons, input fields, and menus

We contributed new components and updated existing ones to align with Scotiabank's new branding and design system

Some of the guideline pages we made to help designers adopt the new components

Business impact

Created multi-step templates, reusable components, and clear rulesets to improve consistency and scalability across flows
Added new and updated components and their variants to the design library to support multiple use cases across money movement experiences
Drove timeline management in a design-led initiative with no hard deadlines
Reduced design and development overhead by standardizing patterns across teams
Improved scalability by establishing documentation and guidelines for future flows
Updated existing money movement flows to adopt the new patterns and components (still in progress), aligning experiences across the online banking platform

Takeaways

Time management without deadlines is tricky: It helps to define next steps proactively and maintain constant communication with partners and my manager to ensure the work is moving along

Break it down: Breaking the work down into components made pattern and guideline creation easier and ultimately more scalable across many different flows.

Be the voice of the customer: Advocating for design-led work brings customer pain points to light and drives better experiences.

Good design often goes unnoticed: The goal was never to reinvent the money movement experiences, but to align and streamline the experience for consistency.

Takeaways

Time management without deadlines is tricky: It helps to define next steps proactively and maintain constant communication with partners and my manager to ensure the work is moving along

Break it down: Breaking the work down into components made pattern and guideline creation easier and ultimately more scalable across many different flows.

Be the voice of the customer: Advocating for design-led work brings customer pain points to light and drives better experiences.

Good design often goes unnoticed: The goal was never to reinvent the money movement experiences, but to align and streamline the experience for consistency.

Takeaways

Time management without deadlines is tricky: It helps to define next steps proactively and maintain constant communication with partners and my manager to ensure the work is moving along

Break it down: Breaking the work down into components made pattern and guideline creation easier and ultimately more scalable across many different flows.

Be the voice of the customer: Advocating for design-led work brings customer pain points to light and drives better experiences.

Good design often goes unnoticed: The goal was never to reinvent the money movement experiences, but to align and streamline the experience for consistency.