
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
Year
Services
For every redesign or feature shipped, we followed a rigorously collaborative and iterative process:
From transactional clutter to effortless navigation — we reimagined the app’s most-used flows for clarity, speed, and modern behavior across iOS and Android.
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.
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.
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
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
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
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
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
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
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
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
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
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
Increase in User Interaction
with transaction detail screens within the first month
Reduction in support queries
Increase in enrollments for paperless billing after redesign
From transactional clutter to effortless navigation — we reimagined the app’s most-used flows for clarity, speed, and modern behavior across iOS and Android.
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.
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
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
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
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
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
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
Increase in product exploration actions via the new “Explore” section within the first 4 weeks
higher engagement with personalized product cards (e.g. TD Cash, Credit Score Center) on the homepage
boost in conversions for “Open an Account” from dashboard CTA buttons