Hartree

web platform

financial industry

Hartree Mosaic

The Hartree project focused on developing a powerful, data-driven platform for global commodities traders, providing real-time insights and advanced analytical tools. The platform aimed to simplify complex data analysis, enhance decision-making, and offer customisable dashboards tailored to individual trading needs. By prioritising accuracy, innovation, and user-centric design, Hartree set out to deliver a seamless, efficient, and intuitive solution that supports informed decision-making and drives operational excellence across global markets.

client

Hartree Mosaic

duration

8 Month

resources

services

- Functional spec

- Design

- Development

Design direction : Mood board

context

The process began with an in-depth understanding of Hartree’s mission to provide advanced tools for global commodities traders. At the core of this effort was developing a design framework that captures the platform’s identity—combining precision, innovation, and usability. This strategic foundation guided our approach, ensuring alignment with Hartree’s vision and the complex needs of its users.

what we did

Through comprehensive research, we analysed Hartree’s brand values, user workflows, and industry standards. This research shaped our design framework, establishing a clear visual language that blends analytical clarity with a modern, intuitive interface. The result is a cohesive platform experience that supports Hartree’s commitment to empowering traders with powerful, flexible, and easy-to-use analytical tools.

Style Guide

Design Elements

The Hartree digital style guide defines essential design elements such as typography, colour schemes, and data visualisation standards. This unified approach strengthens brand consistency while enhancing usability across complex data environments. It also facilitates seamless collaboration, ensuring accuracy and efficiency as the platform evolves to meet the demands of global trading.

Colors

Typography

User Experience (UX)

In the UX phase of our collaboration with Hartree, our goal was to create a data-driven platform that empowers commodities traders with intuitive, customisable analytical tools. We focused on delivering a seamless experience that supports complex decision-making while maintaining clarity and ease of use throughout the user journey.

A key focus was enabling users to build and manage custom dashboards effortlessly. We designed a system where traders can easily visualise real-time data, track key market metrics, and adjust parameters on the fly. This flexibility allows users to tailor insights to their specific needs, improving decision-making speed and accuracy.

We carefully mapped out user flows to ensure smooth navigation across the platform. For traders, we prioritised quick access to essential data, enabling them to create and customise dashboards with minimal effort. For analysts, we designed streamlined workflows for managing large datasets and generating advanced reports. Each flow was optimised to reduce friction and enhance productivity.

Through iterative usability testing, we refined the platform to align with real-world trading scenarios. By focusing on user efficiency and adaptability, we ensured that Hartree delivers a robust, intuitive experience that supports fast, informed decisions in dynamic global markets.

User Interface (UI)

During the UI phase of our collaboration with Hartree, we aimed to design a platform that balances analytical depth with an intuitive, modern interface. Our goal was to present complex data clearly while maintaining a clean and adaptable visual style that enhances usability for all users.

For traders, we created customisable dashboards with interactive charts and real-time data visualisations, allowing quick insights into market conditions. For analysts, we designed intuitive interfaces for working with large data sets, offering advanced filtering, mapping tools, and dynamic reporting features. Each interface element was crafted to improve clarity and accelerate workflows.

Inspired by cutting-edge financial and data platforms, the interface combines precision with user-friendly design. We focused on delivering a cohesive experience that supports complex analytics while remaining approachable and easy to navigate.

We also prioritised accessibility and responsiveness, ensuring the platform functions seamlessly across devices. Whether on desktop or mobile, users can interact with critical data in real time. This responsive design enhances user engagement while reinforcing Hartree’s reputation for delivering innovative, high-performance trading solutions.

Our Challenge

Developing a flexible, backend-agnostic frontend for real-time analytics

Delivering a Scalable Frontend for Complex Analytics Hartree, a global commodities trading firm, required a cutting-edge data platform capable of visualising complex trading insights in real time. Their internal backend team needed a highly flexible, scalable frontend system built entirely in React — one that could easily integrate with custom APIs and support dynamic data components.

One of the main challenges was that the backend architecture and database schema were still being finalised during development, which required our team to create React components that were adaptable and backend-agnostic.

The goal was to anticipate integration needs without sacrificing performance or design accuracy.

Our Solution

Building a modular React component library to enable smooth integration with custom APIs and dynamic data

To meet Hartree’s requirements, we developed a comprehensive library of reusable, modular React components using Storybook. This approach allowed us to design, document, and test each UI element in isolation, ensuring consistency and smooth handoff to Hartree’s backend team.

From interactive charts and data tables to advanced filters and custom dashboards, every component was engineered to support rapid deployment and flexible integration. By decoupling frontend development from backend dependencies, we enabled Hartree to move forward confidently with their internal build process.

The result is a modern, scalable frontend architecture that supports Hartree’s vision of real-time, data-driven trading intelligence.

Similar Projects

Beancruncher

Beancruncher is a website platform that simplifies financial reporting for businesses. It integrates with major accounting software such as Sage, Xero, and QuickBooks, helping companies understand their financial data, create reports, forecast the future, track progress, and benchmark performance.

Pfizer

Most cigarette smokers want to quit, but fewer than one in ten smokers succeed in quitting without the right support mechanisms in place. At CubeZoo, we believe in leveraging technology to create meaningful solutions that drive positive change. Our partnership with Pfizer Pharmaceuticals exemplified this ethos, particularly in our collaboration to support South African smokers in their journey to quit.

BMW

Even businesses that have been around since the 1920’s need a great digital presence. When BMW’s motorcycle division, Motorrad, decided to create a website app in 2016, cross-browser compatibility quickly made them hit the breaks. CubeZoo took up the challenge, creating an interactive web app that would allow biking enthusiasts to take a road trip around South Africa via a digital roadmap of on-road and off-road trails.