This is some text inside of a div block.

Paid Membership Gates

Gating paid content for all communities on Mighty Networks.

A Mighty Networks feature release

challenge

Community creators were having issue protecting their communities, even when access to the community is paywalled.

OUTCOME

Since its release in June 2023, 337 communities and 3761 members have passed through the membership gates.

Jump to details

Project Brief

A series of feature sprints on the Mighty Networks SaaS platform, to enhance the paywall experience and get more creators to process payments natively.

WHAT I DID

I owned the end-to-end design of this feature, leading cross functional collaboration and delivering design specifications, user flows and design system interface components.

Timeline

7 months (Intermittently between September 2022 - July 2023)

TOOLS

Figma, Figjam, Miro, Google Slides, Google Docs, Zoom

Team

Lead Product Designer
Product Manager
4 Web developers
4 mobile developers

feature demo

DESIGN CHALLENGE

How Might We...

How might we enhance the ability of community creators to increase sales of paid memberships on the Mighty Networks platform, while ensuring community safety and focus?

Overview

We Want To Increase Paid Membership Sales

As the lead designer on the privacy and monetization team at Mighty Networks, my goal was to address key challenges faced by community creators in creating and selling paid memberships on our SaaS platform. By providing custom community features and tools, we enable creators to package their spaces into paid memberships, allowing us to earn a percentage of each sale.

Opportunity

Creators Need To Validate Members

The main customer feedback stopping creators from offering memberships on the Mighty Networks was the issues like trolling, bots, and misaligned members, even when the memberships were paywalled. To address this, we needed to design features that empowered community creators to establish, manage and protect paid memberships on our platform.

Approach

Review Applications Before Purchase

We launched a phased approach to releasing value to community creators, starting with improving the paid membership and content creation tools, gated payment flows and multi-role management options.
These feature releases would allow Community creators to:

* Keep their paid communities safe and keep the trolls out.
* Collect information about members to see if this community and option is correct for them.
* Involve Moderators in paid access management without viewing sensitive payment information.

fINAL feature

Key Features

Step-by-step Paid Membership Creation.
Community creators can now easily create membership packages for their spaces with a step-by-step process.

Because this streamlined approach addresses creators concerns of feeling overwhelmed by the lengthy original form and provides clarity on the steps and editable options during and after plan creation.

The Community Admin Paid Membership Creation Flow

Gating Your Community.
Community creators can validate potential paying members through screening questions and approval processes.

Because it addresses creators' need to verify individuals seeking community access while ensuring a user-friendly and streamlined purchasing flow to minimize drop-offs.

A new user coming requesting permission to purchase a membership

Gating Your Paid Content.
Community creators can gate access to multiple content spaces within the community.

Because it accommodates for creators with various paid offerings for community members, each potentially requiring different screening requirements.

interface showing support network
A community member requesting to purchase paid content

Multi-role Application Review.
Community creators can assign community moderators to review applications without exposing sensitive payment information.

Because This alleviates the burden of community management solely on creators and grants them flexibility in hosting their paid memberships on our platform.

the main user interface
A community Admin or Moderator reviewing applications for purchase.

Design process

Detailed Process Notes

Use the tabs below to read details of the different steps in the design process.

Research
Design
Design system
Impact

Research Overview

Give the Power to Community Creators

To understand the pain points of community creators, my product manager and I conducted a comprehensive analysis. This involved reviewing market insights, conducting user research, performing competitive analysis, and evaluating our internal product. By doing so, we were able to identify potential feature implementations that would address their needs in our proposed solution.

feature rEQUIREMENTS

Understanding the Scope

By reviewing previous research and market trends, our product team gained valuable insights for this project. From these insights, my product manager synthesized three key areas that we aimed to address.

01.

Creators want to be able to screen and approve applicants for a paid membership

02.

Creators want to give members access to a specific set of spaces when they first join the network.

03.

Creators want existing members to be able to easily invite people to a private network without allowing them to bypass the approval process.

The use-cases I was tasked with solving for.

primary research

Hearing their Stories

Armed with these major insights, the product manager and I conducted 7 user interviews with current community creators. We learned about their struggles with bots invading their communities, members joining the community or spaces through the incorrect marketing channels and issues with knowing who these people were before they entered close-knit communities.

I organized the inital research interview soundbites into sections related to feature improvements

competetive analysis

Checking out the Competition

Among SaaS Community platforms, none of the direct competitors appeared to offer native features allowing creators to validate users prior to completing a purchase. This meant that we had a great opportunity for product differentiation.

product Assessment

Areas of the Product to Address

1. Gates were available, except for paid content.
Mighty Networks allowed for questioning and validation of members in certain communities, but lacked this feature for communities with paid memberships.
2. Creators bore the entire burden of managing applications.
Only community administrator roles had access to payment and member approval features, limited to community access and not extended to individual spaces.
3. The paid membership creation form was lengthy and complex.
The form for creating paid memberships caused stress for creators and lacked desired control. Additionally, editing the settings was difficult after the initial creation.

Mapping out how the system could potentially improve.

design principles

Gating for Good

To guide the design process, I decided to identify design principles to keep the features cohesive and answering our creators main pain points. These would act as a method of down selecting the ideas that would align with our product goals:

Creator Flexibility

Recognizing the diverse usage of paid memberships across different networks, I aimed to provide maximum flexibility to accommodate various membership styles.

Adding Power

Considering our existing design system, I aimed to create components that would enhance functionality and refine the overall design system maintained by our team.

Extensibility

The solution needed to serve as a framework, allowing for future expansion and additional options for designing paid memberships. It was intended to be the foundational step towards empowering paid memberships.

ideation

Concept Selection

I conducted collaborative design sessions with various stakeholders, including the product manager, design team, product team, developers, and C-level executives. Together, we brainstormed and generated concepts for approaching gating, initially using whiteboarding techniques. Using our design principles, we settled on 3 ideas to design.

* Step-by-step guidance through the paid membership creation process.
* Modular gates to screen members for paid memberships.
* Multi-role approach to pending member management.

userflows

Mapping the Modular Experience

Once the design ideas were finalized, I created schematic user flows to depict gate logic and various gate combinations. We made an agreement between Product, Design and Engineering that the gates could be turned off and on, and they would stack with screening questions first, then approval and then payment.

The reason for this was to validate my assumptions with the engineers, as I consider them my design partners. By ensuring their endorsement of the approach, I could proceed with confidence to user testing. The engineers appreciated the logic diagrams, which aided their comprehensive understanding of the feature we intended to develop.

USER TESTING

Insights & Iterations

Based on what kinds of gating flows that were identified, I developed high-fidelity prototypes for the setup, management and experience of paid membership gating. Collaborating with our lead researcher, we conducted user testing sessions for each prototype, involving 5 community creators. Specifically, we focused on testing the plan creation wizard and plan management features predominantly on the web.

The reason for this was to validate that the foundational aspects of the project were aligning with community creators comfort in creating paid memberships on our platform. Given the prevalence of web usage among administrator and moderator roles, we opted for web prototypes to maximize research efficiency based on our data.

01.

The plan creation wizard needed clear back and forth navigation, and clarity on details of the plan being built.

Refine: Add a sticky footer navigation to let the user go back and forth, and a context box that describes the details of the plan they are creating.

Confused about whether she’s creating a membership to the community, or space. Reads the text a few times and says she understands. Seems to understand the internal/external plans.
- Participant 1
Paid package creation form iterations

02.

Changing the gating experience from joining the community to accessing paid space memberships was confusing to creators

Refine: Find ways to reuse the community gating flows and components for the paid space memberships flow.

“...I want the least possible friction to members confirming their purchase.”

- Participant 2
Payment gating for the community and paid content

03.

Creators were confused about each member's progress through the gates, and wanted to be able to remind them to check out.

Refine:
Add a dynamic visual component to clearly indicate where the pending member is in their application process, and a way for Creators to remind them to check out.

“I don’t know where I am in the process! Could we give a visual cue?"
- Participant 3
Before and after Pending Review Modal

Design system

Building Extensible Components

As part of this feature work, I designed and documented 3 new components and committed them to the design system. I created prototypes and specifications for these components for development. This includes information about states, and interaction design specifications.

Process Improvements

Bringing the Squad Along

As we moved from discovery to design and product architecture phases, I took the lead to organize official design and engineering alignment meetings. The goal was to give engineers more visibility into the design process and gather their valuable feedback at key stages.

By involving engineers from the beginning and keeping them engaged throughout, we created a collaborative atmosphere that bridged the gap between design and engineering. This approach led to better-informed decisions and a more cohesive product development process.

Design documentation

Flexible Gating Flows

I designed to insert modular flows into the current onboarding flow, that acted as a blueprint adding modular gating features to the membership process and purchasing paid content. to see more of the flows, click on the image to drill down into the flow components. These acted as a source of truth for engineering.

The Community Creator or Admin creates the plan

FINAL Feature

How It Works

A Creator builds a paid membership with either screening question and/or approval  gates, using the new plan creation wizard.

The creator decides how they want to package their paid content, and wants to make sure the trolls don't join their community. They can use screening questions and approval to make sure they know who is trying to purchase their paid membership.

The member who wants to purchase the paid membership will need to apply by answering questions and requesting approval.

The member will be able to quickly answer questions, request approval and know where they are in the purchasing process. This process will be consistent across accessing the community its paid spaces.

The User signs up, answers questions and/or requests to purchase a paid membership.
The Admin and moderator review applications of pending members from the community member list.

The Admin and Moderators can view the status and the answers of the pending prospective member. They can decide whether to approve them or not.

Community Moderators roles can access these options from the Members list, so that they don't see sensitive payment information.

The Community Creator can use the same gating options to validate community members before they purchase paid content.

The community creators can also create paid packages for their content using the exact same process, and the members will have the same experience flow.

The flow is consistent through out the product.

outcomes

Measuring Success

As of March 2024, There are almost 4000 networks using plan gates and close to 140,000 members that have been screened before purchasing a plan.

REFLECTION

Takeaways

1.

Simplicity is the product of good design.
Making payments online is a stressful ask, so the more clear and integrated the experience is, the better for users to take the final step to purchase. Keeping the experience simple, modular, and uniform across the platform leads to user familiarity.

2.

Developing collaborative design processes make all the difference.
Collaborating with engineers throughout the design process lead to a smooth implementation of very complex user flows. As a designer, I have found that engineering is as important as any other stakeholder to ensure a successful feature launch.