Alpha This is a new service – your feedback will help us to improve it.

Contributed by

Carefree logo

Overview

Carefree is a charity working with the hospitality industry to donate excess capacity so that full-time unpaid carers can take a break.

The charity developed an easy to build and maintain system to provide a range of different stakeholders with access to their own protected online area, offering relevant services and resources. They were able to do so using a no-code approach.

Recipe status

This recipe has been in use since July 2020.

We are not sharing this recipe as the perfect solution to a problem, but we believe Carefree’s learnings could be very useful to other organisations.

Users and needs served

  • As a service user, I need access to a restricted/private/customised online area
  • As a support worker, I need access to a restricted/private/customised online area where I can easily refer service users registered with our organisation, and access historical referrals and impact data
  • As a team member or volunteer, I need access to a restricted/private/customised online area where I can access and manage data related to different stakeholders
  • As a partner, I need access to a restricted/private/customised online area where I can manage donated inventory, respond to incoming requests and access impact data

Software and tools used

Memberstack

Memberstack is a website-building tool that can help you create members-only websites, dashboards, web apps, and intranets with commonly-used web design tools.

Carefree uses it to manage online user authentication for all their different stakeholders. Each user gets access to their relevant member’s areas, containing relevant services and resources. These member’s areas are developed and hosted in Webflow.

Cost

Starting at $25 (£17.96) per month.

Memberstack has a unique pricing model. All plans have an unlimited free trial for all features in test mode. You then select a plan when you're ready to launch your website.

You can find more information on pricing here.

Considerations

Memberstack offers a ‘plug in and play’ user authentication solution, without the need to code. The platform integrates easily with Webflow and many other web design tools. The platform allows organisations to wall off certain areas in your website to only registered users.

All design components are highly customisable. Memberstack has a clean dashboard user interface (UI) to manage all your members, memberships, custom fields, etc - and it integrates with Zapier (to 1500+ integrations).

Webflow

Webflow is a design tool, CMS, and hosting platform. It gives designers and developers the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you. All Carefree’s member's’ areas are built and hosted in Webflow.

Cost

Prices start at $12.00 (£8.62) per month.

Considerations

Webflow allows users to create, design and front-end all together in one place. The platform enables users to quickly preview (on any browser or mobile device) how the website looks and works: how the fonts render, how CSS animations and transitions are behaving, and it even allows for checking of animations and interactions. All these features are available in the design stage. It allows users to truly learn from supporters’ behaviour and respond in an agile way.

Recipe steps

1. Define your membership levels

Decide in advance on how to structure different membership types.

These may break down in a number of ways, such as by serving specific stakeholders, distinguishing between paid or free memberships, or as being instantly accessible or needing pre-verification.

This is also the time to build a clear picture of who your different stakeholders are and what you need to provide to them in their members’ areas through a process of extensive beta testing.

2. Build dedicated members’ areas in Webflow

Once you know which types of memberships you’ll need, you can start building the different online spaces in Webflow, which will provide the different members with relevant content.

3. Install Memberstack’s simple application on your Webflow site

This is easy to do with Memberstack’s integration for Webflow. It’s a simple script, provided by Webflow, that gets copy-pasted into the site-wide settings area of Webflow. Memberstack provides clear instructions for this. No coding knowledge required!

4. Finish setup in Memberstack’s dashboard

Once the Memberstack script is up and running on your Webflow site, go back to Memberstack’s dashboard, where you can continue setting up the memberships. This will help Memberstack understand which areas of your Webflow site should be protected from the public and which type of membership should be sent to a specific protected part of your Webflow site.

5. Install a login form on your existing website

Now all you have to do is add a login form to your public website. Memberstack provides a couple of different ways to add a login form to a range of platforms, but even if your specific platform isn’t part of their integrations yet, a simple piece of code or custom form will do the trick.

Again, Memberstack provides very good onboarding and installation articles to help you with this. If you do have different types of members (like Carefree does), this smart form works for all, providing one central place for all your stakeholders to log in to their respective member’s area. Memberstack will redirect them to the different parts of your Webflow site automatically, based on the settings you entered in the previous step.

6. Onboard members

All you have to do now is give access to your new members’ areas to your existing users or invite new users to sign up. Memberstack provides easy to use sign-up forms for this or you can upload CSV files to your account to bulk create hundreds of user accounts in one go.

Guidance

Don’t overcomplicate things. No-code tools like these allow you to respond fast and adjust to ever-changing needs and learnings.

It will take a while before you can create real value for your users or gain any learnings for yourself if you want to create the best solution you can imagine. Instead, focus on a Minimum Viable Product (MVP) that you can create quickly, because the faster you can start learning, the more robust the final product will be.

Build an environment that allows you to add features quickly and adapt easily, so users can actually use it, which will deliver immediate feedback, giving opportunities to learn and adapt.

Risks

Changing operational procedures with existing users can be tricky. Inevitably, you’ll lose some users, so keep that in mind when designing the conversion process.

Try to keep things as simple as possible for existing users to sign up by providing as much digital help and information as possible, with interactive onboarding guides and live chat support throughout their journey.

Pre-populate data wherever possible, to make the signup process quick and easy. And by explaining the benefits of upgrading to the new platform to the users from the start, you create a nice incentive and reason for them to go through the process.

Points of contact

For further information about this recipe, you can contact:

Joey Ceunen Product Manager

Thanks

Many thanks to Carefree for contributing this recipe.

Licence

This recipe is licensed under a Attribution-NonCommercial-ShareAlike 4.0 International Licence.

That means you are free to copy, redistribute, and build on the text of this recipe, but only for non-commercial purposes (if you want to use it for commercial purposes, get in touch with us at [email protected]). You must give credit to both Catalyst and Carefree and link back to this page. If you build on this recipe then you must share your version under this same licence.

Recipe published on March 30th, 2021. Last updated March 30th, 2021