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 our more intent-driven shoppers. You can view the live site here.

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

Product Designer
Research Lead
02.2021 - 07.2021
2 Product Designers
1 Product Manager
9 Engineers

collaborated closely with Market Editorial, Affiliate Commerce Business, Brand Design, Content Systems, AdTech and the Core Apps Experience teams.
A mockup with Macbook screens showing how BuzzFeed Shopping redesigns look like

Context & Goals

Shopping content on BuzzFeed has proven successful in driving impulsive purchase at lower price points. With the redesign, we aimed to build an experience that supports shoppers with higher intent so that BuzzFeed Shopping meets our users in every step of their 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 social channels, 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 (

According to a previous retention analysis of our web vs apps users:
1. Apps user retain better (19.6% Week 0 to 1 Retention, compared to 8.7% on web).
2. Apps users are more loyal (48% returning users, compared to 17% on web)
3. Apps users are more intentional with their purchase, compared to web users who tend to be more exploratory. Though roughly 1/10 of our web user base, apps users generate a revenue of 40% of that of web revenue.


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.

BuzzFeed Shopping before redesign
BuzzFeed Shopping after redesign

In H2 of 2021, I worked closely with my Android and iOS engineers to adapt the web experience to our apps to achieve cross-platform feature parity:

iOS screen designs
Android screen designs

Business Impact


Click-through probability for navigation unit


Mobile click-through probability


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 even more potential partners, and as of May 2022 we've landed two sponsorship deals (Wayfair and Target).


We held kickoff meetings within our team and with our stakeholders to define the first version of the experience, including having extensive asynchronous conversations around prioritization. We also set up weekly meetings to make sure we stayed in sync with our key stakeholders.

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


I led every part of our user research: planning studies, 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.

A screenshot showing the outcomes from "Buy a Feature" from the co-creation session with a user

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 immediate 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.

Information architecture diagram outlining page structure for the new BuzzFeed Shopping

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.

A diagram showing how the page configuration changes according to user interaction

I connected our SEO expert and editorial lead with our business stakeholders, so that everyone was on the same page for content creation and organization. Having a defined list of categories also helped jumpstart conversations with Content Systems, who owned the tagging functionality.

A new search experience

BuzzFeed already had a site search, but we needed a new search service that suits our use case - for example, the ability to return product results. This meant that there needed to be a clear connection 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 and supporting intent-driven shopping behaviors, we agreed that search should be an entry point to the experience. From pulling data around behaviors on other instances of search on BuzzFeed, I learned that 31% users utilize search and therefore advocated for keeping the search bar expanded across all screens.

I learned from our back-end engineers the capability and limitation of Elasticsearch, which powers our search service.

Key screens in the search experience

Sample of key search screens

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

Screen designs for edge cases in search

Navigation system design

From 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, lowering the friction of discovery; on desktop, we showcase the the breadth of content we cover, and users can be more specific 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.

Low fidelity explorations for mobile navigation

Here are some key screens related to navigation:

Mobile: simpler navigation optimizes for content discovery.

Mobile navigation screen flow

Desktop: full menu enables users to drill down to a specific page.

Screen showing full navigation menu on desktop

Desktop: sub-menus give users a preview of other categories.

Screen showing navigation menus on category pages

Desktop: on-page sub-categories allow users to further filter the content.

Screen showing sub-category buttons on pages

Responsive design across breakpoints

Knowing the majority of our web users come from mobile devices, I took a mobile-first approach for every part of design 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 we needed to create.

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

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

Compilation of components that build up feed pages on BuzzFeed Shopping

I also 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 are disruptive. Since ad density and placements could have impact on 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 to only keeping the highest-performing ad unit, for a more premium experience.

Here are a few rounds of explorations I did - page layout, feed card designs, and color applications.

Low fidelity explorations for page layout

BuzzFeed Shopping Rebrand

Within the Shopping vertical redesign, we had an opportunity to be part of the brand refresh. 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 timely 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:

BuzzFeed Shopping brand design explorations

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:

Document showing iconography design requirements and screenshots of final icons we received

BuzzFeed Shopping design system

I collaborated with my design partner on a design system for this redesign (which we're slowly building to be a UI kit). 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:

Immersive Collections Experience

collection headers visual design explorationscollection headers visual design explorations


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 breaking down my work, and that I can flex the design process and direct my energy 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.

-> Scoping: collaborated with PM, EM as well as front-end and back-end engineers to scope out requirements for both features and our search API
Research: planned research, wrote scripts, coordinated user recruitment with various teams, led activities and synthesized learnings.