One settings system for 12 widgets

I turned fragmented settings across TakeProfit into one reusable system of typed rows. New settings can now be assembled in a couple of hours, often without a designer.

Problem. The same controls were rebuilt from scratch everywhere

TakeProfit is a modular trading platform where every widget needs its own settings.

Users build their workspace from widgets such as charts, watchlists and order forms. The chart also includes indicators and 44 kinds of drawing tools, each with settings of their own.

The same parameters looked and behaved differently across the product. Some controls were not reusable components at all, while some parameters users needed were not exposed.

Solution. I turned the repeating parameter types into ~40 rows

I audited existing settings and spoke with widget teams about current and future requirements. Instead of designing screens separately, I built the system around reusable parameter rows that could be combined for different widgets.

Each row represents a specific parameter type and includes the control and actions it needs, such as reset or visibility. The rows stay consistent across the product, while their combinations remain flexible enough to support very different settings. About forty row types cover the product. Some are ordinary — numbers, colours, toggles — but most carry the domain: symbol, timeframe, session, source, a formatted note, a point given as price and bar.

An indicator and a drawing are built from the same rows and still look nothing alike. Sections, visibility rules and shared footer actions work consistently across settings panels.

Impact. Settings now take 2–3 hours instead of 3–4 days

Today, all 12 widgets use the system. New widgets use the same reusable rows instead of getting their own settings implementations, and products like the Order Form and Market Depth adapted the same foundation to their needs.

For indicators and backtesting, settings are generated automatically from their parameters. For other widgets, a developer can assemble settings by choosing the rows needed for each parameter, reducing the work from 3–4 days to 2–3 hours and often removing the need for a designer. A new chart display type was also added later without changing the underlying system.

Automatic

to generate settings for
indicators & backtesting

2–3 h

instead of 3–4 days
for other widgets

drawing kinds migrated

5 → 12

widgets

Process. We built it as a pair; a prompt assembles it now

I worked closely with one frontend engineer throughout implementation, reviewing what was already built and making decisions together about how the rows should work and combine in code.

We started with indicators because they covered the widest range of parameter types. Once the shared rows worked there, we moved to the chart and other widgets. Drawings came last, because settings for all 44 drawing kinds had to be migrated onto the new system.

The design took about six weeks and implementation about two months.

Ann Latu · Product Designer

anna.latukhova@gmail.com