Hartree
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.
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.
Similiar Projects
Hartree Mosaic
For Hartree Mosaic, we revitalized their brand by focusing on both strategic and visual elements. We started with a thorough analysis of their business model, target market, and existing branding, alongside a review of the competitive landscape. This informed the development of a new mission and vision that align with the company's goal to lead in data analytics. We also defined key values that reflect their corporate culture. A pivotal aspect was redesigning the logo, making it more aligned with the brand’s modern, innovative, and dynamic nature. Furthermore, we crafted a comprehensive branding system, including updated data visualization principles, ensuring consistency across all materials. As a result, Hartree Mosaic now has a refreshed branding strategy that enhances their market position and supports their vision.
HICO Group
The HICO Website Redesign project focused on transforming the digital presence of HICO Group, a leading AI and data consultancy, to better reflect their expertise and position as The Intelligence Powerhouse. The redesign aimed to deliver a modern, professional, and user-centric experience that communicates HICO’s comprehensive data capabilities beyond just visualisation. Key objectives included improving site structure, enhancing content discoverability, and providing clear conversion paths through interactive features and dynamic forms. By aligning with HICO’s brand identity and focusing on intuitive UI design, the project sought to create a compelling, efficient platform that empowers global enterprises to make smarter, data-driven decisions.
High Five Video
The Hive project centred on building a subscription-based platform for customers and video editors, offering seamless access to high-quality video content and empowering creators with intuitive tools. The platform aimed to address common user frustrations, improve content discoverability, and create a user-friendly experience that caters to both customers and editors. By focusing on intuitive design, flexible subscription models, and robust features, Hive set out to deliver a streamlined, engaging, and efficient solution for managing and sharing video content.
Hartree Mosaic
For Hartree Mosaic, we revitalized their brand by focusing on both strategic and visual elements. We started with a thorough analysis of their business model, target market, and existing branding, alongside a review of the competitive landscape. This informed the development of a new mission and vision that align with the company's goal to lead in data analytics. We also defined key values that reflect their corporate culture. A pivotal aspect was redesigning the logo, making it more aligned with the brand’s modern, innovative, and dynamic nature. Furthermore, we crafted a comprehensive branding system, including updated data visualization principles, ensuring consistency across all materials. As a result, Hartree Mosaic now has a refreshed branding strategy that enhances their market position and supports their vision.
HICO Group
The HICO Website Redesign project focused on transforming the digital presence of HICO Group, a leading AI and data consultancy, to better reflect their expertise and position as The Intelligence Powerhouse. The redesign aimed to deliver a modern, professional, and user-centric experience that communicates HICO’s comprehensive data capabilities beyond just visualisation. Key objectives included improving site structure, enhancing content discoverability, and providing clear conversion paths through interactive features and dynamic forms. By aligning with HICO’s brand identity and focusing on intuitive UI design, the project sought to create a compelling, efficient platform that empowers global enterprises to make smarter, data-driven decisions.
High Five Video
The Hive project centred on building a subscription-based platform for customers and video editors, offering seamless access to high-quality video content and empowering creators with intuitive tools. The platform aimed to address common user frustrations, improve content discoverability, and create a user-friendly experience that caters to both customers and editors. By focusing on intuitive design, flexible subscription models, and robust features, Hive set out to deliver a streamlined, engaging, and efficient solution for managing and sharing video content.