About Experience Projects

BuzzFeed Tasty

Last Spring, the BuzzFeed team set out to create a home for Tasty, those bite-sized aerial food videos, on the BuzzFeed website.

Over the past couple of years, Tasty has become a core driving force behind BuzzFeed, with the majority of its content living and thriving on Facebook, Youtube, and Instagram.

Defining the Problem

Although Tasty videos were successful, none of that success really existed on the BuzzFeed site.

Users coming directly to the site and those coming through via Facebook weren't able to easily browse or discover Tasty videos on BuzzFeed's owned and operated platforms. This seemed like a missed opportunity, given the product's distributed success.

What did exist before we embarked on this journey was a turn-key BuzzFeed "user page" retrofitted to display Tasty content. This original Tasty page spewed out a reverse chronological list of video links as a desktop-only experience.

Screenshot of the original Tasty page, using BuzzFeed's user page template.

We knew BuzzFeed content that performed well on Facebook performed relatively well on BuzzFeed. Due to this knowledge and to Tasty's success on our distributed platforms, we made the hypothesis that there was value in creating a great discovery experience for Tasty on the site.

Goals

  • Improve the content discovery experience on buzzfeed.com/tasty
    • Replace the existing reverse-chronological feed with an algorithmic feed
    • Serve inline autoplaying videos directly in the feed
    • Allow in-feed video sharing
    • Create a valuable discovery and browsing experience, with search functionality as well as curated content opportunities
    • Implement a fully responsive end-to-end experience

Target Audience

  • Facebook & Instagram Tasty audience
  • Facebook & Instagram BuzzFeed audience
  • BuzzFeed site audience
  • People who discover recipes & recipe videos via web search engines

Exploring The Problem

Hierarchy & IA

The biggest question for the team at this point would be how we would organize the information. I started exploring with some different ways to present the content as we nailed down which aspects of the product would have the most valuable impact.

Desktop IA and hierarchical explorations

Low Fidelity Explorations

After playing with the IA a bit, we decided to push explorations that revolved around a top-of-the-page full-bleed image or "branding moment". We wanted to showcase the Tasty product and brand in a way that would pull in both advertisers and consumers. If successful, we'd allow advertisers to sponsor the page, just as an advertiser would sponsor BuzzFeed content (for example: BuzzFeed Tasty, sponsored by Weber Grills). Because this was a new objective, we approached the sponsorship idea as a long-term goal.

Aside from this top branding/hero spot, we wanted to make sure the Tasty feed consisted of singular pieces of content (videos and posts) as well as packaged content (2 or more videos together). The singular content would solve for algorithmically-served inline videos, and the packaged content would allow for manually curated content in the discovery flow

Low fidelity sketches

Low fidelity wireframes

Diving Deeper with Content Packages and Playlists

Towards the beginning of the project, we focused heavily on what we were calling “content packages”. Content packages were just groupings of Tasty content that revolved around a specific theme. This could include things like “Tasty Junior” for kids, or “Proper Tasty”, which took a British spin on Tasty recipes.

Content packages & playlist mocks

After a few critical discussions, we made the decision to put off video playlists and packages in the feed until we had more information around what kind of content would do best, and bandwidth to create the tools to generate these packages.

Putting Search and Discovery at the Forefront

It became apparent from the team as well as the stakeholders (including the content creators themselves), that search and discovery would be most important to the narrative. It would allow us to experiment with curation in a way that we weren’t already able to do on Facebook, thus offering value that our distributed pages couldn’t. By putting search and discovery at the forefront of the experience, we would also be able to learn what people were more interested in.

Refining

Taking a closer look at the goals

We revisited the problem we were trying to solve. It was clear that giving our users a curated experience for Tasty content meant two things: focusing on search & discovery.

Because we weren't rolling out content packages as part of the MVP, we aimed for a more streamlined approach: curated content feeds. The curated feeds would still revolve around specific themes, but wouldn't tie us up in determining how to tightly package and serve those feeds on the Tasty homepage.

It made sense to tie this idea to search, since both pieces of UI contributed to the discovery experience

Tabling search for the MVP

At this stage, we decided to scope the project down for the initial launch. It became apparent that implementing Tasty search functionality would push back the launch date for Tasty quite a bit. While we knew launching without search would be a compromise, we’d still be launching a responsive page with inline videos and curated content experiences – which were vast improvements to the existing experience.

After a few rounds of exploration, we decided to reuse existing Tasty illustrations from the brand's Facebook page. It felt important to us to carry over the brand from social media, where its presence had already been introduced. We also workshopped different lines of copy to lead into the unit. After a few brainstorm sessions and one guerilla user-testing round, "What are you in the mood for" felt the strongest. It carried the friendliness of the Tasty brand, while still getting across the unit's browsing intent.

Tasty filters, or category feeds

I pushed the page's branding further and worked to tweak the modules surrounding the core feed, as well as the native video player. However, we ultimately decided to remove the full-bleed hero image. It wasn’t doing much for the experience other than reinforcing where you were, and we were confident that we could achieve that in a more streamlined way. Through user surveys we uncovered that the Tasty brand was recognizable via the content style alone, and coupled with smaller branding moments it felt sufficient. It was more important that the user be able to dive directly into the content.

Selecting and deselecting categories

We did a couple rounds of user testing to nail down the category (or filter) bar's select and deselect functionality before building the first iteration in production. We were looking to learn how obvious it was into dive into a category, as well as jump to other categories, and get back to the main Tasty feed. We recruited people who were familiar with already familiar with Tasty, and were either from our Facebook or BuzzFeed web audience.

Tasty filters, or category feeds

Here are a few of those prototype click-throughs in Marvel:

To our surprise, most of the users found it intuitive to select a category by tapping it’s tile, and deselect it by tapping again. One thing that came from the testing session was that many defaulted to tapping on the main navigation when unsure how to do something. It’s a fail-safe way to get back to home.

Keying off modules from the new homepage, we implemented a “Trending on Tasty” module that showed our top performing videos from Facebook. We also incorporated a newsletter to improve retention and Facebook “like” card to target users who may not have come via the Facebook page.

The native video player, article cards, and social widgets

🚢Shipping It

I began building the front-end as the squad's engineer worked diligently to incorporate new data endpoints and hook the new feed algorithms into Tasty’s core feed.

Working with Solid in an entirely new stack (using a Mono repo in Rig!) made UI engineering pretty seamless. We launched a responsive page in June of 2016.

Learnings

We looked at both quantitative and qualitative data after about 4-5 weeks. We hypothesized that some of the traffic in the early weeks could be due to PR and marketing surrounding launch, and didn't use those early numbers when synthesizing the data.

A few high level learnings:

  • Cut down our CSS by almost 2/3
  • Cut down on the page load time
  • Our new article cards got higher CTR, when looking at a 1:1 relationship with the old page.
    • However, CTR overall was lowered due to inline videos (users watching videos in the feed instead of tapping to an article.
  • Users sought out search functionality.
    • Though we anticipated the feature request, hearing directly from users helped prioritize search faster than we anticipated

Follow Ups

Tasty Search

The Tasty search experience really merits its own case study, but at a very high level:

  • Did a round of explorations to uncover different directions
    • The biggest challenge was making it clear that a user could not search within a filter, or vice versa.
  • Ran two user testing sessions
    • Uncovered that hiding search behind an icon was confusing and less inviting that surfacing it at the forefront
  • Refined down to one solution to ship and test with
  • Decided to scope down and build a lightweight front-end search (basically searching against a JSON of Tasty videos) as an MVP.
    • We did this to gain more confidence and validate the claims that search would have impactful gains, before embarking on more involved tech.

Other Follow Ups

  • Launched a text-only filter bar a/b test
  • A/b tested autoplay VS click-to-play videos in the feed
  • Launched a related videos module underneath the native video player, which appears after 75% video completion

Role

Product design & development

Team

Daphne Grayson (Product Manager), Chris Kelley (Engineer), Dmitriy Zhdankin (Engineer), Cap Watkins (VP, Design), Jesse Shapins (Product)

Arrow up

Want to get in touch? Feel free to reach out ↠ brick.emily@gmail.com.