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. Login page

5-person team, 1000+ paying customers, $1M+ in live payments Rebuild the entire product from scratch to remove existential technical and business constraints 45 days from idea to polished designs; shipped in 3 months {" "} 10K+ 100K+ 10M+ $180M+ # The Challenge Ahead of Us How do you rebuild a rapidly growing product for long-term sustainability? In early 2021, [Memberstack](https://www.memberstack.com) 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. Memberstack 2.0 product overview

# 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: API-first product Built for devs and non-devs Decoupled from Webflow Modular design system Modern tech stack Multi-product checkout Backwards compatibility Feedback from 1K+ customers # Designing the new Memberstack in 4-6 weeks I took the lead on design to ship 2.0, working closely with the two co-founders. The challenge spanned from balancing all the design needs above, aligning on the vision with the founders, and working with the engineering team to ship the product. ## 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. Login page

## 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. ## 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. # 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 Signup flow mockup 1

### 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. Checkout modal with expanded cart items

# 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. # 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. Design system components

# 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. The recent 2.0 upgrade has taken our experience to a whole new level, and we couldn't be happier with the results. Memberstack 2.0 has thought of everything when it comes to subscription management. The new features and improvements not only streamline our workflow, but also enhance our ability to serve our customers in the best possible way. Memberstack 2.0 has exceeded my expectations. The sleek interface, seamless integration with Webflow, and robust features make it a top-tier choice. Creating multiple membership tiers, setting up recurring payments, and accessing detailed analytics is super easy. Memberstack delivers! And version 2.0 takes it to the next level of awesome allowing me to do more than I ever could before. Exceptional team. Exceptional product. Memberstatack 2.0 launch dropped at the right time for me. A significant upgrade in every-sense of the word. Memberstack, combined with Webflow, enabled me to build a complex data-analysis web application. No prior knowledge. No outsourced dev. # 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](/blog/memberstack-startup-reflections). A small team punching above their weight

A small team punching above their weight

Eternal

Eternal