To design and build a membership site and integrate with Stripe

For this project, I decided to use existing third-party software and templates instead of building everything from scratch. This saves the client time and money and means I can focus on connecting all the parts and getting up and running much more quickly.

Choosing the CMS

WordPress is a popular choice for many membership sites so it was tempting to use this platform. More recently, say in the last 5 years, there's been a trend to use third-party sites like Teachable and Thinkific, especially for courses with video content. The only downside of platforms like these is the monthly fees.

Since this project doesn't contain videos and to maintain complete control over the website, I decided to use Ghost - a light, modern, and fast blogging platform. It doesn't have all the fancy plugins WordPress has but it also benefits from not having as much baggage and weight as WordPress sites typically have.

The Ghost platform also has a built-in membership feature, another time saver.

Designing and Customizing the UI

For the membership interface, I used a Ghost template which had an attractive design and a layout with a membership/app feel to it.

When working for clients, picking out a few site design options and showing them mockups of how their site could look is a great way to ensure no major redesigns will be necessary down the line.

It also saves time and money, and the saved time can be spent on customizing the site. Sometimes a client will have already chosen a website template they want to use, which makes it possible to have their site up and running in days instead of weeks.

Color Scheme

I decided to give the membership site a unique look instead of trying to create an exact copy of the desktop app. Instead of using 6 different colors for different sections, I chose one main color, a deep pink, in keeping with the app theme.


Creating Content

With the template installed, I set up the sections, pages, menus, changed the color scheme, tinkered with some code, and made it ready to add the site content later. This took about half a day.

Since I'd already created the content for the desktop app, I simply imported the text from the HTML files and Visual Studio Code. The formatting was slightly different but didn't pose much of a problem.

With the site content and customizations completed, I moved on to setting up the membership pages and integrating Stripe for payments.

Accepting Payments

I already had a Stripe account set up so I focused on setting up payment plans and the membership pages for customers to sign up on.

The Ghost platform has a membership feature built-in and the Ghost template I used already had a membership sign up page, a sign-in page, and a newsletter sign up page, so I customized those, added the membership pricing, and completed the integration.

Mailing List Setup

This was the most time-consuming part of setting up the membership site. Also unavoidable, as it's one of the most important parts too.