Rainwear Web
A B2B product catalogue for a US-based waterproof clothing manufacturer, built to support the sales team and give buyers a complete product reference.
Rainwear web
A digital catalogue for waterproof gear, from factory to store.
RW-WEB-2022
THE GOAL
Give Rainwear a digital presence their sales team can point buyers to after every meeting.
Make the catalogue easy to browse across 12 product categories and connect buyers directly to the sales team via WhatsApp.
Success signals
A complete, navigable catalogue buyers can explore independently, with clear product information and a direct path to contact.
SCOPE
I led the project end to end: defining the information architecture, designing the page templates, building the site in WordPress with Divi, uploading the initial content, and delivering a training session and user manual for the client.
The scope covers a live site. The client manages all content updates independently after handoff.
THE PROBLEM
Rainwear had an active sales team, a strong product line, and a printed catalogue. What they didn't have was a digital presence.
Sales reps visited stores and negotiated orders in person. But buyers had no way to review the full range on their own, check specifications, or follow up after a meeting without waiting to hear from a rep.
User sentiment:
No digital reference for buyers after sales meetings.
No way to browse the full product range independently.
Sales team had nothing to point buyers to online.
CONSTRAINTS
The constraints were defined before any design decision was made. A non-technical client, a B2B model, and content that existed only in print set the boundaries from day one.
These constraints focused the design. A fixed platform, a client learning as the build progressed, and a catalogue with no purchase flow made every decision more deliberate.
RESEARCH APPROACH
Content and design decisions were informed by direct client collaboration, a review of the available print material, and a competitive analysis of workwear catalogue sites in the US market.
Methods
Client meetings to understand the business model, sales process, and site expectations.
Review of the printed catalogue to map existing content and identify gaps.
Content audit of available assets: product photos, video, and copy.
Competitive review of workwear and rainwear catalogue sites in the US market.
Target audience analysis based on client description of their B2B buyer profile.
Perspective
Decisions were informed by working directly alongside the client throughout the entire build.
Design Criteria
Surface 47 products across 12 categories without overwhelming the buyer.
Reflect the brand identity established in the printed catalogue.
Support a non-technical team managing content independently after handoff.
Make WhatsApp the clear and only conversion action throughout the site.
Key findings
Buyers needed a digital reference they could consult independently after meeting a sales rep.
Product information existed but wasn't structured for web — every entry needed adapting.
The B2B nature of the business made a simple catalogue with direct contact more appropriate than any e-commerce solution.
Competing sites in the workwear space were functional but visually generic — an opportunity to differentiate through brand consistency.
Pain-Point Audit
A screen-by-screen review of four US workwear and rainwear sites identified the structural and visual problems most common in the category.
Competitive Analysis
Four criteria reviewed across all sites to map where the category falls short and where Rainwear has room to differentiate.
Absent
Partial
Present
SYNTHESIS OUTPUTS
User Types
Two distinct users shaped every structural and content decision in the design.
The Sales Rep
Primary motivation: support the conversation with a buyer using a clear, professional digital reference.
Rainwear sales representative visiting stores and businesses.
Needs
· A catalogue they can pull up during or after a client meeting.
· Product information clear enough to answer buyer questions on the spot.
· A direct WhatsApp link to follow up without friction.
Motivations
· Close orders faster with a reference the buyer can consult independently.
· Present the full product range without carrying printed material.
· Build credibility with a professional digital presence.
Frustrations
· No digital reference to share after a sales visit.
· Buyers had to wait for the rep to answer product questions.
· Nothing to point to when a buyer wanted to review the full range.
The Buyer
Primary motivation: browse the full catalogue and place orders without depending on a sales rep.
Purchasing manager at a store or company already working with Rainwear.
Needs
· Clear product categories to navigate the full range independently.
· Enough detail per product to confirm specs before ordering.
· A direct path to contact the team when ready to buy.
Motivations
· Review new products between sales visits.
· Confirm product details without waiting for a rep.
· Manage the purchasing relationship on their own schedule.
Frustrations
· No way to browse the catalogue without contacting the sales team.
· Product information only available through printed material.
· No digital channel to reach Rainwear directly.
Information Architecture
The site is organised around three core page types and a single navigation principle: visitors enter by product category and reach the sales team in one click from any page.
Structure principle
Every product is reachable in three clicks: Homepage · Catalogue · Product Detail · WhatsApp
DESIGN PROCESS
The design was driven by structure before aesthetics. Every page template and navigation decision was defined and approved before any visual work began.
Approach
Content inventory and information architecture came first. Wireframes for the five page templates followed, built around the product data and the client's catalogue structure.
Every decision was reviewed and approved by the client before moving to the next stage.
Wireframes
Five page templates wireframed before any visual decision was made, structure and content hierarchy defined first.
Key Design Decisions
01
Structure first
Wireframes locked page hierarchy, content fields, and navigation before any visual decision was made.
02
Sidebar as navigation tool
A persistent sidebar gives buyers access to all 12 categories from any point in the catalogue.
03
Single conversion action
WhatsApp is the only CTA. It appears consistently across the catalogue, product detail, and contact pages.
04
Video as hero
The existing production video replaces a static hero image, giving the brand immediate visual identity.
05
Client as validator at every stage
Each structural decision was reviewed and approved before advancing, keeping the build aligned and reducing revisions.
The buyer visits the site independently after an initial sales contact, browsing by category, reviewing product specs, and reaching the team directly via WhatsApp when ready to order.
THE SOLUTION
A WordPress site built around five page templates: homepage, our story, catalogue, category page, and product detail. Clean, consistent, and simple enough for a non-technical client to manage from day one.
Core logic
Every page follows the same pattern: clear product photography up front, category navigation always accessible in the sidebar, and a single WhatsApp CTA within reach at every step.
One consistent system across five templates: structure, photography, and a single contact action on every page.
UI DESIGN
The visual system was built to translate Rainwear's existing brand identity into a consistent, maintainable WordPress interface.
Design tokens
A structured set of visual decisions applied consistently across every page type.
Typography
Montserrat was chosen as the single typeface across headlines and body text, in nine weight and size combinations from Display down to Small body.
The decision prioritised readability of product descriptions and technical specifications while maintaining a clean, professional character across all pages.
Together, these decisions produce a visual system that feels like the brand, not like a generic WordPress site.
OUTCOME
A fully operational catalogue site delivered in 6 weeks, with 47 products loaded and a client managing content independently from day one.
Key results
47 products across 12 categories uploaded and structured for independent management.
Client onboarded through a combined in-person and video call training session, plus a written manual for ongoing reference.
Site delivered and approved within 6 weeks from first contact.
Iteration
The client was involved at every stage. Over 6 weeks of weekly meetings and ongoing email exchanges, the site went through multiple rounds of content, layout, and copy adjustments.
Each round brought the design closer to what the business actually needed — not what was assumed at the start.
How success would be measured
WhatsApp contact requests from new buyers. Time spent on product detail pages. Return visits from existing clients reviewing the catalogue between sales meetings.
Learnings and reflection
Client involvement at every stage slows the build but improves the outcome. Having the client approve each decision as it was made eliminated the risk of major revisions at the end.
Working with a client with no prior digital presence requires as much education as design.
Every decision had to be explained in business terms first.
The B2B model simplified the project. No cart, no payment flow.
The constraint kept the focus on what actually matters: clear product information and a direct path to contact.
WordPress remains the right choice when client independence after handoff is non-negotiable.
Six weeks in, the client is managing content without any technical support.
Rainwear web
A digital catalogue for waterproof gear, from factory to store.
RW-WEB-2022
