How I Built a Mobile App to Manage My Subscriptions Without Code

2,736 reads

@ sebionic Sebastian Hoffmann Product Manager & Designer, Indie Maker

Do you know that feeling when you come up with a cool idea for a product?

reactions

But then you drop it since you either don't have the time to take it on or maybe you are not a coder.

reactions

How could you bring your idea to life quickly without spending a lot money?

You could hire someone to do it. But that sucks, mainly for 3 reasons:

reactions

It's costly, you need capital to get started Delayed product-market-fit validation. You need to follow the classic software development process: Define what you actually want, they need to understand your requirements, implement, test and then ship. You can only start doing actual user testing after they are done You are dependent on another party and cannot move as quickly in case your idea changes or an assumption has been proven wrong

Good news!

reactions

It is now easier and cheaper than ever to build something on your own.

reactions

You don't need a computer science degree or know how to code. Everyone can build and launch an MVP within a few days and start a business making revenue.

reactions

In this article, I will show you how I created my own app without coding with no-code tools for less than $90/m.

reactions

If you like to learn more, I created a hands-on course that shows you how to build your own website, prototype and app without code.

reactions

How It Started

Earlier this year, I mixed up the notice period for my mobile phone contract. It got automatically renewed for another 12 months, even though I wanted to sign up for a cheaper provider. Annoying...

reactions

I have subscribed to so many products and services, it's hard to keep track of my monthly spend.

reactions

Phone, Internet, Netflix, Spotify, Headspace, ... you name it.

reactions

I thought to myself, why not build a product where I can easily manage all my monthly contracts and subscriptions.

reactions

Even better: Get a reminder when it is time to cancel before auto-renewal, potentially saving you serious money.

reactions

I had the urge to build this, for multiple reasons.

reactions

I wanted to create something on my own, learn a lot in the process, adding another product to my portfolio and potentially making some revenue with it someday.

reactions

Originally, I studied a mix of business and CS and developed websites as a freelancer on the side. I also created app designs but never coded one. It would've been a serious investment in time to learn those skills (even though there are new cool things like SwiftUI).

reactions

I didn't even know if there was a market for this idea.

reactions

Would other people find this useful?

Since the no-code movement has been growing strong, I decided to try and see whether existing tools out there would be a viable angle. I played around with all suitable tools on this list and ended up with Adalo, which proved to be most suitable for my needs.

reactions

It took me roughly 10 weeks to design and create my product, working an average of 10 hours a week on it as my passion side project next to my full-time job as a Product Manager.

reactions

The Process

Structuring Thoughts and Tasks 🗒️

While fleshing out the concept for my idea, countless ideas went through my head.

reactions

I had to structure my thoughts prioritize them somehow.

I decided to use Notion as my task management tool since I have already been using personally and it has a pretty cool Kanban-style template for tasks.

reactions

Visualizing the Idea 🎨

Sketching things out gets my creative juices flowing and helps me to conceptualize my ideas. This is why I started drawing wireframes by hand into my notebook.

reactions

What can you do within the app and how should it roughly look like?

reactions

After my paper sketches, I created digital wireframes. I used Figma, which is my new favorite tool for creating mockups and even hi-fi prototypes.

reactions

Check out the early mockup and flows for my app here.

reactions

Building a Front Page for Your Product 🌍

It's important to validate an idea as early as possible.

reactions

In order to gauge interest, I created a simple landing page with Carrd.

reactions

It takes less than an hour to signup, create a page, edit it to your liking and publish it.

You can also integrate with mailing tools directly to let user sign up to your mailing list.

reactions

I created a simple form and integrated with MailChimp, so interested users can leave their email address and be informed when Memoly launches.

reactions

Creating the App 🔧

After playing around with no-code tools like Glide and Bubble, I went with Adalo since it fulfilled my needs for an app the most:

reactions

Web and mobile app (iOS and Android)

Quick to get up to speed

Good selection of templates and screens

Decent level of flexibility & customization

You can create your own database tables

Zapier integration for automation

Mixpanel integration for analytics

Stripe integration for payments

Very responsive and helpful support

I found it easy to get up to speed quickly, not much explaining needed. I created several screens and linked them, e.g. Welcome screen to Sign Up to Home Screen.

reactions

You can use existing templates, for instance lists, and then adjust them to your liking.

reactions

This gave me a certain degree of customization and individualism which I really liked

You can also create your own database tables, create connections between them like proper relational databases and import data via a CSV file. This helped me a lot with a currency issue.

reactions

I downloaded a list of all countries and their respective currencies from a Github repo and populated my table. When a user signs up and chooses their country, the app then automatically selects the corresponding currency and shows it on the dashboard.

reactions

Another thing that proved to be super useful was the preview function for early user feedback.

reactions

At any time, you can create a link to your project and share it with someone. Users can open the link in the mobile browser and test the app directly.

reactions

I used the preview a lot with friends and colleagues to validate assumptions and test ideas quickly

Enabling Payment 💸

I decided to offer Memoly for free for now, so there was no need for me to enable subscription payment by Stripe or charge via the app store.

reactions

However, in order to offset my costs, I offer users the possibility to support my development efforts.

reactions

I integrated two ways of donating: Via Stripe credit card payment and Buy me a coffee.

reactions

While Stripe is already well integrated within Adalo, I created an in-app link for Buy me a coffee that redirects to my profile there.

reactions

Integrating Analytics

In Adalo, I simply entered my Mixpanel token that I created before by signing up. After that, data is being transferred automatically to Mixpanel for analytics purposes.

reactions

From there, you can run pretty cool user funnel and cohort analyses

It helps you to understand how users interact with your app, when they drop off and how they are coming back.

reactions

reactions

Setting Up CRM & Automation ⚙️

At my last company, I introduced Airtable to the team for product planning and analytics and I became a huge fan of the possibilities of this tool.

reactions

For Memoly, I wanted to have one place where I can store user and contract data that serves as some sort of lean CRM.

reactions

I created 3 sheets in Airtable: Users, contracts and reminder contracts. Why? I will get to that in a bit.

reactions

Adalo offers integration with Zapier, my new favourite tool for all things automation.

reactions

With Zapier, you can integrate with an array of other tools to do all kinds of fun stuff

It is super easy to set up a Zap, which means automated process. No code required, but you can add Javascript or Python code snippets if you prefer that.

reactions

I created multiple Zaps when a user signs up or created a new contract.

reactions

Drilling one level down, it looks like this. This Zap runs when a new user registers or creates a contract. That way I can have the latest data in my CRM and run reports on it.

reactions

One challenge that I ran into was the process of sending an email to users automatically, on the day they set up the reminder. There are many ways to go about this, but most of them did not work the way I wanted it to work.

reactions

I ended up with this solution: When a user created a contract with a reminder, ran some date calculations in Zapier and transferred it into Airtable.

reactions

In Airtable, I created a column called due date, that checks whether the reminder date is today. If that is the case, that entry goes into a new view called "Due".

reactions

If that view has a new entry, send a reminder email to the user. New view elements can be used as a trigger in Zapier.

reactions

You can send emails directly out of Zapier with a Zap called SMTP. Works like a charm :)

Bringing the App to Market 🚀

Launching the app is pretty straightforward. In Adalo you simply choose where you want to publish your app to.

reactions

You can publish for iOS on the Apple App Store, for Android on the Google App Store, for the Web, or all of them!

Before I was able to launch, I needed to create an Apple developer program account, the same goes for Android and Google.

reactions

That's it! Ready for shipment 🚢

reactions

Memoly is currently in closed beta and will launch soon. I encourage you to check it out here or become a free forever user by putting your name on the early user list 🙏

reactions

Breaking Down the Tool Stack and Costs

Here are all the tools that I used to create Memoly including their costs.

reactions

Adalo: $50/m

Airtable: free tier

Apple Dev program: $100/y

Carrd: $9/y

Domain & Email (Porkbun): $37/y

Figma: free tier

Google Store account: $25

Mailchimp: free tier

Notion: $5/m

Zapier: $20/m

Total: ~$90 per month + $25 one-off

reactions

Quick Recap

From ideation to finishing Memoly, it took me roughly 10 weeks.

reactions

I have been working on it in the evening hours and on weekends next to my full-time job. Also counting in the time I spent on graphic design for the logo and other marketing material.

reactions

The cool thing with no-code tools is, you can create simple MVPs in like a day and go from there

Update:

reactions

I'm proud to introduce my first ever course on Udemy. It's a detailed, in-depth video tutorial covering all the steps above and more. Feel free to check it out!

reactions

If you have any question regarding my process or related to no-code in general, do reach out anytime! I really hope you were able to take away something from his article 🙌🏼

reactions

Share this story @ sebionic Sebastian Hoffmann Read my stories Product Manager & Designer, Indie Maker

Tags