Investment Dashboard Design: 10 Rules From Our Work on Koyfin, With Live Demos (2026)

The short answer

A good investment dashboard keeps all the data investors came for and makes it fast to scan. Rank the information instead of hiding it. Make every number line up and read the same way everywhere. Use colour only for price moves, and never on its own. Show how fresh each number is. Let investors build, save and share their own views: screens, watchlists, table layouts and metrics. Underneath, one set of table, filter and search patterns repeats in every feature, and the hard states, such as missing data, long names and thousands of rows, are designed before the happy path. On a phone, design the five or so jobs investors do away from their desk, not smaller copies of the web screens. These are the rules we used while designing core features, the mobile app and the design system for Koyfin, which grew from 100K to 300K+ users in those two years.

We're DIXI, a founder-led product design studio. From 2020 to 2022 we worked inside Koyfin's product team. Koyfin is an investment research platform that gives investors and advisors data that used to need a Bloomberg terminal. We designed eight core web features, from Screener to Sharing, the iOS and Android app from the first screen, and the design systems for web and mobile. Koyfin's growth is the work of its whole team; we were one part of it. The examples here describe features as they appear in Koyfin's public product and our case study.

How is an investment dashboard different from a BI dashboard?

A business intelligence dashboard usually shows a team a few metrics about its own company. An investment dashboard shows one person thousands of securities they don't control, from many data sources, often in real time, and they act on it with their own money or their clients'. So density is the point, every user configures it differently, and every number needs its source and its age.

• Experts who want more, not less. Investors compare dozens of metrics across many securities. Removing data to look clean sends them back to spreadsheets or a terminal.
• Personal by default. Two users of the same product watch different tickers, sort by different columns and save different screens.
• Licensed, timed data. Prices can be real-time or delayed, fundamentals update quarterly, and each source has display rules.
• Many asset classes. Equities, ETFs, funds, indices, bonds, currencies, futures and economic data, each with its own formats.

Which investment dashboard are you designing?

"Investment dashboard" covers several different screens, and each answers a different question. Decide which one you're designing before you pick a layout: the question decides the first column, the first number and what can stay one click away.

Rule 1: Keep the data, and rank it

Don't hide data to make a screen calmer. Decide what each screen is for and rank the rest. Fix the scanning, not the amount: one strong number per row or card, supporting numbers quieter, detail one step away. That's how a dense screen stays readable for someone who uses it for hours a day.

• Give each view a job: find ideas, monitor a list, research one company. The job decides the first column and the first number.
• Use size and weight for rank, not boxes and borders. Dividers and backgrounds add noise in dense tables.
• Put detail in layers: the row, then a hover or tap for more, then the full page for one security.
• Let power users switch density, such as compact and comfortable rows, rather than choosing one for everyone.

Rule 2: Make every number line up and read the same way

In financial tables, alignment is readability. Use tabular figures so every digit has the same width, right-align numbers, keep the decimals fixed per data type, and format price, change and percentage change the same way on every screen. On Koyfin these formats are shared tokens in the design system, used by web and mobile alike.

• Tabular figures: in CSS, font-variant-numeric: tabular-nums. Columns of prices stop wobbling as they update.
• Fixed decimals per data type: two for most share prices, more for currencies and some bonds, none for share counts.
• One abbreviation style for large numbers (K, M, B, T) and one place for the currency.
• Always show the sign on a change, such as +1.24% and −0.86%, so the direction survives without colour.
• Tell missing data from zero. "N/A" or a dash means no data; 0.00 means zero.

Rule 3: Use colour only for signal, and never alone

Reserve green and red for price moves and alerts, and use one neutral accent for everything else. Never let colour be the only signal: about 1 in 12 men have a colour vision deficiency, often red-green, and WCAG's Use of Color rule asks for a second cue. A sign, an arrow or a position does the job.

• Koyfin's system uses dark surfaces, one accent blue, and green and red only for price moves.
• Pair colour with a sign, an arrow or a label in every table and chart.
• Check the convention for your markets. In mainland China, for example, red marks a rise. If you serve investors there, make the colours a setting.
• Test contrast for small numbers in both light and dark themes. WCAG asks for 4.5:1 for normal text.

Rule 4: Show how fresh every number is

An investor needs to know whether a price is live, delayed or from yesterday's close before acting on it. Label delayed data, show the time of the last update, show whether the market is open, and make stale data look different. Exchanges set display rules for this. Nasdaq's data policy, for example, defines delayed data as released at least 15 minutes later and gives "Data Delayed 15 minutes" as the label.

• A clear label for delayed data, next to the price, not only in the footer.
• Market status: pre-market, open, after hours, closed, holiday.
• A timestamp or "as of" date for numbers that don't update live, such as fundamentals and estimates.
• Gentle updates: a short highlight when a price changes, not a flashing cell. WCAG's Three Flashes rule sets the ceiling.

Rule 5: Design the screener as a living table

A screener narrows thousands of securities to a short list, and investors adjust the filters many times along the way. Put the filters and the results side by side, update the result count with every change, keep the results sortable and comparable like any other table, and let users save the screen and come back to it.

• Filters on one side, results on the other, so cause and effect are on the same screen.
• A live count of matching securities as each filter changes, before the user runs anything.
• Results that behave like a full table: sort, add columns, compare.
• Saved screens and presets to start from.
• Room for the investor's own metrics. Koyfin's Custom User Calculation lets investors build metrics from its data.
• One step from a result to a watchlist.

How should charts work in an investment app?

Charts in investment products answer three questions: where the price has been, how it compares with something else, and what happened along the way. Use standard time ranges, a percentage comparison mode, a log scale for long periods, events on the timeline, and a crosshair that reads exact values.

• Standard ranges. 1D, 5D, 1M, 6M, YTD, 1Y, 5Y and ALL cover almost every request. Keep them in the same order everywhere.
• Comparison in percent. When two or more securities share a chart, rebase them to 0% at the start of the range, so a $30 stock and a $3,000 index compare fairly.
• Log scale for long periods. On a log scale, equal percentage moves take equal height, so a 10-year chart doesn't flatten the early years.
• Events on the timeline. Earnings, dividends and splits as small markers explain jumps without a separate table.
• A crosshair with values. Date, price and change at the cursor, in the same number formats as the tables.
• No decoration. Skip 3D, heavy gradients and pie charts for performance. Allocation can be a sorted bar list.

How should alerts and notifications work?

Alerts are the part of an investment product that reaches users when they're not looking, so they need the most care. Let users set them where they see the number, make the trigger and the delivery explicit, and keep every alert in one system they can review and switch off.

• Create an alert from the price, the watchlist row or the chart, not only from a settings page.
• Spell out the trigger: "NRTH crosses above $120.00", "moves more than 5% in a day", "files a 10-K".
• Let users choose the channel and quiet hours, and show the time the alert fired.
• One list of active alerts, with pause and delete, and one design for confirmations, warnings and alerts across the product.

Rule 6: Let investors save how they work, and share it

Most investors open the same few views every day. Let them save a table layout, a watchlist with groups and a chart setup, and open each the way they left it. Advisors and research teams also need to send what they see, with the same layout and live data, so a conversation starts from the same screen.

• Saved table layouts. Koyfin calls them Table Views; they used to be Table Templates.
• Watchlists with groups, sortable columns and adding a ticker in one tap.
• A default view per user, not only per product.
• Sharing that keeps the layout and the live data, not a screenshot. On Koyfin, a watchlist or a view can be sent to a colleague or a client.

Rule 7: Use one pattern for every table, filter and search

A fast-growing data product adds features every release, often built by different people. If each feature brings its own table and filters, the product turns into a collection of tools that each have to be learned. One design system with one table, one filter pattern, one search and one dialog system keeps it one product.

• The same table component in the screener, watchlists, saved views, news and the calendar.
• One search box for names, tickers and functions, across every asset class.
• One system for confirmations, alerts and in-product messages. On Koyfin this was Dialog Notifications.
• Shared tokens for colour, type, spacing and number formats, with native components on each platform.

Rule 8: Bring news, filings and events to the holdings

Investors don't want a general news feed. They want to know what affects the companies they hold or watch. Filter news, filings and the market calendar to the watchlist, keep one pattern for headlines from every source, and show events such as earnings where they matter, next to the price.

• News screens filtered to followed companies and topics. Koyfin calls these Custom News Screens.
• Headlines, company filings and top stories in one news pattern, not three.
• Earnings and market events in one calendar view, filterable by watchlist.
• Saving a story for later in one tap, on web and mobile.

Rule 9: Design the hard states first

In data products, the edge cases live in the data. Design them before the happy path: empty watchlists, loading and errors, missing metrics, delisted tickers, very long company names, negative values, thousands of rows and market holidays. Each one shows up on day one with real data.

• Empty states that help: a new watchlist suggests what to add.
• Loading states that keep the layout still while data arrives.
• Missing data shown as missing, with the reason if you know it.
• Long names and tickers that truncate in a predictable place, with the full name on hover or tap.
• Tables tested with thousands of rows and with a single row.

How do you keep big financial tables fast and accessible?

A watchlist or screener result can hold thousands of rows, and power users drive it from the keyboard. Render only the visible rows, keep the header and first column in place, keep the layout still while data loads, and follow the WAI-ARIA grid pattern so keyboard and screen reader users can move cell by cell.

• Virtualise long lists. Render the rows on screen plus a small buffer; scrolling stays smooth at thousands of rows.
• Sticky header and first column, so the ticker and column names never scroll away.
• Stable layout. Fixed column widths and placeholders while data arrives, so nothing jumps when numbers load.
• Keyboard access. Arrow keys move between cells, Enter opens the security, and focus is always visible. The WAI-ARIA Authoring Practices describe the grid pattern.
• Readable changes for screen readers. Announce "up 1.67 percent", not only a green number or a triangle.
• Two densities. Compact rows for power users and comfortable rows for everyone else, as a setting.

Rule 10: On mobile, design the jobs, not the screens

Don't shrink the web dashboard. Pick the jobs investors do away from their desk and give each one a tab. For Koyfin's app, which we designed from zero, those were Markets, News, Search, Movers and Watchlists. Tables drop to three columns with sortable headers, and search becomes a full-screen tool with asset-class filters.

• Markets: major indices, sectors and yields, with a chart from 1D to ALL.
• News: trending and latest headlines in one feed.
• Search: one box for every asset class, with filters above the keyboard.
• Movers: gainers, losers and most active.
• Watchlists: groups, sortable columns, and adding a ticker in one tap.

The app reuses the web product's tokens for colour, type and number formats, so a price reads the same on both. Navigation and tables follow each platform's own patterns.

What about compliance and disclaimers?

A research tool still needs a few trust signals on screen: where each piece of data comes from, how delayed it is, and, where content looks like a recommendation, that it isn't personal advice. Marketing to investors has its own rules, such as the SEC Marketing Rule and FINRA Rule 2210 in the US, which are a topic of their own.

• Source and delay labels where the data appears, not only in the terms.
• Clear wording for model portfolios, ratings and screens, so they don't read as advice.
• For the website and onboarding side of compliance, see our fintech UX design page.

Investment dashboard checklist

Under seven points: start with rules 2, 3 and 4. They're the cheapest to fix and the most visible to users.

FAQ

How we put this together

• Our experience: two years inside Koyfin's product team, 2020 to 2022, designing eight core web features, the iOS and Android app and the design systems. Feature names and behaviour are as shown in Koyfin's public product and our case study; no internal data is used.
• Koyfin figures: user numbers from Koyfin's About page and Rob Koyfman on the Meb Faber Show (March 2022); the App Store rating as shown in October 2026.
• Accessibility and data rules: the National Eye Institute on colour vision deficiency, W3C's WCAG 2.2 (Use of Color, Contrast, Three Flashes), MDN on tabular figures, and Nasdaq's US equities and options data policies for delayed data.
• Colour conventions: a summary on BehavioralEconomics.com of research on red and gains in Chinese markets.
• Demos and the anatomy diagram are DIXI concepts with fictional companies and generated data. They are not Koyfin screens.
• Data grids: the W3C WAI-ARIA Authoring Practices grid pattern.

Sources

All pages opened on 7 November 2026.

1. Koyfin: Koyfin: About us, Meb Faber Show #395 with Rob Koyfman (March 2022), Koyfin: custom stock screener, Koyfin on the App Store
2. Accessibility: National Eye Institute: color blindness, WCAG 2.2: Use of Color, WCAG 2.2: Contrast (Minimum), WCAG 2.2: Three Flashes
3. Numbers: MDN: font-variant-numeric
4. Data grids: WAI-ARIA Authoring Practices: grid pattern
5. Market data: Nasdaq: US equities and options data policies (PDF)
6. Colour conventions: BehavioralEconomics.com: when red means go
7. DIXI: Koyfin case study, fintech UX design, dashboard design