Stock Trading Platform
I was the Senior Product Designer on this project for TD Bank in 2025-2026. I worked with a product owner, a copy writer, additional designers and a team of developers.
We created more than 15 components for a new design system used in responsive web and mobile, improved usability scores by 12%, and delivered 4 weeks ahead of schedule.
TD Bank is one of the top 5 banks in Canada serving millions of customers. As part of their larger road map, TD was looking for ways to remain competitive within Millennial and Gen Z demographics. Millennials are poised to inherit the largest generational transfer of wealth in history and competition for their business is top of mind for financial services. Market comparisons revealed TD’s current stock trading platform wasn’t reaching these users as effectively as their competitors and the need for a redesign was apparent.
Context
We did a competitive analysis of other stock trading platforms.
I looked at competitor’s products that were popular with our users that included traditional banks, and online only services like Wealthsimple.
We checked the banks existing research on our target demographic.
I spoke with researchers at the bank about which values were most important to these users and relevant context to keep in mind.
We ran usability tests and user interviews on the existing experience.
We asked users to score the existing experience on usability, visual appeal, ease of use and relevance of content. This information would help shape a design approach and provide a benchmark to measure the new designs potential for success.
Discover
Users valued clean, modern, and thoughtful design.
There was a strong preference for brands that resembled tech companies in design over a traditional bank. Lots of white space, vibrant colors and illustrations and thoughtful micro interactions were scored favorably while reserved palettes, flat iconography and stock photos were viewed as outdated and possibly intimidating.
The existing experience scored well on usability tests.
The existing app and web experience scored well enough with users, letting us know the core experience shouldn’t change too much but there was room for improvement in accessibility and limiting actions that took them out of the experience.
Our research showed users needed simpler financial education.
Users reported a desire to be more hands on with their financial decisions but felt overwhelmed and unsure of themselves when faced with a barrage of new terms and processes necessary to trading. Establishing trust and educating without overwhelming new users would be a key focus of the design.
Define
Ideate
We created new components with a focus on delivering “bite sized” bits of information without leaving the homepage. I explored ways for users to interact with the content such as side sheets, illustrated steps, and card flips.
SIDE SHEETS - A way for users to open a narrow panel from the side on desktop or the bottom on mobile to provide additional information on the topic without navigating to a new page.
ILLUSTRATED STEPS - A component used for breaking down a process into manageable easy to follow steps that help users decide to take action.
CONTENT QUILT - This versatile component allows up to 10 cards made up of the section title, informational cards, illustrations, and links to side sheets or new pages.
Next, I built an interactive prototype for both desktop and mobile experiences to test with users.
Develop
Feedback and Iterations
Initial feedback was overall positive with users noting the new components were intuitive and enjoyable to interact with. While the new brand look was received well there was a need to reduce the extra white space on mobile further to help with scrolling as well as adjust type scales down a level as they felt too large on some desktop displays.
I incorporated the feedback from users before polishing the prototype to use for presentation to the CEO.
Our final solution addressed the three problems we had uncovered:
The new brand and visuals were appealing and well received.
Users noted the illustrations were fun and bright, the larger type treatments easier to read and the increased white space made content easier to focus on. Many were particularly delighted with the Content Quilt component’s interaction animations on desktop and noted it was pleasant to engage with.
The usability score improved by 12%.
Users were able to complete tasks, navigate to correct pages, and access information they were searching for with less friction than the previous design, despite some user flows introducing an additional click for opening side sheets or card flips.
We introduced new techniques for delivering educational information without overwhelm.
Users commented that having small amounts of content visible by default helped with skimming for what they wanted to engage with more in depth, particularly on mobile. Introducing side sheets and bottom sheets, did not cause notable friction despite adding a click to the user flow. Users liked the ease of diving deeper into a topic for a moment before being able to quickly exit and return exactly where they left off without leaving the page.
Deliver
The new component and page designs required less iterations than the timeline had scheduled for and were ready for developer handoff 4 weeks ahead of schedule. This gave us time to dive deeper into how we might share and reuse these designs across the bank.
We wrote extensive design documentation.
Each new component had a detailed document showing; padding, margins, grids, annotated anatomy, recommended content guidelines and character counts across 4 breakpoints. I also created safe zone templates for choosing marketing images and instructions on how to place them for those new to Figma.
We hosted a joint working session with the enterprise design system team and accessibility experts.
We reviewed each new component in depth across breakpoints and noted any feedback on areas of improvement. Each component in Figma was optimized with auto-layout, breakpoints, layout variants, alternate states, and additional styles created to incorporate them into niche design systems in the bank with differing brand styles.
We ideated further on developer feedback.
Developers noted where components might cause issues for future use cases such as needing additional copy length and restrictions on variants for the AEM versions. This let us explore solutions ahead of time and recommendations were included in the design documentation.
Future Impact
Outcomes
The usability score improved by 12%.
Our design solutions improved time to complete tasks, content comprehension, and introduced moments of delight.
We created 15 components for a new design system
Components were designed to not only work for this project, but included extensive documentation and templates so that it could be used in future across the bank.
We delivered 4 weeks ahead of schedule
Efficient work flows, deep understanding of research and good communication with developer and stakeholders resulted in less iterations than expected. The extra time was used to explore feedback for future and other benefits.