This blog post was originally published on Outseta's blog here Using UX Changes To Unlock Growth

Geoff here from Outseta. We just finished the "no-codification" of Outseta—taking a product that was initially designed for developers, and rebuilding it so it's as easy as humanly possible for no-code founders to use.

This process included launching a "visual builder" for our sign-up and login forms and also restructuring the process for how you integrate Outseta with your website. These changes have been live for about two weeks now, but have already dramatically altered our growth. This is an inside look at how we changed our trajectory by improving the onboarding process to better serve no-code founders.I was fortunate to have the importance of user experience drilled into my head early in my career as a marketer. I’m a firm believer that a solid grasp of user experience (UX) is far more important to marketers than any quantitative, technical, or channel specific skill set.

Why?

Because improving the user experience around how you sign up or onboard new customers improves the performance of all of your marketing channels.  I see so many marketers wasting their time looking for that elusive “game-changing” marketing channel, only to come up empty.  So I’ll say it outright…In my career, nothing has consistently unlocked new growth opportunities as effectively as improvements to the user’s experience.

‍

‍

One of the interesting aspects of this approach is sometimes small changes that you don’t expect to have a big impact on conversion rates do, and vice versa. But over the years I’ve gotten a bit better at sniffing out these opportunities, and earlier this year it became apparent to me that we were sitting on a big one.

If you are interested in user experience design or SaaS onboarding, this post is for you.

Meet Outseta’s sign-up widget

If you’ve been following our journey, you know that Outseta is a big product that spans several software categories—billing, CRM, help desk, etc. But at the core of our product is what we call our “sign-up widget”—a small bit of pre-configured javascript that you can drop into any website page to quickly add a subscription checkout experience to your website or product. In many ways this is the core of our product, and integrating our sign-up widget is where most of our customers start.

I’ve made no secret of the fact that when we started building Outseta 4 years ago we were very specifically targeting founders of other SaaS start-ups—in most cases, developers. The initial process for integrating our sign-up widget was absolutely designed with a developer in mind.

When we began making in-roads into the no-code community in early 2020, we immediately saw an explosion of sign-ups for Outseta. Great! Right?! While the excitement was real, what we immediately realized thereafter wasn’t as fun…

We had hundreds of less technical founders signing up each month, and most of them struggled through the process of integrating our sign-up widget with their website.

I wrote increasingly detailed documentation, and conversions came when I offered a lot of handholding—oftentimes prospects sent me login credentials to their Webflow sites and I simply did the integration work myself. We were winning customers, but it was a grind that obviously wasn’t sustainable.  The writing was on the wall:

For a truly non-technical founder, integrating our sign-up widget with their website or product wasn’t as easy as it needed to be.

So we decided to attack that problem head on—this post is the story of how we did it. I’m happy to report that:

• With these changes, the “no-codification” of Outseta is now complete.
• Our conversion rate has improved by about 3x.
• There isn’t a product out there that makes it easier to turn your website into a subscription or membership business!

The “no-codification” of Outseta

The changes outlined in this article really all go back to taking a product that was initially designed for a developer, and rebuilding it for the no-code audience.  A pattern that you’ll see throughout our product is we ask the user to complete some settings or configuration options, then we generate pre-configured code snippets that users can embed in their pages to bring the functionality that they are looking for to life. This is increasingly referred to as visual development, and that’s what we’ve now enabled. The changes that we made can be broken into two buckets:

• Redesigning our “Sign up and Login” settings page
• Making implementation easier for no-code founders

Let’s look at how we tackled each problem to make this process as easy as possible.

Problem #1: Our confusing “Registration Settings” page

The video below breaks down the problems and points of confusion that non-technical users were experiencing when integrating Outseta’s sign-up and login widgets with their website. A few highlights:

• We were using developer centric language like ”registration” and “authentication” instead of more accessible language like “sign up” and “login.”
• Our “Registration Settings” page wasn’t doing a good job of framing what exactly the user was expected to do on the page.
• We were showing a large number of customization options that were overwhelming for less technical users—80% of which needed a much more basic configuration.

‍

Solution #1: Our redesigned “Sign up & Login Settings” page

With a clear understanding of where our users were getting tripped up on the “Registration Settings” page, we set out to redesign the page to address the known issues head on. What you’ll see now is a significantly slimmed down version of the page that surfaces the primary configuration settings that 80% or so of our users need. Some highlights:

• We’ve framed what’s happening on this page much more clearly with explainer text.
• We’ve tucked many of customization options away under “Advanced Settings.” These powerful features are still accessible, but are no longer causing confusion or getting in the way of users getting setup quickly.
• We’ve used more accessible language that makes it easier to understand what each setting represents.
• We’re now automatically creating a “JWT token” behind the scenes rather than asking users to tackle this themselves. This is a token that’s passed when a user authenticates, which tells Outseta who the user is and what subscription level they are on so we can show the appropriate version of a product or site based on their subscription. Again, something that was pretty clear to a developer but left most no-code founders scratching their heads.

Here’s where we landed with the new “Sign-up and Login” setting page.

Problem #2: Implementing our sign-up and login widgets was too hard for no-code founders

While the changes we’ve detailed so far represent improvements that have helped our users better understand our sign-up and login settings, a final step was making it easier for no-code users to actually integrate our widgets with their products or websites.

With all of Outseta’s widgets, we provide pre-configured code snippets that users can easily embed on their website pages or elect to open as a pop-up when a button or link is clicked. While the embed option has always been fairly straightforward, if users wanted our widgets to open as pop-ups it required that they add custom attributes and classes to the buttons or links on their website.  There were two problems here:

• First, how you actually do this varies significantly based on the website builder you happen to be using. For example, this is very easy in Webflow but you can’t add custom attributes or classes in Squarespace without editing code. Carrd presented a set of different challenges.
• Second, many non-technical users simply didn’t know how to work with pop-up triggers like you see below. I can’t tell you how many times I heard “What’s a custom attribute?” or “How do I add a class?”

‍

Solution #2: Streamlined implementation with preconfigured links

With these challenges in mind, we made the following changes to make implementing Outseta stupid simple. It’s now a two-step process that almost any user can handle no matter how technical they are.

• Add Outseta’s “Quick Start” embed code into the header of your website pages. Instead of asking our users to implement 3-4 separate embed scripts, they now only need to add one.
• Link your sign-up and login buttons to the URLs that we provide. Users no longer need to worry about adding custom attributes or classes, as we now provide pre-configured links that already have the required custom attributes and classes appended to them.

Here’s a video overview showing just how easy it now is to implement our sign-up and login widgets on any website. This is really the end result of all of the work we’ve discussed so far.

‍Bonus: Meet our visual sign up and login builder

As we considered all of the improvements that we’ve discussed so far, we decided to execute on some additional changes to further bring the concept of visual development to life.

To start, while we had improved the ease of implementation for our sign up and login forms one problem that remained was it was tough for users to get a sense of what our widgets would actually look like once they were integrated with their sites. For example, it was a pretty routine circumstance that users wanted to skip a step in the checkout process by preselecting a specific pricing plan or payment term. While they could technically do so, they couldn’t easily preview what our widgets would look like once integrated with their website—and this again required using custom attributes.

Additionally, we were fielding lots of questions from users about the extent to which the design and branding of our sign up and login forms could be customized to match the aesthetic of their websites.

As we considered both, we realized that a “visual builder” could solve both problems. It would give non-technical users the ability to customize the design of their sign up and login forms,  while also generating a live preview of the design as they made changes. After all, so many of our customers are building sites on Webflow—itself a visual builder—so this functionality seemed like a natural extension of a product most of our users already know and love.

Here’s a video overview of our new visual builder.

‍As a final step in this process, we updated the items in the onboarding checklist that we show to new users when they login to their Outseta account. Previously this checklist included easy to execute items that pertained to other areas of our product—things like setting up your support ticketing inbox or creating your first sales pipeline, for example.

‍

This decision came down to the realization that for us, successfully onboarding a new customer has more to do with getting our sign up and login tools integrated with the customer’s site than anything else. We’re now focusing the entirety of our onboarding process on this task, and we’ve added additional guidance elsewhere to help users adopt Outseta’s other features as their need for each arises.

Ultimately these changes have already proven to be the most impactful changes we’ve made yet, as measured by bottom line revenue growth. We’re now in a much better position to scale our business effectively—we have significantly reduced support volume and have far more customers signing up that I’ve never spoken to or interacted with.

As for that game changing marketing channel? Once again I’m happy that I didn’t waste my time looking for it.

‍

‍

To read more from the Outseta blog visit Outseta.com/blog