PouchMark Automation
A web and mobile redesign for a smart industrial automation company

Engineered for precision, designed for simplicity

Challenge

A responsive redesign for PouchMark Automation

I led the redesign of PouchMark's website to align with their refreshed brand identity. The focus was on making complex industrial equipment easier to understand through improved readability, card-based layouts, and a high-contrast design that works better for accessibility.

PouchMark homepage on desktop and mobile, annotated with three changes: a high-contrast hero, a card-based industry grid, and the same hierarchy on mobile
Research & Discovery

I talked with sales teams, packaging engineers, and procurement managers to understand how people actually make decisions when buying this kind of equipment. One thing became clear pretty quickly: technical buyers need to validate specs fast before they'll invest time going deeper. That insight shaped everything. We put the critical technical info up front while keeping clear paths to more detail and contact options.

Who I talked to
Sales teams
Packaging engineers
Procurement managers
“
The insight

Technical buyers need to validate specs fast before they’ll invest time going deeper.

What it changed
01
Specs up front
Speed, capacity, and footprint lead every product page.
02
Depth on demand
Technical detail unfolds for buyers who want more.
03
Contact in reach
A clear path to a demo or quote from every page.
Information Architecture

I built the interface for instant clarity using clean card hierarchy, strong contrast, and predictable spacing so users can move quickly and confidently. The layout reduces cognitive effort during navigation and scrolling. The end goal is for the user to be interested in a system and want to fill out the contact form, therefore every branch of the structure has an endpoint at contact.

Information Architecture
Live site structure
Home Industries Agriculture Medical & Diagnostics Coffee Dry Goods Co-Packing Retail & Apparel "Choose Your Industry" hero grid routes to dedicated use-case pages Products FLOWxt FLOWxt Hand-Feed EDGExt VERSAtag FLEXtij Resources Warranty Product Guide About About PouchMark Meet the Team Contact Us Demo / Quote Form
Users land on Home, choose an Industry or jump to Products, explore use-case and machine detail pages, then convert through a single Contact Us funnel for demos and quotes. Supporting paths to Resources and About reinforce trust.
Design System

The design system is built on a tight typography scale, high contrast, and structured spacing. Color and elevation reinforce hierarchy and give tactile feedback. The goal was to create something that feels reliable and easy to navigate, a system you can learn once and apply everywhere.

Color
#DC7727Calls to action, accents
#1A1A1AHeadlines, dark bands
#333333Nav and footer
#6B6E73Body copy
#E3E4EABorders, outlines
Type
Page title38 px, Light
Label-free printing
Section head28 px, Heavy, caps
One pass, every code
Body15 px, 1.7 line height
Short, readable paragraphs in a muted gray keep dense technical detail easy to scan.
Buttons
Book a live demoSee it in actionCONTACT US
Pill buttons for page actions, a squared outline for the persistent nav contact link.
Website Interface
PouchMark FLOWxt product page in front of the Coffee and Dry Goods industry pages
Visual Design & Brand

The site needed to present cutting-edge automation without overwhelming people. I used clean layouts, readable type, and subtle motion cues to tell a clear story about complex equipment. It's meant to feel expert but approachable, the kind of interface that builds trust through simplicity rather than trying to impress with complexity.

PouchMark Dry Goods solutions page on a laptop
Product Architecture

Rather than organizing products by technical specs alone, I structured the architecture around customer workflows and decision paths. Each product page surfaces the information buyers told me they need first (capacity, speed, footprint), then progressively reveals more technical depth. This lets different stakeholders (engineers vs. procurement vs. executives) get what they need without wading through irrelevant details.

VERSAtag product page annotated in three tiers: at a glance for executives, fit for your line for operators, and full technical depth for engineers

Each product page emphasizes clarity, technical confidence, and conversion readiness. High-fidelity system photography, equipment breakdowns, key capabilities, and direct CTAs help users quickly understand machine value. Structural spacing, bold system headlines, and integrated request-quote buttons support high-intent decision-makers like plant managers and operations directors.

Three PouchMark mobile screens: industry cards, the FLOWxt product page, and the coffee page
Live Site Features
The live site, desktop and mobile
Scroll inside each frame
pouchmark.com/industry-coffee
Full desktop layout of the PouchMark Coffee industry page
Full mobile layout of the PouchMark Coffee industry page
Animations

In a niche manufacturing industry, "direct-to-pack printing" is nearly impossible to explain with words alone. I created AI-generated animations that show the completed process. The pouch feeds in, variable data prints on the surface, product exits ready to ship. This visual approach transformed abstract technical capability into immediate comprehension, letting buyers see precision and flexibility before requesting specs or demos.

Coffee industry animation
Animated coffee pouch with variable data printed directly on the bag
Close-up of the printed best-by date and net weight
  1. 01Pouch feeds in
  2. 02Variable data prints on the surface
  3. 03Product exits ready to ship
The inset shows the real print at actual size.
Live Site

Each product page prioritizes immediate decision factors (speed, capacity, footprint) before progressively revealing technical depth. Rather than forcing all users through the same information hierarchy, the architecture serves executives (ROI and fit), engineers (specs and integration), and operators (workflow and ease-of-use) simultaneously. Industry-specific applications and video demonstrations establish context before specifications appear, ensuring buyers understand value before validating compatibility.

Product page walkthrough, desktop
Screen recording
pouchmark.com

Mobile accounts for the majority of PouchMark traffic, so the responsive architecture prioritizes thumb-driven navigation and quick comprehension. Spec grids collapse to single-column cards, hero images stack above copy, and persistent CTAs remain accessible without viewport clutter. Each section functions as a discrete scroll stop with clear hierarchy, letting users dive deep or skip ahead. Escape routes to contact forms stay fixed at natural pause points, respecting that mobile users research in shorter, interrupted sessions.

Mobile walkthrough
  1. 01Cards collapse to a single column
  2. 02Each section is its own scroll stop
  3. 03A clear path to contact at every pause
PouchMark EDGExt product page on desktop and mobile