Introduction

Imagine working at Phyllo, a company that collects data from platforms like YouTube and shares it with businesses in real time. These businesses offer nifty services like creator tools and brand collaborations to creators. Sounds cool, right?

Phyllo’s data-sharing magic is powered by Phyllo Connect. This product lets creators and influencers control and share their data from various platforms they use, with their consent, of course!

The account connection through Phyllo Connect is a 3-step dance:

1. Creators choose the social platform from the list (YouTube, TikTok, etc.).
2. Creators log into their accounts.
3. Voilà! The account connection is successful, and Phyllo shares the creator’s data with the requesting company.

3 step account connection process on Phyllo connect

The Problem

But wait! After launching Phyllo Connect, we got swamped with support requests about connecting Instagram accounts. Clearly, users were struggling with the process. Data analysis revealed that the success rate for connecting Instagram accounts was significantly lower compared to other platforms, such as YouTube, Twitter, and TikTok.

Constraints

Our research and usability testing showed that the Instagram login flow and requirements could be quite a headache.

To successfully connect an Instagram account, users must:

• Have an Instagram Business or Creator account.
• Link their Instagram account to a Facebook Page.
• Log in through Facebook and select the linked Facebook page.
• Grant all requested permissions.

No wonder we saw so many drop-offs due to this complexity!

Objectives

We built our solution with two main objectives in mind:

1. Increase the connection success rate for Instagram users on their first login attempt.
2. Increase the connection success rate for Instagram users after a previous failed login attempt.

Role and Duration

As the sole product designer, I teamed up with a PM and six developers for a 3–4 week adventure in Jan-Feb 2022.

Outcome

Our solution hit the mark, achieving:

1. A 25% increase in Instagram connection success rate on the first login attempt.
2. A 50% increase in Instagram connection success rate for retry attempts after a previously failed login.
3. Nearly 95% decrease in support requests from customers.

Arriving at the Solution

We considered two approaches to solving the problem:

1. Simplify the login flow (via Facebook) by reducing constraints. However, this was a no-go, as the login is OAuth-based and controlled by Facebook, leaving us with no control over the login process.
2. Educate users about the login flow and requirements to help them navigate it smoothly.

We went full steam ahead with Approach 2, as it was the only feasible option.

Analyzing Competitor Strategies

Users of any social or creator-focused company with Instagram integration encounter similar constraints and challenges. We assessed how these companies tackled the issue:

1. Some platforms provide users with the necessary information to successfully connect an Instagram account before entering the Facebook login flow.
2. Other platforms let users go through the flow and display errors if the connection fails, prompting them to try again.
3. Some platforms adopt a combination of both approaches.
4. A few platforms offer no education whatsoever.

Measures taken by other creator-focused platforms

Insights and Decisions

While analyzing other applications, we identified three concerns:

1. Users often skim the title and hastily click on the CTA.
2. Requirements are grouped together, making them difficult to remember and act upon.
3. Users are informed of the requirements, but not how to achieve them.

I tackled these concerns head-on and made design choices to address them effectively in our solution.

I believed that the designs should prepare users before attempting to log in and assist them after a failed attempt.

This gave birth to pre-login and post-login experiences, serving our objectives of raising first-time login success rates and the success rate after a previous failed login attempt.

Pre-post login experiences

After considering several ideas and receiving internal feedback on designs and flows, we finalized the following designs.

The Solution

Designs

We created two pre-login education screens to address different aspects of the login process:

First Education Screen:
This screen engaged users with yes-or-no questions about the requirements. Like, do they have Instagram Creator or Instagram Business account. Users could only proceed to the next screen if they satisfied the requirements. It made sure users actually read the requirements and informed them that the connection would happen via Facebook.

We also added links to a comprehensive help guide for users who needed additional support.

First Education screen — Pre-login experience

The Help Guide:
As part of our solution, we designed a help guide as a hosted microsite, filled with answers to relevant questions about Instagram login requirements. Answers provided step-by-step instructions and informative videos, empowering users with knowledge before attempting to connect their accounts.

If users encountered any issues, the help guide URL could be easily shared with them, offering an extra layer of support.

Help guide for Instagram — help.getphyllo.com

Second Education Screen:
This screen presented points to remember while logging in via Facebook and offered a glimpse of the login process through a GIF. Clicking the CTA on this screen led users to Facebook’s login flow, where the education would help them successfully connect their accounts.

Second Education screen — Pre-login experience

Error Information screen:
If users failed to connect their Instagram accounts, they’d return to Phyllo Connect and see the Error Information screen. This screen listed all possible issues encountered while logging in and provided a link to the incredible help guide mentioned earlier. From here, users could retry connecting their accounts or choose to connect to a different account.

The complete experience of connecting an Instagram account using Phyllo.

The complete experience of connecting an Instagram account using Phyllo.

Results

Within a month of releasing the improved designs for the Instagram login flow, we saw significant results:

• Pre-login education and our comprehensive help guides assisted users in account connection, increasing the first login success rate by 25% across our customers.
• The post-login error information screen boosted the connection success rate for retry attempts by 50%.
• Overall, the solution helped reduce support requests from our customers by 95%.

Learnings and Next Steps

We successfully achieved the project’s objectives, learning the importance of user education and gaining insights into user onboarding along the way. I created a Best Practices guide for our customers so they could effectively onboard and educate creators on their end.

With ongoing feedback and insights on the login process, our dedication to enhancing the experience never wavered. At the time of writing, we were in the process of updating the Instagram login flow, hoping for similar or even better results.