The Marine Stewardship Council is at the forefront of sustainable fishing, setting, monitoring and certifying good practices at fisheries across the world to ensure a healthy marine ecosystem for the future. Their 'blue fish' mark provides consumers with peace of mind when purchasing fish and other seafood, and their online channels support this work with extra insight, advice and inspiration.
To mark the start of a new year in 2021, we worked with MSC to create The Blue Cookbook, a beautiful, digital collection of sustainable seafood recipes devised by industry-leading chefs from around the world.
At Harpoon we use digital storytelling techniques to offer structural and visual layering when building up narratives in Shorthand, and we knew this could be translated into the world of cookbooks and recipes with huge impact. So we were excited to get started.
We helped to design and plan the structure of the cookbook, which would feature ten recipes, enhanced by chef biographies, sustainability messaging and a sprinkling of seafood species trivia.
Critically, design began with the mobile experience. Based on reader behaviours, the team recognised the need and exciting opportunity for the cookbook experience to be designed for the smallest screen first – the one people are most likely to use when actually cooking.
The end product is one which feels innate to mobile: smooth, uncluttered, seamless to scroll with one hand, with the right detail, at the right time.
Each recipe is delivered on its own page, but they can also be accessed via a hub page, featuring an introduction to the cookbook, campaign and chefs.
As shown below, a grid of the recipes is delivered in the style of a supermarket recipe card wall, allowing readers easily to browse and click to explore a particular dish.
Beyond the recipe wall, readers with an appetite for more than seafood recipes can dive into an underwater-style trove of species facts, supported by illustrations and map graphics, as shown above.
On the individual recipe pages, the aim was to keep them clean and easy to follow, and to harness the scrolling techniques available in Shorthand to layer in visuals and added detail.
We also wanted to open with visual impact. As such, the recipe pages open with a looping video of the final touch of the recipe being carried out, such as drizzling a sauce or adding a garnish.
And this visual flair is balanced out with the critical elements of any recipe: servings, cooking time and a brief description of the dish.
As per the brief, the recipe pages are also injected with key species and sustainability facts. But to ensure the page remained clean and easy to follow this was kept succinct, with extra detail available on-click.
The Method section is designed to be modular, with clean blocks for each step, separated by a full-screen visual of the instruction in progress, either in still photo or looping video format. This delivers a clear visual signpost as you smoothly scroll into the next step, while enabling the reader to linger on the written or visual instruction as long as necessary before they continue.
After the final step of the method there is a prompt for the reader to capture a photograph of their dish and share it on social media, as part of MSC’s ongoing #BigBlueFuture campaign. Shorthand’s scrolling functions are employed here to make this prompt a seamless, added layer on the Cookbook narrative, rather than an interruption.
The recipe pages also incorporate a video of the dish being cooked, a link back to the main Hub Page of the Cookbook and social media CTAs.
As well as designing and building the online cookbook, Harpoon also produced PDF recipe cards and an entire print cookbook available for download from the hub page and individual recipe pages.
The Blue Cookbook showcases how scroll-based storytelling techniques can transform a collection of recipes into a vibrant, compelling digital product. A clean but captivating step-by-step method, layered with visually powerful facts and figures, keeps the reader scrolling beyond the recipe and into deeper engagement with the wider campaign of sustainable seafood.
"With Harpoon, we couldn't have asked for a better partner to help us develop our very first online Blue Cookbook: an ambitious story gathering 10 international chefs, encouraging people to make the best environmental choice when cooking seafood, to be translated in 15 languages. Their teams listened to our needs, helped frame our message, designed a beautiful and interactive story, supported the development of the translated stories, and all of that while keeping to deadlines and on a smooth path"
Stéphanie Poey - Senior Campaigns Manager - MSC
020 7193 9285
Harpoon Productions Ltd is a company registered in England and Wales, registration number 10287615, VAT no 263 5576 82. Its registered address is 5a Bear Lane, London, SE1 0UH