Cook with Campbell’s
Responsive website redesign
Canadian version of Cook with Campbell’s recipe site needed a major redesign in order to make the site responsive, as well as to create a more engaging overall experience for consumers, encouraging them to use the site as a destination for recipe solutions.
![Cook with Campbell's: responsive website](https://format.creatorcdn.com/5b4720e2-c19a-4a53-95aa-49c99d9114ec/0/0/0/0,0,2635,1574,2635,1200/0-0-0/fc82f650-31dc-4bd8-b2e7-7f9263ed5948/1/1/Campbells-Mockup-Devices.jpg?fjkss=exp=2037598448~hmac=8086c980f6b3d8016d3b9a75fc807e003408c9743ba127f99fd95f2125c22100)
Outdated visual elements and photography were stripped out to make way for a sophisticated, beautiful experience where the user could navigate easily between expertly-crafted UI elements, filter through the recipes and the Campbell’s products, and share with their friends.
![Cook with Campbell's: mobile views](https://format.creatorcdn.com/5b4720e2-c19a-4a53-95aa-49c99d9114ec/0/0/0/0,0,2700,1800,2700,1200/0-0-0/5b9f81e5-8b58-405d-a978-86ff6a525d05/1/1/Campbells_Responsive_Mobile.jpg?fjkss=exp=2037598448~hmac=f7f469ddd1eb76345c2c1bcd46f360181533d74eed0ab69a935a980033dbf6a1)
The website moved away from being a static page and focused on showcasing the Campbell’s product being used in the various recipes. Thoughtful information design, beautiful photography, and device-friendly recipe views bring polish and increased usability to this vast recipe platform.
![Cook with Campbell's: homepage on iPad](https://format.creatorcdn.com/5b4720e2-c19a-4a53-95aa-49c99d9114ec/0/0/0/0,0,2737,1889,2737,1200/0-0-0/56cfe3c5-1f34-4525-88ad-7db765174ea8/1/1/Campbells_mockup_ipad2.jpg?fjkss=exp=2037598448~hmac=35f72a3bb8e87e9368affcf18b80e905c2d19f96659e752e788d269c82051894)
![Cook with Campbell's: mobile recipe view](https://format.creatorcdn.com/5b4720e2-c19a-4a53-95aa-49c99d9114ec/0/0/0/0,0,2822,1878,2822,1200/0-0-0/bb338910-2543-40fb-a81a-70364700606b/1/1/Campbells_mockup_iphone.jpg?fjkss=exp=2037598448~hmac=8d6b5673450f09939ffd1d5eb0705f182f38e8e48defd82e92f4e4067c715a8b)
![Cook with Campbell's: recipe collection view](https://format.creatorcdn.com/5b4720e2-c19a-4a53-95aa-49c99d9114ec/0/0/0/0,0,3088,2056,3088,1200/0-0-0/83229d2e-8bde-46fe-9eef-7136c3f7570b/1/1/Campbells_mockup_laptop.jpg?fjkss=exp=2037598448~hmac=1123a52da79b254b6e5bce51b0423fd6352871cccaa0119cbd64edbbe5adcbb7)
// Designed while at Mirum //
Detailed Page Designs
![Cook with Campbell's: Homepage](https://format.creatorcdn.com/5b4720e2-c19a-4a53-95aa-49c99d9114ec/0/0/0/0,0,2037,4343,1600,4343/0-0-0/a4b646cf-a7d8-4968-a189-bc655af72868/1/1/Campbells_Homepage_desktop2.jpg?fjkss=exp=2037598448~hmac=b96f0c0b3605e7ce3d107b04568c7e47b9e3e8a68c3cd5d5f6896649556ad212)
Homepage
![Cook with Campbell's: Recipe Page](https://format.creatorcdn.com/5b4720e2-c19a-4a53-95aa-49c99d9114ec/0/0/0/0,0,1881,4703,1600,4703/0-0-0/01c05153-91d1-4cbc-b2ab-ecb2e781d31a/1/1/Campbells_RecipePage_desktop2.jpg?fjkss=exp=2037598448~hmac=300084686f477b52944d132eb791ef8ccbe0f0b5892a9e80b3ae5b1cf215ee96)
Recipe Page