Memberstack is a SaaS product to add user authentication and payments to any website with one line of code. I led the product and design effort to rebuild a 2.0 version of the product to address deeply-rooted technical, design, and business constraints. The goal was to set the product up for long-term sustainability and scale.

Context

5-person team, 1000+ paying customers, $1M+ in live payments

Challenge

Rebuild the entire product from scratch to remove existential technical and business constraints

Timeframe

45 days from idea to polished designs; shipped in 3 months

Impact

10K+

Paying Customers

100K+

Total users

10M+

Members managed

$180M+

Payments processed

The Challenge Ahead of Us

"

How do you rebuild a rapidly growing product for long-term sustainability?

"

In early 2021, Memberstack had grown rapidly to 1000s of paying customers and was processing over $1M in payments.

However, behind the scenes, we had a long list of deeply-rooted constraints that were an existential risk to the product:

1. Website builder as frontend: Our frontend was running on Webflow (a website builder). Early on, this let us quickly ship frontend UI and reduce the load on our single engineer. We may have been the only product in the world hacking Webflow to build a SaaS product. 😂

2. No version history: The Webflow Publish button was our one-click deployment pipeline. We had no Git/version history, and could not revert product changes on breakage. Branching was not possible.

3. Limited to single products: Our database schema let our customers assign users to only 1 plan at a time. Eventually, a "multi-product checkout" became our #1 most requested feature. It was technically gnarly to untangle our entire codebase in realtime to allow this (especially with $1M+ in payments flowing through us).

4. Built for no-code: Our hypothesis at launch was to build for non-technical folks only. However, as our customers scaled, they brought on developers to continue building. However, we were not developer-friendly at all — no APIs, no documentation, and dashboard-only use.

5. Webflow platform risk: We were built as a plugin specifically for Webflow websites. This meant that both Memberstack and our customers were locked into the Webflow ecosystem. Changing any part of the business stack was very painful. Additionally, if Webflow decided to shut down our plugin for any reason, we would be out of business immediately.

6. Limited Market Size: As a Webflow plugin, we were limiting our "auth and payments" market to only those businesses using Webflow. We were missing out on a massive market outside of it - people building on website builders as well as code-first frameworks.

7. Design Debt: Over time, our product lacked a unified design system and principled design approach. This made it difficult to maintain consistency across the product.

The old product

Despite having an incredible product and a raving user base, we were hitting a ceiling in terms of our local maximum. It was not long-term sustainable.

To rebuild or refactor?

With a team of 5 people supporting 1,000+ customers, we could either continue improving 1.0 incrementally or go all in on a 2.0 version for a step function jump. Given the layered complexities outlined above, we decided to go with building a 2.0 version and write code from scratch.

We had a long list of goals for 2.0:

Designing the new Memberstack in 4-6 weeks

1. Onboarding Flow

We revamped the onboarding flow to now suit both technical and non-technical users. We reduced the aha-moment from 20+ clicks down to the first few clicks after signup. The onboarding was designed to scale across all the horizontal use-cases as well as support all the additional platforms outside of Webflow.

2. Member Management

As an embeddable product, we were indirectly managing millions of members for our customers. The old experience only let customers manage one member at a time. The new experience was built for both singular and bulk user management, with the goal of making it powerful but still easy to use.

Hover to compare

Before

After

3. Plan Management

'Plans' were used to let members sign up to various services or products offered by a business. Previously, plans had scattered settings across the dashboard, and each member could only be assigned to one plan at a time.

In 2.0, we introduced an additional layer of abstraction called "products". Each product could now have multiple pricing plans (eg: yearly, monthly, one-time). These products and plans together let businesses offer multiple products and services to their members.

The admin dashboard for managing products, pricing plans, and authorization was redesigned to be deeply configurable with realtime mockups of modals.

Hover to compare

Before

After

Embeddable Modals

"

How might we design modular, reusable components for signup, login, and checkout that take into account thousands of permutations and edge cases?

"

Memberstack's main value prop was its embeddable signup, login, and checkout modals that let any website add this functionality in seconds. It saved our customers from having to design and account for hundreds of different user account flows, checkout variations, and compliance edge cases. The goal was to design these components to be modular, configurable, and brandable.

3. Signup and Login Modals

Hover to compare

Before

After

3.2. Checkout and Payment Modals

These modals handled complex payment workflows and were the most challenging to design. Use the tool below to get a sense for the types of checkout settings, scenarios, and permutations we had to account for.

Example Checkout Configurations

↻Regenerate

Product #1: Starter Package

Monthly: £99/mo

Yearly: £990/yr

Product #2: Team Plan(quantities allowed)

Monthly: £19/mo

Yearly: £190/yr, 14-day trial (card required)

Every 14 days: £9/14d

Coupons: disabled

Billing address: required

Taxes: disabled

Payment methods: Credit Card, Google Pay

Compliance: none

Hover to compare

Before

After

Designing a new API alongside the product

Every single feature in 2.0 was designed with developer-experience in mind. We wanted to make it easy for developers to build on top of Memberstack, and we wanted to make it easy for them to get started. I worked closely with the engineering team to design the API in tandem with the dashboard design process.

memberstack-api.ts

// Memberstack 2.0 API Overview

// Available packages

@memberstack/dom

@memberstack/admin

REST API/v1

authentication{...}

// Email & Password

signup(email, password)

login(email, password)

resetPassword(email)

// Passwordless

sendCode(email)

verifyCode(code)

// Social OAuth

"google""facebook""github""linkedin""spotify"

// Session

onAuthChange(callback)

getMemberToken()

members{...}

// CRUD

getMember(id)

updateMember(id, data)

deleteMember(id)

// Custom Fields

string | number | date

dropdown | checkbox

// Member JSON

getMemberJSON()

updateMemberJSON(json)

// Permissions

planConnections[]

permissions[]

payments{...}

// Plans

getPlans()

addPlan(memberId, planId)

removePlan(memberId, planId)

// Subscriptions

monthly | yearly

cancelSubscription()

// Stripe

stripeCustomerId

stripeSubscriptionId

// Checkout

openCheckout(planId)

openBillingPortal()

A scalable design system

Behind the scenes, all of this was built on a modular system that was designed to be scalable and easy to maintain longer term.

Rolling out the 2.0 product

We had to switch the operating rails of Memberstack in realtime. This was a massive undertaking, given that we handled user authentication and payments for our customers' members. Issues during migration meant that customers could lose revenue and data. We ran a multi-phase roll-out process to help users transition to 2.0 and stabilize the builds before doing a general availability launch.

Reflections

As of today, Memberstack fully runs on the 2.0 version. The product generates multiple $M+ in ARR, serves 100K+ users, 50K+ agencies/freelancers, and has processed $180M+ in payments.

This was an incredible team effortt, and I had so much fun building and launching this with the team. I'm deeply proud of what we built together.

For a deeper dive into the higher-level startup journey, read The Road to $1M ARR here.