Precision Planting

Overview

When I first started designing for Precision Planting’s marketing team in 2022, they already had a strong brand and a loyal customer base. However, their existing website’s design wasn’t able to keep up with new content and the growing number of products they offered. They were also going through a full rebrand, and needed a design overhaul to match their new brand identity.

My Role

I was hired as a designer & developer to help the marketing team overhaul their website. Some of my responsibilities included:

• 🧪 User research: conducting interviews with customers and dealers to understand their needs and pain points.
• 💅 Design system: creating a comprehensive digital design system of styles, components, and page templates in Figma and tested in Storybook.
• 👾 Development: building the new site with Next.js and Chakra UI.
• ✏️ Content Management: migrating to Kontent.ai headless CMS.

Process

User Research

The biggest pain point Precision Planting was facing was that they were no longer a “Planting”-only brand. As of 2022, they offered a full suite of products compatible with equipment used year-round. This was a significant shift in their business model, and their website needed to reflect that.

To find the best way to present this, I did card sorting with customer and dealers to understand how they grouped products in their minds.

Design

With the new brand identity and the results of the user research in mind, I started designing the new website. I created a comprehensive digital design system that included:

• Styles: colors, typography, spacing, and other design tokens.
• Components: buttons, forms, cards, and other UI elements.
• Templates: page layouts and content structures.
• Patterns: design patterns for common use cases.

As with most design projects, this one went through several iterations. Initial designs were conservative and didn’t depart much from the original brand. But as Precision’s internal rebrand finalized, I started making bolder decisions with key page elements—particularly hero sections and CTAs.

It was much easier to make decisions and get better feedback on the design’s “atomic” elements once I had these keystone components in place. I could test everything in context of the most prominent page elements. Nailing down the rest of the design system was a breeze from there.

Development

Once the design system was in place, I started building the new website. I used Next.js and Chakra UI to create a fast, responsive, and accessible site. I also migrated the content to Kontent.ai, a headless CMS that allowed Precision to manage content in a more flexible and scalable way.

All UI components were developed and tested in Storybook, which made frontend development incredibly fast and easy. Also, using a headless CMS meant that creating new features and widgets in the CMS took minutes instead of months.

Results

The new website was launched in late 2023, and the response has been overwhelmingly positive. Some of the key results in the first three months include:

• 🚦 Increased traffic: The new website has seen a 58% increase in new users launch and 57% increase in pageviews.
• 👋 Improved engagement: Bounce rate has decreased by 9% and tracked events (clicks, form submissions, etc.) have increased by 46%.
• 🏎️ Better performance: The site speed and accessibility scores have improved significantly, with a Lighthouse score of 100% in all categories.
• 💻 Efficient development: The new design system and headless CMS have made development much faster and easier, allowing Precision to launch new features and content in a matter of days versus months.