Case Study
Allrecipes
Responsive Web UX Design at Dotdash Meredith. 2021 — 2022.
For many years, Allrecipes had been a juggernaut in the food space, eclipsing the traffic of competitors, and building a massive community of home cooks who enjoyed sharing recipes and feedback with each other.
However, over a few years, it became clear that some of this activity had declined; user generated content was falling behind, and the intake of ratings, reviews, and photo uploads deteriorated. We set out to explore the reasoning for the decline, and to design feature enhancements to drive more engagement and further foster the AR community.
Timeframe:
Q4 2021 — Q1 2022
Role:
Sr. Lead UX Designer
Platform:
Responsive Web
Category:
Food, UGC
Allrecipes pre-redesign. There were lots of accessibility and legibility issues, but users had become used to the layout.
Allrecipes.com has seen many transformations. Launching first in 1997, the site evolved through all of the major web trends, and had most recently undergone a redesign in mid-2020.
While this update brought the site to a much more modern look and feel, it also led to a rearrangement of some of the site's core functionality, in favor of emphasizing the content. Rather than pushing for user engagement at every turn, Allrecipes looked to better display the information that was already there. In theory, this was the right idea. In practice, it confused users who had been with the site for ages, and communicated to new users that this site was for visiting, and not much for engaging.
This was a problem — Allrecipes had always been a site fostered by the people, for the people. Community-created recipes and user generated content are the heart and soul of the product. So, we set out to explore these features, first by partnering with the user research team to understand a few things, such as: what motivates a user to leave a review, to create a recipe, and what their perception of the product is.
The first iteration of the new Recipe Detail Page, from before my time. Functionally, the design worked well, but it wasn't encouraging and promoting user engagement, like the old site had.
User research provided invaluable insight into the motivations behind our users' engagement, something that is heartily driven by a sense of community. Users give their time to bolster the community, finding joy in sharing, and appreciating the work of their fellow home cooks.
We felt confident in the product's ability to afford for these things. A competitive audit and multiple rounds of usability testing convinced us that the issue wasn't with the availability or functionality; rather, the product was failing with a core concept of design: communication.
The site was not currently communicating the presence of such features well. Visibility was obscured due to the newest layout, interactable elements had been diminished compared to their surrounding area, and the rearranged hierarchy had simply caused legacy users to miss out and not think about the features. This last point was key, because users did want to engage, but they may easily forget to, because such things can be lost in the chaos of researching or cooking a recipe.
This issue was not only leading to a decline in engagement, but the overall brand identity was being forgotten. From our research, new users were unaware that the recipes on the site were created by fellow users. They'd become accustomed to other, larger brands, and assumed that what they saw was always the work of a professional. User-written recipes is a core value proposition of Allrecipes, and we wanted to communicate that clearly.
The new UGC toolbar, heavily promoting Save, while ensuring that the other controls were seen as interactable.
For this project, we focused entirely on the Recipe Detail Page (RDP). Firstly, this is by far the most visited page on the site, as most of our traffic comes in directly from a search engine. Secondly, it is the page with the most user-generated content: the recipes themselves, ratings, reviews, photos, and home cook profiles.
After further desk research, and rounds of ideation and wireframing, we landed on a collection of high-impact, low-effort improvements, and one larger update surrounding the review form.
One of the simplest (but ultimately, most important) things we looked at was our buttons, and whether they were signifying their affordances both correctly and loudly enough.
Compared to the previous iteration of Allrecipes, the buttons calling for a save, a rating, a review, or a photo were quiet as can be, floating off to the side of the main content, and communicating an inactive or undesired state to the user. The first update we pushed was a brand new UGC toolbar, one that promoted a priority action to save, while communicating the secondary actions' affordances clearly. By emphasizing one, rather than giving an equal weight to all, we saw a staggering improvement in user perception.
The new review form, presented with a new hierarchy to communicate levels of importance and optionality, notably diminishing the size of "Add Photo" and providing more detail.
We carried a similar philosophy in some of our other small changes. The "Add Photo" button was completely redesigned, built to communicate its purpose via its structure. The " I Made It" button was prioritized next to its counterpart "Print". The "Add Review" CTA was given a louder presence, and the copy was updated to give a greater sense of user contribution. All of these changes were small, but again led to large results.
The larger of our endeavors involved redesigning the "Add Review" flow. Again, here we saw all of the functionality a user would want: star ratings, a place to add reviews, and a way to upload photos. But, from testing, we found out that by throwing the entire gamut at users, we were overwhelming them. They didn't realize that some aspects were optional, making them think they needed to leave all 3 parts in order to post. Often, they just didn't want to do that.
The form was oversized, and poorly communicating with our users. So, we redesigned it. "Add Photo" was de-emphasized, because it was the least likely action of any user, yet it had been dominating half of the form's real estate. It was also updated to match the styling of the add photo CTA at the top of the RDP. Clear labels of what was or was not optional were added the form fields. Lastly, the form's layout was shifted into a single-column, and presented so this the entire form could be seen at one time on any screen.
A selection of other changes: including: a sticky "Save" button in the mobile nav, Ability to edit photos, branded success messaging, and clear communication about review moderation.
We were confident in our changes, but needed to measure their success. So, we conducted a live A/B test of the RDP, with and without our updates. This was made possible due to our awesome dev team, and underwent a week-long test.
The results were super encouraging. UGC submissions were up close to 140% with the new designs, and we saw a heavy increase in the use of our save functionality. With this success, these updates were pushed to 100% of our traffic, and the benefit of our updates was spread across the company, appearing on all other brands and future endeavors.
Retrospective
While I end this case study here, the project would turn into a much larger change as we developed a full redesign of Allrecipes. I could talk about that work another day, and if you'd like to hear it, please reach out.
From a growth standpoint, this project reminds me to always look for improvements. It was one of small updates with big impacts, low-effort and high-reward. Designs are never perfect, and there's always a chance to create a better experience for users. I try to carry that mindset as much as I can.