Real-time trading
Products, offers, variation, buy, sell, limit, and daily trades coexist on the same surface.
UX/UI DESIGN
2020 – 2022
E-HUB BBCE
I transformed a 2010s energy ERP into a modern trading terminal, preserving the operational depth the free energy market requires.
01 / Context
A product for a desk operating under pressure.
BBCE E-HUB is an energy trading platform. Unlike a conventional dashboard, the product needs to support a routine where operators monitor products, read order books, check limits, place orders, register contracts, track authorizations, and receive communications relevant to the operation.
On an energy trading desk, too much information without hierarchy becomes noise. Too little information becomes risk. The design needed to preserve the density required to operate, while organizing each action so it was clear, fast, and auditable.
Registration and traceability
Ticket and contract flows require completeness, signature, validation, and history.
Governance between companies
Netting, counterparty authorization, and notices are part of the same decision ecosystem.
Mobile continuity
The app supports reading and targeted actions without trying to copy the full desktop density.
Clarity, here, did not mean removing complexity. It meant structuring complexity so the
user could act with confidence.
02 / Problem
The experience needed to connect trading, registration, and governance in one flow.
The operator does not think in modules. They monitor the market, identify opportunities, check limits, place an offer, register information, follow status, and depend on reliable communications. If the interface separates these steps too much or changes the visual logic without reason, it breaks the operation's mental flow.
The main screen concentrates products, books, limits, registration, and daily trades on a single operational surface.
What needed to be solved
High information density, risk of offer errors, many operational states, authorization between companies, segmented communication, and a clear difference between desktop and mobile.
Solution thesis
Instead of creating isolated screens, the redesign treated E-HUB as the operating system of the energy desk.
03 / My role
Turning business rules into operational experience.
I worked on the redesign of the BBCE E-HUB experience, organizing flows, screens, and components for a highly complex product. The work required understanding the logic of energy trading, the data operators need on screen, the risks behind each action, and the states that need to be read quickly.
Trading desk operator
Needs to monitor market, products, offers, limits, and daily trades on the same surface. Operates under time pressure and financial consequence.
- Read the market quickly and place an offer in a few steps.
- See available limit before acting.
- Track buy, sell, price, and status.
- Register or consult contracts without losing context.
Admin and governance
Needs to maintain control over companies, users, permissions, netting relationships, notices, and logs.
- Authorize relationships between counterparties.
- Track netting and pending items.
- Send segmented operational notices.
- Maintain records and traceability of actions.
04 / Flow
The flow was designed to follow the real routine of the operation.
The most important visual decision was not separating screens by theme. It was creating a common language for the whole operational environment.
01
Secure access
Login, validation, and electronic signature establish control from the start.
02
Market reading
Products, book, charts, limits, and daily trades form the decision base.
03
Offer placement
Buy, sell, price, quantity, and submission need to be clear and fast.
04
Ticket and contract
Complex fields are organized by dependency, link, and traceability.
05
Netting and counterparty
Authorizations between companies need to be legible and auditable.
06
Notices and mobile
Communication and mobile support preserve continuity outside the trading core.
05 / Decisions
Six decisions to turn density into operational flow.
The decisions were guided by function, risk, hierarchy, and state. The interface needed to be fast where the desk needs to act and careful where registration requires review.
Decision 01
Organize density into operational zones.
Products, book, workspace, limit, registration, and daily trades were treated as zones with clear functions. The goal was to preserve the density needed by an energy desk without giving everything the same visual weight.
Decision 02
Use terminal language to preserve continuity.
The dark base supports continuity between trading, registration, and governance. Differentiation between flows happens through hierarchy, grouping, contrast, semantic color, component states, and action weight.
The theme does not separate context. Function, hierarchy, and states separate context.
Decision 03
Treat the ticket as a guided contract.
Registering a ticket involves product, counterparty, links, period, units, price, guarantees, notes, and signature. The ticket was structured as a contract flow, grouped by operational dependency and with a clear action close.
Decision 04
Make auditable states quick to read.
Authorization statuses are not decorative. They indicate risk, permission, and next action. Color, label, position, and consistent components help users identify pending items and blocks before acting.
Decision 05
Separate operational speed from registration depth.
Trading favors density, quick reading, and direct action. Tickets, netting, and notices favor grouping, validation, review, and clarity of closure. The system is fast where it needs to be fast and careful where it needs to be careful.
Decision 06
Take the operation to mobile without copying the terminal.
Desktop concentrates the desk's depth. Mobile was designed as an operational extension for reading products, tracking, and placing targeted offers in a reduced context.
06 / Solution
An operating system for energy trading.
The result was a platform that covers the core operational cycle: secure access, market reading, trading, registration, counterparty authorization, communication, and mobile follow-up.
Trading terminalProducts, books, limits, registration, and
daily trades on a high-density surface.
Detailed ticketGrouped fields, links, guarantees, notes,
and electronic signature.
NettingAuthorizations and visual states for relationships
between companies.
Operational noticesSegmented communication by economic
group, users, and targeted messages.
Support mobileProduct reading, follow-up, and targeted
offer placement.
Design systemComponents and visual patterns to sustain
consistency across a broad platform.
07 / Screens
Screens that tell the full product flow.
The gallery prioritizes the surfaces that tell the case story: trading, registration, governance, communication, and mobile continuity.
Real-time trading
The main screen concentrates products, books, limits, registration, and daily trades on a single operational surface.
Detailed ticket
Registration was treated as a guided contract, with grouped fields and signature at closure.
Netting
Authorization states make relationships between counterparties more legible and auditable.
Operational notices
Segmented communication integrated into the system routine, without moving the operation outside the platform.
08 / Results
The project gave shape to a complex operation without flattening the domain.
BBCE E-HUB was structured as an operational platform, not as a set of independent screens. The experience connects market data, trading action, contract registration, authorizations, communication, and mobile with a consistent visual logic.
Operational coherence
Trading, registration, and governance share visual language and state rules.
Flows by function and risk
The system differentiates operational speed and registration depth without breaking continuity.
More visible states
Authorization, pending, and blocked states stop being isolated text and become decision elements.
Mobile as an extension
The app keeps the essentials of the operation without trying to reproduce the full density of the terminal.
09 / Learnings
In complex B2B, clarity is not superficial simplification.
01
Mastering the domain changes the design
Without understanding trading, tickets, contracts, counterparties, and netting, any
visual solution would be fragile.
02
Density is not the enemy of experience
On an operations desk, removing critical information can make decisions worse.
03
The visual theme cannot be the product thesis
The dark language works because it supports terminal continuity, but the real value
is in hierarchy and traceability.
04
Each surface needs a clear role
Desktop concentrates depth. Mobile supports continuity. Registration requires
review. Trading requires speed.