Simplifying Buffer's multi-product setup flow

Helping customers connect and manage business integrations for use across publishing, analytics, and engagement tools.

Illustration of the shared channels experience in Buffer
Problem

Multiple setup flows and compounding friction

Buffer is a suite of products that help small businesses manage their social media accounts. Originally just a publishing experience, it grew into three distinct applications: publishing, analytics, and engagement. Each product was spun up with its own team and code base — and its own subscription plan and setup flow.
Buffer's three product logos
This worked well until it didn't — until we recognized that we were shipping our team structure to customers and causing confusion. We wanted customers to use all of our products, but we weren't making it easy to do so. We needed to simplify by unifying the applications into one product experience: one plan and setup flow utilizing shared business assets. In order to use Buffer, customers must connect a social account (aka: a "channel"), so we decided to start there. This project was Step 1 to fully realizing our longer term product strategy — one Buffer.

Key Problems

Screenshot of legacy UI in Publish
Screenshot of legacy UI for connecting channels in Publish.
Screenshot of channel connection UI in Analyze
Screenshot of channel connection UI in Analyze.
Not only were we hearing directly from customers that this was a problem, but we could see it in our data, too: a significant drop off between customers who sign up and start connecting a channel, and customers who successfully finish and continue on to schedule a post.
Conversion funnel data visualization
We were losing customers to a poor setup experience.
Research

The devil's in the details

The research phase for this project was significant — I spent time looking at customer complaints and speaking with our Customer Advocacy team, meticulously documenting our existing experiences, and looking at how other products solve this problem.
Additionally, I needed to understand the constraints from each of the social networks we were integrating with, as each has unique rules about how customers using third-party apps can connect their accounts. This meant that each connection flow needed to be tailored to the channel type, and there were an unusual number of potential limbo or error states customers could find themselves in if we didn't appropriately guide them through. How might we reduce cognitive overhead and make the complex feel simple?
Table of requirements for different channels
Each social network has its own constraints and requirements, so each connection flow needs to be tailored to the channel type.
I also partnered with our stellar Data team to understand more about our users' behaviors — which channel types are most common? How many channels do customers currently add? What's the connection success rate? These questions would inform design decisions but also set us up for measuring impact post-launch.
Data visualization on most common channel types
Looking at the most common channels our customers connect.
Table detailing the number of channels connected to an organization in Buffer
Looking at how many channels our customers have connected informs design for the Channels page.
Design

Don't make me think, but...maybe hold my hand a little

The connection experience was moved out of individual product settings and into a centralized location for managing accounts, billing, and other organizational settings.
Mockup of channel connection screen
Screen for choosing a new channel to connect.
Reduce cognitive load and guide users through the experience. First, simply ask which network they'd like to connect. Then, if necessary, ask more granular questions like, Facebook Page or Group? Let them know when we're sending them away from Buffer to authenticate, and why that's important (security!).
Mockup of second step in connection flow for Facebook
Once a user selects Facebook, ask which type of account they want.
Mockup of modal telling users we're taking them away from Buffer
Give users a heads' up when leaving the app, and explain why.
Mockup of screen to select Facebook Pages
After authenticating with Facebook, users can select one or many Facebook Pages to connect.
Help users understand the status of their connections. The authentication tokens generated from social networks when a channel is connected don't last indefinitely — they'll periodically need refreshing, which breaks users' workflows. Reinforce when the connection is good, and make it clear when it needs attention. In a future iteration, we'll use data to nudge customers to attend to the connection before it expires.
Mockup of channels list screen
Connected channels display in a list view to visually differentiate from the Connect screen, which uses a tiled layout.
Results

Metrics, baby

After launching the new shared channels experience, we saw a 30% increase to channels successfully connected. More successful connections = happier, more productive customers. Additionally, ticket volume for our Customer Advocates has decreased by at least 10%.
Data visualization of channel connection percentage
The percentage of customers successfully connecting a channel went up.
Another positive signal is that the time to connect a channel went down from 2.13m on average last year to 1.48m. Faster connection = faster time-to-value for customers.
Data visualization of time to connect a channel
The time it took for customers to connect a channel went down.
Lastly, but perhaps most importantly, this project paved the way for us to execute on our new product strategy — a one Buffer experience where customers have one plan, one bill, and get access to all of our products.
Read Next
Onboarding new writers at Talent Inc. →