Lazycoders.tech - we do the best no-code apps

Implementing no-code solutions into real world - Webflow, Airtable, Zapier 🔥

webflow

How we built Menta - the Mental Health platform

Are there any limits when using Webflow? Maybe payments, subscriptions, databases? Check this article and understand the different approach!.

How we built Menta - the Mental Health platform

How we built Menta - the Mental Health platform

Since February 2021 we have worked on a new project, called Menta. It is a German startup that helps users to solve their problem with stress, self-love or sleep. The topic seems to be very popular nowadays, especially during covid-19 when people use to spend much more time at their homes than usual.

This is not the first startup project of the customer, what was a advantage as we could quickly start speaking the IT language and:

  • Define a scope and build a team of UX, frontend developer, marketing,
  • Jump to sprint, iterations & introduce project manager and product owner's responsibilities,
  • Define first MVP points and "out of scope" functionalities for the MVP, that can be developed after we introduce early adopters into the project,

Agenda

  • The project scope & user stories,
  • Wireframes, design and marketing landing pages ideas,
  • Tools around Webflow that have been used,
  • The architecture,
  • Final thoughts

The project scope, user stories and approach

The platform offers many videos, grouped into different topics/categories. A new user when signs-up gets asked to go though the survey that helps them to personalize their pain points. It may be: problem with stress, problem with sleep, problem with relationships, etc.

After the user finish the survey, they get access to the dashboard with their personalized videos.

Menta.studio dashboard after sign up

The user gets many videos for free. If they are interested in any topic deeper they are able to purchase a paid course.

So, what were the MVP functionalities found:

  • Authentication - allow user to login, sign-up, fill in the personalized survey,
  • Watching free videos - watch videos that fit the personalized survey, filter them, share with friends, add a video to the calendar (schedule when to watch it),
  • Rating the single free video,
  • Watching free webinars - the user is able to watch live sessions, chat and communicate to each other during the session,
  • Watching premium videos - paid section, behind Stripe payments wall - a series of videos in the course that can be watched after the user buys a course,
  • Creator profile - the profile of the video's author - describing who is the creator, what are their goals, what they focus on, their uploaded free videos, recommended videos. The creator can also upload a paid course that can be purchased by users/customers directly on the platform,
  • Playlists - the user is able to create their own playlist and share the playlist with their friends via link,
  • Administration - to manage all content on the website, i.e. videos, courses, comments, ratings, etc

Wireframes, design and marketing landing pages ideas

We started to prototype the project in March (after agreed on the scope) and agreed on colors, based on customer's choices and their brand. The project is available live at http://menta.studio/ - do not hesitate to reply to this e-mail with your feedback on the design!

I am not going to talk much more about the design as it's live and anyone who is interested can just sign-up and check what's inside.

What I wanted to notice is that we decided to break down Webflow Menta project into two completely separate & independent projects:

  • The selling landing pages project - "if you do marketing for everyone, it probably won't work". This is why we decided to create a separate project on Webflow and let the marketing team create separate landing pages for different topics (problems), with CTA buttons linked into the platform.

  • The platform - this starts from the sign-up/sign-in form. There is no homepage view/page in this Webflow's project. This project only contains what is inside the platform (after you sign-in into the platform).

Tools around Webflow that have been used

Figma

Remember that Webflow is not the tool to design a UI/UX views. Figma-first approach allows us to provide the customer with the right process of the design development, where every single view needs to be accepted before being implemented on Webflow so the both parties know & agree on what should be done before it goes live.

webflow.png

Webflow is the service that allows us to quickly create new design pages and update the existing ones.

Airtable

I have created a few posts around how the authentication should look like and why Airtable is not the good place to store confidential information about users/customers on the platform. I have also explained why not to use Memberstack as a IAM tool, so if you're interested please go through all the existing posts on LazyCoders ;)

In Airtable we store information about customer's choices (i.e. topics they are interested in), static pages, playlists, etc.

Menta Administrator can manage videos, courses and live webinars via Airtable as well.

MySQL

MySQL is our master database. We use MySQL service to store videos that have been added into playlists, user ratings and other information that requires quick, real-time data that can be easily returned to the current user.

Zapier

Zapier has been used to send e-mails via Mailersend, create CRM contacts and tag them.

Stripe

Stripe, connected directly (without any providers like Memberstack) allows to quickly charge a customer against their credit card, subscribe customer to a plan, etc. We decided to connect it directly so Menta doesn't get charged with extra fee (only 2% of charge fee from Stripe).

The architecture

The architecture is very simple and please find the main assumptions on it:

  • The Gateway is the place where user goes to when opening the website,
  • The Gateway is service-oriented and can have as many services as needed,
  • Webflow is the HTML-rendering service, can be replaced with any other service (in the future),
  • Airtable is the only one source of truth - it stores all the data around customer's choices, preferences & purchased courses,

The Architecture

The image above describes exactly how the gateway works and where Webflow/CMS/MYSQL are all the process.

If you're interested more on how it is integrated, check the article below

How to connect Webflow and databases

Final thoughts

There are a lot of things that can be done better. We also know it, but we're happy that we've launched the project that can be scaled and there are no limitations at all. We can use any other service provider (e-mails, payments, whatever...).

We are also aware that MVP is built to bring first paying customers. After we build a group of paying customers, we're happy to go to the phase 2 and share it with all of you!

Thanks, Mateusz

My name is Mateusz and I'm from Poland.

I have developed many applications, as an IT consultant (Solution Architect, Team Leader or Senior developer), starting from small e-commerce applications build on top of PHP to bigger government-related applications (Java & PHP). I always try to deliver best approach, that can be scaled.

This blog not about hard-coding. This is about a new way, called no-code. I am here to show you how no-code can be used to build scalable, fast & reliable applications from scratch. This is the journey to show, that more than 80% MVPs should not take more than 4 weeks to get done!

Feel free to contact me if you have any question. I hope, that we will be able to meet in person one day and talk one day! ;-)