Prachi Bakshi

What did a shared component library change?

Not just how the product looked. How repeated design decisions were made, communicated and built.

TradeNeoSenior Product Designer2025

TradeNeo is a trade platform with four product areas: Workflow, Intelligence, Hub and Operations. This is the shared component and visualization system I worked on across them.

The Trade Insights page in TradeNeo: a world map of rice trade flows with a tooltip, above lists of top trade flows, emerging markets and declining markets.
  1. 01One icon family across the products.
  2. 02H2 and the text below follow one scale on every page.
  3. 03H1: one title style, used on every page.
  4. 04Shared tooltip pattern.
  5. 05Every chart states its value unit, bottom right.
  6. 06Semantic colour rules: green for growing, red for declining.
Trade Insights, in the Intelligence area of TradeNeo.
Role
Senior Product Designer
Product
TradeNeo
Team
Team of 2: me and a junior designer.
Year
2025

01 · The pattern

The product was growing faster than its visual language.

The issue wasn't one broken screen. We were solving similar visualization and interface problems repeatedly, just in different places.

A whiteboard listing the product's modules by hand: Global Market Insight with exports, imports, consumption and production, then Price Analysis, Transaction Analysis, Competitor Analysis, Trade Barrier and Deal Intel.

The product's modules, mapped on a whiteboard.

One product. Many modules. The same decisions coming up in each.

An earlier Intelligence overview page: product stats, a world map in one blue, and lists of top trade flows, fastest growing and fastest declining markets.
  1. 01Every stat icon in a different colour.
  2. 02One blue for the map and the bars.
  3. 03Rank numbers in regular weight.
  4. 04Tabs with no icons.
  5. 05Growing and declining markets, both drawn in red.
An earlier Intelligence page.
  • An earlier Market Overview page in Intelligence: a world map in shades of blue, a Top 5 list with gradient bars, and two donut charts in yellow, green, red and blue.

    Earlier Intelligence

  • An earlier Buy Order page in Hub: a grid of grey order cards marked Open or Closed, each with a Submit Quote button.

    Earlier Hub

Two more earlier pages, one from Intelligence and one from Hub. Each area had its own colours, cards and filters.

02 · The real problem

The problem wasn't the individual chart. It was the lack of shared rules.

The product didn't need every screen redesigned on its own.

It needed a common language underneath the interface and chart decisions that kept coming back.

03 · The design move

I stopped solving individual screens. I started defining the system underneath them.

A zoomed-out screenshot of the system file: icon and typography pages on the left, and three long colour usage pages on the right with palettes and example charts.
  1. 01Typography, from headings to captions.
  2. 02Colour rules, written down page by page.
  3. 03Each palette shown applied to a real chart.
A snapshot of the shared component and visualization system I worked on.

The foundation covered colour, typography, spacing, elevation, icons, components, chart patterns and chart behaviour.

04 · Colour

Colour stopped being a preference and became a system.

Four overlapping pages from the system: categorical colours with a Saturated and a Greenfield theme, sequential colours in bronze and dark blue, diverging colours, and semantic colours.
  1. 01One theme for donut and line charts.
  2. 02Another for stacked bars and histograms.
  3. 03Green is good, red is bad, yellow warns, blue is neutral.
  4. 04Two sequential scales, combined.
  5. 05Light to dark, right to left.
The chart colour taxonomy, as documented in the system.
  • CategoricalPalettes for multiple categories, in sets of 2, 3, 6 and 10 colours.
  • SequentialLight to dark within one hue.
  • DivergingTwo scales used around a comparison.
  • SemanticGreen for positive, red for negative or alerts, yellow for warnings, blue for neutral.

  1. Rule

    The semantic colours page: green for positive, increase, good; red for negative, decrease, bad, alert; yellow for warning; blue for neutral.

    Semantic colours, as written in the system.

  2. Real chart

    The Trade Insights lists: top trade flows as bars, emerging markets with green trend lines, declining markets with red trend lines.

    Emerging markets in green, declining in red.

Before, colour could be chosen locally. Now it had a defined meaning and usage.

05 · Behaviour

Charts could change. Their behaviour didn't have to.

Eight tooltip cards from different charts. Each has a label on the left and a value on the right, with flags beside country names and colour swatches beside series names.
  1. 01Label on the left, value on the right.
  2. 02Units stay with the value.
  3. 03Series gets a visual marker.
  4. 04Labels stay secondary.
Tooltips from different charts.

The system wasn't only about how components looked. It also defined recurring behaviour.

06 · Implementation

The system had to work beyond Figma.

The chart rules couldn't stop at the design file. I worked with developers on chart configuration so visualization patterns could be implemented consistently across the product.

  1. Design ruleHow a tooltip is laid out.
  2. Chart configurationWorked through with developers.
  3. ProductThe same tooltip on a live chart.

  1. Design rule

    A tooltip card from the system: Trade Value For 2024, $141Mn, with exporting country China and importing country Australia, each with a flag.

    The tooltip as defined in the system.

  2. Product

    The trade-flow map on Trade Insights with the same tooltip open over a flow between China and Australia.

    The same tooltip on the trade-flow map.

This rule travels into the product.

07 · From system to product

Same system. Different data.

  • A treemap of top rice varieties exported, with a tooltip showing a colour swatch, the variety name, 79% and its trade value.

    Trade Insights, varieties exported

  • A treemap of top varieties traded, with a tooltip showing a colour swatch, the variety name, 16% and its total shipment.

    Product Analytics, varieties traded

  • A world map shaded by shipment value, with a tooltip showing a flag, India and $262 Mn.

    Product Analytics, map

Three charts on two Intelligence pages. One tooltip, one filter row, one card.
The top of the Product Analytics page: a filter row, eight metric tiles, and a treemap of varieties with a tooltip.
  1. 01Filters: the same row on every chart.
  2. 02Tiles: one structure for every metric.
  3. 03Tooltip: same behaviour as Trade Insights.
Product Analytics, in Intelligence.

Filters were a challenge of their own. Every page in every module had them, and in Intelligence every chart has its own set.

I kept their border stroke at 0, a solid fill only, so the chart stays the hero in every section.

The Top Variety Traded chart: a row of filters (exporting country, exporter, importing country, importer, variety, add filter) directly above a treemap, with no box around the filters.
  1. 01Each chart carries its own filters.
  2. 02Filters sit in a solid fill with no border, so the chart stays the hero in every section.
Filters on Intelligence chart.

08 · Across modules

The same language in Hub and Operations.

The Buyer Profiles page in Hub: a row of filters above a grid of company cards, each with a verified tag, details and a Contact Buyer button.
  1. 01The filter row from the analytics pages.
  2. 02Company cards: grey labels, dark values.
Buyer Profiles, in Hub.
The Shipments Overview page in Operations: summary tiles, a checklist table with status tags, a shipments calendar, and lists of shipments and RFQs.
  1. 01Tiles again, now counting shipments and tasks.
  2. 02Tags: one treatment for every status.
  3. 03Calendar entries reuse the same card and tag.
Shipments Overview, in Operations.

Different workflows. Different data. Same design language.

09 · Before and after

Before

The earlier lists: top five trade flows as blue bars, fastest growing and fastest declining markets, both with red trend lines.
  1. 01Tabs with no icons.
  2. 02Titles: “Top 5”, “Fastest growing”, “Fastest declining”.
  3. 03Rank numbers in regular weight.
  4. 04Red for growth and for decline.

Growing and declining look the same.

After

The newer lists: top trade flows, emerging markets with green trend lines, declining markets with red trend lines.
  1. 01An icon on each tab, for quick recognition.
  2. 02Clearer titles: Top Trade Flows, Emerging and Declining Markets.
  3. 03Rank numbers in bold.
  4. 04Green for emerging, red for declining.

Colour, wording, tab icons and rank numbers all changed.

The same part of the Intelligence overview, earlier and now.

Before

A Projects table with plain white rows: project ID, name, commodities, company, assignee, status and attachments.
  1. 01Plain rows. The eye can slip a line.

Every row the same white.

After

A Company Directory table where alternate rows have a light grey background.
  1. 01Alternate rows tinted.

Zebra striping on every dense table.

Another internal product in the company, on the same design system. Zebra striping alternates row backgrounds so people can read dense data across wide columns.
BeforeAfter
DecisionsSolved locally, screen by screenShared rules that could be reused
ColourChoices variedColour had defined meaning
Chart behaviourVariedDefined patterns
PatternsRecreated each timeComponents became building blocks
New viewsStarted from the screenStarted from an established foundation
Dense tablesPlain rowsZebra striping

What changed?

10

  • ConsistencyA shared visual language across dashboards and product areas.
  • ReusePatterns could be applied instead of recreated.
  • ScaleNew analytics views had an established foundation.
  • Design + engineeringVisual intent could be discussed and aligned with implementation.

What I took away

I used to think of a component library as a way to keep screens consistent.

Working on TradeNeo changed that for me.

In a data-heavy product, the system isn't just visual polish. It helps define how information is represented, how patterns behave, and how the product can grow.

The most valuable part wasn't making today's screens consistent.

It was making tomorrow's decisions easier.