BuzzFeed Shopping Apps

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

After the launch of 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 feature releases.

Role
Product Designer
Timeline
08.2021 - 12.2021
currently supporting design reviews
Team
1 Product Designer (me!)
1 Product Manager
3 App Engineers

collaborated closely with Brand Design, AdTech and the Core Apps Experience teams.
clay phone mockup with buzzfeed shopping screen designs

Context & Goals

With the launch of the new BuzzFeed Shopping experience on web, we saw encouraging signals, and we hypothesized greater success with our more loyal apps users. The goal of this project is to bring feature parity to apps, as a first step towards more dedicated investments on mobile platforms.

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 new BuzzFeed Shopping was introduced to support a more intent-driven shopping behavior, so it felt natural to adapt the experience to our iOS and Android apps.

Solution

For the apps experience, I worked with our iOS and Android engineers to translate the new BuzzFeed Shopping experience with considerations of native apps' capabilities and platform patterns.

Here are a few sample screens I handed off to engineering. Most of the experience have either been shipped or are currently in development.

iOS screen designs
Android screen designs

Business Impact

The majority of the features are still in development, but we saw encouraging signals in our initial data pull after releasing a few new units in the new BuzzFeed Shopping experience.

95%

Click-through probability for Shopping feed (iOS), up 4%

+15%

Total pageviews (iOS + Android)

Project Definition

We held weekly check-ins with the Core Apps Experience team (who oversees the holistic apps experience) so we're aligned on our goals. Through these, I also learned about the design considerations behind existing features.

I also worked closely with my product manager and lead engineer to define project timeline and the sequence in which we'll be shipping the features.

Key Design Contribution

Apps Navigation Refresh

I adapted the IA diagram I created for our web counterpart while thinking through apps navigation:

diagram showing information hierarchy between different screens in the buzzfeed shopping experience

We knew that we'd want to include our brand logo, a few categories and our new search, so I drew out a few concept to help my team visualize and align on the priority for showing these features.

sketch showing navigation design exploration
sketch showing navigation design exploration

Having decided on the layout, I explored a few visual representation of the navigation entry points and ultimately landed on a direction where we could maximize for exposure for the categories while being mindful of the screen real estate.

mid-fideility designs showing navigation explorations

I also tweaked the icon pack provided by our Brand Design team, adding a pop of brand color while making sure they look balanced and visually cohesive.

icon pack visual explorations

New Grid Layout for iPad

While I was on the project, I noticed that our iOS app has a max width in place which leaves the feed content with very wide margins. I did not see a strong reason for keeping this design, so I proposed a full-width layout which will work for an iPad both in portrait and landscape mode. The Apps Team was excited about this new direction and how it can set precedents for other verticals to follow.

iPad designs showing before and after

Dynamic Styling

Knowing the new Material Design language offers the capability for users to customize their UI via theming, I teased the idea of incorporating dynamic theming into our Android app to my engineer. After a research spike and some poking, he presented me with a proof of concept showing how the API we're plugging into can generate swatches on the fly.

We worked closely on tweaking the theming algorithm to make sure we're pulling in the right colors and that the color contrast passes accessibility standards.

3 iterations of how dynamic theming is applied to Android interfaces

Immersive Collections Experience

Collections are built to support tentpole events and attract sponsorships. Therefore, from a design perspective we'd like the experience to be splashier. Since we already launched the feature on web, I mainly worked on bringing in the immersive experience with visual tweaks. Here are a few directions I explored:

collection headers visual design explorationscollection headers visual design explorations

While my engineer continued to iterate on the palette algorithm, I also saw the opportunity for dynamic theming to be applied to Collections so my engineer wrote the code in a way that it could be reused in different areas in the app. This is currently under development.