← Selected work · 04 — B2B SaaS · Commerce

ProConnection: B2B commerce built around the reorder

Professional photographers reorder far more than they browse. I reimagined the storefront so the fastest path is the one they take most often, with trade pricing and specs where the decision is made.

Client: Photographic Research Organization, via Toptal
Surface: B2B web app
Focus: Reorder, pricing, comparison
This page: Reimagined 2026, not the shipped UI

The problem

Professional photographers reorder far more than they browse, but retail-style shops make them re-search every time.

My role

Senior Product Designer on this client engagement through Toptal. Here, the storefront is reimagined around reorder, trade pricing and spec comparison as a working prototype.

The result

Reorder from the first screen, trade vs retail pricing with live totals, and a compare table that shows only what differs.

This is a 2026 reimagining of work I did for a client through Toptal, rebuilt as a working prototype. It is not the client’s shipped interface. See the original ProConnection project on Behance ↗ (opens in a new tab)

01 — The problem

Retail patterns slow down professionals.

A consumer shop optimises for discovery. A working buyer knows what they need and wants it again, at their trade price, without a call. Treating them like browsers adds clicks to a task they repeat every month.Judgement

02 — The real engagement

Audit first: old design, new design, every finding rated.

For the client, Photographic Research Organization, I ran a design audit across the B2C and B2B storefronts and the member areas, then redesigned them. Each audit board sets the old page beside the new one, with findings marked “Needs to be fixed”, “Needs improvement” or “Improved”. My contribution was UX research, high-fidelity UI, the design audit and the brand system.Design-level

Six design audit boards for ProConnection: B2C landing page, B2B landing page, product detail page, forum page, member statement and rebate pages, and cart page, each showing the old design, the new design and rated findings — Six audit boards from the Figma file: B2C landing, B2B landing, product detail, forum, member statement and rebate, and cart.

The ProMaster Figma file with pages for mobile and desktop, main components, official website and mobile responsive, high and low fidelity, usability testing, moodboard and case study — The working file: mobile and desktop, components, high and low fidelity, usability testing, moodboard.

03 — Design decisions

Three design calls.

Home is the last order, not a catalogue

A merchandised home page is the retail default. This version leads with “Reorder last order”, with quantities editable in place and the total updating live.Judgement

Price tier is visible and switchable

Trade price, retail price and the saving sit side by side, and bulk breaks are announced before they are missed (“add 1 more for 5% off”). No “contact us for pricing”.Design-level

Compare shows only what differs

A spec table that hides identical rows by default makes the real difference between two lenses obvious in a glance. Everything is one toggle away.Design-level

04 — Prototype

Reorder, then compare.

Change quantities, switch between retail and trade, then compare two lenses.

Last order · 3 items

Mirrorless body, 24 MP
$1,709.00 each
1$1,709.00
Prime lens, 50 mm f/1.8
$584.00 each
2$1,168.00
Spare battery
$53.00 each · add 1 more for 5% off
4$212.00

Order summary

At retail$3,433.00

Your trade total$3,089.00

You save $344.00 against retail.

Illustrative catalogue and prices.

05 — Outcome

What I can stand behind.

Reorder of a past order in 1 step from the first screen.Design-level
Prices computed in whole cents, so line totals and the order total always agree.Design-level
Compare view hides identical specs by default: 4 of 6 rows shown in the example.Design-level

How I would validate it: a five-buyer test on “reorder last month’s kit”, measuring clicks and time to reorder.

Next caseWellnessSync: one habit across watch, phone and TV