Case study

OilEx

Modular workflow digitalisation

Collage of OilEx deal-action cards, including Nominate the ship, Authorise payment and Sign smart contract
Role
Product design manager
Timeframe
8 months
Design team
2
Development team
8
  • Chose Deal Actions over a checkout-style stepper — modular interactive cards alongside the deal conversation
  • Every action is recorded on the ledger, forming an activity log that keeps critical checkpoints out of free-flow chat
  • Modular, flexible components designed around two product pivots: a B2B SaaS model, then commodities beyond oil
  • Outlined every selling- and buying-side deal scenario for developers, with detailed user stories — feedback was positive
  • Designed and built the OilEx product website in Webflow to communicate Deal Actions to partners

OilEx is a digital marketplace for physical crude oil — connecting independent producers with global buyers and carrying a deal from discovery through negotiation, contracts and settlement. At Hunter Technology, I was the product design manager on OilEx from April to November 2021, working with product strategist Ilya Belikin. We pioneered a modular interaction pattern while tuning and growing the product through repeated shifts in direction.

The OilEx web app marketplace, showing a list of crude oil listings
OilEx web app • Marketplace list • Aug 2021

What I did

  • Product design ownership and user-story planning
  • Product communication with frontend and backend developers
  • High-fidelity prototyping and design documentation (Figma, Whimsical)
  • Product website design and development (Webflow)

Why not a stepper

OilEx digitalises transaction workflows, and with blockchain smart contracts in the mix, the platform had to formalise what has been agreed, delivered and settled at each point in a deal. The obvious answer was a checkout-style stepper. But we weren’t sure of every required and optional step in a physical oil transaction — and the steps work differently for different businesses. The product direction itself kept moving too: one pivot toward a B2B SaaS model, another toward commodities beyond oil. So the design team committed to components that are modular, flexible and extendable, rather than a fixed pipeline.

A linear transaction stepper from an early OilEx prototype
OilEx early prototype • Stepper • Nov 2020

Deal Actions

One element is common to every transaction: people need to talk. OilEx already had a chat component where parties connect, negotiate terms and arrange shipping and payment, so we placed a set of interactive cards next to the conversation — showing what has been done, what can be done now, and what is still to come. Users pick actions from a toolbox as the conversation unfolds instead of being marched through platform-defined steps, and each action triggers structured inputs like updating a price or uploading documents.

The system records every action on the ledger, so critical checkpoints are never lost in free-flow messages. The records form an activity log for the involved parties and drive automatic follow-ups — such as declining other leads for the same listing once a deal is signed.

OilEx prototype • Activity log

Making it buildable

The caveat of a flexible design is the logic and conditions powering it. We had to maximise speed while avoiding unsustainable workarounds to deliver a live showcase as soon as possible. To keep communication with developers accurate, I prepared materials outlining every possible scenario for both the selling and buying sides of a transaction, presented alongside detailed user stories — the feedback was positive.

Design documentation mapping all possible deal-action combinations for the selling and buying sides
OilEx design documentation • All possible deal action combinations

To attract partners, clients and users, we also built a product page that communicates how Deal Actions work, with examples of workflows that could be added to suit different needs.

OilEx website • Deal actions

OilEx shipped as a live beta. Deal Actions was designed so that new workflows — and new commodities — could be added without major redesigns to the negotiation and settlement components.

Read the full case study

OilEx • Modular workflow digitalisation

At Hunter Technology, I worked with our product strategist Ilya Belikin on the company’s flagship product OilEx, a physical oil trading platform. We pioneered a modular interactive pattern while tuning and growing the product amid direction shifts.

Key responsibilities

  • Product design ownership & user stories planning

  • Product communications with frontend & backend developers

  • High-fidelity prototyping & design documentation (Figma & Whimsical)

  • Product website design & development (Webflow)

Project factsheet

Nature of product End-to-end Web App Age Development began Dec 2020 My role Product design manager, Apr 2021 - Nov 2021 Size of design team 2 Size of development team 8 (2 full-stack, 2 backend, 3 frontend, 1 QA) Status Live beta; No updates available after Nov 2021


Product Backstory

OilEx is a digital marketplace connecting independent oil producers with global buyers. It provides a digital workflow for physical crude oil trade: from deal discovery to negotiation, contracts and settlement.

The OilEx web app marketplace, showing a list of crude oil listings

OilEx web app • Marketplace list • Aug 2021


Target users & value proposition

OilEx started off focusing on enabling small oil producers scattered across the US and Africa, connecting them digitally to middlemen who refine or transport physical oil internationally.

Then, again, these middlemen could use the platform to connect with bigger companies downstream who use oil for various products.

Supply perspective

Our initial hypotheses from subject-matter expert interviews were that a lot of people who participate in physical oil trading still use inefficient ways of communication like fax, calls, and paper-based documentation.

This inhibits small producers from having visibility of the market, giving born to more layers of middlemen, thus limits their ability to profit and even operate - we were told that a lot of small producers do not run their rig full-time because there are just not enough orders.

Demand perspective

The lack of visibility on the market could also be an issue for middlemen and oil companies, that limits their business efficiency which is dependant on shipment schedules & terms, volume, oil quality, and price.

The OilEx marketplace map view, plotting listings geographically

OilEx web app • Marketplace map • Sep 2021


Challenges & pivots

Middlemen conundrum

The elimination of (at least some layers of) middlemen is an inevitable outcome if the platform succeeds; however, they would be one of the primary users during early phases because that’s how the market currently works. It was tricky to recruit them for organic user research.

Dependency on business partnerships

A platform without the demand side wouldn’t work. With the middlemen conundrum in mind, we might have a better chance of having live transactions if we find partners that would consume the available stock listed on the marketplace.

1st pivot: SaaS before global sign-ups

We found a partner who has the ability to make decisions for both sides of their supply chain, and might adopt the product on a B2B SaaS model for themselves.

2nd pivot: More commodities

We found a partner who are also working on physical commodities trading, but not oil. We had to start planning on expansion of commodity types if we were to work with them.


Calling for flexibility

With continuous shifts in product direction, the design team focused on product components that are modular, flexible & extendable. Starting from a design system and reusable interactions, we created components like the Filter Bar; and Deal Actions (next section).

Design documentation outlining the principles of the OilEx Filter Bar component

OilEx design documentation • Filter Bar


Highlight: Deal Actions

Workflow digitalisation

OilEx focuses on physical oil transaction workflows. With the integration of blockchain smart contracts, some form of process formalisation has to be implemented to record and indicate the status of a deal, what’s been agreed, what’s been delivered, etc.

It would be natural to think of a stepper like how Amazon iconically does it in their checkout process. However, we weren’t sure about all the required / optional steps for a transaction, and they work differently for different businesses.

A linear transaction stepper from an early OilEx prototype

OilEx early prototype • Stepper • Nov 2020

Human interaction

Until robots take over, we’re sure of this common element in all transactions - people need to talk. We already have a chat component for people to connect with each other, negotiate terms, and facilitate shipping & payment.

There could be a way for a more flexible & modular “stepper” to be integrated within. So we put a set of interactive cards next to the conversation view, showing what has been done, can be done now, and to be done in the future.

Early paper sketches of Deal Action cards alongside the deal conversation

Early sketches • Deal Actions


Multi-side benefits

Users wouldn’t feel limited by a linear set of platform-defined transaction steps because they can dynamically pick from a toolbox of actions along their conversations.

Since each action is the trigger for additional inputs such as updating the price of the deal or upload documents, users maintain a sense of control rather than being forced by the system to update statuses.

Hand-drawn illustration from the OilEx product website showing deal actions around a conversation

OilEx product website illustration

The system is recording every action on the ledger, not allowing critical checkpoints to be lost in free-flow messages. These records form an activity log for involved parties, and facilitate actions automatically for the user - such as declining other leads for the same listing when a deal is signed.

The OilEx deal activity log, listing recorded deal actions chronologically

OilEx prototype • Activity log

As the product development team learns about new workflows, they could be added or modified without major redesigns to the negotiation & settlement components.

This part of the platform can also expand to support more commodities, serve multiple SaaS clients with custom business workflows - all with reusable logical templates on the backend and an almost-identical, centrally-managed setup on the frontend for efficient maintenance & iterations.


Behind the scenes

The caveat of such a flexible design is the logic & conditions powering it. We had to maximise speed but minimise unsustainable workarounds (such as relying some logic on the frontend) to deliver a live showcase as soon as possible.

To communicate with developers accurately and effectively, I prepared materials that outline every possible scenario for both the selling & buying sides of a transaction when using deal actions. Presented together with detailed user stories, feedback has been positive.

Design documentation mapping all possible deal-action combinations for the selling and buying sides

OilEx design documentation • All possible deal action combinations

Design documentation showing an example deal-actions storyline through a transaction

OilEx design documentation • Deal actions storyline

Backend design documentation charting deal-action and status flows

OilEx backend design documentation • Actions & status flows


Potential, communicated

To attract partners, clients and users, we built a product page to communicate how deal actions work, and included examples of possible workflows that could be added to suit different needs.

The Deal Actions section of the OilEx product website, demonstrating interactive action cards

OilEx website • Deal actions


Published Jan 2022

Suggested questions

Answers are AI-generated from my project notes and may contain mistakes.