Bertolli Website Design

A customer experience with endless pasta-bilities.

We can’t think of a better way to celebrate National Pasta Day on October 17th than by taking a moment to highlight our deliciously good Bertolli client work. So, let’s dig in.

Initial Bertolli Website Design

In 2017, Bertolli worked closely with our team to create a unified website that would highlight and support their three unique product categories: Pasta Sauces, Olive Oils & Vinegars, and Frozen Meals.

The existing site structure wasn’t very user-friendly for either the brand’s marketing team or the consumer. After an initial assessment and brainstorm, our collaborative primary wishlist for the new site included:

• Unified and consistent branding
• User-friendly content management system
• Data collection
• User-first navigation and interface
• Mobile optimization
• Recipe filters

So we got to work.

But, we didn’t stop there.

Following the launch in 2018, our strategists and data scientists regularly reviewed user behavior and site analytics to recommend and drive improvements. Over time, these improvements would further increase search visibility, optimize page views and time spent on the site, as well as decrease bounce rates.

Creating a Recipe Experience

After some additional site analysis, it became clear that Bertolli fans love their recipes. Knowing this, in Spring 2020, Bertolli asked our UX/UI team to audit the current page and propose modern updates. They knew the digital landscape had changed since the site launch and wanted our expertise to further improve site interactivity and intuitiveness. So we proposed making Bertolli.com a recipe destination—an experience that would truly put home cooks first.

Through user research and testing, we built medium-fidelity wireframes that simplified interactions and optimized the overall recipe page layout, while also casually encouraging exploration and brand engagement.

After identifying the winning wireframe option, we swiftly moved into design and development.

A quick overview of a few key features:

Recipe at-a-glance.

We put the information home cooks want first at the top of the page so it’s super scannable. This includes serving size, prep time, and cook time.

Tasty, tasty products.

The Bertolli products used in each recipe are prominently displayed and linked in the ingredients, allowing users to both familiarize themselves with and explore new Bertolli products.

Check, please.

Clickable/tappable checklists for the ingredients and step-by-step directions help cooks—who are multi-tasking or wrangling kids—by allowing them to easily track what they’ve already done. And who doesn’t love a good checklist?

It’s all in the details.

Incorporating parallax—unique to the desktop experience—as users scroll down the page, the image zooms from a macro shot of the up-close deliciousness to a wider view showcasing the end result. It’s a surprise-and-delight element that adds energy and makes the page more engaging.

Love it. Save it. Share it.

Direct links with scannable icons allow home cooks to easily share their favorite recipes with friends and quickly save them for later with Pinterest integration. A print integration—higher on the page—lets home cooks quickly send recipes to their printer (right from their phone),

Looking to the future.

Taking future marketing strategies into consideration, modules were included in the designs that can be shown or hidden to support recipe videos and influencer content.

Less scrolling. More cooking.

Digging deeper into the stats, we discovered the vast majority of Bertolli fans aren’t just looking at the recipes on the site, they’re actually referencing recipes throughout the cooking process. To help make things even easier, we implemented a tappable/swipe-able toggle that allows home cooks to quickly switch from Ingredients to Directions without scrolling. That is one delicious, seamless UX design feature. *Chef’s kiss*

Overall, we made the new Bertolli.com recipes experience clean and fun with functionality enhancements that were both intuitive and innovative—a virtual feast for the eyes.

Hungry yet? Check out the work and celebrate National Pasta Day—every day—with some of our team’s favorite Bertolli recipes:

Pappardelle with Chicken

Artichoke Spaghetti with Toasted Garlic Breadcrumbs

Linguine Alfredo with Chicken and Mushrooms

Herb-Marinated Grilled Shrimp Farfalle

Porcini Chicken and Cheese Raviolis

Need a delicious website for your brand? Chat with us at hello@havashelia.com