[1] THE BRIEF
InstaSupply is an ecommerce platform for contractors in Canada buying building materials. A single job pulls from several specialist suppliers, so the product had to make ordering from all of them feel lighter than driving to each one.
- 85%
- of contractors buy from more than one supplier
- 90%
- of those purchases still happen at the counter
- 70+
- contractors and suppliers interviewed and tested with
[2] THE CALLS WE MADE
One cart per supplier
Each supplier keeps its own cart, subtotal and delivery fee, all visible at once. An accordion with checkboxes tested worse — it hid the thing contractors were actually optimising for.
Shopping stays inside a store
After the first item, browsing narrows to that supplier’s catalogue. A second item then consolidates a delivery instead of opening another one.
Two apps, one system
The consumer and driver apps share tokens, components and icons. The driver app only changes what the road demands: larger targets, status-led colour, one action per screen.
[3] THE SYSTEM
Colour
Neutral does the work. Colour is reserved for meaning — a status, never a decoration. Each hue ships as a nine-step ramp so states have somewhere to go, and the product photography carries the colour on the page.
- Primary neutral/900 · #1D1D1D Every primary action
- Secondary blue/500 · #3256FE Links, selection, in progress
- Success green/500 · #019831 Online, delivered
- Warning orange/500 · #FE8002 Queued, closing soon
- Failure red/500 · #E40100 Closed, errors
- Info cyan/500 · #00ABFC Notices, tips
Spacing
A 4px base unit, and nothing off it. Four and eight hold a component together, sixteen and twenty-four separate them, and the screen gutter never moves off sixteen.
- 4px
- 8px
- 12px
- 16px
- 20px
- 24px
- 28px
- 32px
Type
SF Pro, set in seven steps and four weights. A system face was the deliberate choice: nothing to download, and it stays legible on a cracked phone in daylight — which is where most of this product is actually read.
- Display 38px
- Heading 1 24px
- Heading 2 20px
- Heading 3 18px
- Body Large 16px
- Body 14px
- Caption 12px
[4] CATEGORY ICONS
Twenty-four isometric icons, one per aisle, drawn on a single axonometric grid so a catalogue that spans plumbing to plasterboard still looks like one shop.
[5] TWO APPS
CONSUMER & DRIVER
Consumer
Driver
