Glencore — Core Trade
Enterprise Commodities Trading Platform
Complement to BJB: where BJB was org-level design system leadership, Core Trade is the same rigour applied to a live product under real sprint pressure.
Context & Challenge
Glencore is one of the world's largest diversified natural resource companies, operating across copper, cobalt, nickel, zinc, ferroalloys and other metals through a global network of offices, mines, and processing facilities.
At the heart of its Metals & Minerals division sat a legacy trading and operations tool — over 20 years old — that had become a critical but increasingly fragile backbone of daily business.
Core Trade was the initiative to replace it:
- Replicate and improve all existing trading & operations workflows
- Introduce missing functionality identified during requirements gathering
- Significantly improve usability and efficiency for daily power users
- Standardise business processes across departments and offices globally
- Future-proof the architecture: maintainable, extensible, mobile-ready
Users: domain experts (traders, operations managers, financial controllers) who spend their entire working day inside this tool. Zero tolerance for error.
Joining context: UX had been handled externally. My arrival was part of forming a new in-house UX team — a deliberate shift toward closer design–engineering integration.
My Role
UI Track — Component Library
- Sole owner of the Sketch component library aligned to React/Blueprint codebase
- Designed and maintained library architecture: nested files, symbol structure, naming conventions, hygiene rules
- Detailed UI specs for custom and extended components
- Daily collaboration with FE devs during grooming sessions and sprint cycles
- Managed Storybook as living documentation hub
UX Track — Patterns & Requirements
- Defined and documented global UX patterns applied consistently across the application
- Mapped patterns to business requirements — grounded in real operational needs
- Improved existing user journeys and task flows from requirements analysis
- Worked with PO, BAs, and FE devs through full solution design and delivery lifecycle
UI Design Work
- Built on Blueprint (React library for complex data-dense desktop apps) + AG Grid for tables
- Nested library structure: colours, typography, icons, components in separate files — updates propagate automatically
- Hygiene rules: consistent folder structure, strict naming conventions mirroring component names in code
- 1:1 match principle between Sketch symbols and Blueprint counterparts — visually and structurally
- Sprint integration: UI ran continuously in parallel with development through bi-weekly cycles
UX Design Work
Global UX patterns defined and documented for consistent application across the platform.
| Pattern | The Problem | Design Response |
|---|---|---|
| Form Validation | Long forms with mandatory fields and cross-field dependencies — errors have direct operational consequences. | Two-tier alert system (blocking errors vs. non-blocking warnings) — save locked when required, informative when appropriate. |
| Data Feedback | Dense interfaces with abbreviations and codes — expert users still need contextual clarity. | Tiered: tooltips for ambient context, snackbars for confirmations, dialogs only for irreversible actions. |
| Loading States | Large datasets and complex queries — latency is real, users can't afford uncertainty. | Skeleton screens for initial loads, inline loaders for partial updates — always communicates what is loading. |
| Empty States | Filtered views, new records, restricted data — without design these erode trust. | Contextual empty states explaining why content is absent and what action resolves it. |
Design Principles
- 1.Design for experts, not first-time users. Efficiency and precision trump discoverability.
- 2.Consistency as a trust signal. Predictable patterns let users build mental models and work faster.
- 3.The component library is a product. Maintain, version, document, and own it.
- 4.Design–engineering alignment is not a deliverable, it's a process.