Back to portfolio
E-commerce · Python

CommerceIQ

E-commerce intelligence platform in Python: orders from every channel, stock per warehouse, stockout risk, real margin and demand forecasting

My role
UX/UI Designer · Architecture analysis
CommerceIQCommerceIQ
01

Context

CommerceIQ is an operational intelligence platform for merchants who sell on their own store and on marketplaces: orders from every channel in one queue, stock per warehouse, stockout risk, real margin per product, reports and demand forecasting.

I did the product, the UX/UI and the architecture analysis. The commerce foundation is Saleor, in Python and Django, with catalog, stock, orders and webhooks; the intelligence runs in a dedicated FastAPI App connected to it.

Technical foundation
Saleor · saleor/saleor
License
BSD-3-Clause
My role
UX/UI Designer, architecture analysis
Stack
Python, Django, FastAPI, PostgreSQL, Celery, Redis
02

Business problem

Merchants who sell on several channels live with mismatched stock: a product runs out on a marketplace while still showing on the store, real margin gets lost among different fees, and supplier purchases are guesswork, made after the item has already sold out.

CommerceIQ brings it together: one order, one stock and a real margin per product, and it warns what will run out before it does, with how much to buy.

03

The technical foundation

From Saleor come the catalog with variants and attributes, sales channels with price and cost price per variant, stock per warehouse with quantity, allocation and reservation, orders with statuses and fulfillments, order and stock webhooks, permission groups, CSV export and Celery tasks.

04

The CommerceIQ product

The intelligence layer and the entire interface: a commercial overview with margin after fees, stockout risk with days of coverage and purchase suggestions, marketplace connectors with idempotent import, traceable stock movements, reports, demand forecasting and the merchant app.

05

Architecture

Saleor remains the source of truth for catalog, stock and orders. CommerceIQ is a Saleor App in FastAPI: it receives events by webhook, keeps history in its own analytics database, runs imports and forecasts in Celery and sends actions back through the GraphQL API. Heavy reports never compete with checkout for the database.

Saleor Core and the CommerceIQ App, idempotent import and concept mapping
06

Architecture decisions and trade-offs

Six decisions recorded as ADRs: the context, what was decided, what each one costs and how it shows up for the people using the product.

Architecture decisions with context, cost and on-screen effect
07

Information architecture and flows

The product map, the five permission groups and the three flows that matter most: marketplace order to shipment, stockout risk to purchase, and a failing import.

Product map, roles and main flows
08

The screens in Figma

Thirteen desktop screens with a clickable prototype, for the people who run operations and sales management.

  1. 01 / 11

    Commercial overview

    Revenue, orders, average order value and gross margin after fees, daily revenue and gross profit, the split by channel, products at stockout risk and best sellers.

  2. 02 / 11

    Stock and stockouts

    For each SKU: in stock, allocated and available, average sales, days of coverage against supplier lead time and a purchase suggestion. Overstock shows up too, to pause purchasing.

  3. 03 / 11

    Products

    The catalog with price, cost, margin and stock health for each product, search by name, SKU or barcode, filters and pagination.

  4. 04 / 11

    Product editing

    Product data, variants with price, cost and margin calculated on the fly, stock per warehouse, publishing per channel, the stockout alert with the quantity to buy and the history of who changed what.

  5. 05 / 11

    Orders

    Online store and marketplaces in the same queue, with Saleor's statuses: unconfirmed, unfulfilled, partially fulfilled, fulfilled, returned and canceled.

  6. 06 / 11

    Order detail

    Each item with the warehouse it ships from, the order's gross profit after the channel fee and the timeline since import, with the idempotency key.

  7. 07 / 11

    Integrations and imports

    Connected channels, background imports with received, saved, duplicate and failed counts, and the detail of each failure: the channel error, the next retry and whether manual action is needed.

  8. 08 / 11

    Movements

    Every item that comes in, goes out or moves between warehouses, with its source and who did it. Nothing is edited or deleted: a correction is a new adjustment, with a reason.

  9. 09 / 11

    Reports

    Weekly revenue, share and margin by category and margin by channel after fees, with CSV export.

  10. 10 / 11

    Demand forecasting

    How much each product should sell in the coming weeks, with an 80% range instead of a single number, the method, the data used, the limits and the quality measured in backtesting.

  11. 11 / 11

    Team and permissions

    Permission groups enforced in the API: finance sees margins without editing anything, shipping fulfills orders and adjusts stock, and no query crosses companies.

09

Interface states

Loading, empty, error with a support code and feedback for background tasks, such as a finished export, an import in progress and duplicate orders that weren't created twice.

Loading, empty, error and background tasks
10

Merchant app

The day's summary with what needs attention, the stock alert with the suggested quantity, and the order with its gross profit and a fulfill button.

Day summary, stock alert and order
11

Demand forecasting, grounded

Forecasting is an analytics module, and the screen was designed not to sell certainty:

Data
Daily sales from all channels, excluding cancelled orders; out-of-stock days don't count as zero sales
Method
Exponential smoothing with weekly and yearly seasonality, recalculated daily in the background
Quality
Mean error (MAPE) and bias measured in backtesting: the forecast made at the time against what actually sold
Limits
New launches and products with little history use the category average; off-calendar promotions are not included

Visual System

A custom design system in Figma, with color, spacing and radius variables, text styles and components with variants: button, order status, stock health, menu item and KPI card. Violet for action, green for money and a fixed color per sales channel.

Palette

Violet

#5B4BF5

Main action and brand

Money Green

#0FA47A

Margin and profit

Ink

#14112B

Headings and text

Amber

#B54708

Warning and overstock

Stockout Red

#B42318

Stockout risk and cancelled

Marketplace Yellow

#F5C542

Mercado Livre channel

Typography

Manrope

800

Headings and numbers

Inter

400 / 500 / 600 / 700

Interface, tables and forms

JetBrains Mono

400

SKUs and order numbers

12

Next versions

What comes next on the product roadmap:

Purchase orders
Send the purchase suggestion straight to the supplier and track delivery
Pricing per channel
Price suggestions to keep a minimum margin after each marketplace fee
More channels
Connectors for Amazon and Magalu using the same idempotent import model
13

References and credits

CommerceIQ's technical foundation is Saleor, by Saleor Commerce and the open source community, published under the BSD-3-Clause license.

14

Takeaways

In multichannel e-commerce, the numbers that matter are true availability and margin after fees, not raw stock or list price. Separating the commerce core from the intelligence, with idempotent events between them, keeps the product reliable even when channels send the same order twice.