fbpx

Sign-Up Flows: A Friction-Based Analysis (with Examples)

Signup flows

Friction is “the psychological resistance that your visitors experience when trying to complete an action.” It’s also a conversion killer.

You can optimize your value proposition or call to action buttons all you want, but if your sign-up flow contains too much friction, you’re leaving money on the table.

Eliminating friction is one of the most effective ways of increasing conversions. However, it’s difficult to identify sources of friction in your sign-up process if you’re just guessing.

Friction can occur anywhere on a site, but we’ll take a specific look at the sign-up flow, where much of it occurs.

What is a sign-up flow?

A sign-up flow is one key step in the user experience journey, where a new user first interacts with your product or brand. In this step, users sign up and create and account on your website or app.

Friction and the sign-up flow

Friction measures how much effort the user has to exert to sign up. Though difficult to quantify because of variance and subjectivity, it can be measured using three factors (via Totango):

  1. Steps to completion. The number of steps or the series of pages that the user is expected to pass through.
  2. Information cost. The number of fields that a user has to fill up.
  3. Effort investment. The number of decisions the user must make, and the number of additional activities required (e.g., email confirmation, CAPTCHA, etc.)

There are a few ways to design a sign-up flow, and there are pros and cons to each. The goal, usually, is to reduce friction while maximizing revenue and users.

3 common sign-up flows examples (and how they handle friction)

Though there are many ways to design user onboarding flows, they usually boil down to the following three. Each has pros and cons, and, of course, it’s contextual to your product and audience. Anyway, here are the three most common user flows, with examples and critiques.

1. MailChimp: App Access after a series of tasks

Sign up (Email ID + Password) → Account Setup → Email Confirmation → App

Example: MailChimp

example of mailchimp sign-up flow.

This is probably the most common sign-up flow. It makes users give all their information up front. Only after that information exchange do they get access to the software.

What’s good about this flow?

For starters, users are familiar with this process. Human brains have pre-defined mental models of how things work. When we see a sign-up flow that coheres with that model, very little additional input is needed for recognition. Therefore, we feel comfortable with it right away.

Another major advantage of this type of sign-up flow is that it helps you keep spammers away from your app.

Looking at MailChimp’s sign-up process, the first page is where you have to add your email, username, and password:

first page of mailchimp sign-up process.

Then, you have to verify everything before even seeing the app:

confirmation following mailchimp signup.

There’s lots of friction early on, but you’ve got all the customer’s info, and the sign-up flow is commonly used and, therefore, familiar.

What could go wrong here?

Asking your users for a lot of information before they’ve seen your app could backfire. Marketers tend to get greedy with information; the more info you require, the more friction you introduce.

If you’re asking for more information up front, make sure to justify each action to eliminate friction. Here’s how Samuel Hulick from UserOnboard put it:

sam

Samuel Hulick:

“When a user signs up, their attention is so precious. You can think of it like air leaking out of a space suit – you want to make as much use of it as you possibly can while it’s still around. This goes beyond just removing friction – it means taking clear and meaningful actions that will motivate the user throughout the initial workflow.

For example, if you wanted somebody to make a pizza, you wouldn’t want to first say, “let’s start kneading dough and simmering sauce and…”

You would want to say, “let’s make a pizza, and we’re going to start by kneading dough and simmering sauce.” When you frame these two activities around the end goal, it helps the user understand why they’re important and builds motivation to complete them.”

To sum it up, if you’re making access to the app the last thing that users experience, make sure they know why they have to finish each task.

Slack clearly explains (using microcopy) why entering a Team Name helps the user at a later stage, leaving no space for uncertainty:

use of microcopy in a sign-up flow to explain why information is required.

2. Chargebee: Account setup after app access

Sign up (Email ID) → App → Email Confirmation → Account Setup

Example: Chargebee

diagram of chargebee sign-up flow.

As you can see, the user is taken to the app as soon as they type in their email address, after which they’re asked to verify their email address and to claim their account by furnishing other details.

What’s good about this flow?

This one eliminates a lot of friction by delaying certain required information, like the password.

Coming up with a good, secure password can be daunting. Removing the password requirement (as well as email verification) early on is easier on the user, and you still get their email address for retargeting.

Samuel Hulick was asked where onboarding friction is most common in SaaS companies. Email confirmation, he explained, was a big one:

sam

Samuel Hulick:

“Email confirmation definitely stands out. I have yet to come across a great reason to take all the momentum a new sign-up is bringing to the experience and tell them to go into the distraction nightmare of their inbox instead of progressing further into the product.”

The logic is simple: Once a user likes your product, they’re more likely to take the effort to confirm their email address and set up their account.

Chargebee‘s sign-up flow follows this framework. On the initial sign-up form, we ask only for the user’s email address…

email-only sign-up flow on chargebee website.

…after which they’re taken directly to the app.

screenshot showing direct access to an app after an email signup.

Only when they come back to the app for a second time and try to sign in do we nudge them to verify their email address and ask for a password, username, company name, and other information.

The result? Our sign-ups doubled almost immediately.

confirmation screen to complete sign-up flow on second visit.

By following this approach, you nail two things:

  • The entire flow is user-focused—people get to try the product before exerting extraneous effort to set up accounts.
  • A user who sets up a complete account is a serious evaluator. You can easily segment them from casual signups, streamlining your marketing and sales efforts, and wasting less money on tire-kickers.

What could go wrong here?

One drawback: You won’t keep away the spammers and tire-kickers. But at the same time, customers want to explore your product, and verifying emails upfront is unnecessary friction for them to reach that goal.

Also, you’re not getting as much information from the user. Sometimes, if an act requires lots of upfront work, it results in commitment bias, which could mean higher quality leads.

But, usually, less information upfront is better for quality and quantity of users.

3. Typeform: Access app immediately

App → Sign up (Email + Password) → Email Confirmation → Account Setup

Example: Typeform

example of typeform's sign-up flow that provides direct access to the product.

This is the lazy or soft registration process—the user goes straight to the app, only after which are they prompted to sign up.

What’s good about this flow?

The major benefit of this sign-up flow is that there’s really no friction. There’s no (immediate) sign-up requirement.

Luke Wroblewski says that “sign-up forms must die.” Instead, he argues that “gradual engagement” (how he refers to lazy registration) is the ideal approach to onboard new customers.

Showcase your product, let your visitors get a first-hand experience, and ask for their information only after they advance to a specific stage of product usage.

Here are the best practices he recommends:

luke

Luke Wroblewski:
“When planning a customer’s initial experience for your web service, think about how you can avoid sign-up forms in favor of gradual engagement.

If you do opt for a gradual engagement solution, ensure that it gives potential customers an understanding of how they can use your service and why they should care.

If you choose to auto-generate accounts for potential customers, ensure there is a clear way for them to access their account. Chances are that people will either ignore or not see account creation emails, and may be uncertain if they have an account or not.

Avoid gradual engagement solutions that simply distribute the various input fields in a sign-up form across multiple pages. It’s a good possibility that this will reduce efficiency and not delight anyone.”

What could go wrong here?

Every coin has two sides, and this one is no different.

From the business’s point of view, you’re losing out on valuable user information (e.g., email address). You’re left in the dark, with no way to reach out to prospects. You’re relying on them to act on their own accord.

And, if you’re just starting out, connecting with your audience will be crucial. That’s the only way to receive real-time feedback and tweak/test your product iteratively.

There’s a customer-side drawback to this model as well. Harry Brignull set out to give this flow a try, and this was what he had to say about it (emphasis added):

harry

Harry Brignull:

“We designed (a) job-seeker website to use lazy registration (aka “passive registration” or “progressive sign up”), so people didn’t need to register before they applied for a job or set up email alerts.

This was so successful at boosting conversions that we decided to do the exact same thing with the recruiter job posting UI– this is the place where employers and recruiters post their job ad, categorise it in various ways and then pay.

We took it to usability testing, and it flunked with every single recruiter who tried it. Why? Because they didn’t like the idea of spending 15 minutes creating a job ad without the reassurance that it was definitely going to be saved somewhere safe. They far preferred the version of the app that required up-front registration.

It’s funny that for once, user research pointed towards the option that requires substantially less development work. It’s also another nice little piece of evidence showing that you can’t just blindly copy and paste design patterns from one context to another and expect the success to be magically transferred. Context is key.”

That brings us to the next question: Is friction always a villain?

Friction can be good for designing your sign-up flow

…provided that it’s “purpose-driven” friction—friction that’s intentionally incorporated into your sign-up flow. Usually, this is either to:

  • Increase the quality of your sign-ups;
  • Improve user engagement.

Take Pinterest. They deliberately add friction to the sign-up process by asking the user to follow a minimum of five interested topics:

example of friction that pinterest intentional introduces into its sign-up flow.

Then, they nudge users to install the Pinterest browser button before taking them to their page:

Screen Shot 2016-04-04 at 10.41.18 AM

The reason? An enhanced user experience and efficient activation of sign-ups.

We’ve taken a similar route at Chargebee. Once the user clicks the sign-up button, they’re asked to choose the industry (SaaS/services/ecommerce) to which they belong. Then, we ask for their email address. Finally, they’re taken to the app, which includes customized test data based on the selected industry.

Screen Shot 2016-04-04 at 1.45.53 PM

This little change in our sign-up flow boosted our trial-to-paid conversion rate from 8% to 15%.

Friction can also be used to qualify leads, especially if your B2B and sales calls cost money. Speero agency uses a qualifying question about budget size to eliminate tire kickers. Though fewer leads come through, the ones that do are worth it.

Screen Shot 2016-04-04 at 10.44.43 AM

Purpose-driven friction introduces productive friction upfront to avoid counterproductive friction at a later stage.

Conclusion

Each sign-up flow has pros and cons, and each works better in different contexts. Nothing is absolute in user experience or conversion optimization. Ask yourself:

  • What’s the purpose? What are you trying to accomplish with the sign-process, and how does each step help you do that? Info-gathering, lead quality, lead quantity, user experience—what are you trying to accomplish?
  • Who is your audience? Different people respond differently to privacy concerns, have different attentions spans, and value their time/security differently. Test it on your own audience.
  • What’s the product? How complicated is it? What problem does it solve? Mold the product to the target market, and make the user flow as seamless as possible.

It all comes down to bringing users to that “Wow!” Moment as soon as possible in the onboarding journey.

Remove unnecessary friction, ask only for essential information, and take your users to the “Wow!” Moment as fast as you can.

Working on something related to this? Post a comment in the CXL community!

Feature image source

Related Posts

Current article:

Sign-Up Flows: A Friction-Based Analysis (with Examples)

Categories