← Home

TD Bank
Redesigning
TDA Screeners

PRODUCT DESIGN · UI/UX DESIGN

Intro

Client

TD Bank of America

Skills

Interface Design
Design System
Client Interactions

Tools

Figma app logo Figma app logo

Scope

During the summer of 2017, I worked as a product design intern for an agency called Big Human. During my last month, I was tasked to redesign TD Bank's stock screeners. Their existing platform looked completely outdated and the user experience was all over the place. Therefore, I set out to improve the interface and design an application that would be much simpler to use for all of their customers.


Approach

  1. Use Sketch to build all of the new components and symbols.
  2. Have weekly meetings with TD Bank for critiques and feedback.
  3. Iterate design based on feedback and create final deliverables.
Old screener New screener

Old vs new

The Process

Designing TD's Styleguide

In order to create an enhanced experience for anyone using TD's screeners, it was necessary to have the right building blocks. Therefore, it was crucial to design a styleguide that contained all of TD's components in the form of buttons, tables, dropdowns, and many more. Having these components nested as symbols in Sketch made the entire process of designing super efficient.

Styleguide for the screeners

Sketch Symbols

Having a set of nested symbols make every designer's life much easier when it comes time to execute. It saved me time by allowing me to focus on designing a wider range of flows rather than remaking each button, table, or form. When it comes to business, time is money and my client definitely appreciated the time that was saved thanks to the styleguide and symbol system.

Nested symbols for easy overrides

Results

Design Deliverables

The previous version was out-of-date with the user experience and visual design being subpar. This made it feel intimidating and difficult to use. After several weeks of design variations, feedback, and brainstorming, I was able develop a clean and simple solution that fit my client's needs.

New TD screener flows

Expert Mode

TD Bank also wanted to introduce a more advanced set of features for their intermediate and expert users. Using the components and symbols that were already designed beforehand, I was able to swiftly execute and deliver these new features in little time. 'Expert Mode' gives users the ability to refine and diversify their screeners in a much more customizable manner.

Expert mode flows