From a 200-row spreadsheet to a SaaS platform driving $10M ARR
Embedded Files
Here’s how I redesigned Intropic’s product, cutting workflows from a day to 5 minutes , expanding into 5 global markets and driving $10M ARR.
Background
Intropic is a fast-paced fintech start-up that forecast changes in stock market by Index Rebalance. In simple terms, it provides tools to predict how stock markets will move, so investment firms can stay ahead of trends. The platform is a B2B solution that empowers index specialists with insights and forecasts to support better decisions.”
The Problem
Users were spending over a day finding data. The workflows were slow, error-prone, and hard to scale.
Analysts & Research were hard to find data in the "product".
My Role
As Staff Product Designer, I led the end-to-end design that transforming a spreadsheet based product into a scalable platform that enabled index analysts to move 10× faster, with greater confidence and consistency.
Led product strategy, UX, and design execution
Partnered with CPO, PMs, and Engineers
Mentored 1 junior designer on core feature delivery
Contributed to early-stage design system patterns for charts, data cards, and filters
Impact
200%+
ARR
100+
B2B Users
32%
DAU/MAU ratio (B2B)
The Goal
Design and create a fast, scalable, and intuitive tool to help analysts explore, compare, and act on complex market data.
Discover & Insights
To create a better data product, I need to understand the complex data by studying the index methodology and identify the most valuable insights for our users through thorough user research.
I led user interviews and found out the followings:
Users are interested at the forecasted data first.
Then they want to know What drive behind it and Why.
They also want to spot the change quickly.
What users do on the product
Suggestion from users
User interview sessions
Conclusion:
The product was a web-based spreadsheet with over 200 columns and 1,000 rows, making it time-consuming for users to find the information they are interested in.
Define & Align
Aligning the design direction with stakeholders is the key to achieving a successful design.
We quickly defined the product’s north star:
A data platform where users can easily discover trading opportunities, search specific tickers in users mind, and quickly understand the rationale behind forecasts.
Product's North Star from the workshop
I led the workshop to map out the North stars
the new information architecture and the structure
Design Strategy & System Thinking
I structured the platform around scalable, reusable interaction patterns which match with our users flow and summarised into three main categories:
The Three Pillars
1. Searchability
• Need: Users want to quickly find what they are looking for.
2. Discoverability
• Need: Users want to discover new and interesting trades or opportunities that may not have thought of themselves.
3. Knowledgeability
• Need: Users want to quickly understand what is driving a forecast.
These three categories can guide the design and functionality to better meet user expectations and improve overall satisfaction.
Searchability
Type, find, done
Need: Users want to quickly find what they are looking for.
Goal: Enhance the quick-find experience with an universal search bar, allow users to search across the universe within the product.
Solution: Universal Search Bar with Forecast Previews and Deep-Dive Capability
The video show how the UX of the searchbar look like
Result: Adoption Rate: 5% ➔ 30%
Discoverability
The market in a glance
Need: Analysts want to quickly understand the key metrics that drive index forecasts without digging through large, complex tables.
Goal: Present forecast drivers in a way that’s clear, structured, and visually intuitive, so users can see the market context at a glance.
Solution: The Ticker Card . a compact visualization that distills complex financial data into a single view. It highlights cutoff points, market cap ranges, and proforma values with clear color coding and hierarchy, giving analysts “the market in a single glance.”
Result: It significantly increased user engagement — analysts now spend 15% of their total session time here.
Knowledgeability
Why forecasts change
Need: Users want to quickly understand what is driving a forecast.
Goal: Provide concise, easily digestible explanations of forecast drivers with clear summaries & visualizations
Solution: Providing a standardized label that summarizes the core reasons for the forecast with a easy-to-understand data visualizations across the product with the AI explaination. Also designed the card to let user to understand the thershold of the ticker
The video show how the micro-interactive in the discover page with reasoning tag
Linking the standardized label with AI explanation, this help to reduce the number of enquiry to our customer success team.
Result: Faster User Understanding and Workflow Efficiency, reducing the time on data table page. Reduced user interpretation time from ~2 minutes to <15 seconds
Designing the Ticker Page
To address analysts’ key pain points, I led the design of the Ticker Page — a centralized view of an index and its underlying trades. This page was crafted to fulfill three core user needs uncovered during research:
1. Searchability
The page supported deep linking from search results. This allowed users to jump directly to relevant tickers without navigating through multiple files or spreadsheets.
2. Discoverability
Related indices the ticker belongs to
Similar trades across portfolios
Historical rebalances and forecast changes
3. Knowledgeability
Forecast logic breakdowns
Methodology notes
Commentary from our research team
Time-series charts for weight and forecast impact
Result: The Ticker Page became one of the most-used entry points in the app — with 22% of total session time spent here within the first quarter post-launch.
Design System
I also built the Foundation of Intropic's design system. I took ownership of creating and maintaining a shared design system that supported both the design and engineering teams across multiple product surfaces.
What I Collaborated:
Reusable Components: Built modular components including data cards, filter panels, tables, and chart containers — all designed with responsiveness, accessibility, and clarity in mind.
Design Tokens: Established a consistent set of spacing, typography, and color tokens aligned with dev implementation.
Figma Library: Created and maintained a structured Figma system with auto-layout components, documentation, and variants.
One of the DARK & LIGHT MODE
WCAG 2.1 COLOURS that I contributed
https://www.figma.com/community/file/1187721017294765380/dark-light-mode-wcag-2-1-colours
Code Connect: Pushing Figma based design system to a coded component based system that help engineering to speed up the whole developing cycle
The most complicated component, the table design guideline
Result:
Reduced design-developer QA friction by standardizing components early.
Enabled faster feature delivery across teams by removing ambiguity.
Scaled adoption across 2 squads and multiple surfaces in under 3 months.
UI Showcase
Responsive design of the ticker view
Timeline design with dummy forecast data
The time series distribution design chart
Users feedbacks
“Finds the interface nice and likes GMSR. We use it mainly for checking NOC changes and running their own model. Currently, they use it for spot checks and monitoring, but we can see it becoming more integrated into their workflows in the future. ”
One of the hedge fund manager
“Amazing products you are delivering. Very happy.”
Quant Researcher
“Index intelligence is useful as it has been easy to look at all the params in one place - distances to cutoff, NOC, free float. Good GUI to get a lot of information very quickly. ”
Portfolio manager from pension fund
"That's straight from the methodology, it's spectacular to see it like that. It's obviously a great product."
portfolio manager
Challenge
As I mentioned, Intropic is a fast-paced startup where we need to build and ship quickly.
As the design lead of the product, beyond solving user problems, my biggest question is:
How do we balance design and business needs while maintaining speed and efficiency?
We prioritize design based on key user needs, break down large design into smaller MVPs for quick user testing, and consistently work closely with stakeholders across product, engineering, and business teams to ensure alignment.
For example, we categorize important data sets into different groups to help users quickly spot interesting opportunities with minimal effort from the engineering team. This approach allows us to buy time for future design iterations.
Highlighting the newly investable, promotion demotion and shadow of the market, which is the most interesting data.
Learning
Gain a deep understanding of the data—know what it represents and why users engage with it—before initiating the design process.
Break large design concepts into smaller MVPs to quickly trial, test, and iterate based on feedback.
Collaborate closely with stakeholders to ensure alignment and maintain clear communication throughout the process.
Report abuse