Skip to content
All projects
Team sprintindustry sprint with TD· 2025

TD Financial Health

A health check for your wallet, built to never break

TD Financial Health home page: “A health check for your wallet” with Sign up and Learn more buttons over a photo of a woman paying online.

Problem

A new financial wellness service needed a clear, trustworthy site and a beta sign-up that keeps working even when the API doesn’t.

My role

Designed and developed the responsive pages, the API-driven Features page, the sign-up flow and the SCSS architecture.

Outcome

Axios-powered rendering with error handling and fallback data for 100% UI stability, WCAG-aligned components and a BEM + mixins SCSS system.

Role
Designer & Front-End Developer
Team
Collaborative Agile sprint team
Timeline
2025
Tools
HTML5, SCSS (BEM + mixins), JavaScript (ES6+), Axios, REST API, Git & GitHub, Figma
  • UX/UI
  • Development
Code on GitHub

Note. For educational purposes only, as part of the BrainStation Industry Project with TD. It is not an official TD product or feature, and is not affiliated with or endorsed by TD beyond this learning collaboration.

1. The Features page

The Features page renders TD’s financial health tools dynamically from the API using Axios. I built the request, rendering and error-handling logic, and checked every state in the JavaScript console: successful responses, and failures such as a CORS block, a 404 or a network error.

  • Dynamic API integration. Products are fetched with Axios and rendered as component-based cards.
  • Fallback data system. When the API fails, the page logs the error and renders built-in fallback products, so the UI stays 100% stable.
  • Error handling. Specific messages and error pages explain what happened, reducing confusion and support requests.
  • Performance. Component-based rendering improved layout rendering and reduced content load time.

2. Navigation, footer and responsive design

Three phone screens of TD Financial Health: the home page, the Features page and the beta sign-up page.
Mobile-first layouts: home, Features and the beta sign-up.
  • Responsive navigation. A full nav on desktop and an accessible hamburger menu on mobile, with clear focus states.
  • Consistent footer. Navigation, social links and the project disclaimer, adapting cleanly across breakpoints.
  • Accessible components. Headers, buttons, product cards and content blocks with consistent hierarchy and WCAG-aligned patterns: contrast, touch targets and screen-reader support.
  • SCSS architecture. BEM naming and mixins keep styling consistent and reduce duplication.
The footer: navigation links, the educational-project disclaimer and social icons on TD green.
Footer with the project disclaimer.

3. Beta sign-up

The beta sign-up page: “Join the TD Financial Health Beta Program” with name and email fields and security reassurances.
An accessible, validated form with security reassurances.
  • Validation for data quality and duplicate prevention.
  • Trust cues such as “TD will never ask for your password” and encryption notes, next to the fields.
  • API-connected submissions with a confirmation page and graceful failure states.
Eventure events page: event cards with large date tiles, titles, times, descriptions, and Learn more and Register now buttons on a blue gradient.Next projectEventureA React event app on its own Express API, built in three sprints