FC Barcelona

MarsBased collaborated with Boston Consulting Group (BCG) to build a suite of applications that optimize the planning of energy assets through advanced analytics and mathematical optimization techniques. These tools were designed to generate shutdown alignment plans that maximize profit margins while accounting for critical operational factors such as system networks, production units, and pipeline connections.

By combining cutting-edge technology with industry expertise, the applications empower BCG’s clients to make better-informed decisions, enhancing efficiency and profitability across their operations. MarsBased focused on the frontend development, ensuring a smooth, intuitive user experience, while BCG handled the backend logic and infrastructure. This setup required close collaboration between both teams, working seamlessly together to deliver a cohesive, high-impact solution.

Development process

Our work unfolded across structured, agile iterations with close client engagement:

  • Discovery & planning: Defined user workflows and mapped planning scenarios through joint workshops.

  • MVP phase: Delivered a working prototype enabling scenario generation, cost comparisons, and visualization.

  • Feature expansion: Introduced advanced scenario-analysis tools, cost breakdown pages, and real-time flow capacity diagrams.

  • Polish & optimization: Refined UI responsiveness, improved rendering performance for data-heavy views, and ensured seamless experience across devices.

Constant collaboration via shared channels and weekly syncs enabled swift feedback integration and kept the project tightly aligned with client needs.

Tech stack

The technologies we used in this project

Remix + React

Modern frontend stack with SSR and dynamic UI for a smooth, scalable user experience.

PrimeReact

Customizable enterprise-ready components to speed up development and ensure consistency.

ECharts

Library for interactive, data-driven visualizations tailored to complex planning scenarios.

React Flow

Build intuitive flow diagrams, helping users easily understand connections across systems and assets.

Other libraries

Specialized libraries to manage complex datasets like React Calendar Timeline & TanStack React Table.

Express

Lightweight, unopinionated, highly popular and efficient backend server framework for Node.js.

Results

  • Scenario analysis & comparison: Generate and compare multiple shutdown-planning scenarios, assessing trade-offs and economic outcomes side-by-side.

  • Centralized cost insights: Shutdown, transport link, and pricing costs aggregated on a single page for comprehensive evaluation.

  • Capacity & flow visualisation: Interactive visuals to display resource distribution, flow constraints, and network capacity limitations intuitively.

These features empower BCG clients to make informed decisions, improving operational efficiency and driving enhanced profitability.

Challenges

  • Evolving requirements: Adapting continuously to client feedback demanded agility and rapid feature iteration.

  • Frontend data performance: Managing and rendering massive datasets without compromising performance required advanced optimization techniques.

Key wins

Clear communication

Clear communication and sharing responsibility ensured alignment.

As one

MarsBased and BCG operated as a seamless team, eliminating silos.

Optimal responsiveness

Fast, lag-free interactions for complex data visualizations.

Intuitive visual design

We strived for user-friendly representations of complex data.