Design kit
Color
- #ffffffbackground
- #000000text
- #d1d5dc
- #00a63eaccent
- #6a7282
- #0074a6
Type
- System fontRegular · Medium · SemiBold · Bold
Overview
A private ordering portal for a partner of Wynn Innovations. The partner's procurement team uses it to order office supplies, and Wynn Innovations staff use it to receive and fulfil those orders.
The problem
The partner wanted a stand-alone portal of their own: an easy way for their procurement team to place orders.
Before, finding out which products were available meant checking in with Wynn Innovations every time.
Design
The procurement team wasn't especially tech-savvy, so I kept the interface as simple as it could be.
A cart adds up the order as it's built, so the team knows what it will cost before they place it.
Build
I gathered the product information first, then designed and built the portal in React and Tailwind.
Product data lives in Airtable. Each order sends two emails through EmailJS, one to the Wynn Innovations team to handle it and a confirmation to the partner, and is logged in a Google Sheets table.
What I built
- Sign-in for the partner's team
- A catalogue of 150 products from Airtable, with search
- A cart that totals the order before it's placed
- Order emails to Wynn Innovations and to the partner
- Every order logged to Google Sheets
Key decisions
Colour only where you act
Apart from the price, quantity, add to cart and delete buttons, the portal stays quiet. Colour marks what you can do, so nothing competes with it.
Airtable as the product database
Airtable looks and works like a spreadsheet, which the Wynn Innovations team already knew. They add new products there, and the portal updates instantly.
Outcome
The procurement team now searches and browses available products on their own, and new products reach the portal the moment they're added to Airtable.