Web app design services & corporate website redesign for commodity market intelligence agency

Quantum is a London-based media agency and data reporting company covering the oil, biofuel, carbon, ammonia, and hydrogen markets. It publishes daily market prices and news for industry professionals, with its price assessments used by traders as benchmarks when negotiating and closing deals.

Web app redesign

When the client came to us, the platform was already live, but it wasn’t working as a daily tool for traders as it needed to. The problems fell into three main categories.

Transform the platform from a “newspaper” into a personalised daily tool for traders

The project began with a discovery phase centered on in-depth stakeholder interviews. We spoke with people from marketing, engineering, and product leadership to understand how the existing platform worked, where it fell short, and what the redesign needed to address. 

Each session lasted 60–90 minutes. We used these conversations to map the existing product, identify key gaps, and prioritize the scope before moving into UX and design.

One of the first findings was a mismatch in how the client and design team understood some of the platform’s basic concepts—including what a “dashboard” should be. The client used the term to describe a content-rich home page, while we initially understood a dashboard as a workspace with metrics and data.

That difference quickly became a design problem rather than a terminology issue. We were solving for different structures and purposes, which complicated alignment on the home page concept. It became one of the starting points for rethinking the information architecture and, eventually, reframing the “dashboard” as a personalized home page.

Personalised home page (not a dashboard design)

Stakeholders initially asked for a dashboard. We explored several directions, but none of them worked. Each iteration ended with the same response: “not quite right.” We had reached a dead end because we were solving the wrong problem.

The underlying issue was a fundamental difference in how we defined the product. We saw a dashboard as a set of metrics and charts, while the client saw it as a navigation page that brought together the platform’s content categories. As a result, the home page became one of the hardest UX issues in the project, with the concept reworked around three times before expectations aligned.

The solution came after 3+ design sessions and a simple change in terminology: we stopped calling it a "dashboard" and called it a "home page." That small shift aligned the team around what the page actually needed to do.

We then built the home page as a system of self-contained widgets: selected prices, subscription news, triggered alerts, policy updates, and an event calendar. The same structure could adapt to different user personas without splitting the product into separate experiences.

Alerts & urgency cues

Alerts became the primary trigger for daily visits to the platform. We built a complete alert architecture across four content types: Price, News, Data, and Policies.

The key principle was simple: users can create an alert from anywhere on the platform without leaving the context of the task they are working on. Urgency cues for trial users, including an access countdown timer, and triggered notifications for significant price movements reinforced the platform’s role as a daily tool.

Right sidebar

It was a deliberate UX decision, bringing together secondary tools—watchlist, alerts, event calendar, and AI assistant—in a persistent component that stays visible across the platform.

A trader can switch to another task from any point in the platform without losing the context of their current work.

3-level navigation & progressive disclosure

One of the more complex UX challenges was designing a 3-level navigation system for commodities. The previous platform used a simple dropdown that placed all categories in a single menu. 

The new product needed a clearer way to sort and navigate across multiple markets without overwhelming users who were already familiar with the old structure.

We reworked the navigation hierarchy, grouping logic, and visual hierarchy around how traders move between commodities and content types. The goal was to make the new structure easy to pick up while keeping familiar paths for experienced users.

Architectural solution:

• Primary commodity types—Oil, Biofuels, Carbon, Ammonia, and Hydrogen—sit at the first level and use large type that also serves as the page heading.
• Secondary filters such as News Type, Date, and Location sit in separate controls, keeping them out of the primary navigation.
• Selecting a commodity opens an optional menu with badge-style subcategories. This follows the progressive disclosure principle: users see additional detail when they need it, rather than facing the full category structure at once.

Price matrix

The client wanted to rethink the price table from the ground up, using competitor solutions as a reference point. But their UX did not fit Quantum’s use case, so we paused the design work and spent an additional week on UX research to find a better approach.

The key decision was to open individual prices in a drawer rather than on a separate page. Traders work with a complex table and process multiple positions at once. Opening a new page for every price would break their context and force them to navigate back to the same place. The drawer keeps the table in view, letting users inspect price details and return directly to the same row.

We also reworked the table structure to make large volumes of data easier to organize and navigate.

Information density

The client wanted a high-density interface similar to Bloomberg or Refinitiv. But that level of density serves a specific purpose in trading terminals: traders need to monitor and act on large volumes of data at once.

Quantum serves a different purpose. Its primary job is to make market content easy to find and consume. We chose a middle ground between a newspaper and a trading terminal: keeping information density high while giving users a clear path to the content they need.

Email newsletter

We rethought the email newsletter as part of the product journey rather than a standalone product. The new design gives users a clear reason to return to the platform—compare prices, set up an alert, or explore the full chart. Email starts the journey. The platform takes it further.

The starting point

When the client approached us, the website was already live, but it had the same outdated feel as the platform: heavy, cluttered, and lacking a clear marketing logic. Its first impression didn’t match the product’s quality.

Despite the company’s strong expertise, the website made Quantum look weaker than its competitors, did little to build trust, and struggled to attract new users.

Key challenges with the previous corporate website

• Outdated visual concept — the site didn’t convey the depth of Quantum’s market analysis, lacked a unified design system, and had no consistent visual language.
• No clear marketing purpose — it was unclear what Quantum offered, who it was for, or why a potential client should try it.
• Weak calls to action and conversion paths — the site gave visitors few clear next steps toward trial access or a demo.
• The site and platform looked too similar — there was no clear distinction between the marketing-facing website and the product people used for their daily work.
• No defined brand guidelines — the lack of clear rules made it difficult to maintain a consistent visual language as the website and product evolved.

Website project goals

The website was designed to become the first point of contact between a potential client and the product, with every element working toward two things: attracting new users and making Quantum’s value clear. Specific objectives were the following:

• Generate leads — drive registrations for trial access and demo requests
• Build the brand — clearly communicate who Quantum is, what it offers, and why potential clients can trust it
• Attract partners — create opportunities for new partnerships in the market

Website discovery phase

The website is a marketing tool. That’s why we started with understanding the customer journey rather than visual design: what potential clients need to see, how they evaluate solutions, and why they should choose Quantum over strong competitors.

1. Website and platform audit — assessed the existing experience and identified the key problems to address
2. Competitor analysis — reviewed top competitors and references from adjacent markets
3. Sitemap and information architecture — structured the site around how potential clients evaluate and choose a solution
4. User flows — mapped the key paths from first contact with the site to registration
5. Wireframes — tested the structure and page logic before moving into visual design
6. Two design concepts — developed two distinct visual directions for comparison and discussion

UX/UI design phase

• Full website design based on the selected concept
• Base component set (UI Kit) to ensure visual consistency across the site
• Custom illustrations and video animations for key sections
• Mobile adaptation of all pages

The site and platform are intentionally different

This was a deliberate design decision, not a discrepancy. The site and platform serve different purposes: the website needs to capture attention and make a strong first impression, while the platform needs to work as a daily tool for handling large volumes of information.

Quantum logo adaptation

The client didn’t have a complete brand identity in place; however, we didn’t build the identity from scratch. Instead, we adapted the existing logo to meet current design requirements, making it richer and more expressive.

We kept the symbol and typography largely unchanged to preserve the brand recognition Quantum had already established in the market.

We used bold, large-format typography on the website because it works well across marketing pages and reinforces the brand’s confidence. On the platform, the same approach would reduce readability across dense price tables and news feeds. There, we chose more neutral, functional typefaces built for extended use.

Structure as a marketing tool

We built the site architecture around a single goal: move visitors toward registration as quickly and naturally as possible. Every page plays a role in that journey.

Registration is the primary action. New visitors can read a few articles for free, then see that the rest of the content requires registration. This creates a natural path from exploring the content to signing up for access.

Scope of work delivered

• ~18 fully designed pages
• ~150+ unique user interfaces
• UI kit, as the backbone for website development
• Custom illustrations created specifically for the project
• Mobile adaptation of all pages

Strategic results

• The website gained a clear marketing structure with a primary focus on registration and demo requests
• The company can now communicate its value more clearly to users and potential partners
• The adapted logo preserves existing brand recognition while giving it a more modern look
• The company gained a cohesive visual identity for the first time