Graham Slick

Every project UX, Design

Bertolli

Designs for an immersive website for the launch of Bertolli Gold Label, Bertolli’s first super-premium pasta sauces, for desktop and mobile, at Story Worldwide.

When
2014
Role
Associate creative director
At
Story Worldwide, New York

Bertolli Gold Label was Bertolli’s first super-premium pasta sauce: three sauces, each built on a regional ingredient imported from Italy, porcini mushrooms, balsamic vinegar of Modena and Asiago cheese. For its launch in 2014, Story Worldwide designed an immersive website for desktop and mobile, with Graham as associate creative director.

The site opens on the three jars over an Italian hillside, then takes each sauce home to its region, Modena, Parma and the Veneto, with its story, a short video and its recipes, and ends at Find a Jar. The mobile pages began as a sketch on paper; a site map and annotated screens set out how every part moves as you scroll.

A user journey from that August went further: a recipe search for Bertolli that knows the family. It sorts recipes by what everyone likes, filters out allergies and dislikes, saves meals and shopping lists, and plans for a crowd.

Roles Creative direction · UI and UX

The Bertolli Gold homepage: three jars, Porcini, Balsamic and Asiago, over a misty Italian hillside with a stone aqueduct, beside The best sauce is uncomplicated, and a Scroll down button
The homepage
The Balsamic story: the jar on weathered wood under Balsamic Vinegar of Modena, beside a video of grilled peaches, with recipe thumbnails below
Balsamic, from Modena
The Porcini story: the jar on burlap under Porcini Mushrooms from Parma, beside a video of mushrooms in a skillet
Porcini, from Parma
Balsamic recipes: Prosciutto Chicken with Caramelized Onion Sauce on a wooden table, with a row of three more recipes and Next: Porcini Story
The recipes
Two plates of spaghetti and meatballs under a Find a Jar button, with Back to top
Find a Jar
The mobile site: the Balsamic story, with the jar, the story of balsamic vinegar and a video, and the Balsamic recipes as a list of four
On a phone
A pen sketch of the mobile pages on paper, with notes on a sticky navigation, title options, sharing and Find a Jar
The mobile sketch
The site map: the intro, the Balsamic, Porcini and Asiago stories, each with a video overlay, a recipe landing and recipe details, and Find a Jar, beside the navigation
The site map
A wireframe for a family recipe search: sort by recommendations or family likes, filter out family allergies and dislikes, and an account with saved recipes, meals, shopping lists and a sample family’s likes, dislikes and allergies
A recipe search that knows the family