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.

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

Technologies

The technologies we used in this project

Remix + React

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

PrimeReact

Comprehensive set of customizable enterprise-ready components to speed up development and ensure consistency.

ECharts

Advanced charting library for interactive, data-driven visualizations tailored to complex planning scenarios.

React Flow

Tool for building intuitive flow diagrams, helping users easily understand connections across systems and assets.

React Flow, React Calendar Timeline & TanStack React Table

Specialized libraries for flow diagrams, Gantt timelines, and feature-rich data tables to visualize and manage complex datasets.

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.

Quick wins

Effective Project Management

Clear risk communication and responsibility-sharing ensured project alignment.

Unified Team Collaboration

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

Optimized User Responsiveness

Fast, lag-free interactions for complex data visualizations.

Intuitive Visual Design

Modern libraries delivered clear, user-friendly representations of complex energy planning data.