Interac e-Transfer

Revamping 3M+ Notifications
sent a day sent across Canada

Revamping 3M+ Notifications
sent a day sent across Canada

Timeine
2024 (Jan-June)

Skills
Product Design
Iterative Design
Info Hierarchy

Role
Full Stack Designer
UX Researcher

PROJECT OVERVIEW

The Problem πŸ’‘

Interac e-Transfer, a widely used service processing over 32 million transactions annually, utilized decade-old email templates, resulting in inconsistent user experiences and outdated design standards.

The Solution πŸ“±

We redesigned Interac e-Transfer’s email templates from the ground up, creating a consistent and modern UX that aligns with today’s design standards - enhancing clarity, trust, and engagement for millions of users.

THE DESIGN CHALLENGE 🎯

How can we enhance Interac's email notifications to match brand guidelines, improve UX/UI clarity and hierarchy?

What does Interac e-Transfer look like today...

Autodeposit -
1 CTA

Experienced users don't need to open the email as funds are already in their account.

Less frequent users must complete a security question, ensuring engagement with each notification.

Traditional Q&A - 1/2 CTA

Users can request funds from anyone. Recipients can accept, decline, or block notifications.

Request for Money - 3 CTA

Why is it so dated...

The existing email templates, neglected for over a decade, feature outdated design elements, inconsistent branding, and fail to meet modern UX/UI standards and best practices. This approach significantly impacts UX, prompting a thorough audit!

Missing Interac Branding: Templates lack consistent Interac branding, impacting brand recognition and trust.

AUDITING EXISITING TEMPLATES

Logo and Financial Institution Consistency: Inconsistent logo and CTA use confuses users and disrupts branding.

Poor UX Information Hierarchy: Information is poorly structured, hindering quick comprehension.

Incomplete Subject Line Copy: Subject lines lack key details, reducing clarity and engagement.

Key ideation principles and solutions πŸ’‘

My goal for this refresh was to focus on three key concepts: Fun, Modern, and Understandable. Keeping these principles at the forefront helped shape ideas that addressed user pain points and issues identified in the audit of existing templates. Key ideas included:

  • Modern Visual Design

  • Effective Call-to-Action (CTA)

  • Improved Information Hierarchy

  • Security Emphasis

Building custom elements and creating an Interac
e-Transfer notifications design system πŸ› οΈ

I developed unique visual components tailored to Interac’s brand, creating a scalable and reusable design system for consistency across all notifications. Detailed guidelines ensure seamless implementation and maintenance by all stakeholders.

DESIGN 1.0

Revamping the notifications: Initial exploration 🌎

To kick off the project, I brainstormed a variety of ideas focused on making the notifications fun, modern, and understandable.

Shortlisting my ideas...

1. Interac Branding and Use of Ochre: Ensuring every email aligns with
Interac’s brand guidelines, prominently incorporating the signature ochre color.

2. Fun and Exciting Imagery: Incorporating images that add an element of fun and excitement to the notifications.

Validating decisions with user research πŸ”¬

For the user research phase, we conducted surveys and moderated interviews to gather detailed feedback on the new notification designs.

Our primary objective was to evaluate user understanding and perception of Design Iteration 2.0, ensuring it conveyed the intended message and aligned with the Interac brand identity.

1.Refining Email Preview Language

Users prefer formal language over informal phrases like "money in."

The key insights πŸ”‘

2. Refining Language for Clarity

Users showed a preference for universally understood language

3. Balancing Imagery with Professionalism

Some users appreciated modern design, but many preferred a simpler and professional look

4. Removing Repetitive Content for Readability

Users noted that reducing information can improve the email's clarity

Open to view the full Research Study!

Designing by Asking Users, Iterating by Listening πŸ”

DESIGN 2.0

Building upon insights from user testing, Design Iteration 2.0 aims to further refine Interac e-Transfer notifications.

Problem: Users faced difficulties with the clarity and formality of email notifications.

Solution: Implemented several key updates to improve the user experience and align with the Interac brand.

  • Improved Clarity and Formality: Updated subject lines and content language to be more concise, professional, and aligned with Interac branding.

  • Enhanced Visual and Functional Elements: Redesigned background assets, headers, and repositioned expiry notices for better visibility.

Enhancing QA user experience

Enhancing Autodeposit user experience

Problem: Users and stakeholders noticed inconsistencies, image issues, and informal language in email notifications.

Solution: Implemented updates to enhance professionalism and brand alignment.

  • Refined Subject Line Communication: Updated copy to be concise and formal, improving clarity.

  • Improved Visual Consistency: Eliminated non-aligned images and introduced consistent bank components to enhance professionalism and user trust.

Validating design decisions with user testing πŸ”

We conducted user testing on design 2.0 to ensure our updates met user expectations and aligned with Interac's brand. Feedback was crucial in refining our approach and validating our design choices.

Expanding and refining our template arsenal πŸ› οΈ

Creating a Comprehensive Template Collection:

After completing Design 2.0, we embarked on a massive overhaul, creating nearly 78 additional templates to ensure every type of e-transfer scenario was covered. These templates included:

  • E-transfer notifications (QA Users)

  • E-transfer schedule transfers

  • Request Money

  • Autodeposit notifications

  • Notification Preferences

  • Custom Bulk Templates

This extensive project took about a month to complete, involving many revisions and approvals from multiple stakeholders, including legal teams, project managers, and UX copywriters.

Introducing security measures and management portals 🚨

Enhancing User Security: In response
to feedback and fraud concerns, we added crucial security copy to our emails.

  • Example: "Please do not forward this email, as the information is confidential. Operational and support teams will never request access, ensuring your security.”

Developing a Report Abuse Portal: We initiated the creation of a portal to manage abuse reports, which required legal and FI approval.

  • Within Email: β€œTo restrict messages, block this user, or manage your Interac e-Transfer preferences, click here.”

Refining and Balancing Stakeholder Preferences 🏦

DESIGN 3.0 - FINAL DESIGNS

Building upon insights from user testing, Design Iteration 2.0 aims to further refine Interac e-Transfer notifications.

Balancing Financial Institution Concerns: To address FI discomfort with prominently displaying logos and details, we revised the design to emphasize the dollar amount and currency, moving FI information to a less visible position.

Ongoing Collaboration: This phase required continuous stakeholder collaboration to balance preferences with user needs and security

Let’s take a look into the final designs! πŸ’›

Updated templates are meant to launch into market in October 2024! Until then, our development team is rigorously testing for accessibility and security to ensure optimal performance.

MY REFLECTION ON THIS PROJECT

01. Stakeholder Coordination

Balancing the expectations and requirements of over 15 financial institutions proved challenging. Each institution had unique perspectives on design and branding, making it difficult to reach a consensus that pleased everyone

02. Tone and Context

While adding fun elements seemed appealing, feedback showed that many e-Transfers are business-related. Users preferred a more formal tone to reduce fraud perception and better reflect the seriousness of financial transactions.

03. User-Centric Design

Our iterative design process underscored the importance of user feedback. Engaging with users early and often ensured the designs met their needs and aligned with their expectations, ultimately improving user satisfaction and trust in the service.