Over two terms, I worked with Watstreet, the University of Waterloo's quantitative finance design team. The team focuses on giving students hands-on experience in fintech by building real research tools and trading algorithms.
I initially joined as the UI/UX Lead, but as I got more involved in the development cycle, I transitioned into a Frontend Lead. This role involved a mix of individual contribution on application designs and managing a team of developers to ship complex applications.
Club Website
My first major project was redesigning and building the team's public-facing website. I used this as a playground to experiment with advanced CSS techniques and generative animations.
SVG Graph Animation
To visualize the concept of "market data," I built a generative background animation. I layered multiple SVG paths with varying stroke widths, colors, and opacities. Using CSS animations, I offset the line dashes to create a continuous "flowing" data effect that adds dynamism to the page without impacting performance.
Scroll Text Reveal
I implemented a scroll-synced text reveal effect to control the narrative pacing. This involved breaking text down into characters and words, then using the scroll position to modulate the opacity and spacing. The result is a smooth transition where content fades in precisely as the user reads.
Linear Card Glow
Inspired by Linear's old landing page, I built a reactive border glow effect for the project and team cards. This required tracking the mouse position relative to the grid container and applying a radial gradient mask to the borders of adjacent cards. It creates a subtle "spotlight" effect that highlights each active item while also creating an engaging visual effect.
Quantitative Platforms
As the Frontend Lead, I oversaw the development of internal tools used by our Quant Research team to test their trading strategies and models.
Mean Reversion Backtester
The Quant team needed a way to test mean reversion models against historical data. I led the development of an internal dashboard that allows researchers to configure model parameters and visualize their performance.
The centerpiece is the interactive chart. We implemented a visualization that renders the stock's performance with color-coded segments to indicate trend direction. We added visual delimiters (vertical dashed lines) to clearly separate the training period from the testing period, allowing researchers to see exactly where the model switches from learning to predicting.
Other features include hover tooltips for the chart that show stock performance metrics at specific points in time and also adding both line graph and candlestick chart options for the user to choose from.
To make the data actionable, we added a "Model Results" panel that calculates and compares the Net Change of the model against a standard "Holding Stock" strategy, giving immediate feedback on the model's efficacy.
Options Strategy Builder
Options trading involves complex relationships between strike prices, expiration dates, and premiums. We built a Strategy Builder to visualize these risk profiles.
We implemented a sidebar interface that allows users to construct complex strategies by selecting multiple option legs. Users can toggle specific strikes, adjust premiums, and modify quantities for different expiry dates.
Then the core of the tool is the Payoff Diagram. We built a dynamic chart that renders the strategy's Profit/Loss curve against the underlying stock price. In order to resolve the challenge of understanding time decay, we added a slider that allows the user to adjust the time to expiration and see the impact on the strategy's Profit/Loss curve.
Finally we also added a list of presets that the user can choose from to quickly test different strategies.
Ledger Instances
I also led the initial development of a real-time Ledger visualization. The goal was to give traders a live view of their executed trades alongside their portfolio performance.
We built a split-pane layout with a Trade Log on the left and a Multi-Asset Performance Chart on the right. The challenge here was data synchronization—ensuring that clicking a specific timestamp on the chart would highlight the corresponding trades in the order book table. Although the project was still a work in progress when I left, we successfully implemented the core logic and system for the quant team to track their portfolio values in real-time.
Market Heat Map
Inspired by TradingView, we built a stock market heat map to visualize sector performance at a high level.
We implemented a Treemap visualization where the size of each block represents the company's Market Cap, and the color indicates short term performance. We added filtering logic that allows users to toggle between different indexes (like the S&P 500) and drill down into specific sectors. Then we also added detailed tooltips that surface precise price and percentage changes when hovering over individual tickers.
Leadership & Growth
Moving into the Frontend Lead role gave me the opportunity to develop my management skills alongside my technical work. My focus shifted towards enabling the team by organizing weekly meetings, reviewing code, and ensuring everyone was aligned on our goals.
A major part of this role was cross-functional collaboration. I worked directly with the Quant team to understand the requirements of their project specs. My job was to translate those technical requirements into clear, actionable frontend tasks that my team could execute on effectively.