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 copywriter, 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 set to inherit more wealth than any generation before them. For banks, winning their business has never been more critical. Market comparisons revealed TD’s current stock trading platform wasn’t reaching these users effectively, and the need for a redesign was apparent.
Context
We did a competitive analysis of other stock trading platforms.
I researched popular products by competitors which included traditional banks and online only services like Wealthsimple.
We checked the TD’s existing research on our target demographic.
I reviewed the data and discussed with researchers at TD to determine which values were most important to these users, along with relevant context to keep in mind."
We ran usability tests and user interviews on the existing experience.
I 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 against.
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 scored favorably with users, 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, indicating the core experience shouldn’t change too much. However, there was room for improvement in accessibility and limiting actions that took users 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 main page. I explored ways for users to interact with the content through 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 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 finding the new components more intuitive and enjoyable to interact with. While the new brand look was well received, 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 this feedback and polished the prototype for presentation to company leaders including 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, noting it as 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 being overwhelmed.
Users commented that having small amounts of content visible by default helped when skimming for what they wanted, particularly on mobile. The introduction of 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 expected and were ready for developer handoff 4 weeks ahead of schedule. This gave us time to explore opportunities to share and reuse these designs across the bank.
We wrote extensive design documentation.
I developed detailed documents for each component, displaying 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 brands.
We ideated further using 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 include recommendations in the design documentation.
Future Impact
Outcomes
The usability score improved by 12%.
Our design solutions reduced time to complete tasks, improved 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 collaboration with developers and stakeholders resulted in less iterations than expected. The extra time was used to explore feedback for future benefits.