Stories

How We Rebuilt the Keany Produce Website

How do we build the Amazon of Produce Distribution Websites?

Pros who rely on the produce industry to run their business—restaurants, hotels, hospitals, grocery stores—are harried. They (like you) have a million and one things on their plate every day.

They’re always looking for an edge. A better vendor here, a more efficient piece of software there. Anything they can find to make their day-to-day life just a little easier.

So when it comes to ordering produce—the very commodity that drives their business—why should they feel any different?

We’ve witnessed an arms race in the produce distribution industry over the last 10 years to build the best website—one that allows your customers to seamlessly make an order on the fly. And for new people to become customers.

With competition continuing to mount from all angles in this dynamic industry, making sure your produce distribution website is dialed in can be the difference between thriving and gaining crucial market share, or going out of business.

Keany Produce is a wholesale produce supplier primarily focused on the Virginia / D.C. Beltway region. Founded by Kevin Keany back in 1978 with a modest vision, the group has grown organically over the intervening decades, adding family members and friends along the way, until eventually becoming the regional force the company embodies today.

This is the kind of story you can feel good about: A successful, homegrown American company that cares about its local roots and is truly a part of the community wherein it operates.

Yet, there’s a dilemma here.

The wholesale produce industry was built by companies like Keany, often started many decades ago with one person, one truck and one route.

And because of this organic growth, the roots of the industry run deep and change can come slowly.

Very slowly.

Gone are the days of getting by with a delivery, a smile and a handshake. Food service and restaurant buyers expect convenience and ease-of-use in addition to great service and product, largely thanks to the prominence of online ordering and fulfillment experiences like Amazon and DoorDash.

(I want my quail eggs and baby zucchini and I want them now). 

These features are now table stakes.

Put simply: Those tasked with buying produce for restaurants and large institutions alike are busy people who need efficiency and ease as much as they need quality produce and a strong relationship with their supplier.

But the produce industry is behind the curve on delivering this sort of smooth, integrated digital experience as a general rule.

And the competitive opportunity represented by delivering an intuitive, convenient online ordering platform (the arms race we mentioned a moment ago) cannot be overstated.

But unfortunately, building a seamless e-commerce (eComm) platform isn’t necessarily turnkey. 

 

A few problems you’ll run into when revamping your website include:

 

– The Enterprise Resource Planning (ERP) platforms that exist for the wholesale produce industry, while powerful, are either overly-rigid or barebones, lacking many of the features of a more contemporary customer-focused service. 

– Cross-selling, featuring certain products or vendors on the fly, and even the ability to visually customize these platforms to present consistent branding and messaging can seem out of reach.

– And a qualitative, but no less important issue: Many produce companies don’t have the bandwidth to undergo an extensive website overhaul internally.

And yet, to meet customer expectations and get the most out of selling produce online, these are the exact sort of features that are key.

Each of these issues, while daunting, presented a massive opportunity to the Keany Produce team when they reached out to CODO to revamp their website.

Their team’s vision for this project can be summed up simply:

Help us step into the future by building an eComm website that is as intuitive and frictionless as Amazon. Oh, while maintaining our accessible, family feel. Ah, while also building out a modern platform to make customers’ lives easier and ultimately grow online sales. 




We wanted to build a website that seamlessly showcased our breadth of products and top-notch services to both active and prospective customers, while maintaining our rich company history and culture.

Cassidy WilliamsMarketing Manager, Keany Produce

(Piece of cake, right?)

Today we’re going to walk you through the entire process of designing and developing Keany Produce’s new website. Including site mapping, art direction, development (including integrating with ProducePro’s ERP system), and site launch.

Keany’s previous website. They used this site for ~7 years before working with CODO.

Phase 1: Site Mapping & Information Architecture

 

We kicked this process off by meeting with the Keany team and asking them a whole lot of questions. Our aim was to identify how we would approach organizing and developing their website to accomplish their goals. 

In terms of everything we could show you in this case study—proposed (and summarily rejected) design work, pencil sketches, totally not staged war room walls covered in Post-it notes, flashy parallax animations, etc.—site mapping is about as unsexy as it gets.

But it’s a crucial step towards ensuring we understand your customers and how we can tailor your website to better serve them.

 

Some key questions we’re asking here:

 

– Will we keep the structure of your existing site, or rework it into something new? 

– What content will we need and how should we organize this across your new site? 

– What big-picture Keany initiatives can we bolster using the site redesign as a platform? 

– At the most fundamental level, what should this website accomplish?

– How can this website increase sales (while making your life easier)?

We were also able to use this step to involve the broader staff at Keany by sending out a survey to the sales team and other key stakeholders. This input helped us make sure we were successful in building a website that makes everyone’s lives easier (and ultimately, sells more produce).

A quick aside here: We can’t overstate how important it is to talk with stakeholders at all levels of your business during this process, from the C-suite down to front line delivery folks and customers. We’ve been working in the produce industry for nearly 15 years now and have, time and time again, found some of the most compelling insights to come from these additional conversations.

 

A great example of this that came up during Keany’s site revamp: 

 

“What if we moved away from the industry standard site structure: A rote navigation bar listing “Home, About, Order, Contact…”, and instead, structured the site around the products and brands that Keany sells?”

That way, when a harried Head Chef (capital H, capital C) at one of the nicest restaurants in town needs to place an order ahead of service, the entire menu of options is instantly presented as soon as she hits the website. 

In this way, Keany used the Information Architecture phase to dynamically reshape their core experience and the site’s value prop.

 

 

Alongside the site mapping process, we also used this time to take stock of Keany’s existing visual assets. So, what videos and photos have they gathered over time, including product photos, but also behind the scenes shots that illustrate their fun history?

This allowed us to maintain that approachable, affable family-owned feel (key for differentiating from the faceless Broadliners) while fundamentally reimagining Keany’s digital presence.

With their content inventoried and Information Architecture mapped out, we rolled right into art direction.

Keany’s site map: This important tool lays out how customers will interact with and use Keany’s website.

Phase 2: Website Art Direction

 

Now we begin to work out what Keany’s site could look and feel like by marrying their existing brand standards with the newly defined Information Architecture.

 

Here are a few high notes from this phase:

 

– We’ll develop two initial options consisting of a home page and a few key inner pages to give the Keany team a sense of how their site could look.

– We use a visual prototyping tool (Figma) to view the site design in context in a browser, to get a good sense of how it will look and feel, well before committing to the development stage. This is much easier to grasp than looking at static PDFs.

– An important note on brand identity and art direction here: Keany Produce came into this project prepared with a well-developed brand identity and guidelines. This ensures we’re maintaining important brand equity through this transition.

Option 1

Option 2

Remember earlier when we talked about maintaining Keany’s accessible, family feel while building out a modern website platform to make customers’ lives easier and ultimately grow online sales? 

We resolve this balancing act during the art direction phase. In Keany’s case, we were able to put together a pleasant visual timeline of the company history, complete with charming photos from their past. During this step, their team is seeing features like the timeline come alive for the first time.

(These presentations are always fun.)

We go through multiple rounds of revisions where we’re refining the site design based on Keany’s feedback, but also building out additional pages deeper in the site map. By the end of this process, we will have laid out and refined every single site page.

From here, we roll right into development.

Keany’s final, pre-development prototype. It takes several weeks, and rounds of revisions to arrive at this point.

Phase 3: Website Development

 

Everything we’ve discussed so far is important, but it all falls flat without proper web development. This is how you build a website that is: 

Attractive: If your website isn’t developed well, it won’t honor all the hard work that went into getting the design and art direction nailed down.

Secure: So your customer data is safe and protected from malicious attacks.

Robust: So your website won’t go down, inconveniencing your customers and costing you lost sales. 

Flexible: So your site can scale up, or down, to accommodate any screen size or browser without compromising the user experience.

 

 

Keany Produce’s website consisted of two distinct halves that required careful merging: Their WordPress front end itself, and then the ProducePro ERP backend to power the customer ordering process.

Our goal was to make this experience utterly seamless from homepage to order confirmation. So that when someone adds a product to cart, or signs in to complete an order, you can’t tell where the Keany (front end) site ends and ProducePro’s system begins.

This feels more secure and reliable for customers. And it looks and functions better overall.

 

A few highlights from Keany’s site here:

 


– We built Keany’s ProducePro public catalog to allow prospective customers to see what’s available before signing up for an account. This demonstrates Keany’s products and capabilities without having to become a client. 

This removes an otherwise huge hurdle to getting someone to reach out to become a Keany client.

– The ProducePro integration is challenging because their system, while robust, (currently) isn’t designed to be visually altered. In many instances we had to scour through code, line by line, in order to adjust the interface to look and behave the way we want. 

– Hiring is a major challenge today in every industry, but it’s especially important for a growing firm. To facilitate this, we set up a smooth job application / HR process by integrating Paycom services with WordPress to seamlessly fit Keany’s workflow.

– We developed Keany’s WordPress site using the Gutenberg block system. This “building block” approach is noteworthy due to its flexibility and relative ease of use. This customized WordPress backend gives the Keany sales & marketing folks an efficient way to feature new products or producers on a whim, without needing to know a single line of code.

It also allows their team to add new pages, services, or even bring a newly acquired brand into the site architecture as needed. This works because there’s a system in place for layering in new content and functionality without compromising how great the site looks and functions on launch day.

Before & After: Keany’s product catalog

Keany’s new employment application portal

Phase 4: Tutorials & Site Launch

 

Now that development is wrapped up, we can fast forward through the remaining steps and hit some high notes. 

Bug Testing: Sales staff and other key stakeholders, on the Keany team and CODO’s end, rigorously test the site—essentially trying to break it. We test it in every relevant browser and device, at every screen size and operating system you’ll find out in the wild. This is a process called “bug testing,” and it results in a full list of development issues that we resolve ahead of launch.

Tutorials: Around this time, we host a series of internal, hands-on tutorials to show key Keany personnel the ins and outs of their new website so they can update everything on the fly without having to wait on a third party.

A note on this: We’re always on call to help with any support issues that arise post-launch. But we don’t own this website. Keany does. So they need to know how, and be able to, make any necessary updates on their own. Tutorials allow for that. 

Once we’ve ironed out every single punch list item—once we’ve squashed all the bugs—we officially launch the site.

We could go into more technical detail here on how we turned the public catalog live, or how we married Keany’s front end with ProducePro’s backend on a live domain, or how we archived Keany’s previous website, etc. 

But we’ve spent enough time in the weeds today.

Keany’s new website site is now live, and it’s already driving new business.




Before & After: Keany’s homepage

Before & After: Keany’s individual product page

“Our new website allows for a modern user experience from front end product discovery to our ERP’s backend online ordering checkout. We’ve been able to capture lead growth across our wide service area, increases in sales of key product categories that were previously hidden on our old site, and generate a pipeline of qualified employee candidates.

Patrick MurrayChief Information Officer, Keany Produce

Wrapping up

 

Keany Produce’s website revamp was a massive undertaking with a lot of nitty-gritty details and moving parts, but there are a few key ideas here that stand above the rest:

1. First and foremost, the opportunity for the wholesale produce industry to modernize how it handles digital sales represents a transformative potential for the industry. It remains to be seen exactly how much money is being left on the table, industry wide, by neglecting this opportunity. 

But my guess is that it is substantial, to put it mildly.

2. Convenience, ease of use, and perhaps even softer aesthetic concerns like visual consistency are no longer nice-to-haves in the produce industry. 

These are table stakes. 

Modern life doesn’t leave a spare second aside for anyone. And anything that can be done to buy time for customers by way of making their produce buying experience easier and more pleasant is a win.

3. And finally, produce wholesalers can step into the present—and the future—without losing a connection to their roots.

Modernizing the user experience for customers does not need to come at the cost of telling a good story. 

If anything, we can use the tools at our fingertips with intention to tell these stories better than ever before.

Build a stronger brand.
Sell more beer.

Join 7,500+ other beer industry folks and sign up for CODO’s monthly Beer Branding Trends Newsletter.