Case study · Client project

metalRef

London Metal Exchange data, finally readable at a glance — a custom, mobile-first tool for a metals trader.

UX/UI & Frontend Data UX Vue 3 TypeScript i18n

metalRef running on a phone — copper detail with price chart, alerts and history in dark mode

Drag to tilt · scroll the screen to explore

The problem

Market portals bury the signal in noise.

Existing platforms drown a trader in dense spreadsheets full of data they don't need — endless columns, cluttered tables, and no sense of how reliable each number is. The information is all there; it's just unusable in the moment a decision has to be made.

	A	B	C	D	E	F	G	H	I	J	K	L	M	N	O
1	25.99	18.52	—	10571	10401	10657	9969	9241	28.55	22.72	9074	25.68	34.41	—	17.91
2	—	36.42	29.65	—	10003	19.28	18.09	3985	—	9032	21.30	—	9402	17.97	3660
3	—	33.52	9870	9308	16.21	19.55	—	3839	—	10655	3638	9071	—	26.29	16.87
4	3638	18.82	38.22	9963	16.02	10597	3955	19.65	9966	3646	16.61	3949	39.08	39.31	—
5	10588	—	9841	26.72	16.24	9772	37.89	18.64	—	3668	19.78	3593	—	—	3776
6	24.72	—	31.19	19.48	31.97	25.98	25.39	—	32.17	23.92	—	3698	23.69	—	3102
7	—	—	17.58	—	9615	10284	18.86	17.46	—	—	3230	19.03	10019	16.95	9572
8	—	—	10398	9028	32.82	3349	10447	—	3004	3597	9124	—	—	—	9220
9	—	—	18.82	—	9222	—	9583	9692	3334	9303	—	10595	9895	3651	—
10	9179	3111	28.63	—	10154	3695	17.06	3059	22.86	34.26	—	10274	16.76	—	10334
11	—	9756	3706	26.29	—	16.89	9765	23.26	3541	16.85	3216	3912	18.70	18.69	39.78
12	3056	10690	3160	36.88	18.43	30.20	18.00	—	10589	3245	10619	9468	3934	9364	37.03
13	—	16.05	10198	19.60	—	10091	—	10120	10488	16.35	37.92	—	3967	9903	3591
14	16.98	25.21	9568	—	31.97	—	18.14	3929	19.71	27.30	20.04	10262	35.98	9420	—
15	34.08	33.45	20.78	3244	3425	10480	—	34.91	37.66	10756	10113	3020	9176	3437	9478
16	—	9384	—	3786	—	3405	3476	—	33.12	23.47	—	26.87	3944	—	24.10
17	3811	—	—	—	—	10021	16.57	9023	10224	27.16	3973	18.44	—	10673	35.70
18	9114	18.51	16.83	33.22	9352	31.91	3612	26.35	22.16	16.05	3848	16.28	3582	3264	9315
19	29.00	—	19.47	17.93	9898	9536	19.66	10517	3697	—	—	10508	10246	19.62	3643
20	10209	—	17.27	16.32	9549	—	3914	9120	9882	26.22	10781	—	9199	39.59	3259

Raw market data — hundreds of cells, no hierarchy, no idea what to trust.

The approach

Strip it back to what a trader actually needs.

Only what matters

I distilled the trader's real decisions into a focused dashboard — cutting the noise of generic portals down to the few metrics they actually use.

Data you can trust

Every figure carries its provenance — source, delay and last-updated time — so the user always knows how fresh and reliable a number is.

Readable at a glance

Time-series charts with range selectors (7d / 30d / 90d) and dual-unit display (USD/t · €/kg) — all custom-built in SVG, no charting library.

Where it's at

A clear, trustworthy read on the market.

Mobile-first and dark-first, in three languages. Currently in MVP phase while the production data-provider integrations are finalised — the interface patterns (provenance, empty states, inspection, charts) are the part I set out to solve, and they're live.

Visit metalRef Have a project like this?