In a time-sensitive industry, I streamlined the user workflow from over a day to just 5 minutes, contributing to a 200%+ increase in the company’s ARR.
Embedded Files
When I joined Intropic, the product, index intelligence, was just a basic spreadsheet. After two years of hard work, it evolved into a robust data platform, enabling users to quickly deep dive into the information they need.
2022: The spreadsheet-like product when I joined
2024: A data platform
Impact
200%+
ARR
100+
B2B Users
32%
DAU/MAU ratio (B2B)
Background
Intropic is a fast-paced fintech company focusing in index rebalancing. It offers a B2B solution designed to empower Index Rebalance Specialists by analyzing market trends and providing forecasts to predict the demand of passive fund.
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
What is index rebalance?
Index rebalancing is the periodic adjustment of an index’s components and their weights, typically done quarterly, to ensure it accurately reflects the current state of the market it tracks. This process helps maintain the index’s relevance and accuracy for investors and funds that follow it.
Each index follows its own methodology for adding, removing, promoting, or demoting companies, typically based on criteria such as market capitalization, free-float market cap, and country classification.
When a company is newly added, index-tracking funds must buy its shares to match the index composition, then the stock price of the company will go up. In other way, if a company is deleted, the index must sell its shares and the stock price of the company will go down.
(I have no idea what it is before I join)
Product values
We forecast index component adjustments based on each index’s methodology, delivering valuable insights that help our users stay ahead of the market.
The Challenge
Intropic’s platform was a spreadsheet-like product. Users spent few hours finding interesting insights, pulling data, cleaning files, and comparing forecasts — with no centralized interface.
Our goal: 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
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:
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.
Design: Searchability
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
Design: Discoverability
Need: Users want to discover new and interesting trades or opportunities that may not have thought of themselves.
Goal: Implement design like recommendation, curated lists, and insights based on market trends, helping users uncover unique opportunities.
Solution: A landing page that showcases interesting trades and clearly outlines the index methodology behind them.
Result: Increased User Engagement on Discover Landing Page. Average spend 22% of time in the product
Design: Knowledgeability
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
Result: Faster User Understanding and Workflow Efficiency, reducing the time on data table page.
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