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.
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 (buzzfeed.com/shopping).
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 to achieve cross-platform feature parity:
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.
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.
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.
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.
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. 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:
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.
Here are some key screens related to navigation:
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.
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.
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.
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:
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:
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.
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:
You can read more about how I designed for the Shopping experience on apps in this case study.
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.