Responses by Gert Franke, cofounder and managing director, CLEVER°FRANKE.

Background: Globalance World is an interactive investment platform that empowers investors to make sustainable investment decisions based on economic, societal and environmental indicators. Its main target audience is individual and institutional investors. The site can be accessed by anyone who would like to see an analysis of more than 6,000 listed companies.

The platform offers a personalized digital world map for investors, allowing them to discover the extensive impact and returns of their investments. Through a series of cutting edge data visualizations, users can navigate and assess in real time how sustainable certain investments are, as well as compare different portfolios with each other.

Globalance World makes it possible for users to discover the climate path their investments follow, the megatrends they’re invested in and where in the world—and more specifically, in which countries—their investments have a positive or negative footprint.

Design core: Globalance World has a unique visual language that becomes the platform’s signature. As Globalance Bank strives for sustainable investment, we drew from nature to create an organic “pebble” shape. This is a data-driven symbol based on the nine criteria Globalance Bank uses to calculate a footprint’s impact. The pebble introduces a new visual language to communicate portfolios and individual assets with a recognizable look and feel across the platform.

Another core feature of the website is the globe inspired by The Blue Marble, the 1972 photo of Earth taken by the Apollo 17 crew. The globe creates a focal point for the interface, representing the impact of investments in a palpable and relatable way.

Favorite details: From highly complex financial data and metrics to market trends and search functionality, the platform offers the most comprehensive and accessible experience for the investment banking world.

Challenges: Globalance Bank has numerous parameters and data points to create detailed reports for its investors. To leverage these parameters, our biggest challenge was to create a logical structure for Globalance World while still introducing a completely new way to look at the world of investments.

Technology: The site uses a highly complex and very detailed set of data. To manage it in a scalable way, we built a GraphQL middleware layer between our front end and the API provided to us by Globalance Bank. This transfer layer lets us structure and restructure data to a shape that suits our data visualization process. To name some of the programming languages and technologies, we used CSS3, D3.js, GraphQL, Next.js, React, react-three-fiber and three.js.

Anything else? The 3-D globe was the primary technical challenge of the project. It is the first interface of its kind to combine a 3-D interactive globe with 2-D elements and a scrollable interface. After several iterations, we achieved high visual quality and a good level of performance with several pieces of custom-developed logic.

One of the hardest challenges in creating the globe was finding 3-D geographical data for building a performant user experience. We built a custom algorithm that converts a data file with map data into a triangulated, 3-D globe with the right resolution for our purposes.