We started by breaking down what would a gas trader/suplier/buyer focus on before making a trading deal. The common questions they asked each time were

• “What’s happening in the market right now?”

• “Is this movement meaningful?”

• “Which hubs are active?”

• “Should I act now?”

• “Is this a good opportunity?”

So accordingly the app needed to present:

• Multi-variable analytics

• Contract-based market data

• Volume-price relationships

• Hub-specific trends

  …while still remaining scannable on smaller screens.

Design Approach

With the problem identified and broken down it's time to get to the designing part. We focused our approach in the following manner:

• Progressive disclosure: Showing only the most important information upfront while revealing deeper data gradually as users interact.

• Visual hierarchy: Organizing information based on importance so users instantly know where to focus.

• Card-based analytics modules: Breaking complex analytics into smaller, self-contained cards instead of large dense dashboards.

• Simplified chart interactions: Reducing unnecessary chart complexity to make trends understandable quickly.

• Clear labeling for contracts & hubs: Using explicit naming and structured labeling to avoid confusion in a high-stakes trading environment.

UX Decisions

Progressive disclosure: Showing only the most important information upfront while revealing deeper data gradually as users interact.

• Trend-first Visualization: Focused on market movement and price trends over decorative visuals to improve data interpretation speed.

• Clear Market Signals: Highlighted anomalies, spikes, and high-activity hubs to help users identify opportunities faster.

• Reduced Cognitive Load: Minimized unnecessary interactions & simplified data presentation to improve readability on smaller screens

• Scannable Analytics: Used compact analytics cards and structured layouts for quick comparison across sectors, fuels and contracts.

•