BuzzFeed Shopping Redesign

Driving innovation in the affiliate commerce content space by fostering intent-driven shopping behavior.

We redesigned the Shopping vertical on BuzzFeed to provide an environment that supports shoppers who spend more time making their purchasing decision. You can view the live site here.

After launching the web experience at the end of July 2021, I led the apps squad in adapting this new experience to our iOS and Android mobile apps in a series of small feature releases.

Role
Product Designer
Research Lead
Timeline
03.2021 - 12.2021
Team
2 Product Designers
2 Product Managers
9 Engineers

collaborated closely with Market Editorial, Affiliate Commerce Business, Brand Design, Content Systems, AdTech and the Core Apps Experience teams.

Context & Goals

Shopping content on BuzzFeed has proven successful in driving impulsive purchase of products at lower price points. With the redesign, we aimed to build an experience that supports shoppers with higher intent so that, with time, BuzzFeed Shopping is recognized as an important stop in one's shopping journey.

2020 was a successful year for BuzzFeed's Commerce business. As we headed into 2021 with a more ambitious revenue goal, we recognized the risks tied to lower site traffic and increasing competition in the Commerce space.

Our shopping content does a great job in driving serendipitous shopping behavior, but many of our shopping users discover the content via a social channel, and they come and go. In order to meet our shoppers where they are in their shopping journey, serve more utility, and drive revenue, we set out to revamp the BuzzFeed Shopping vertical (buzzfeed.com/shopping).

Solution

The redesigned BuzzFeed Shopping vertical features:

I was knee deep with every piece of this project, collaborating closely with my cross-functional team, internal editorial and business stakeholders, various tech teams, product analytics, brand designers, our SEO expert, and leading research with our shopping users.

Here is a snapshot of how the redesign compares to its predecessor. For the full experience, you can visit our live site.

In H2 of 2021, I worked closely with my Android and iOS engineers to adapt the web experience to our apps. Here are some key screens that marry the personality of the refreshed BuzzFeed Shopping brand and the native apps' design language. Here is a sample of the designs:

Business Impact

23%

Click-through probability for navigation unit

+15%

Mobile click-through probability

+82%

Overall pageviews

Besides driving engagement, the redesign is a new and enhanced foundation that we can continue to build upon and experiment with. Our SVP of Commerce also expressed that the new BuzzFeed Shopping experience has allowed our business team to reach more potential partners, and they are confident it will pay off in the long run.

Scoping

We held several kickoff meetings within our team and with our stakeholders to define the first version of the experience to ship, including having extensive conversations around prioritizing each of the proposed feature asynchronously via a spreadsheet that my design partner put together. We also set up weekly meetings to help our stakeholders and us stay in sync.

We organized engineers on our product team into a front-end and back-end focused squad for this project. I worked with both squads to scope out the requirements for our page features as well as our search API.

Research

I led every part of our user research: planning the study, writing scripts, crafting recruiting survey to make sure we talk to the right users, coordinating with relevant teams, running research activities and holding synthesizing sessions.

After aligning with our stakeholders on the business priorities, I ran a "Buy a Feature" activity with our user to understand the desirability and usefulness of each feature.

The research sessions validated many of our assumptions. In addition, we identified the following key opportunities where tech can make an impact:

1. Users usually visit BuzzFeed Shopping without a clear intent, and are inspired by our content.

2. Users frequently browse BuzzFeed Shopping on mobile devices, and they move to larger screens when they in a research mindset.

3. Users often use BuzzFeed Shopping's content to shop for others.

Based on these insights, we wanted to build in various entry points to encourage discovery, consider slightly different navigation systems for different devices, and surface more Gift Guide content on the homepage.

We also learned that users want to make sure they are getting good deals but agreed that there are experiments we can run on the editorial front, without large tech investment.

Key Design Contribution

Information Architecture

I designed the overall structure of the experience, and collaborated with various teams to iron out the requirements. Here is an Information Architecture diagram I put together to help visualize the connection between different pages and units when getting alignment from our stakeholders.

When working with my product team, I also put together a diagram for how I envisioned the page configuration to change based on user input. This was key to communication with my engineering counterpart in defining which services were needed where.

In terms of the specific content categories the new experience will cover, I connected our SEO expert and editorial lead with our business stakeholders, so that everyone was on the same page with what content needed to be created. Having a defined list of categories also helped jumpstart conversations with Content Systems, who owned the tagging functionality.

A new search experience

BuzzFeed at the time already had a site search, but we needed to build a new search service that suits our use case - for example, the ability to return product results. For me, this meant that I needed to create clear connections between the new search functionality and BuzzFeed Shopping so that users understand which search to interact with to get desired results.

Since the redesign is largely aimed at fostering intent-driven shopping behaviors, we agreed that search should be an entry point to the experience. From pulling data around search behaviors on instances of search on other verticals (e.g. Quiz Party), I learned that 31% users utilize search. This gave me the confidence to advocate for keeping the search bar expanded across all screens.

I connected with our back-end engineers to learn the capability and limitation of Elasticsearch, which powers our search service. This understanding helped me in scoping out the requirements for search.

Sample of key search screens

I also paired with my engineers to understand possible error states, specifically:

Navigation system design

From our user research, I learned that mobile users browse a lot, while a more "invested" user usually utilizes larger screens for more efficient information consumption when they are researching and considering their purchasing decisions. Therefore, I designed different navigation paths, catering to the habits and motivations for users on different devices: on mobile, the navigation helps users get to content quickly, to facilitate continuous discovery; on desktop, we show the full picture of the breadth of content we cover, and users can be more intentional with what type of content they want to engage with before heading to a page.

In the meantime, I started exploring different layouts for navigational elements on mobile. At this stage, I also referenced common E-commerce navigation patterns and solicited feedback from my fellow designers.

Due to our time constraint, we scoped the full navigation experience out of our initial launch. Our engineers are currently building it out, but here are the designs I delivered:

Mobile: simpler navigation optimizes for getting to content quickly.

Desktop: full menu enables users to be more intentional with where to navigate to.

Desktop: sub-menus with details give users a preview of more granular navigation categories.

Desktop: on-page sub-categories allow users to drill down to very specific category.

Responsive design across breakpoints

Knowing the majority of our web users come from mobile devices, I took a mobile-first approach for every design part I owned.

I also took time to define how the layout changes on the tablet breakpoints so that users can enjoy a coherent experience no matter which devices they are on.

Reusable components for feeds

Using the Information Architecture diagram as a guide, I identified the common feed sections shared across different pages and the components that can be used to construct those sections.

I took inspiration from existing instances of content cards (on BringMe and Gift Guide, and the feed treatment in our apps) to make sure the new components that I design fit well into BuzzFeed's ecosystem.

I established a pattern for product cards in previous projects and my design partner was able to repurpose them to fit our use case. I followed her work closely to provide design feedback when needed. Below is a sample of the card components we designed to build various feed pages.

Additionally, I designed feed pages. On-page advertisements drive programmatic revenue, but we also learned from market research and surveys that users feel that the ad units on web platform disrupts their reading flow. Since ad density and placements could have impact on the page layout, we brought our friends on AdTech and our business stakeholders together to discuss ad requirements. Eventually, we all aligned on reducing the ad density by only keeping the highest-performing ad unit, to achieve a more premium experience.

Below are my explorations at different rounds - page layout, feed card designs, and color applications.

BuzzFeed Shopping Rebrand

Within the Shopping vertical redesign, we had the chance to be part of the brand refresh process. We worked closely with representatives from Tech, Business, Editorial and Brand Design to bring a new brand identity for BuzzFeed Shopping to life.

We were operating on a rather short timeline, so we worked with Brand Design to define the list of assets that we deemed essential for the initial launch (in order of priority):

Apart from weekly touch-bases, we made sure we stayed close to the brand development process by sharing our progress on screen designs, applying the latest colors in each iteration to our wireframes, and giving feedback.

We tried many directions when developing the new color palette. Here is a sample of them that we didn't feel were quite working:

As we worked hard on developing the brand palette, I also put together the request for iconography, outlining their use cases, specs and my design visions. Here is a snapshot of our exchanges:

BuzzFeed Shopping design system

Having received the final brand assets, I collaborated with my design partner on a local design system for this redesign. We used Figma to create and consolidate our design components. I wrote guidelines for the use cases for each color in the new palette, and for the different states for interactive elements.

Once we cleaned up the list of components and styles, we published them as a library, so that other teams can develop consistent designs when they work on Commerce-adjacent projects.

Bring the new experience to apps

After the grand reveal of the redesign on web, I worked closely with my other PM and app engineers to plan out a series of small app releases to continuously roll out the new experience. My main contributions were:

Reflections

I learned a lot about cross-team collaboration (including with teams outside of Tech) - identifying dependencies and setting the right expectation would help us run large projects like this more smoothly. In terms of my design process, I also learned to be more intentional in planning out my work in smaller chunks, and that I can flex the design process and invest my time more strategically.

Looking back, I also recognized room for improvement in defining scope and sticking to it. While from a design perspective certain features that came halfway could yield experiential benefits, we should always make a conscious decision around scoping based on 1) whether it's essential to the core problem we're trying to solve and 2) whether we are confident that the additional value is worth the potential increase in investment and efforts.