Building Your First Bubble App – The Planning Phase

In the previous chapters, you learned the foundation of Bubble components and the editor. Now, it is time to talk about planning. It might sound counterintuitive to not continue learning about the tool itself, but trust me – knowing how to use the tool is important, but knowing what to build is also very important. In this chapter, you are going to learn how to prepare and plan to build your no-code application so that when you’re building it, you know exactly what to do. This approach will help you avoid getting lost inside the editor and building things that are not necessary initially, at the early stages of your project, reducing complexity and your chances of getting stuck.

In this chapter, we’ll cover the following topics:

• Identifying and defining your target user
• Defining the problem you are going to solve (project goals)
• Outlining the desired functionalities (app structure)
...

Identifying and defining your target user

Before building anything inside Bubble, you should think, who am I building this for? A common mistake most people make is to build something first and then try to find someone to use it. Most of the time, it leads to building things no one wants. If not, it leads to building something that doesn’t solve a problem – something that doesn’t add real value to the users. That is a terrible thing. Imagine that you spent time building something and then discovered that it is useless or that no one wants to use it. This isn’t nice, but it happens all the time. And trust me, people sometimes lose years building the wrong thing and also spend a lot of money during this process. So, avoid that at all costs.

How can you avoid that? Simply by thinking and planning your project before jumping into building things. The building part is fun; planning might not be, but it is important. If you want to succeed, planning is the...

Defining the problem you are going to solve

Knowing who the user you are building for is important, but knowing the problem you are solving for this user is equally important – after all, people will use your software to get something done. And do you know what that is and how to make that happen? The whole reason why you are building this is to provide a better alternative – a better way to solve a problem – that people are solving differently and that you can help them make better, faster, and maybe cheaper with the correct software. Finding the problem involves a meticulous process of identifying a specific issue or challenge that a target audience faces and building a product/solution that helps them achieve their goal. This step is crucial because it lays the foundation for your product or service. If you build a product that doesn’t help or solve the problem, people won’t use it.

Defining the user and the problem not only guides your development...

Outlining desired functionalities

Now that you have your users in mind and a clear problem statement, your goal is to think of a product that can turn your problem into a solution. How will you solve that problem? Make sure the features, actions, and activities can be performed while your software is used to connect with the needs your users have. In other words, make sure your app solves the problem at hand.

Sometimes, a problem you want to solve will be too big. A good idea here is to break that problem down into smaller pieces. Which part of that problem is the most painful? Don’t try to tackle the whole thing at once; remember, you want to build fast and avoid complexity at first, especially if you are learning.

Write down the main features you will need to build, describe how this application would work, sketch a bit, and brainstorm. The idea is to find a way to solve the problem for that user using the software, using Bubble, using a no-code tool.

Make a list...

Sketching your page structure

There are two things you need to know before building any project – what pages you are going to have, which is done via a sitemap, and what exactly you will display inside these pages, which is done via a wireframe or layout structure. Let’s take a closer look:

1. Start by listing all the pages you think you are going to need. They can be for your website but also your software application, such as a dashboard or a page to edit user information (my profile), log in, sign up, and more.
2. Once you have a list of all the pages, you can start defining what each page will look like. There are various methods you can use to achieve that. One is to draw on a piece of paper and another would be using design tools and drawing a wireframe of that page.

   Here’s an example of a wireframe:

Figure 4.1: Wireframe example

You can also choose to not draw anything and just make a few notes about the page structure...

Planning your data structure

If workflows are the brain of your application, then the database is the heart. Planning the database can make or break your application – you don’t want to build the wrong database structure and discover that too late. It is OK to fail, but planning can help reduce errors. To plan your database, you can use specific tools created for that, such as LucidChart, or you can use pen and paper, Google spreadsheets, or tools such as Miro. It doesn’t matter how complex or professional your database plan looks, so long as the structure makes sense. Now, databases are a complex area when using no-code tools since they come from the development world, and you are probably not going to be a database expert or become one overnight. Databases can become complex easily, so don’t put too much pressure on yourself, especially at the beginning.

Before building your app, just try to write down what types of data you are going to store and how...

Defining third-party services

As mentioned in previous chapters, you can add plugins to your Bubble project to extend its capabilities and add extra resources to your application. Before starting your project, you can plan what plugins and extra resources you are thinking about using. This list can help you picture if you are going to use too many external resources and how much they will potentially cost. It will also give you an idea of how dependent your application will be on third-party services.

It is very good to be able to use plugins and external resources inside Bubble, and it is very nice that they allow us to use this feature. However, it is important to not add too many plugins to your project so that your application doesn’t run slowly or even be less dependent on external resources that you can’t control. I do recommend using plugins, but I also recommend not using too many if possible. That’s why making a list of the external resources you are...

Summary

In this chapter, we explained the importance of planning and defining your project before building while considering your users and the problem you are trying to solve. This will help you avoid building the wrong thing and wasting your precious time.

We also explained how to map your app’s features, define main user flows and pages, and create wireframes. Here, we provided tips on how to decide which plugins you are going to use to avoid making your application too slow.

Everything we’ve covered serves as an important guide to help you during the next steps, which will be primarily made inside the no-code tool.

Now that you know how to plan before building, in the next chapter, you will learn more about how Bubble works to create amazing designs, as well as how to work with styles and layouts. If you’re a designer like me, you’re going to like it!