Cox Farms

Cox Farms' homepage recorded 43% scroll depth, compared with 86% on About and 73% on Our Brands. That gap suggested we should examine how the homepage encouraged exploration before replacing its content.

I worked on the visual design, motion, and client alignment for a seven-section redesign. The goal was to make the company's greenhouse innovation and food-security mission easier to discover, then carry that direction into a reusable system for engineering.

Aligning the team around the problem

I co-led a design alignment workshop with the design director and Cox team. We used the existing experience and scroll data to establish a shared problem: the homepage wasn't giving visitors a clear reason to continue.

Stakeholders described the site as “a little too templated” and compared it to a “financial conglomerate.” The redesign needed to express the warmth and innovation of the business through a clearer hierarchy and more deliberate transitions between sections.

Turning feedback into design decisions

An earlier round of concepts had been rejected. I focused the next iteration on three sections where the visual treatment obscured the content or suggested the wrong interaction.

One Simple Promise

The fanning cards suggested an interaction they didn't support. I replaced them with a scroll-triggered typographic reveal that kept the promise itself in focus.

Brand Pillars

I made all four pillars visible together, with a word-image-copy reveal and click-to-expand detail. Visitors could understand the full set before choosing where to go deeper.

The Stats module

An image dominated a module intended to communicate four key numbers. I reorganized it around those numbers and their links into the site. Because the module sat on engineering's critical path, I secured PM agreement on the deep-link scope before designing it.

A shared language for motion

I translated the motion direction into shared rules for all seven sections. Each reveal needed to guide attention, with consistent timing and a reduced-motion fallback.

• Reveal on entry — trigger motion as each section enters the viewport.
• Parallax at 0.2–0.3 — add depth while keeping the copy in focus.
• ~100ms stagger — use a consistent cadence across sections.
• Reduced-motion fallbacks — retain static, legible content throughout.

Documenting the motion as tokens gave engineering explicit timing and behavior to implement across sections.

The system beneath

I paired the motion rules with semantic color tokens and reusable components, giving the team a common foundation for building and extending the homepage.

Impact

The seven-section homepage shipped on schedule and launched on June 4, 2026. Early reporting indicated improved scroll depth, but I don't have a final post-launch measurement to report here.

The work also established a shared direction across the client, design, and engineering teams. Feedback on Promise, Pillars, and Stats helped turn an open-ended request for more energy into specific interaction and implementation decisions.

What I'd do differently

I would agree on a scroll-depth target and interactive scope before the first presentation. That would give the team a clearer basis for evaluating concepts and resolving scope changes.