How to design and publish an app without a single line of code
I’m a User Experience Designer. And yes, I design apps and websites. But when I tell this to people, they often confuse me with a front-end developer who designs websites by writing codes.
Well, coding is not my cup of tea. I’ve given it a try and chose to pursue UX Design instead. So I know nothing of the code. I’ve worked on several projects, including website designs and app designs.
But every UX Project ends with the designer handing over the work to a developer to translate those designs to a real app/website.
That’s how I did all my projects until now.
I dedicated the month of September 2021 to create an application. Research, Design, Publish — do everything all without writing a single line of code. I’m going to tell you exactly how I did it in this article.
The Design Process
The project was a Product Design. The product is an application.
People find it hard to find cause-based charities. I’m making it easy for them through this application. It allows users to explore cause-based charities and donate to them.
I followed the Design Thinking Process to Design this app.
It’s a 5-step process that is all about solving problems for the users. It’s a user-centric, solution-oriented, dynamic process that starts with defining the problem, brainstorming and ideating solutions, creating a prototype and testing it with real users, and iterating the design accordingly.
I’ve already written two articles on my process:
- My most powerful tools
Where I talk about how I start all my projects with my most powerful tools - How I take my designs from paper to prototype
Where I explain my design process in detail: what I do, How I do it and Why I do it.
This article is more about the part after I’ve finished my designs!
But before that, here’s the final prototype of the app -
Publishing the app with no-code
There are two parts to any website/app-
- Front end
- Back end
To understand this,
When you place an order on Amazon, what you see is the website/app, all the buttons, the pages, all the items listed out in an understandable manner.
But what you don’t see is what happens behind those easy-to-understand interfaces, those buttons and tabs.
Once you click the “Add to Cart” button, the back-end, or the computer sends a message to Amazon’s servers that you, a particular user, has demanded to add that particular seller’s particular product to his cart. Then the servers respond to it by collecting the relevant information from a database and executing the operation.
Then a message is sent again from those servers to your computer, that the product you demanded is added to your cart and would show up when you open your cart.
This is how all the websites and applications work.
I’m creating an application so I have to do something similar to this.
Usually, developers do this task by writing codes. But thankfully, I have Bravo Studio to help!
Bravo Studio
Bravo Studio is a no-code tool that allows you to publish your Figma design files to the app store (Both Apple and Google App Stores).
Here, you import your Figma files, name all the elements in your design according to Bravo guidelines.
That’s the Frontend and server part. You also need a database to store all the data your application has. For this, you need Airtable.
Airtable is basically an advanced version of Microsoft Excel or Google sheets. It allows integration with other applications using “APIs”.
If you’re new to the term, APIs are basically a company allowing other companies to hook into their system and integrate their application into the company’s. Airtable has an API key which you share with Bravo Studio and import all the relevant data.
Then you’d connect the front end design components with the back end, the data from Airtable.
To understand this, here’s an example from my app:
There’s a page in my app for a particular charity. This page lays down information about a charity. It contains the name of the charity, a picture, the charity’s website URL, a body of text with details about the charity and a link to charity’s donation page.
I’ve created this one page which I’ll use in laying out information for all different charities.
Let’s say I have data for 150 different charities. It makes no sense to design separate pages for each of them. Instead, I’ve designed a “Standard Charity Page” and entered all details in the Airtable spreadsheet.
Now simply, I have to connect all the dots. For example, I have to connect “Name of the charity” in Airtable to “Name of the Charity” in my design. This “connection” or “Binding” would tell the computer that whatever data there is in the “Name of the charity” field in Airtable, needs to be displayed at the “Name of the charity” part in my design.
I imported my design, built an Airtable database, and connected everything. Here’s a video walkthrough of how I built the database, connected the back end with the front end:
Publishing
Once you have connected all the back end to the front end elements, you’re ready to ship your design to the app store!
You have two options, and you can go both the ways!
- Google Play Store
- Apple iOS App Store
For Google Play Store, you’d need a Google Developer account, fill in all the details in your profile and in the application’s data (details such as intro about the app, and thumbnail images). Then, you’d submit the application as an APK file for the Google team to review and check whether you’re following all the guidelines and whether your app is running properly!
Google Play Store isn’t complicated. But Apple Store is.
You have a few additional steps here.
You’d still have to create a developer account “Apple Developer Account”, but additionally, you’d have to get certified by Apple, and that too, three-time, with three different certifications. This part of the process takes time, and your profile would get rejected, then you’d go back to Apple’s guidelines and check if there’s anything you’ve missed.
After collecting your three certificates, you submit the app to review.
Once your application is reviewed, it’s live and people can download it!
So, congratulations! Now you know how to publish an app without writing a single line of code.
If you’re interested in my project, get to know more about it here.
