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.
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.
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.
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
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.
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:
The Tasty search experience really merits its own case study, but at a very high level:
Other Follow Ups
Product design & development
Daphne Grayson (Product Manager), Chris Kelley (Engineer), Dmitriy Zhdankin (Engineer), Cap Watkins (VP, Design), Jesse Shapins (Product)