Product Zone
A first website for a Watford-based custom headwear supplier: a B2B catalogue that 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
Despite being established since 2006, Product Zone had no website before this project. It needed 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 first website 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.
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
Customers can filter by product type, colour and size, and new stock can be added without touching the design.
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 first website
Product Zone's first website, giving an established B2B supplier a professional online presence.
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 conversation →or email info@roysheppard.digital directly