Overview

Precision Planting's marketing team had a problem: their website couldn't keep pace with a growing product line or a full brand overhaul. The existing setup was a collection of legacy templates that made adding new products and content slow and painful. They needed a complete rebuild — new architecture, new design system, and a CMS that wouldn't require a developer to update a product page.

Precision Planting's old website homepage
The previous site — templates stretched well past their limits.
🎯

Goal: Build a website that could scale with the brand's product growth, match the new visual identity, and give the marketing team CMS-level control over all content.

My Role

Hired as designer and developer to lead the rebuild from concept to launch:

  • Design system: full token system (color, type, spacing, motion) in Figma, validated in Storybook
  • Component library: built in Next.js + Chakra UI, tested in Storybook with >90% coverage
  • CMS migration: moved all content to Kontent.ai headless CMS — new pages went from weeks to hours
  • User research: card sorting with customers and dealers to inform IA and product taxonomy

Process

Architecture decisions

The key call was choosing Next.js + Chakra UI over a CMS-native builder. The marketing team needed design flexibility and the dev team needed a maintainable component model. A headless approach (Next.js frontend + Kontent.ai CMS) gave both: content editors got a clean, structured authoring experience; developers got a typed content model with predictable schema.

Precision Planting design system
Design token system — colors, type scales, spacing, and component variants.

User research first

The old IA assumed Precision was a planting-only brand. By 2022, that was no longer true — they covered seeding, soil sampling, and harvest. I ran card sorting sessions with customers and dealers to understand how they mentally grouped products before designing the nav and product taxonomy.

Finding: Users grouped products by equipment compatibility first, then by use case — not by brand sub-line. This drove the entire IA rebuild.

Card sorting session results
Card sorting revealed the right product hierarchy — equipment-first, not brand-first.

Design system build

I started with the high-visibility keystone components (hero sections, CTAs, product cards) rather than trying to build a complete atomic system upfront. Getting those right created a strong reference point for every downstream component decision.

New hero sections and CTAs
High-contrast hero + CTA patterns anchored the rest of the design system.

Storybook + headless CMS = fast shipping

Every component was developed and documented in Storybook before touching any real page. With a typed Kontent.ai content model, adding new widgets to the CMS took minutes instead of sprint cycles.

Storybook component library
Storybook became the source of truth for component state and documentation.

Outcome

Launched in late 2023. First 90 days:

  • +58% new users, +57% pageviews
  • -9% bounce rate, +46% tracked events (clicks, form submissions)
  • Lighthouse 100 across Performance, Accessibility, Best Practices, and SEO
  • New content and features shipped in days, not months
GA metrics post-launch
Across-the-board improvement in the first three months after launch.
New homepage
New products page
New resources page
New dealer locator
New product page
New careers page