"What's for dinner tonight?"
Campbell's came to RAIN with a problem. They were battling a trend of declining sales and wanted to embrace a digital solution. After a year-long audit of their digital ecosystem, one solution we proposed was a complete re-haul of Campbell’s Kitchen (CK), a recipe service including a website and app that drives consumers to buy Campbell’s products.
As Creative Lead, I worked with our UX team and a team of designers. I worked on the user experience, concepted the overall look and feel for the design, and presented creative to the client at each stage of the project.
We conducted research and site analytics on the original site and came away with the following insights:
- The carousel hero on the homepage gained little interaction. Most people did a site search or navigated to a link from within the header navigation and did not usually interact with anything in the body of the homepage.
- In user interviews we heard that users wanted to browse many recipes at once and generally picked a recipe image that caught their eye.
- We had seen increased interaction on tests we had performed on the Campbell's email campaigns and saw higher interactions when a larger number of recipes were presented, as opposed to one large hero recipe.
Based on these insights, we set out to make a better performing homepage.
The recipe page needed two key changes:
- We wanted to take advantage of the great recipe photography by using large hero images for each recipe. We found that users found the recipe photograph to be a strong indication of whether they liked the recipe or not.
- We wanted to reorganize the visual hierarchy and design of the page so a user could quickly scan it and easily cook a meal from the recipe. We also wanted to contextualize the recipe more by adding in a sidebar with various callouts including products used (great for brands). Users were more likely to stay on the site and explore more recipes because of the similar recipes module we added.
One challenge we had was a branding exercise that involved the Campbell's Kitchen brand and all of the brands that lived under the Campbell's name (Swanson Broth, Pepperidge Farm, Prego, etc.). The goal was to entice brands to live on Campbell's Kitchen as a way to drive sales. Of course, there was a balance between how branded a page could get before it looked like it wasn't part of the CK site. We developed a template system that struck a balance that allowed the brands like Swanson to shine through while keeping the basic design principles from CK.
We worked on mobile concurrently with desktop to assure that the site worked well responsively and to address the need states our users had. Many users used mobile when they were shopping so we focused on highlighting recipes and optimizing the individual recipe pages so users could do a quick scan.
Campbell's Kitchen App
The existing Campbell's Kitchen app was a mess. It constantly crashed, the UX and UI didn't make sense, and the ratings on the app store were embarrassingly low. Campbell's wanted us to do a quick redesign of their app around the same time we built CK. I was responsible for the redesign and worked closely with our UX team to create an experience that spoke to user's needs. We focused on quick recipe browsing, emphasizing imagery, and creating features like "Cooking Mode" which displayed recipes in a stripped down way when users had to be mostly hands-free in the kitchen.