Atlantic bluefin tuna, whole
Thunnus thynnusTimeline: OngoingTeam: 3 people
Enterprise Marketplace Design
Taking Wholesale Seafood Buying Off the Phone
A marketplace for a seafood trade that still runs on phone calls.
- Role
- Lead Product Designer
- Focus
- B2B Marketplace, Enterprise Workflows
- ROLE
- Lead Product Designer
- FOCUS
- B2B Marketplace, Enterprise Workflows
- TIMELINE
- Ongoing
01The problem
A trade worth billions, run on phone calls and trust
Seafood is one of the most traded foods on earth. The FAO expects global seafood exports of about $184B in 2025. The US alone imported over $25B of seafood a year from 2023 to 2025, and about four in five pounds eaten there are imported. Between the boat and the kitchen sit brokers, importers, distributors and wholesalers, and their roles overlap.
For a buyer, that means a few suppliers with all the leverage, quality that is hard to check, and thousands of species to keep track of. For a supplier, finding new buyers is slow, and trust starts from zero every time. Tariff changes in 2025 (average duties on US seafood imports hit 8.43%) sent buyers looking for new sources. A tool for finding them was timely.
The brief. Whalelord sits between seafood buyers and suppliers. Its marketplace had to feel trustworthy to a trade with good reason to be sceptical, and be simple enough for people who have never used a B2B platform.
- Constraint 1The usersExperienced operators who are not comfortable with tech, next to a younger generation that expects consumer-grade speed.
- Constraint 2The teamThree people in three countries. The developer needed a design system packaged to be used fast, so I built it and packaged it to be replicated one to one.
- Constraint 3The starting pointA directory and a four-step quote flow already existed as a rough prototype. Good data, weak experience.
Who did what. Our PM, in the US, gave us the brief and ran sales and the expo. Our developer, in Indonesia, built the product. I designed the whole product end to end, and Compass, its design system, from the UK.
Why buyers stay with who they know
US seafood buyers mostly buy from people they already know. They serve the fish or sell it on to their own customers, so a bad lot costs them their reputation, and the safest supplier is the one who delivered last time. Studies of wholesale fish markets find the same pattern. At New York’s Fulton Fish Market most customers were repeat buyers, and every price was quoted privately. At Marseille’s wholesale market, buyers stay loyal to their sellers.
The caution is earned. Seafood is often not what the label says, and the checks only go so far.
- 1 in 3US restaurants and shops tested sold mislabelled fish
- ½Of US seafood imports covered by federal traceability
- 11%Of seafood firms get trade data straight into their systems
Sources: Oceana, “Casting a Wider Net” (2019), DNA tests of 449 fish; NOAA Fisheries, Seafood Import Monitoring Program; Hardt, Flett & Howell, Journal of Food Science (2017), a survey of seafood companies in North America and the EU
Why they don’t move online. For a business that already has suppliers it trusts, going online solves a problem it doesn’t feel. Research on seafood and food trading platforms keeps finding the same four reasons.
- FrictionThe handshakeDeals are made person to person, often by phone. A platform can look like it takes the relationship away.
- FrictionPrivate pricesEach price is set for one customer. Listing prices invites comparison, and suppliers fear it squeezes their margins.
- FrictionQuality you can’t touchBuyers judge fish by sight, smell and past lots. A photo and a spec sheet don’t replace that.
- FrictionNew fees and paperworkCommissions, onboarding and credit checks: new costs for a way of buying that already works.
Sources: Graddy & Hall, NBER (2009), on the Fulton Fish Market; Kirman & Vriend (2001), on the Marseille fish market; Day, Fein & Ruppersberger, California Management Review (2003), on B2B exchanges; Eurofish Magazine (2024)
The friction comes from how this trade works, since the same buyers already order much else online. Big foodservice distributors already sell mostly online: US Foods says 77% of its independent restaurant customers order that way. The gap is in specialty seafood, where each deal is priced privately, credit runs on relationships, and every lot is different.
Why a directory came first
The US has about 3,600 fish and seafood wholesalers with about $24B in revenue, around 4,800 seafood markets and about 17,300 sushi restaurants (IBISWorld). That is 25,000+ possible accounts before counting other seafood restaurants, hotels and caterers. Seafood Expo North America, held in Boston each March, is the biggest seafood trade show on the continent: about 22,000 seafood professionals on average, and more than 1,000 exhibitors from 48 countries in 2026.
Our PM went to the 2026 show and made contact with 100 to 200 people there, most of them buyers rather than sellers. In a market this size, that doesn’t scale by hand. And in a trade this loyal, the first thing to learn was whether these businesses would take their buying online at all. So the first product was a verified directory: the cheapest test of that question.
Sources: IBISWorld (wholesalers, seafood markets, sushi restaurants); Seafood Expo North America, 2026 (average attendance, exhibitors). The last bar is our own count.
Who else is out there. Platforms sit at two ends. Listings directories connect buyers and suppliers and stay out of the deal. Sale-fee exchanges take a fee on each sale and bundle in shipping or trading. The biggest global B2B marketplace leads with verification: suppliers pay for a checked membership, buyers join free, and fees come on payment. Whalelord borrows that model and adds what seafood needs: catch data on every listing, and a quote before every order.
Who the product touches, from the centre outward
US regulators and import rules, tariffs, competitors, seasonality
Certification bodies (BAP, ASC, HACCP, BRC), freight and customs brokers, inspection providers, the payment provider
Buyers (restaurants, distributors, wholesalers, importers) and suppliers (processors, exporters, wholesalers)
The Whalelord product and team: verification, payments, the order record
02What was decided, and what it cost
A marketplace you can trust with the whole deal
Three of these decisions changed after the first version. The closed test runs through our PM, who holds its numbers, so each change is told as what we assumed, what we heard back, and what we changed.
Decision 01: The deal happens inside Whalelord: suppliers pay a plan, buyers pay a small fee on each payment.
What came back from the directory, through our PM, was a clear pattern: businesses would list and browse, and most of them preferred to pay on the spot, inside the deal, over settling another way.
How the money works
01
We assumed
A directory, no payments
The first version was a test: a verified directory, to see how many of these businesses would take their buying online at all. Deals were paid off the platform.
02
What we heard, and changed
Payment through Whalelord
Most users preferred to pay on the spot, inside the deal, over settling another way. So deposits and balances moved in, with a small buyer fee and supplier plans.
03
Which means
Trust has to come first
Both businesses are checked before anyone can quote, and every fee is shown before the buyer commits.
SoOnce money moves through the product, trust and fees need their own screens: checks, fee lines and payment references.
Order: payments
Each payment carries its own fee line, so the total due is never a surprise.
The deposit is the one action on the page until it's paid.
Bank transfer details
The reference is how the payment is matched, so it gets a Copy button and a warning.
“I've sent the payment” marks it as sent. The stage moves to Deposit only when the money arrives.
Who pays what: the plans
Deposits and balances go through Whalelord, matched by a payment reference. The supplier receives the full agreed price, and the buyer’s fee is added on top.
Buyer plan
Buyers join free and pay a 2% fee on each payment (Assumption A7).
Supplier Plus plan
Suppliers pay a monthly plan to list and sell. Names and prices are samples (Assumption A8).
Featured listings only come with the top plan, so the amber border means something.
Decision 02: Every order starts with a quote, and a repeat order comes with the quote already filled in.
In the old quote flow, buyers lost track of what they were quoting, and the round floating buttons were too small to hit. I rebuilt the request as four steps with the product in view, labelled Back and Continue buttons, shipping terms, and nothing sent before the last step. The supplier answers in the same thread, and accepting the quote creates the order.
Quote request, step 4 of 4
Numbered steps turn into ticks, so the buyer knows how far they are.
Each section has an Edit link back to its step, nothing retyped.
Nothing is sent before this button. If sending fails, the answers are kept for a retry.
Your quote (supplier)
The supplier fills in price, quantity, delivery and dates beside the buyer's request.
It shows what the supplier receives. The buyer's fee goes on top, so the supplier's price is never cut.
Quote (buyer)
The delivered total comes first, in the buyer's terms.
The 2% service fee is on the quote itself (Assumption A7), before the buyer commits.
Accept, ask for changes, or decline: one filled button.
Buying again. Most of this trade is repeat business, so a repeat order had to be quick.
Order again
Suppliers confirm today's price in their quote; nothing is bought at an old price.
Each product comes back with its last amount and price, ready to change.
Requests ready
One button sends one pre-filled request per supplier, using the last order's specs and terms.
The quick-order page it replaced, and the accept step
How a repeat order works
01
We assumed
A separate quick-order page
Built for restaurants that buy the same fish again. On a page of its own, it caused visibility problems.
02
What we heard, and changed
Order again, on the Orders page
Past products come back with their last amounts. One button sends one pre-filled quote request per supplier, and each confirms today's price.
03
Which means
Every deal goes through a quote
One path to an order for every buyer, and one flow for a small team to build and keep working.
SoOrder again sits on the Orders page, and every repeat order goes through a quote.
Accept this quote?
The fee shows again at the moment of commitment.
The dialog says what accepting does: it creates the order, and the deposit comes after the supplier confirms.
Decision 03: Trust at the top of every card: the verified supplier, then the catch data, then the action.
Buyers can’t check quality from a screen, so the card has to say who stands behind it first. The old cards gave every field the same weight and buried trust. I split each card into three zones: trust at the top, data in the middle, the action at the bottom.
Marketplace
Featured is paid for: an amber border, a badge and a filled button, three a month on the top plan (sample).
The verified supplier comes before the price, on every card.
Catch data sits on a dashed teal ticket, the only place that teal is used.
The price is an estimate, never an offer. The supplier sets the final price in the quote.
The prototypeWhere we started
Good data, weak experience: every field at the same weight, buttons changing style from card to card, and a quote flow of abstract step icons and tiny floating buttons.
Marketplace
Quote request
The first redesignRejected
What changed: a cleaner grid. It was rejected for a white page, cramped cards, featured cards that looked like the rest, and no sell or quote flow at all.
Marketplace
Quote request
The design nowFrom the handoff
What changed: trust, data and action in three zones on every card, a paid featured card with its own border and filled button, and a quote request in four labelled steps.
Marketplace
Quote request
The main actionCatch dataFeatured
The product page, ongoing checks, and the audit of the old prototype
Product page
The supplier row opens their profile, with the verified badge beside the name.
Estimated, and for pickup: the page says the final price comes in the quote.
What Whalelord checked is said once, under the actions.
Checks keep going after sign-up. A new account starts in review, and buyers can browse but not ask for quotes until they are approved.
Documents
Checked documents keep listings live. One close to expiry raises this banner, with the upload beside it.
The old directory had a solid structure and real trade data, but:
- Cards showed exporter ID, origin, FAO zone, specs, certifications and product ID at the same weight
- Descriptions cut off mid-sentence, which read as missing information
- Buttons changed style from section to section
- The filter pills looked dated
- The four-step quote flow had abstract icons, tiny floating buttons and near-empty steps
The sell form was the strongest part. Its toggle-able certification chips became the pattern for the buy side.
Decision 04: Only claim what Whalelord knows: an order board the supplier moves by hand.
How the order board moves
01
We assumed
Cards that move on their own
An early critique: the platform only watched the deal, so cards moving by themselves would be guessing, and a wrong guess costs trust.
02
What we heard, and changed
Moved by hand, for now
Accepting a quote puts a card in New. After that, the supplier moves it. Payments show as badges, because Whalelord does know those.
03
Which means
Automation later, with an override
Cards will move from payments, documents and buyer confirmations. Manual moves stay for anything that happens outside Whalelord.
SoThe board shows payments, which Whalelord records, and leaves the other moves to the supplier.
Orders board
A card can't leave New until the supplier confirms the order.
Payment badges come from Whalelord; the columns are moved by the supplier.
Each card shows the order value and its owner, so a team can split the work.
One menu per role
Buyers, suppliers and visitors have different jobs, so each gets its own menu. What a supplier does today and what happened last quarter are different needs, so Overview and Performance are separate tabs.
Who sees what
Signed out
Marketplace · Pricing · For buyers · For suppliers
Browse with estimated prices. Sign up to ask for a quote.
Buyer
Marketplace · Messages · Orders · Account
Messages is for agreeing a deal. Orders is for delivering it.
Supplier
Dashboard · Messages · Account
The dashboard holds the work as tabs: Overview, Orders, Listings, Performance.
Sources: The handoff's navigation table (README and HOW-IT-WORKS).
Decision 05: Compass, a design system packaged so the developer could replicate it one to one, fast.
- 389Components, in 38 sets
- 556Variables, in 13 collections
- 66Text styles
- 2Modes, light and dark
Colours are named for the sea (Waves for action, Shores for surfaces, Depth for text, Reef for status and catch data), and each has one job. So does each typeface: DM Sans for the interface, Inter only for prices and numbers, Roboto Mono for IDs. The developer got a 997-line design.md and a prompt tuned for Stitch, with exact tokens, layouts and behaviour, so every screen could be rebuilt without guessing.
Action
Blue is for action only: buttons, links, focus and selection.
Catch data
Catch teal is only for catch data, so it reads as the product's facts.
Featured
Amber is only for paid featured listings (Assumption A2: not yet in the Figma set).
A field with an error
Labels sit above, hints below, and an error says what to enter.
Input borders are darker than the Figma token to pass 3:1 contrast (Assumption A5).
The first prototype that was rejected, and the rules it produced
The first prototype was rejected. The sell and quote flows were missing, featured cards looked the same as standard ones, the page was white, and the cards were cramped. Each failure became a written rule. The page is never white: cards sit on a raised page. A missing flow is a blocking failure. Featured cards must look different. Tokens are used through variables, never as raw hex. Those rules now live in the handoff spec.
- Compass tokens
- design.md997 lines
- Stitch prompt
- Built screens
How a deal moves, front to back
A deal has eight stages. Some move on an action in Whalelord, some when a payment arrives, and the rest when the supplier moves the card.
A deal, from request to complete
Inquiry
Moves when the buyer sends a quote request
Send failed
Answers kept; try again
Quote
Moves when the supplier sends a quote
Ask for changes · Decline
Back to the supplier, or closed
Purchase order
Moves when the buyer accepts: the order is created
Confirmed
The supplier confirms, on the order or the board
Deposit
Moves when the buyer's payment arrives, not when it's sent
Payment sent
Waits here until the money is matched
Shipping
The supplier moves the card to Shipped
Balance paid
Moves when the balance arrives
Complete
The supplier marks it delivered; the buyer is told
Final
Sources: HOW-IT-WORKS, “Orders and payment”. The stage names rename the Figma “PO” and “Payment” steps (Assumption A6).
One deal, front to back
1Join
2Find
3Ask for a quote
4Quote
5Accept
6Pay the deposit
7Ship
8Balance and done
EvidenceWhat the buyer sees
Sign-up steps · In review
Marketplace · Product page
Quote request, 4 steps · Sent
Quote card in Messages
Accept dialog · Order page
Pay the deposit · Bank details
Order page: Shipping
Balance due · Documents · Complete
Buyer
Adds the company and a registration document
Filters by form, area and certificate; opens a listing
Sets quantity, specs, delivery and terms; sends
Accepts, asks for changes, or declines
Confirms, with the fee shown again
Sends a bank transfer with the reference; marks it sent
Waits; messages the supplier if needed
Pays the balance; downloads the documents
Line of interaction
SupplierOn their dashboard
Adds registration and certificates
Keeps listings live; pays a plan
Sees the request under Needs reply
Fills in Your quote: sees what they receive
Gets a card in New on the board
Confirms the order; packing starts when the deposit lands
Moves the card to Shipped; uploads the bill of lading
Moves the card to Delivered
Line of visibility
WhalelordTeam and system
Checks the documents; emails on approval
Shows only checked listings; flags expiring documents
Gives the request an ID; opens a thread
Adds the 2% buyer fee on top (Assumption A7)
Creates the purchase order
Matches the payment by its reference; moves the stage
Records every move with who and when
Matches the balance; keeps the order record
Line of internal interaction
SupportPayments and documents
Registration, HACCP and catch certificates
Catch data on the listing
None
None
Purchase order PDF
Bank transfer first, then card (Assumption A9)
Health certificate · Bill of lading
Pays the supplier the full agreed price
Sources: Method: service blueprint (Shostack 1984; Nielsen Norman Group). Content from the handoff's HOW-IT-WORKS and FLOW; the team's checks are the product's rules, not a measured process.
All the screens
03Where it stands
A slow-growth product, by design
Trust markets move slowly. Buyers switch suppliers one lot at a time, so Whalelord was never going to grow like a consumer app. That is why the directory came first, and why progress is counted in checked accounts and first quotes.
The project is ongoing. The marketplace is in a closed test, and the public site collects the businesses that will fill it. Its numbers sit with our PM, so none are quoted here: UNMEASURED at the time of writing.
The gaps, plainly. There are no usage numbers yet. The research is secondhand, through our PM and published studies. The buyer fee and plan prices are samples. The board’s automation is still to be built.
What we will track. Five events define the funnel, and each one is a moment the product already records.
- Quote request sentevent 1
- Quote sentevent 2
- Quote acceptedevent 3 · order created
- Deposit receivedevent 4
- Order againevent 5
- Next · 1Grow the closed testTurn sign-ups into checked accounts, live listings and quote requests.
- Next · 2Set the real numbersThe buyer fee and the plan prices are samples until the pilot sets them.
- Next · 3Automate the boardMove cards from payments, documents and buyer confirmations, keeping the manual override.
04What I learned
Trust decides where the deal happens
- LearnedTest the habit before the featuresIn a trade this loyal, the first question was whether anyone would buy online at all. A directory answered it cheaply.
- LearnedLet users pull the money inPayments moved inside once most users preferred to pay on the spot. The order became something both sides could see.
- LearnedRepeat buying belongs where the orders areA separate quick-order page caused visibility problems. Order again, on the Orders page, kept every deal on one path.
- Next timeStart from the moneyWhere the money moves decided more screens than any other choice. I would settle it before the first prototype.