General Mills | 2010-2013
I lead the UX team responsible for BettyCrocker.com -- and a few other General Mills sites -- during a tumultuous time. Mobile device traffic was increasing, the repeat visitor rate was low, and the company want to transition from an online recipe book to a full-fledged content platform. So many interesting problems to solve!
Across many projects, our goals were to...
The way to get our content onto mobile devices was obvious: We needed a mobile-first, responsive redesign. Easier said than done, but the client saw the writing on the wall and committed fully to the project. I took responsibility for learning responsive design inside and out, so I could mentor both my team’s visual designers and the client’s engineers.
Reducing bounce rates and increasing our repeat visitor rate had less obvious solutions. I conducted my own statistical analysis of site visits for the previous few years and concluded that we’d been designing the entire site upside-down. Rather than arriving on the homepage and navigating down to recipes, visitors were landing directly on the content level from a combination of Google, social media, and email marketing. Only 10% of visitors ever even saw the homepage!
Hypothesizing that visitors were bouncing back to Google when they decided that the recipe they’d landed on wasn’t quite right, I increased the visibility of upwards and lateral navigation options on recipe pages. First, we collapsed the main content area to provide a succinct overview of the recipe + related recipe links.
More crucially, I added category tags to the recipe overview, things like main ingredient, course, cuisine, holiday, etc. Each would link to a category page where visitors could continue their search one our site, no matter which aspect of the recipe originally brought them to us.
Server statistics also suggested that search users bounced less often when they used more specific search terms. In order to help narrow down their searches, we redesigned the Betty’s filtering system with easy to use controls like sliders, toggles, and checkboxes.
Unfortunately, it didn’t work. Not one bit. The only part of our redesign that did seem to help was making the recipe photos bigger. Based on these results, we completely reversed course and redesigned search again, this time to turn it into more of a photo gallery. We removed the complex filtering controls, stripped out the long recipe descriptions, and made those photos as big and pretty as possible.
That did the trick, but we still had one problem. We knew that some of the text-based info we’d removed was important to certain users, things like prep times, cook time, calories counts, etc. We didn’t want to water down our successful photo gallery, so we built a dynamic system were different information would be displayed based on which sorting and filtering options the user selected. For example, someone who sorts by “Quickest” would see prep time and cook time instead of ratings and reviews.
The result of all this work was a dramatic increase in our repeat visitor rate, more than twice anything we’d achieved through A/B testing. The bounce rate on mobile devices, and from Google users, also decreased year over year. Best of all, when we extended these same techniques to Pillsbury.com the following year, they enjoyed the same results.
Based on these successes, I started doing similar work for smaller General Mills brands… and experimenting with more innovative designs. One of my favorites was an attempt to minimize the site header even further by folding main navigation into the search experience.
It worked brilliantly. :) When asked to navigate upwards from a content page, users were momentarily confused by the lack of a traditional header. In their confusion, they turned to the searchbox… which immediately displayed main navigation options in a type-ahead menu. It was UX jujitsu and I loved it.
There were several benefits to this approach. First, it allowed us to put the content front and center, limiting the site header to only a few dozen pixels in height. Second, we’d never have to worry about whether there was “enough room” in the header to add a new nav item or change their names.
Finally, because we’re presenting nav items in a type-ahead menu, we can mix dissimilar items together without confusing the information architecture. For example, a top-level option like “Recipes” can be displayed right next to a piece of seasonal content like “Our Favorite Holiday Cookies.” In short, we can direct visitors to the most popular parts of the site, regardless of where they sit in the hierarchy.
Next Case Study: Social Media