Hackernoon logoHow I Built a Mobile App to Manage My Subscriptions Without Code by@sebionic

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

Author profile picture

@sebionicSebastian Hoffmann

Product Manager & Designer, Indie Maker

Do you know that feeling when you come up with a cool idea for a product?
But then you drop it since you either don't have the time to take it on or maybe you are not a coder.
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:
  1. It's costly, you need capital to get started
  2. 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
  3. 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!
It is now easier and cheaper than ever to build something on your own.
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.
In this article, I will show you how I created my own app without coding with no-code tools for less than $90/m.
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.

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...
I have subscribed to so many products and services, it's hard to keep track of my monthly spend.
Phone, Internet, Netflix, Spotify, Headspace, ... you name it.
I thought to myself, why not build a product where I can easily manage all my monthly contracts and subscriptions.
Even better: Get a reminder when it is time to cancel before auto-renewal, potentially saving you serious money.
I had the urge to build this, for multiple reasons.
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.
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).
I didn't even know if there was a market for this idea.
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.
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.

The Process

Structuring Thoughts and Tasks ๐Ÿ—’๏ธ

While fleshing out the concept for my idea, countless ideas went through my head.
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.

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.
What can you do within the app and how should it roughly look like?
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.
Check out the early mockup and flows for my app here.

Building a Front Page for Your Product ๐ŸŒ

It's important to validate an idea as early as possible.
In order to gauge interest, I created a simple landing page with Carrd.
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.
I created a simple form and integrated with MailChimp, so interested users can leave their email address and be informed when Memoly launches.

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:
  • 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.
You can use existing templates, for instance lists, and then adjust them to your liking.
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.
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.
Another thing that proved to be super useful was the preview function for early user feedback.
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.
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.
However, in order to offset my costs, I offer users the possibility to support my development efforts.
I integrated two ways of donating: Via Stripe credit card payment and Buy me a coffee.
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.

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.
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.

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.
For Memoly, I wanted to have one place where I can store user and contract data that serves as some sort of lean CRM.
I created 3 sheets in Airtable: Users, contracts and reminder contracts. Why? I will get to that in a bit.
Adalo offers integration with Zapier, my new favourite tool for all things automation.
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.
I created multiple Zaps when a user signs up or created a new contract.
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.
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.
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.
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".
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.
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.
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.
That's it! Ready for shipment ๐Ÿšข
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 ๐Ÿ™

Breaking Down the Tool Stack and Costs

Here are all the tools that I used to create Memoly including their costs.
  • 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

Quick Recap

From ideation to finishing Memoly, it took me roughly 10 weeks.
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.
The cool thing with no-code tools is, you can create simple MVPs in like a day and go from there
Update:
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!
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 ๐Ÿ™Œ๐Ÿผ

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!