frog

Grain trading has traditionally been a B2B business, with complex platforms like Engelhart, Metalshub, and Vosbor dominating the space. These platforms resemble tools like the Bloomberg Terminal or TC2000: powerful but overwhelming for new or casual users. Our goal was to explore a direct-to-consumer (B2C) mobile experience.

The trading process is deeply tied to physical constraints – trucks or boats with specific loading quantities, established protocols, and strict flows that we couldn't change. This meant that it was in the user interface itself that we needed to design innovative new approaches.

We first mapped out the trading workflow into six core flows:

• Onboarding: Setting up accounts, teams, and uploading financial documents
• Home: Dashboard with market prices and next actions todo
• Trading: Main screen to browse products, buy, and sell
• Execution: Managing and completing active orders
• Reporting: Accessing market reports and downloadable analysis
• Admin: Backend tools for platform administrators

Our three-person design team collaborated across all flows to understand how they interconnect. But for client presentations, we each "owned" specific sections; I focused primarily on the Trading screens.

To design this platform for trading, we first had to understand how grain traders and the market works.

At its most basic level, grain trading involves sellers listing a quantity at a certain price: this is an offer. On the other hand, buyers submit bids specifying the price they're willing to buy for a particular volume and spec.

Traders want multiple ways to view market data. Some prefer a high-level graphical overview of prices and trends, while others need a dense, detailed listing view for making trades.

To accommodate this, I designed a toggle in the bottom right corner, easily accessible on mobile, letting users switch between:

• Graph mode: Simplified analytics and charts
• Listings mode: Full list of market offers and bids

Through our discussions with our experts, we found that traders rarely look at every single listing on the market at once. Instead, they filter by product, origin, and destination port. However, many track several sets of filters at the same time.

For example, a trader might monitor Russian corn arriving at New York as well as Ukrainian corn headed to Boston.

To manage this, I introduced Views: preset collections of filters users can easily switch between. The default “All” View would show every listing, while custom Views isolate specific filters for quick access.

Unlike the straightforward Graph mode, Listings mode was challenging. Simply transplanting dense tables filled with data onto mobile screens wouldn’t work.

Instead, we used self-contained listing cards, each representing either a bid or offer, with clear details:

• Commodity
• Origin
• Destination port
• Price per metric ton
• Minimum Order Quantity, or MOQ (basically the minimum amount of product that a supplier is willing to sell in a single order)
• Quantity available
• Expiry date

We reinforced context with color-coding: red for offers (sellers) and green for bids (buyers), which is consistent with trading conventions.

To move beyond traditional table layouts, I designed a “wheel-inspired” interaction for the marketplace, where offers and bids visually anchor opposite ends of the screen.

I was inspired by Depth of Market tools, which are too complex for this app. And I was also inspired by the picker view UI when setting an alarm in iOS.

Responding to orders

By tapping a listing card, trader see more details for the order. They select a purchase quantity and then confirm with a One-Time Password (OTP). Speed is critical, since order can expire or be taken by others, but the OTP confirmation was necessary to prevent mistakes.

Creating an order

Traders start by choosing bid or offer, then they select the commodity and origin.

If trading directly with a counterparty (Over-The-Counter, OTC), they toggle to enter a private code.

Next, they input quantity, destination port and warehouse, price, and listing duration.

After reviewing the order and confirming with an OTP, it launches live on the market.

Initially, this form was a single page. However, I received feedback from the client that it was too long and felt a bit intimidating, risking costly errors. Breaking it into multiple steps introduced intentional friction to ensure quality and guided users with clear labels.

Even simplified, trading is filled with jargon and acronyms. For example:

“I’m watching an Argentinian wheat listing at 7,200 $/ mT FOT with a 360 mT MOQ, but there’s an OTC bid for Ukrainian soy at a CIF-equivalent price out of Boston expiring in 18 hours.”

This means a trader is considering buying Argentinian wheat at a fixed price of $7,200 per metric ton of wheat. But he is also eyeing a separate time-sensitive offer for Ukrainian soy where the seller handles delivery to the port of Boston. All while managing volume requirements and comparing deal terms.

I probably wouldn’t have understood what any of that meant about 3 months ago! However, traders bounce these terms around frequently, so it was important that the platform enabled traders to navigate around these different options.

To help users navigate, I designed clear, color-coded tags on listing cards:

• Bid and offer tags followed the typical buy/sell colors (red/green)
• FOT (Free on Truck, meaning goods are transported domestically via truck) and FOB (Free on Board, meaning goods are transported internationally via boat) are logistical terms that indicate delivery conditions, and gray implies a neutral metadata, which is why we chose it for that.
• We used orange as a cautionary status for OTC since they were off-market and custom negotiations, which are a slightly riskier.

During this internship, I learnt immensely about how the market works and how trading is done with physical commodities. Grain trading is a pretty niche topic, but I loved how deeply we went to understand all the processes! My design team didn’t do this by ourselves – we had the help of a dedicated business team which we partnered with daily to create all the screens.

Building the listings screen (which we affectionally named the “Wheel of fortune” due to its spinning character) was also incredibly fun! Since we were also making a prototype for the client, I was able to push Figma prototyping to the limit to really show the interactive behavior of the page.

Finally, this was my first experience working in the consulting industry. I learned how to present design work effectively to clients, how to communicate the value of staying in mid-fidelity during exploratory stages, and how important it is to use real data instead of placeholder text. Many of the experts we presented to would focus on even minor data inconsistencies, which could easily distract from the actual design decisions we were trying to showcase.