Bubble User Stories: From Excel to Excellent

Adam Frey’s username in the Bubble forums is HVAC_designer; his job with Design HVAC Experts is designing heat-loss. He’s the guy who calculates how well your house can maintain its temperature in order to figure out how big your Heating, Ventilation, and Air Conditioning (HVAC) system should be.

He also designed and built a suite of more than 10 complex, integrated software systems to streamline business operations at Design Experts, and help the business move into new markets and find additional partners to expand their offerings. From invoicing to project management to data archives, Adam has built it all. Just one thing though:

Adam does not know how to write code.

To us, that’s pretty darn cool.

Why are we sharing this story?

At Codeless, we’ve used Bubble, a so-called “visual programming” tool to build our website and create software for our clients. Bubble’s user forums are vibrant; we’ve gotten a lot of help, made connections, and in the process learned of some fascinating stories like Adam’s. His story was so cool that I asked him to chat on the phone for a half hour one Friday and share some of the finer details. What follows is an explanation of what I learned about his creative process and accomplishments.

Design Experts, Canada

Design Experts operates a modest business based in Canada’s capital city of Ottawa. Their seven employees — three of whom are remote — do the design work related to HVAC systems for homes and buildings. Their clients are typically the HVAC installers, who use the designs to guide installation work or obtain building permits.

A handy user guide to walk employees through each of the software tools Adam built.

At its core, Design Experts is a service business. Simple. They complete projects and charge their clients an hourly rate. For the most part. Except when it’s one of a handful of items that has a specific set price. Oh, and they sometimes want to use subcontractors or affiliates for some projects, who have their own cost structure, but shouldn’t necessarily be privy to every project detail. Did I mention they’re also exploring whether to expand to new cities?

It’s a small company, but they have big ideas and exist in a very specific, technical, and regulated industry — oftentimes this is a recipe for complexity.

How it all started

Businesses change all the time, and Design Experts was no different. They wanted to expand their offering to include more affiliates, subcontractors, and designers, to do more varied and complex work. They wanted to be able to modify projects on the fly. Like every business, they wanted to make more money, but their processes weren’t nimble enough to support the changes that would help them grow.

At some point in the last year, Adam was asked to help rebuild the company website. He’d had a little bit of experience with pre-fabricated websites and templates that did a lot of the heavy lifting for you. But by no means would call himself a website-building expert. Re-building a website from scratch was an unforeseen job requirement, but a welcome one. Variety is the spice of life, as the saying goes, and Adam’s regular responsibility is calculating heat-loss. Building a website couldn’t be that bad, right?

The website turned into social media responsibilities, social media turned into managing technology tools in general, and next thing you know Adam Frey is the new “web guy” in charge of anything remotely related to software or technology. He still does heat-loss design, by the way. His next assignment? Figuring out a way to transition spreadsheet-based project management to something more sustainable and scalable — something that can change easily with a changing business.

Adam has no experience with coding or software development. He has not taken classes. He has not built products. He has not even tried to learn to code. But he felt he could help the company transition away from spreadsheets and to some web-based project management tool. What he lacks in development training, he more than makes up in curiosity and persistence. Or, as he put it:

“I started to just kind of figure things out on my own.”

The hunt for a better product

Before buying or building commercial software or web tools, we recommend first a thorough evaluation of your needs. Try to answer “what problem am I trying to solve?” before determining your solution. Adam did just that, but then ran into a problem: jargon.

Don’t try to migrate your lemon flutes all at once.

If you’ve ever tried to do anything with software, you know there’s an alphabet soup of acronyms and terms that would give any well-meaning newbie a headache. Should you use HTML5 or a native app? What do you want as your front-end framework? Do you want a SaaS tool? APIs? How about cloud? Cloud is good, right? More cloud, please.

Jargon is largely unavoidable when you’re thinking about building a web tool — and often when you’re thinking about buying one. Adam’s team spent about a month deciphering this new language. They learned that a native app is something you can download from the app store. They learned that a website allows viewers to consume content, but an application (nowadays referred to as an “app”) allows users to interact with that content in a logical way — and that applications can be on both desktop computers/laptops and mobile devices.

They also discovered codeless development tools. Whereas many firms offer to build something for you, some are now offering tools for you to build things yourself, without code. The same way that WordPress and Squarespace make website creation easy with drag-and-drop, plain-English templates, these newcomers make database creation and complex user flows easy with drop-and-drop, plain-English tools.

In the course of evaluating codeless options like Bubble, Appery, Mendix, and Configure.it, pay-someone-else-to-build firms like Outsystems, and half a dozen other development shops and web-based tools, Adam decided something crazy:

Because his business is small and has relatively specific needs, it would make the most sense to try to build something himself. Cost effectiveness was hugely important, and paying someone to do it would be prohibitively expensive. The business is specific enough that out-of-the-box solutions didn’t quite meet their needs. Let’s stop for a second here because this is remarkable:

A person with zero coding experience decided to build his own software because the tools evaluated were not only robust enough, but also cost effective enough to build without code.

At this point, one decision had been made: Adam knew they’d build their own tool. But there are a bevy of codeless build-it-yourself options, and they didn’t yet know which to use.

This isn’t Adam, but we assume he makes some good lookin’ drawings when he designs his software.

Learning by doing

Three options. Adam had whittled down the internet to a trifecta of what appeared to be the best codeless development options on the web: Outsystems, Configure.it, and Bubble. Each has a fairly substantial tutorial. Adam had a fair amount of experience using some of the more advanced Excel features and functions, and he was able to anchor upon this experience to better understand how each system worked conceptually.

Quickly, Bubble rose to the top because it was simple and easy.

“I just built the first page with a button and a list and got started from there. Bubble is really easy because there is no jargon.”

Choosing a codeless tool was only half the battle. More importantly, he needed to build something that would provide value to his team. In exploring Bubble, Adam discovered a calendar integration that would make it easy to log time in small increments on specific days. He may not have been able to build a calendar himself, but a ready-made integration? That could become a cornerstone for a much larger application.

“Once I found the calendar integration, I started with a timesheet app to start with and then expanded on the app from there.”

Timesheets are something many service businesses will be familiar with. If you charge your client for hourly labor, you need to accurately track that labor time. Same goes if you pay your employees hourly wage. On the surface, timesheet applications are simple tools: choose your day, press a button, type in how many hours you’ve worked.

Behind the scenes though, there’s a lot of action. Each data point you enter is logged into a database, likely into many separate tables. Hours worked. Clients to bill. Rates. Pay periods. Calculations. Some data, like number of hours, get input by the user; some, like date and pay period, are in the background; still others, like rates or paychecks, are calculated — sometimes on the spot.

Imagine you have an Excel file with multiple tabs. Each tab has very specific , different, and un-changeable header fields. Think of the timesheet application as depositing the proper information in the proper column in the proper tab in your file, and then running all the necessary calculations.

For Adam, this was no easy task.

“There was a learning curve for databases — I never took a class on this.”

But by trying things out, designing, redesigning, and designing again, he was able to come up with a solution that worked for Design Experts.

It took us more hours than it should have to write this post.

By starting with timesheets, Adam was able to experiment by building something that, if done right, would be useful to the company. If done wrong, it wasn’t a critical element that could derail the business. Perhaps even more importantly, it was complex enough that it allowed him to learn about the process of designing and building a software application.

And as he learned more, he discovered new capabilities.

Building it Codeless

What’s most amazing is the breadth and depth of tools that Adam was able to build without any code. An incomplete list, in no particular order:

  • timesheets
  • payroll
  • contact and equipment lists
  • customer relationship management
  • project management
  • internal chat
  • invoicing
  • accounts receivable
  • user permissions for subcontractors
  • data archives
  • a shortlink generator to point their business domain to things like public Dropbox files (http://go.designexperts.ca/summary)
  • a handy user guide that walks through all the various options

Oh, but there’s more. With various integrations and webhooks, Adam was able to extend the capabilities of his applications. That’s a fancy way of saying he connected what he built to commonly-used programs like Google Drive, Dropbox, and Intuit Quickbooks. This way, Design Experts teams can export project data to Excel, generate file paths which can be pasted into file explorer (or even a web browser) to find a file in Dropbox, or send data from the home-made software application to their finance team’s professional accounting program.

Impact

Design Experts are going to be able to make software applications for themselves until the end of time without having to hire a developer. They have a resident expert who is learning more every day — as their business changes, their tools can change. Everything is custom and tailor-made to the very specific needs of their growing seven-person firm. They’re not paying other people for crappy software that doesn’t do what they want it to do; they don’t have to wait in line on tech support calls listening to hold music.

Small businesses like Design HVAC Experts no longer have to waste money on software they don’t really want.

Management likes that they now have an in-house solution that is cost effective. Problems are fixed faster; the team likes that they don’t need to rely on some other company, and that custom features or improvements can happen fast (provided they’re possible and Adam can figure out how to do it).

The best part? Design Experts goals have been met. They now have the ability to bring on subcontractors and affiliates without fearing for privacy. Expanding to new territory is well within the realm of possibility. Business opportunities may present themselves to sell this software to similar firms. For a tool built by someone with no coding experience, this is pretty amazing.

What can you do?

Building a complex tool is possible, even if you don’t have coding experience or knowledge. What you do need is to be thoughtful and determined. Adam shares some insight:

“Start small. Set tangible goals. Do the research. Expose yourself to examples and tutorials. Put things on the shelf and think about it for a while. As you begin to learn, you’ll eventually see that what you want to achieve is possible.”
“At the end of the day, I’ve come up with something pretty complex — but I wouldn’t have known any of this complexity was even possible, or how to do it, when I started.”

You don’t need to take a coding class or pester that one coder friend of yours. You don’t even need to know Excel. Tools exist that enable all of us to make complex web applications, so long as we can figure out what it is we want to build in the first place. All you need is a little elbow grease and concentration, and even you can build something excellent.

This story was originally published at Codeless