TD SPOTLIGHT CASE STUDY

Redesigning internal trading tools to empower data-driven decisions at TDSecurities

Project overview

My role

UX Design Lead

Tools

Sketch,Adobe XD, Photoshop, CSS, JavaScript

Methods and practices

User interviews, usability testing, analytics review

  • Product: Spotlight - Internal financial dashboard web application
  • Timeline: 2 years (1 year MVP development + ongoing iterations)
  • Team: Cross-functional team with project manager, developers, and stakeholders
  • Users: Internal TD Securities traders, relationship managers, salespeople, and analysts

The challenge

TD Securities needed an internal tool to help traders, relationship managers, and salespeople make better data-driven decisions about client value and risk management. The existing workflow relied heavily on third-party solutions and fragmented data sources, making it difficult for teams to quickly assess client value across fixed income, institutional equities, foreign exchange, and prime brokerage.

Problem statement

How might we create an intuitive internal dashboard that consolidates Bloomberg and ION historical data to help TD Securities professionals quickly identify high-value clients and manage risk more effectively?

1

Research and discovery

Research methods

  • User Interviews: Conducted interviews with traders, relationship managers, and salespeople
  • Usability Testing: Held sessions with junior traders to identify pain points
  • Analytics Review: Analyzed existing workflow patterns and data usage

Key insights

  1. Multi-window Workflow Requirements
    • Traders needed responsive design to support multiple simultaneous windows
    • Current tools didn't integrate well with existing multi-monitor setups
  2. Data Prioritization Needs
    • Users wanted clients ranked by calculated value for specific date ranges
    • Quick visual hierarchy was crucial for time-sensitive trading decisions
  3. Trust & Adoption Barriers
    • Senior traders showed resistance to new internal tools
    • Junior traders and analysts were more open to workflow improvements
    • Third-party solution familiarity created initial skepticism

Design Process

User-Centered Approach

Working closely with the project manager, I defined user needs through iterative feedback sessions.We prioritized getting core functionality in front of users quickly to validate our approach.

Information Architecture

I structured the application around key user workflows:

  • Onboarding - Streamlined introduction to platform capabilities
  • Home Dashboard - Periodic table-style interface with clickable client cards
  • Trader Dashboard - Role-specific view optimizing for trading workflows
  • Client Profiles - Comprehensive customer and sub-customer data views

Design System Development

Created a comprehensive design system and CSS library to ensure consistency across the applicationwhile enabling rapid component development for our React-based platform.

Solutions

1

Core Features Delivered

  1. Interactive Home Dashboard
    • Periodic table-style layout with clickable client cards
    • Dynamic ranking based on client value calculations
    • Customizable date range filtering
    • Responsive design supporting multi-window workflows
  2. Role-Specific Dashboards
    • Trader Dashboard: Optimized for quick risk assessment and client value analysis
    • Sales Dashboard: Focused on relationship management and client maintenance
    • Analytics Views: Detailed data exploration for analysts
  3. Comprehensive Client Management
    • Senior traders showed resistance to new internal tools
    • Junior traders and analysts were more open to workflow improvements
    • Third-party solution familiarity created initial skepticism
  4. Workflow Integration Features
    • Senior traders showed resistance to new internal tools
    • Junior traders and analysts were more open to workflow improvements
    • Third-party solution familiarity created initial skepticism

Design System Impact

The component library I developed accelerated development while maintaining design consistency,reducing design-to-development handoff time and ensuring scalable UI patterns.

User Personas

1

Based on the patterns identified in the empathy maps, we honed in on the four user personas' habits, problems, pain points, and other details about him/her.

We gave each participant in the group stickers red (disagree), yellow (neutral), and green (agree). The task was to read the Summary, Motivators, Character Traits, Key Drivers, Values, and Channels for the group's user persona. They voted on each category for the user personas. If the group overwhelmingly disagreed, they could make edits.

1
1
1
1

Hills and Big Ideas

Before we wrapped for the day, the groups had to use the knowledge of the user personas to write hills. By writing down the Who, What, and Wow. We persuaded the participants to think of big ideas that would become critical features of the Pepper Archive app.

1

Target and Journey Map

Based on the patterns identified in the empathy map and hills, we decided to focus on three personas — a creator (Josh), a producer (Kelly), and a business owner (Bobby). These personas embody how typical users would navigate our app. We highlighted stages, touchpoints, thoughts, feelings, and pain-points of our personas in our user journey maps to spark ideas and functionality specs for the app.

1

Road Map

After the amazing Design Thinking workshop, I workshopped with the team to create a project roadmap. We prioritized what feautures were most important for the launch of the MVP, and what features could be rolled out in later releases.

1

Site Map and User Flow

1

Pepper Archive is unique because it combines the marketplace of a stock website with a social media platform's interactivity. Users need to have the ability to view and purchase content seamlessly while also uploading and selling their content. We outlined this process with our site map, and user flows to identify issues and come up with quick and painless solutions.

1

Wireframes

Because we had an idea of what we were looking for, we decided to do some quick wireframes in Sketch so we could split up the visual design work among the designers.

1

Hi Fidelity comps

1

We finally got to see our ideas come to life in the high fidelity comps we created. Because our team two UX/Product designers, it was easy to bang out the comps in a short amount of time. The next step was creating prototypes using Protopie and creating micro-interaction studies to see what animations added value to the overall experience.

After polishing the designs for several comps, I created a Pepper UI Kit/Design System for our developer and future designers to follow.

1

Future Steps

Here are our next steps in for the Pepper Archive project in 2020:

  1. Complete a soft launch of the marketplace.
  2. Create a call for artists and awareness campaign to start populating the platform.
  3. Conduct user testing sessions with the new crop of users.
  4. Continue to do iterations and new releases based on the feedback.