Multi-Platform Menu & HUD Design

Multi-Platform Menu & HUD Design

Multi-Platform Menu & HUD Design

Streamlined navigation and a clear, responsive HUD for every platform.

Streamlined navigation and a clear, responsive HUD for every platform.

Streamlined navigation and a clear, responsive HUD for every platform.

Introduction & Design Philosophy

Introduction
& Design Philosophy

Introduction
& Design Philosophy

TD Bank's mobile app serves millions of users across Canada and the U.S., making it a mission-critical product with high expectations around performance, reliability, and experience. When I joined the modernization pod at TD, our north star was clear: modernize the mobile banking experience without disrupting the familiarity users rely on.

We wanted to go beyond polishing visuals. We aimed to create a visually consistent, intuitive, and responsive experience across both iOS and Android, built atop updated HIG and Material Design principles.

Our team of designers, engineers, and researchers worked in lockstep to roll out this transformation incrementally across multiple releases from 2022 to 2025.

Client

TD Bank

TD Bank

TD Bank

Year

2022-2025

2022-2025

2022-2025

SERVICES

UI/UX, Product Design

Services

UI/UX, Product Design

UI/UX, Product Design

UI/UX, Product Design

My Process at TD Bank

My Process
at TD Bank

For every redesign or feature shipped, we followed a rigorously collaborative and iterative process:

Major Redesigns ✨

Major Redesigns ✨

Transforming Core Journeys Across the TD Mobile App

Transforming Core Journeys Across the TD Mobile App

From transactional clutter to effortless navigation — we reimagined the app’s most-used flows for clarity, speed, and modern behavior across iOS and Android.

  1. Smarter Account Activity, By Design

1.

Smarter Account Activity,
By Design

From Cluttered to Clear

From Cluttered to Clear

We redesigned one of the most used—but outdated—screens in the TD app.
The result: a simplified layout, faster scanning, and intuitive action triggers.

We redesigned one of the most used—but outdated—screens in the TD app.
The result: a simplified layout, faster scanning, and intuitive action triggers.

← Before: Overwhelming text blocks, hard-to-read rows, and minimal context.

← Before: Overwhelming text blocks, hard-to-read rows, and minimal context.

→ After: Clear card-based layout, grouped filters, and contextual icons that open smooth bottom sheets for actions and details.

→ After: Clear card-based layout, grouped filters, and contextual icons that open smooth bottom sheets for actions and details.

→ After: Clear card-based layout, grouped filters, and contextual icons that open smooth bottom sheets for actions and details.

Who I Collaborated With

How I arrived at the
Solution

This redesign was a deeply collaborative effort across multiple teams, each contributing to different phases of execution:

UI/UX Designer

🧠 Design Team – Modernization Pod

Developer Handoff + QA

💻 Developer
Team

Prototype Management

🧪 User Testing
Team

COLLABORATION

I coordinated closely with a Developer Project Manager, native iOS and Android engineers, and QA for implementation QA via Jira. I also worked directly with the User Testing team—managing Figma prototypes and gathering user behavior feedback.

Design Goals

How I arrived at the
Solution

This redesign was a deeply collaborative effort across multiple teams, each contributing to different phases of execution:

Business Goals

  • Reduce support tickets — simplify UI to lower confusion and customer service costs.

  • Increase engagement with key actions — drive use of payments, statements, and paperless features.

  • Establish scalable UI patterns — create modular components to speed future development across account types.

  • Promote eco-friendly behavior — increase paperless enrollment with a clear, friendly CTA embedded in user flow.


User Goals

  • Quickly scan transaction activity — users needed to understand their financial activity at a glance, without cognitive overload.

  • Access detailed transaction info easily — including date, merchant, location, and card used.

  • Feel confident handling sensitive info — toggleable account and routing details made users feel secure.

  • Navigate accounts intuitively — seamless flow between account type, details, and actions.


REFLECTION

By simplifying the layout and elevating contextual clarity, we met our user needs—swift scanning, confidence, easy access—while helping the business reduce friction, scale design, and drive behavior change.

How I arrived at the Solution

How I arrived at the
Solution

A visual walkthrough of the end-to-end design process behind the Account Activity redesign

1. Sprint Planning & Task Breakdown

We began with structured sprint planning to align product, design, and engineering teams.

Each feature—whether a new component, layout update, or UX improvement—was broken down into Jira tickets. I worked closely with our product manager and dev lead to scope my design responsibilities and assign tasks across our modernization pod.

Role

I was responsible for the full UI redesign of Checking, Savings, Loans Account Activity UI/UX and Interactive Prototypes, managing handoff, and performing visual QA once devs implemented the designs.

I was responsible for the full UI redesign of Checking, Savings, Loans Account Activity UI/UX and Interactive Prototypes, managing handoff, and performing visual QA once devs implemented the designs.

I was responsible for the full UI redesign of Checking, Savings, Loans Account Activity UI/UX and Interactive Prototypes, managing handoff, and performing visual QA once devs implemented the designs.

2. Requirements Mapping by Account Type

Each account type came with its own set of business and user requirements. We mapped these out early, ensuring that the redesigned UI would accommodate key data like:

  • Available balance & account number

  • Transaction filters

  • Paperless settings

  • Interest details

  • Deep-dive transaction metadata

REASON OF USE

This matrix allowed us to ensure parity across different financial products while customizing edge cases

This matrix allowed us to ensure parity across different financial products while customizing edge cases

This matrix allowed us to ensure parity across different financial products while customizing edge cases

3. Information Architecture (IA) Planning


We created detailed IA maps for each account type, laying out all feature areas, bottom sheets, and deep interactions. This helped define our navigation structure and clarified where each bottom sheet lived within the larger app flow.

REASON OF USE

The IA served as a source of truth for both design and dev, reducing ambiguity in implementation and QA.

The IA served as a source of truth for both design and dev, reducing ambiguity in implementation and QA.

The IA served as a source of truth for both design and dev, reducing ambiguity in implementation and QA.

4. Modular Layout & Component Design

As part of the modernization effort, we introduced reusable components like:

  • Smart account cards (with embedded balance info)

  • Contextual action chips (e.g., Pay, Manage, Rewards)

  • Deep bottom sheets with segmented tabs (View / Manage)

  • Paperless CTA cards

We balanced platform-specific guidelines with system-wide consistency, designing for both Material 3 (Android) and Apple HIG (iOS).

REASON OF USE

This modular approach allowed us to build once, test fast, and scale across all account types.

This modular approach allowed us to build once, test fast, and scale across all account types.

This modular approach allowed us to build once, test fast, and scale across all account types.

5. Screen Flow Mapping

Once the IA and components were finalized (After mid fidelity designs were done), we mapped all happy-path flows and error paths—ensuring all users could accomplish key tasks like:

  • Viewing account info

  • Accessing statements

  • Flagging a transaction

  • Making a payment

Each screen was designed to support clarity and mobile-native interaction patterns.

REASON OF USE

These flows were a foundation for user testing and became reference for dev implementation.

These flows were a foundation for user testing and became reference for dev implementation.

These flows were a foundation for user testing and became reference for dev implementation.

6. High-Fidelity UI Design (Multi-Account)

I designed pixel-perfect, responsive UI screens for all major account types and bottom sheets. This included:

  • Entry states

  • Scrollable interactions

  • Toggleable sensitive info

  • Visual status indicators for transactions

  • "Nothing to show" and other edge cases

NOTE

All design states — normal, error, empty — were covered across platforms for a production-ready handoff.

All design states — normal, error, empty — were covered across platforms for a production-ready handoff.

All design states — normal, error, empty — were covered across platforms for a production-ready handoff.

A fast black sports car races down the highway.

Account Activity Main Screen Redesign

A Smarter Home for Transactions

From cluttered tabs to clean cards and context.

  • Redesigned account screen with modern card layout

  • Dynamic chips for quick actions: deposit, bill pay

  • Introduced contextual bottom sheets for deep interaction

  • Grouped activity rows with status and iconography

  • Balanced iOS + Android parity for clarity at scale

A fast black sports car races down the highway.
A person stands in a sandstone cave.
closed window
An orange cube-shaped side table is shown.
A green butterfly rests on a flower.
A fast black sports car races down the highway.

Account Activity Redesign

A Smarter Home
for Transactions

1

2

3

4

5

A fast black sports car races down the highway.

Account Activity Main Screen Redesign

A Smarter Home for Transactions

From cluttered tabs to clean cards and context.

  • Redesigned account screen with modern card layout

  • Dynamic chips for quick actions: deposit, bill pay

  • Introduced contextual bottom sheets for deep interaction

  • Grouped activity rows with status and iconography

  • Balanced iOS + Android parity for clarity at scale

A fast black sports car races down the highway.
A person stands in a sandstone cave.
closed window
An orange cube-shaped side table is shown.
A green butterfly rests on a flower.

7. Error States & Edge Case Handling

Designing for broken states was just as important. I created screens for:

  • No recent activity

  • Failed statement loads

  • Missing routing info

  • Transaction flagging issues

These were tested during QA and refined with copy guidance from our UX writer.

“We ensured that even failure states felt helpful, informative, and calm.”

NOTE

We ensured that even failure states felt helpful, informative, and calm.

We ensured that even failure states felt helpful, informative, and calm.

We ensured that even failure states felt helpful, informative, and calm.

8. Interactive Prototyping & Usability Testing

I built the fully interactive prototype in Figma, simulating real app behavior for our 10+ usability test participants.

This prototype was shared with the research team, who used it to conduct two weeks of heuristic testing.

REASON OF THIS STEP

User feedback informed several improvements — including better labeling for statements, clearer merchant detail in transactions, and reworded paperless CTAs.

User feedback informed several improvements — including better labeling for statements, clearer merchant detail in transactions, and reworded paperless CTAs.

User feedback informed several improvements — including better labeling for statements, clearer merchant detail in transactions, and reworded paperless CTAs.

9. Handoff to Dev & Visual QA

Once designs were finalized, I linked Figma frames to Jira tickets and reviewed all dev implementations via shared screenshots. I conducted visual QA to ensure pixel accuracy, checking every layout element, color, padding, and interaction.

REASON OF THIS STEP

No ticket was marked complete without my visual approval. This helped devs build with confidence, knowing exactly what ‘done’ looked like.

No ticket was marked complete without my visual approval. This helped devs build with confidence, knowing exactly what ‘done’ looked like.

No ticket was marked complete without my visual approval. This helped devs build with confidence, knowing exactly what ‘done’ looked like.

Business Impact

  • +22% increase in user interaction with transaction detail screens within the first month

  • 30% reduction in support queries related to unclear balances, statement visibility, or missing info

  • +19% increase in enrollments for paperless billing after redesign

  • Created a modular bottom sheet system now used across multiple TD features

22%

22%

Increase in User Interaction
with transaction detail screens within the first month

30%

30%

Reduction in support queries

+19%

+19%

Increase in enrollments for paperless billing after redesign

Major Redesigns ✨

Major Redesigns ✨

Transforming Core Journeys Across the TD Mobile App

Transforming Core Journeys Across the TD Mobile App

From transactional clutter to effortless navigation — we reimagined the app’s most-used flows for clarity, speed, and modern behavior across iOS and Android.

  1. Smarter Banking & Shopping by Design

1.

Smarter Account Activity,
By Design

From Scattered navigation to intuitive discovery

From Scattered navigation to intuitive discovery

We redesigned the TD Dashboard and Explore screens to bring clarity, structure, and intelligent product discovery to the forefront. These are some of the most frequently visited screens in the app — yet they lacked intuitive hierarchy, actionable prompts, and accessible product information.

Through strategic UX restructuring and visual clarity, we transformed them into engaging hubs that serve both everyday banking tasks and seamless product exploration.

We redesigned the TD Dashboard and Explore screens to bring clarity, structure, and intelligent product discovery to the forefront. These are some of the most frequently visited screens in the app — yet they lacked intuitive hierarchy, actionable prompts, and accessible product information.

Through strategic UX restructuring and visual clarity, we transformed them into engaging hubs that serve both everyday banking tasks and seamless product exploration.

We redesigned the TD Dashboard and Explore screens to bring clarity, structure, and intelligent product discovery to the forefront. These are some of the most frequently visited screens in the app — yet they lacked intuitive hierarchy, actionable prompts, and accessible product information.

Through strategic UX restructuring and visual clarity, we transformed them into engaging hubs that serve both everyday banking tasks and seamless product exploration.

Design Goals

How I arrived at the
Solution

This design was a key strategic initiative to modernize TD Bank’s app experience and align the dashboard and product discovery flow with both user expectations and business objectives.

Business Goals

  • Modernize legacy app experience using the new design system and updated UI components, enhancing visual consistency and brand trust across platforms.

  • Increase visibility and uptake of banking products like checking accounts, savings, credit cards, loans, and mortgages by embedding them directly in the explore flow.

  • Boost conversions from mobile traffic by turning the dashboard into a marketing surface—featuring contextual offers, carousels, and CTAs for account opening.

  • Support cross-selling goals by surfacing more TD Bank products dynamically through the Explore section and curated carousels.


User Goals

  • Quickly scan transaction activity — users needed to understand their financial activity at a glance, without cognitive overload.

  • Access detailed transaction info easily — including date, merchant, location, and card used.

  • Feel confident handling sensitive info — toggleable account and routing details made users feel secure.

  • Navigate accounts intuitively — seamless flow between account type, details, and actions.

  • Minimize friction when opening or learning about new accounts — such as credit cards, savings, or loans — through improved navigation and card detail screens.


REFLECTION

By simplifying the layout and elevating contextual clarity, we met our user needs—swift scanning, confidence, easy access—while helping the business reduce friction, scale design, and drive behavior change.

How I arrived at the Solution

How I arrived at the
Solution

A visual walkthrough of the end-to-end design process behind the Dashboard redesign + Explore section (Similar to the above redesign of Account Activity screens)

1. Sprint Planning & Task Breakdown

We followed the same collaborative sprint planning process used during the Account Activity redesign—aligning closely with product managers, engineers, and content stakeholders.

Each feature—whether a new UI component (like account chips), layout change (card-based modules), or cross-navigation pattern (Explore product listings)—was scoped and broken down into Jira tasks. We held weekly syncs with dev and QA to validate feasibility, dependencies, and priority order.

This alignment enabled us to deliver a unified, modular design system that worked across both the Dashboard and Explore surfaces.

Role

I led the UI/UX design for this initiative, mapping out user flows, modular components, and final layouts. I worked in close coordination with the design system team, product managers, and native dev teams to translate requirements into clean, scalable designs ready for implementation.

I led the UI/UX design for this initiative, mapping out user flows, modular components, and final layouts. I worked in close coordination with the design system team, product managers, and native dev teams to translate requirements into clean, scalable designs ready for implementation.

I led the UI/UX design for this initiative, mapping out user flows, modular components, and final layouts. I worked in close coordination with the design system team, product managers, and native dev teams to translate requirements into clean, scalable designs ready for implementation.

  1. Requirements Mapping & Information Architecture

    To ensure consistency and scalability across the TD app ecosystem, we adopted the same modular design system and process used in the Account Activity redesign. Key UX and IA principles included:

    • Structuring content into clear, scrollable sections (e.g. accounts, credit score, personalized offers)

    • Prioritizing high-frequency actions (e.g. Zelle, Deposit, Bill Pay) via smart action chips

    • Designing card-based modules for account types and product discovery

    • Streamlining access to product exploration from key touchpoints (e.g. "Open an Account" buttons)

    • Ensuring visual hierarchy and spacing for intuitive scanning and decision-making

    • Leveraging reusable components to support both dashboard and shopping flows

    This approach helped unify the experience across multiple entry points while reducing cognitive load for users.

REASON OF USE

This matrix allowed us to ensure parity across different financial products while customizing edge cases

This matrix allowed us to ensure parity across different financial products while customizing edge cases

This matrix allowed us to ensure parity across different financial products while customizing edge cases

4. Modular Layout & Component Design

As part of the modernization effort, we introduced reusable components like:

  • Smart account cards (with embedded balance info)

  • Contextual action chips (e.g., Pay, Manage, Rewards)

  • Deep bottom sheets with segmented tabs (View / Manage)

  • Paperless CTA cards

We balanced platform-specific guidelines with system-wide consistency, designing for both Material 3 (Android) and Apple HIG (iOS).

REASON OF USE

This modular approach allowed us to build once, test fast, and scale across all account types.

This modular approach allowed us to build once, test fast, and scale across all account types.

This modular approach allowed us to build once, test fast, and scale across all account types.

6. High-Fidelity UI Design (Multi-Account)

I designed pixel-perfect, responsive UI screens for all major account types and bottom sheets. This included:

  • Entry states

  • Scrollable interactions

  • Toggleable sensitive info

  • Visual status indicators for transactions

  • "Nothing to show" and other edge cases

NOTE

All design states — normal, error, empty — were covered across platforms for a production-ready handoff.

All design states — normal, error, empty — were covered across platforms for a production-ready handoff.

All design states — normal, error, empty — were covered across platforms for a production-ready handoff.

8. Interactive Prototyping & Usability Testing

I built the fully interactive prototype in Figma, simulating real app behavior for our 10+ usability test participants.

This prototype was shared with the research team, who used it to conduct two weeks of heuristic testing.

REASON OF THIS STEP

User feedback informed several improvements — including better labeling for statements, clearer merchant detail in transactions, and reworded paperless CTAs.

User feedback informed several improvements — including better labeling for statements, clearer merchant detail in transactions, and reworded paperless CTAs.

User feedback informed several improvements — including better labeling for statements, clearer merchant detail in transactions, and reworded paperless CTAs.

Business Impact

  • +36% increase in product exploration actions via the new “Explore” section within the first 4 weeks30% reduction in support queries related to unclear balances, statement visibility, or missing info

  • 40% higher engagement with personalized product cards (e.g. TD Cash, Credit Score Center) on the homepageCreated a modular bottom sheet system now used across multiple TD features

  • 18% boost in conversions for “Open an Account” from dashboard CTA buttons

  • Introduced a modular product discovery system—now leveraged across TD’s onboarding and marketing touchpoints

36%

36%

Increase in product exploration actions via the new “Explore” section within the first 4 weeks

40%

40%

higher engagement with personalized product cards (e.g. TD Cash, Credit Score Center) on the homepage

+18%

+18%

boost in conversions for “Open an Account” from dashboard CTA buttons