BuzzFeed Shopping Relaunch

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

I led design for the relaunch of the BuzzFeed Shopping experience across our web, iOS and Android platforms to reach a wider shopping audience. View live site here.

Context & goals

In face of increasing competition in the commerce content space, we felt the need to innovate to stay ahead of the curve. With the relaunch, we aimed to support more diverse groups of shoppers and drive additional volume of revenue for the business.

Solution

The new BuzzFeed Shopping experience is one that is more intent-based, curated and fun.

Structured navigation systems driving discovery

The experience caters to shopper's behaviors on different devices: mobile optimizes for immersive browsing experience and quick access to content, while desktop features a multi-layer taxonomy for in-depth research.

Additionally, the new Shopping experience is powered by a search service that returns content and product results, with trending search queries to inspire discovery.

A fluid cross-device experience that sparks delight

I adapted the experience to our mobile apps and designed for native capabilities:

• Additional color palette for dark mode
• Layout grids that scale across breakpoints
• Dynamic theming (Android)

An elevated brand identity that attracts business partnerships

Working closely with our in-house Brand Design department, we developed a refreshed brand system that includes:

• New logo (stacked version and compact version for smaller navigation bar)
• New color palette (core palette + extended palette for special events)
• A set of iconography to accompany navigation menu and our Gift Guide section
• A suite of illustrations

Business Impact

Key design contributions

Help teams see the vision

I worked with various partners to ensure alignment throughout the process, from requirement scoping, to ideation, to rapid iterations in tandem with Brand Design. We kept teams inspired via workshops, data share-backs and prototypes.

Here's a diagram I put together to communicate to my engineering team on how page configuration should adapt based on user interactions.

Build the connective tissues

Collaborating with 7 other teams, I constantly thought about the right partners to involve at the right time. For example, I organized sync-ups between our SEO specialist and business stakeholders to align on content strategy, and subsequently looped in Content Systems to manage content categorization.

Consider the holistic journey

Through research, we learned that our shoppers frequently go between devices depending on where they're at in their journey. I considered how the visual elements adapt to different breakpoints (mobile & desktop web, mobile phone, tablet), and used data to inform my prioritization.

Sweat the details

I believe what we put in front of users speaks to who we are and it's important to hold ourselves to high standards and take care of the details. This manifests in a couple of ways - exploring different visual directions, running usability tests, fine-tuning brand palettes, etc.

Here're some of the tweaks I made with my engineer to make sure the dynamic theming behavior is predictable and meets accessibility requirements.

Lay a scalable foundation with documentation

I considered how we could evolve our components and also set ourselves up for future success. I identified shared components and developed a card system that took inspiration from existing instances.

I collaborated with my design partner on building a shared Figma library and I wrote guidelines to enable future Commerce-adjacent projects.