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
  • Deal Actions: a toolbox of interactive cards next to the deal conversation
  • Every action recorded on the ledger as an activity log
  • Modular, flexible & extendable components through 2 product pivots
  • Every selling & buying side deal action scenario outlined, with detailed user stories
  • Product website design & development (Webflow)

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.

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

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)

Workflow digitalisation

OilEx digitalises 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, and so on.

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. We also found partners that shifted the product direction twice: a 1st pivot to a B2B SaaS model, a 2nd to commodities beyond oil. With continuous shifts in direction, the design team focused on components that are modular, flexible and extendable.

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

Deal Actions

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 and payment. There could be a way for a more flexible and modular “stepper” to be integrated within. So we put Deal Actions next to the conversation view: a set of interactive cards showing what has been done, can be done now, and to be done in the future.

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. Each action is the trigger for additional inputs, such as updating the price of the deal or uploading documents, so users maintain a sense of control rather than being forced by the system to update statuses.

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.

OilEx prototype • Activity log

Behind the scenes

The caveat of such a flexible design is the logic and conditions powering it. We had to maximise speed but minimise unsustainable workarounds, such as putting some of the 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 and buying sides of a transaction when using deal actions, and presented them 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

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.

OilEx website • Deal actions

OilEx is a live beta; no updates available after Nov 2021. As the product development team learns about new workflows, they could add or modify them without major redesigns to the negotiation and settlement components, and this part of the platform could expand to support more commodities.

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.