Maximizing efficiency: Testing no-code solutions in healthcare apps

About Bubble

Bubble is one of the most popular no-coding platforms. With its help, you can make websites, e-commerce and booking projects, and web-based applications.

What types of projects is this recommended for?

Based on this functionality scope, it’s suitable for small and medium web-based projects and for the prototyping/testing phase. If you need any of these, Bubble offers a wide range of functionality for:

• Testing your product visually and functionally
• Making your pilot project simple (for publishing or A/B testing)
• Building your website, e-commerce site, or responsive pages with general functionality

If you have a larger or more unique project, you will need more functionality and custom flows, which Bubble does not offer. This is not the editor’s fault; these steps can’t be covered with these type of tools on the market. A more serious setup requires planning, testing, and designing, which demands professional expertise.

However, using only the basic/pre-configured functions, you can build your project easily within an online drag-and-drop editor. If you envisioned something more, you could still use Bubble, but there’s a chance you’ll need a hand with designing, developing, and integrating some functions. 

Psst! If you need any help with just that, or you have a larger/unique project…

Functions

Bubble is available for free with basic technical parameters (in this case, some themes and functionalities are unavailable, you can’t have monthly plugin subscriptions and you cannot use your site with your own domain), and it has a Pro version with a monthly fee.

Themes

This no-coding tool offers a variety of themes based on different segments (landing, booking, e-commerce, and portfolio sites, and more). Some of them are free, and some of them are not.

Plugins

Bubble has a huge plugin-library in different areas:

• Visual elements: here you can find blocks that you can see visually within your app or web project.
• Containers: you can find all the grouping elements for segmenting and blocks for designing and developing.
• Forms and functional elements: the input forms segment.
• Reusable elements: you can make a mutation from any pre-configured block and use it with certain rules within your project.
• Element templates: your element configuration page.

Some plugins are available for free, while others require a Pro subscription. Bubble.io has a vast gallery of plugins. The plugins are easy to install and very fast at the same time. But be careful: some plugins have a long history and excellent support, and some of them don’t. These plugin versions can cause issues within your Bubble project.

Integrations

You can integrate some 3rd party applications and your own code within the Bubble ecosystem. These extensions can give you a much larger scope of functionality and they need more developer knowledge.

We made a test project!

To test the tool and the solution offered by Bubble, we created a fictional web project with the aim of listing doctors. We made a login and welcome screen, a list view, and a profile page. Because we were interested in how we could build our own project outside of Bubble’s templates, we made these screens in Figma.

The preparation

We started by creating a concept for our test app:

• We made a small market research about the competition
• We planned the user flow for the usage
• We made the UI screens within Figma

The concept

We made an imaginary doctor-calling and booking telehealth app with basic – and not complete – functionality. We called it “Dr. Bubble” and created a small visual identity for it with a little bit of branding. After this, we built some screens for implementation.

The Figma file

We made a Figma file with these screens and a small component library for them. We included the buttons, input fields and repeating graphic elements (logo, background, etc.).

Deep dive into the Bubble

Okay, let’s start building our own app! Bubble can be familiar to those who have previously used a block-builder solution, such as Elementor for WordPress, Wix, or another coding-free service. You’d need a bit of time to learn Bubble’s interface if you don’t have any experience with block editors since it offers more segments and separate functionality.

All functions and customizations are easily accessible and transparent. The editor has four different segments:

1. The visual editor: here, you can build and edit your project’s UI and elements
2. The workflow editor: this is where you can add functionality for your elements and create your user-flows
3. The data: you can edit your app’s database contents
4. Styles: here you can configure the elements and the project’s basic styles.

After this, you can find the customization menus, like:

• Plugins: here you can find your installed plugins and you can configure or uninstall them
• Settings: here you can edit your project’s and Bubble.io plan’s settings
• Logs: here you can find your app’s logs

Bubble has some pretty cool basic features, like Figma import. This way, you can easily import your Figma file into your project, and you won’t have to paste the images and layouts manually (we want to test the user flow from the basics: that’s why we built our app from scratch).

To start, you can choose a prebuilt theme or create your own with the available plugins.

Let’s start building!

Within our test project, we made these screens and functionalities:

The goal is to see how Bubble works with a standard flow and functionality. This project begins with an empty sheet of paper, without a template. We built our own Figma screens and flow.

The editing

We made the frame quickly within Bubble, as it doesn’t need any complex knowledge (a little bit of history with block-builders can help). In the function aspect, it requires more profound experience, but we don’t need any specific developer knowledge if we don’t have any custom functionality. The editor needs a bit of a learning time until we get entirely comfortable with it.

In our test project, we use commonly used screen types and functionality. We try out various aspects of the building to see how it works if we have more than the basics. We need more design or development knowledge to have more complex filtering or designing.

Bubble is an object-based editor. So users can create two types of screens and elements:

1. The user-specific screens: These are the screens that users view, like the login page and list page
2. And the reusable elements: You can use these elements on more screens. You can include it on any page and edit it within the main screen, like the header or the footer
   

For this reason, you can create workflows and styles, especially for different objects.

If you have used other block-builder-based editors, that’s the point when Bubble is slightly different, because it doesn’t support custom global settings (outside the basics), like a global CSS stylesheet. You cannot edit your entire project with custom CSS, but you can create different stylesheets for different objects.

However, it doesn’t take much time to shift to this way of thinking. And after that, we can build easily!

The flow editor

After this, we edited our flows for these functions (like login, signup, and filter). The flow creation process is very clear and fast. Start with the object (for example, a button) or the flow (what you want to accomplish) according to the type of functionality (like object-based functionality), or a complex flow based on the user’s habits, data, or the current page’s fields.

You can also add conditionals for any elements like hover effects, visibility based on data or search results, and much more. It is straightforward to understand any type of flow and conditional editing.

The database

If you have to store and use data, like user or content data, you must set up a database for this. First, you will need to create a database part (for example, contents), and then you can create fields within this (such as Title, Description, Image, etc.). You can collect static data like a text field, image, multiple data, and any other database-segment info (in this case, you can choose the segment, and that’s all, the database collects the elements’ unique IDs, and it’s ready to use).

So, database setup and editing are clear, just like the flow editor. You don’t need any development knowledge for these, maybe some editing experience.

Based on this, this flow is obvious and easy to use but has limits: you can only access the database structure within this flow. That’s one of the reasons why Bubble.io is simple to use and has limitations for larger projects.

You can create a database flow within Bubble’s Backend flow-editor, same like the user flows.

Design system and settings

You can create a base design library for your project. You can define the base colors for status, fonts, and the element base styles (forms, buttons, blocks). You can create brand-new pre-defined styles for these elements and colors. That works well, but unfortunately, that’s all. We have a similar problem to what we have with our database. It’s very clear and easy to use, but it has limitations. You can’t build a large scope with unique design or use any different types of block-method logic. 

Bubble’s main benefit is that you can build a website quickly, and that’s why it’s so popular. 

It’s a Swiss Army Knife for general user-flow-based websites.

The result

Overall, the editor works well, and we can implement our concept using these capabilities. All functionality was found and all screens and elements could be created. The results are the same as what we expected (however, we didn’t design our test project with high expectations about functionality).

If we have to continue to build our Dr. Bubble project, it makes a great test. Now we have a real, functional test app and can already send it to users to test. Our basic functionality can be accessed by registering and logging in. The pilot-project testing aspect works well within Bubble.

Here you can view the Figma prototype and the Bubble.io test page:

The entire project with branding, Figma screens and Bubble development made by bene : studio, illustrations made by upklyak (Freepik)

Is Bubble suitable for my project? 

Finally, that’s the real question. When do you need Bubble? To find an answer, watch these segments a bit closer.

If you care about your project’s flow, concept, or usability, Bubble is a handy tool for you. You can create and set up your app quite easily and test it on the air. Based on your user’s usability feedback, you can update it and test your flows in real time. In case you don’t have long-term goals with your app, it works perfectly.

Bubble is a great tool too if you have a smaller or medium-sized web or e-commerce project. You can set up and edit your projects easily, and Bubble has enough capacity for daily visitors.

So, Bubble it’s ideal for:

• Startup and pilot projects for testing
• Smaller or middle e-commerce projects and websites

If you start to build your project based on a theme, you have to make some compromises based on the selected theme’s functionality and style guide. If you made a concept and prototype earlier for your project, it’s all a bit more flexible. But only if you have more knowledge of block-building and time to do it.

If you have questions, Bubble has a support site with an active community, so you can find or ask your questions easily. To start editing within Bubble, decide whether you want a short-term or long-term project. Bubble is ideal for short-term apps or testing and long-term small or medium-sized projects.

Please do not hesitate to contact us if you need any help with your Bubble project or afterward!