About Experience Projects

BuzzFeed Homepage Redesign: Phase I

Towards the end of 2016, my team started exploring the future of the BuzzFeed landing pages (or the buzz “feeds”, if you’re feeling cheeky). The homepage had changed very little over the last half-a-decade, and was no longer able to fit the needs of the changing media landscape. Even so, the page was still a staple of the BuzzFeed brand, with it's quirky clutter and abrupt approach to content. We knew reimagining it would be a huge effort across the entire organization. The homepage touched every team, from video, to editorial, to advertising, and tech.

While working to define the goals of the project, a recurring theme kept coming up: flexibility. We wanted the new homepage to be flexible in the sense that it should work in many different contexts (as a homepage feed, as a feed that lives underneath articles, and as a feed that could work for specific categories (e.g. BuzzFeed quizzes). We also wanted to be able to change the technology powering the feed without relying on a design change.

Additionally, the experience should be flexible in the sense that it should scale, literally, to any breakpoint without compromising the experience. Flexibility meant a lot of things to us at the time, and felt appropriate to pin down as one of the core components of this redesign.

Legacy BuzzFeed Homepage on Desktop & Mobile

Phases of the project

We set out to figure out what the future of the homepage could look like, and how we would get there.

Because of the size and potential scope of this project, it was important that we were deliberate and intentional when phasing the different parts of the process. We set out to follow a process cycle that would allow for the right amount of definition, exploration, and reflection: Define → Explore → Refine → Build → Learn

Defining the Problem

Weaknesses with the Current Homepage Feed

  • Content in the feed was surfaced via human curation and reverse-chronology, which limited our ability to experiment with more algorithmic and dynamic ways of serving content to the page. This was due to the fact that the homepage and core landing page feeds (such as Buzzfeed.com/quizzes) had a 1:1 relationship with our CMS where content was getting published.
  • The page wasn’t responsive, which meant we were building and designing for two entirely different experiences. This slowed down our teams’ workflow and put tablet-size experiences on the backburner.
  • We were limited to serving only static image previews & text to the page, rather than integrating mixed media (such as videos and gifs).

Strengths with the Current Homepage Feed

  • While not dynamic, the rev-chron flow of “buzz” content feels up-to-date and fresh.
  • Content density
  • Trending content performed well, and became a strong part of the BuzzFeed brand.

Main Goals of the New Webapp Feed:

  • A feed of content powered by smart & dynamic content algorithms
  • A modular & responsive layout that can easily reflect data learnings
  • Ability to integrate mixed media into the feed (such as gifs)
  • Balancing content density with a clearly communicated hierarchy
  • Goals that followed shortly after we began exploring:
    • The ability to bundle groups of content, both topical (David Bowie’s Death) and categorical (BuzzFeed Animals)
    • Ability to surface hand-curated content at the top of the feed, primarily news.
    • Portray breaking news when necessary

A side note about the desktop & mobile platforms:

Ideally, we knew we were setting out to create a seamlessly responsive experience (something the old homepage did not support). The said, we weren’t primarily focused on the mobile homepage at the start of this project. Traffic to the homepage skewed towards desktop users, and the majority of BuzzFeed’s mobile web traffic (at the time) revolved around article views (users tapping through to articles from Facebook)

But I say this with a huge grain of salt! We didn’t want to dismiss a great mobile web experience. It was really about adapting the homepage feed in context. For example: how could we surface an algorithmic feed underneath a mobile article, so that when a user is done reading they’ll continue to engage with our content? At the same time, creating a responsive page tailored itself to making sure the experience felt good across all breakpoints.

Exploring the Problem

I began exploring some high level concepts, playing with layout and hierarchy. I collaborated with our Product Manager and another Product Designer from the native apps team to whiteboard out a few quick and dirty flows from the start.

Questions & Thoughts

How can we make the page useful & memorable for folks, so that they want to return?

How can we ensure that our users will find what they’re looking for? How does unexpected discovery play into this?

How can we take the most advantage of the innovative formats our editors create? What about unknown formats that haven’t been discovered yet?

Are we able to incorporate ever-changing media needs to fit this landscape?

What’s the right news/entertainment balance? What kind of content will perform well? How can we easily test this?

Early Sketches

Low Touch Experiments and Current Engagement

While exploring possibilities for the homepage, we shipped a few low-touch experiments on the legacy page. This allowed us to get a baseline idea of what users were looking for and start to validate our hunches. One of these tests incorporated inline youtube video embeds in the main left-column feed. We also pulled numbers to see what was working and where there were opportunities for improvement. Based on what we were seeing, the large top story unit and trending stories seemed to win out over the other types of content on the page.

Testing inline video in the feed

We also tested inline (or "in feed") video on video-specific BuzzFeed pages, such as the Try Guys and Broke. We were able to see an uptick in session length and video engagement, which was helpful to validate our in-feed video claims earlier rather than later.

Low Fidelity Mocks

Bundling Content

There was a strong need at this stage for showcasing bundled content (a grouping of related content) vs a feed of “standalone” (or unbundled) content being served by our algorithms. The technology to spin up bundles needed to be flexible. A bundle of content could be topical, such as “Thanksgiving Hacks”, or more permanent, like BuzzFeed Quizzes. We wanted to keep in mind the context which these content bundles were appearing. It should fit easily within a feed, without relying on a surrounding static page layout to work.

Introducing Cards and a 2-Column Desktop Approach

We also started playing around with the idea of using a card pattern to bundle content. For the mobile exploration, I tried using a card for each module in the feed. Cards fit pretty well ideologically within the “flexibility” theme. A card approach to the content would allow for an easily manipulated, modular feed that could easily mold to different breakpoints.

After playing around with different modular desktop layouts, it also became clear that a 2-column approach to a desktop layout could work to our advantage. It would allow us to focus on a primary or “main” feed that would easily mirror the mobile design. It would also allow us to use the right or “side” column for bundled content.

Making It Responsive

After pushing the 2-column approach further, I started to expore how the page would scale down. We wanted a great experience regardless of your viewport or device. Although the left column was considered the primary content, we didn't want to lose the secondary content on mobile and compromise the experience. We decided to fold those units into the main rail on mobile. For certain experiences, like the trending module – the mobile experience would become a horizontal scrolling carousel on mobile.

Transitioning to other pages from the homepage

We spent a bit of time exploring the ecosystem of feed pages and how our users would transition from the homepage to other feeds, etc.

An overview of some flows between the homepage and other category pages. We ran with the idea that a content package on the homepage could drive directly to its' respective category page.

I played with a few animations to test out ideas, going along with a “single page app” idea where browsing to a new category wouldn't cause a page reload. I wanted to push the animation boundaries, but it was important to keep in mind that any transition should be helpful and/or non-intrusive – never distracting.

Quick and dirty prototypes to demonstrate desktop transitions

Refining The Design

When refining the page, we pushed the 2-column layout that allowed for a primary column and secondary column. This approach felt versatile to desktop and mobile and would allow for much more flexibility than we currently had. This primary column would utilize the new feed algorithm, and the secondary column would support more permanent or manually curated units (such as news content).

Scoping Down

After a few rounds of exploration, we decided to table content packages until after the MVP launch. We didn't have the technology to support grouping specific pieces of content together and manually injecting those groups into our algorithmic feed. In lieu of that, we decided that the top 3-4 cards in the feed would be manually curated by editors, and would likely be news content.

We also pushed back on the idea of transitioning to other feeds (such as buzzfeed.com/videos) at the time. We weren't comfortable migrating our other feed pages to this design at the same time we launched the homepage, and decided to tackle those interactions when we got there.

Talking to Users

We did a couple rounds of user testing with a prototype that reflected the current state of the desktop page. The majority of the people who came in were web and mobile web BuzzFeed users. We were mainly hoping to get an understanding of how people felt when engaging with current homepage versus the new homepage. We asked them to verbally evaluate which pieces of the site stood out throughout the process. We kept it fairly open-ended, and weren't planning on overhauling the entire page at this stage. However, we were interested in smoke-testing and making sure we weren't missing something vital or hurting expectations.

Video came up throughout the sessions, people really enjoyed seeing inline videos directly in the feed. Many mentioned seeking videos out when visiting the existing homepage. The users really seemed to enjoy being able to easily find trending content, on both the old and new page.

An HTML prototype built for user testing

Many people were vocal about the yellow circular "badges" in the navigation, and also preferred having them directly in the feed (which we removed in the new experience). The "thumbstrip" at the top of the old homepage was percieved as trending content, even though it technically wasn't. Regardless, many people also preferred that in the old experience. The old homepage experience was generally regarded as cluttered or hard to easily scan.

It was noted that having a cleaner navigation felt easier to parse. Many mentioned that it was inviting to scroll and easily scannable, due to a cleaner page. A few people mentioned the trending content being too far down on the page. We took note of the major pieces mentioned, and have moved a few projects up the pipeline to answer those needs.

The thumbstrip on the legacy BuzzFeed homepage

The new thumbstrip, built using Solid by the homepage team in Fall of 2016

Building

We began building the first a/b test of the page to our US audience. To start, I built a few mid & high fidelity prototypes using a GitHub pages repository. This allowed us to share a URL out to stakeholders that we could consistently update without cluttering the BuzzFeed webapp.

Breaking news from the election on one of the first homepage tests

It also helped us to understand which pieces of the page could be componentized, and which things we could style using Solid.

Having interactive prototypes at this stage was really helpful. Not only were the prototypes quick and easy to share, but because of the prototypical environment they lived in, we didn’t feel bad throwing away or changing components. It was a low barrier way to try out different versions of the page and get a real feel for what was working.

The homepage feed as it would appear without breaking content

Once the editorial and product stakeholders were happy with the state of the prototype, we built the first iteration of the homepage. I collaborated with the engineers on the team to architect the page. We were able to use Solid for the majority of the page, and custom styles where necessary.

Learnings

We shipped the first build of the new homepage as an a/b test to a small portion of our US audience in the spring of 2016. As I went on to work on a new web experience for BuzzFeed Tasty, my colleage Allison picked the project up as the designer on it moving forward.

Rethinking The BuzzFeed Hompepage: Phase II

As soon as there was statistical data back from the first test, the team started looping through the design process again: Learn → Define → Explore → Refine → Build → Learn

The current homepage after a few rounds of iteration

Implementing Other Pages Using the New Stack

After rolling out the homepage, we ported over other category pages to the new stack as well. Each page rolled out as an a/b test against it's respective legacy page before going to 100% exposure.

The team continued testing and adjusting the design accordingly until clear performance gains were significant. They took the learnings of each test and refined the UX as well as responding to new emerging needs for a stronger news presence on the page. The team also worked diligently to prioritize the page around BuzzFeed News in time for the 2016 Presidential Election. I’m so incredibly proud of everyone that touched this project. It was a highly collaborative effort amongst the tech and editorial teams at BuzzFeed.

Role

Product design & development

Team

Amir Shaikh (Product Manager), Patrick Carey (Engineer), Igor Demo (Engineer), Allison Chefec (Designer), Cap Watkins (VP, Design), Chris Johanesen (Product Manager)

See It Live Caret right
Arrow up

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