Boosting Engagement by 60% on Serious Eats' Recipe Template

Project Overview

Serious Eats is an award-winning food and drink website visited by over 7 million hungry readers every month. In Q4 of 2022, I was tasked with refreshing the design for two major content blocks on the recipe template. The goal was to improve design consistency and usability. I delivered two redesigned recipe content block, along with several accessibility improvements. Within the first 30 days of implementing the new design, we saw 68.87% increase in sessions for the usage of the print buttons, aligning with Dotdash Meredith's overarching goal to increase user engagement ✅

‍

The problem

UX Issues: CTA sizing not accessible enough, confusing naming of a key content block, and scattered user actions.‍
Visual Issues: Outdated design language on several content blocks and inconsistent design language.

Print button doesn't meet size for touch target accessibility requirement.
Jump to Recipe button doesn't meet size for touch target accessibility requirement; divider makes it look less interactable; name is confusing.
Outdated design; doesn't translate well in code.
Outdated design; lack of delineation from previous content.
Key user action scattered outside of recipe facts.

The Solution

Larger touch target for "Jump to Recipe" button to be more accessible and discoverable.
New name for "Why It Works", improving content comprehension.
A centralized content block for recipe metadata and user actions.
An additional print button to serve as secondary touch target.Consistent visual design.

Research Highlight

Validating design with A/B Testing

‍I conducted a click test to validate improvements from the design updates. It was an A/B test consist of 50 desktop participants, and 50 mobile participants. Half of device group test on current design, the other half updated design. By measuring success rate, time spent on task, and ease of using score, I was pleased to find out:

User insight led to name change

I discovered issue around comprehension of the name "Why It Works". This led to a deep dive of unmoderated user interviews of 16 participants.
The proposed design (additional tag line under the original name) didn't show improvement in comprehension.
This insight prompted a name change to this section to help with user comprehension.

The name of the section got changed from "Why it Works" to "Why This Recipe Works".

Process Highlight

Take a step back and look at the whole picture

Before diving into design immediately, I like to take a step back and do a design audit for the entire page/template when time allows. In my quick audit, I was able to identify additional design issues and small areas to improve for better brand consistency. Some were bugs that I flagged to QA and got fixed right away, others involving web accessibility issues and expanding the scope of the project require a conversation with the PM.

Make a case for UX improvements by tying it back to business objectives

I identified out-of-scope UX issues including naming convention of content block, touch target sizes, and user journey.
Worked with product manager to refine the scope of project.
Tied user needs to business objectives.

The imperfect design process that makes sense

Explore multiple design directions and review with supervisor and PM.
Review preferred option with stakeholders.
Quick iteration based on stakeholder feedback.

Outcome

Over 60% increase in using the Print button

One quantifiable success metrics was the usage of the print button after I added a secondary one in the Recipe Details block. By comparing 30-day data before and after the new design was implemented, we saw over 60% increase in total usage, sessions, and users.

I appreciate the improved navigability of the page, it’s definitely more cohesive and seems easier to parse at a glance.— Senior Culinary Director @ Serious Eats

Learning

Dealing with unhelpful design feedback

“I don’t like it” is a common and frustrating feedback designers often get. During a very important design review with non-design stakeholders, I received a more frustrating feedback: someone didn’t like the design but was too nice to say it. They decided to talk around and provided feedback that didn’t make sense.

After talking to my peers and mentors who have been through this dilemma, I have added a few more “tricks” to my design tool belt:

Share work early and provide transparency. Avoid a big reveal.
Speak the language of stakeholders.
It’s okay to walk away and come back another time.

Design can hurt, but designers can help

In a usability testing, a question was “What are the least valuable part of the recipe template to you?” A participant picked nutrition facts and left a message that made me think a lot.

As someone who’s struggled with eating disorders for many years, seeing calorie content (on nutrition label) makes me not want to eat. — A participant

This quote got me think about how design can hurt users unintentionally. I brainstormed ways of how I can help improve the nutrition facts section and make it less about scary numbers, but about health benefits.