Bertolli Website Design

A customer experience with endless pasta-bilities.

4 min readOct 16, 2020

Grid layout showcasing multiple shots of the newly designed Bertolli.com.

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

Desktop and mobile rendering of the redesigned pages of Bertolli.com.

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.

Hi-def wireframe layouts showcasing three initial page layout options for the newly design recipe page at Bertolli.com.

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.

Highlight of the quick at-a-glance features: 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.

Highlight of featured product images at the top of each recipe page.

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?

Animated GIF showing the clickable/tappable checklist items found in both Ingredients and Directions sections.

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.

Animated GIF of newly designed Bertolli.com recipe page experience.

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),

Highlight of future content: influencer content and featured video.

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.

Highlight of easy-to-use social share icons.

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*

Animated GIF showing the swipe-able/tappable toggle between Ingredients and Directions.

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.