Product Zone
A new website for a Watford-based custom headwear supplier: a B2B catalogue that makes the range easy to browse, showcases its bespoke service and gives approved clients access to catalogue pricing.
- Industry
- Custom headwear
- Project
- B2B catalogue website
- Services
- Web design, Web development, CMS, Client accounts
- Built with
- Next.js, Prismic, Mailchimp
The client
Product Zone is a custom headwear supplier based in Watford, making caps, beanies and bucket hats for businesses and brands. Established in 2006, it works with clients ranging from charities and supermarkets to promotional companies, distributors and major fast food chains, and has offices in China and Hong Kong.
Customers can go fully bespoke, with Product Zone's design team taking them through design, sampling and production, or choose from a range of plain stock held in its Watford warehouse, which can be branded with their logo.
The challenge
Product Zone has been trading since 2006 and already had a website, but it was very basic. The business needed a site that let its clients easily browse the product catalogue, and one that could represent two quite different sides of the business: a fully bespoke, design-to-production service, and a catalogue of plain stock products.
As a B2B supplier, Product Zone didn't want catalogue pricing available publicly. The full product range needed to remain open for prospective customers to browse, while pricing and client-only information needed to be restricted to approved clients.
The solution
I designed and built Product Zone's new website to replace its very basic earlier site, working around its established logo and the two ways it works with customers.
The bespoke service gets its own page walking through design, sampling and production, so a brand can see how the process works before getting in touch. The plain stock catalogue sits alongside it, with product search, filters for product type, colour and size, and a dedicated page for every product, so clients can find what they need easily.
Because Product Zone sells business to business, catalogue pricing is designed to be available to approved clients once signed in, while the public catalogue allows prospective customers to explore the range before getting in touch.
Pages and products are managed in Prismic, so the catalogue can grow without changes to the site's code, and the mailing list sign-up feeds straight into Mailchimp.
How it came together
A catalogue built to grow
Plain stock caps, beanies and bucket hats are open for anyone to browse, with search, filters for product type, colour and size, and a dedicated page for every product. New products can be added without changing the site's code.
The bespoke service, stage by stage
Made-to-order customers get a clear walk-through of design, sampling, production and delivery, so a brand can see how the process works before getting in touch.
Key features
B2B product catalogue
Plain stock caps, beanies and bucket hats, open for anyone to browse, with a dedicated page for every product.
Search & filtering
Product search, plus filters for product type, colour and size.
Client-only pricing
The catalogue is designed so approved clients can access pricing once signed in, while prospective customers can browse the product range without seeing pricing in the interface.
Bespoke service journey
A clear, step-by-step explanation of design, sampling and production for made-to-order customers.
Prismic content management
Pages and products are managed in Prismic, so new products can be added without changing the site's code.
Mailchimp integration
The website's mailing-list sign-up connects directly to Product Zone's Mailchimp audience.
Contact & FAQs
A contact form, plus answers to common questions on order times, shipping, minimum orders, lead times and Pantone matching.
Built with
Chosen for what they do for the business, not for the sake of the latest tools.
- Next.jsThe foundation of the bespoke website, combining the public catalogue with the client account experience.
- PrismicHolds the site's pages and product catalogue, allowing products to be added and content updated without code changes.
- MailchimpConnects the website's mailing-list sign-up with Product Zone's Mailchimp audience.
- NetlifyHosts the website without Product Zone needing to manage its own server infrastructure.
The outcome
A big step up
A professional new website replacing a very basic earlier one, giving an established B2B supplier a catalogue its clients can browse with ease.
Both sides of the business
The bespoke service and plain stock catalogue each have a journey suited to how customers use them.
A B2B catalogue experience
The full product range can be explored publicly, with the website designed to provide catalogue pricing to approved clients once signed in.
A catalogue that can grow
Products and website content are managed through Prismic, allowing Product Zone to expand and update its catalogue without rebuilding the website.
Have a project in mind?
Whether it's something like this or something completely different, tell me what you need. No obligation, just an honest conversation about what would work for your business.
Start a project →or email [email protected] directly