Field & Form.
Clarity in the catalogue.

The design problem

For this fictional brief, a buyer needs to find a suitable item, understand its basic specifications and assemble a request across several products. The design addresses that journey without introducing checkout or pretending to hold real stock.

What we built

A responsive supplier homepage and eight-item catalogue, with category filters, text search, sorting, product-detail dialogs and a quantity-based inquiry shortlist. Buyers can preview a plain-text request draft. All product specifications are illustrative.

Why the interface looks this way

A warm ivory canvas, deep green accents and original vector product illustrations create a distinct supplier identity. Product codes and specifications make comparison straightforward. A single shortlist keeps the inquiry journey visible, and empty states explain what to do next.

Function you can inspect

• Search by name, code, category or descriptive specification.
• Filter and sort the catalogue without a page reload.
• Open product specifications in keyboard-operable dialogs.
• Add, adjust and remove products in a local inquiry list.
• Review an inquiry draft on the page without sending data.

Verification and limits

Responsive layouts, navigation, keyboard basics, asset loading and catalogue interactions were checked on the actual implementation. Detailed viewport and interaction evidence is included in the project QA record. These checks are not a full accessibility certification or an SEO performance test.

There is no inventory system, checkout, real supplier, price quote, delivery promise or inquiry inbox. The shortlist lives only in page memory and resets on reload. No conversion, revenue, ranking or customer outcome is claimed.

What a real project would measure

After connecting a lawful business and tested inquiry service, useful measures would include product discovery success, completed inquiries, inquiry quality and time to respond. Targets would be agreed from a real baseline.