Low-code for designers
Empowering designers and non-developers to get dirty (in a good way).
Working in the actual medium
Over the past few years, I’ve been looking for something that allows designers (and other non-developer stakeholders) to take an application idea from idea to design to implementation in the actual medium (HTML/CSS /JS) without necessarily needing to train team members on how to code. I also wanted to do more usability testing leveraging real data and form field interactions. I’ve found a number of solutions but I’ve been hearing more and more about the low-code / no-code movement for a while.
Why is Low-Code or No-Code becoming more prominent?
Recently, it’s been gradually gaining momentum because of a combination of factors which are:
- The perceived shortage of qualified developers and/or the developer expense involved
- The rise of cloud computing makes sharing pools of data easier (theoretically)
- The standardization of many common design patterns and components which make a “lego-like” method of assembling elements and logic easier to implement.
Much of it is being applied in an internal business application context but I got to thinking about how it might be leveraged to help the design prototyping process or perhaps even generate actual initial MVPs before market fit was determined and large amounts of developer resources were brought in.
Should designers code?
There’s a lot of talk about how designers need to learn to code. Even though I do it myself, I recognize that these are two separate disciplines. There’s definitely a different mentality when designing as opposed to developing but it’s helpful to know how to code or understand the fundamentals so you can better communicate with the dev team over problematic designs. As a designer though, I think asking designers to code misses the point. The point is the creation of the end product. Right now, we’re often stuck in the role of Guide as opposed to Creator. The real question is how can designers directly contribute more to the end product if it’s needed. The “nitty gritty” if you will. Not everything, but more. This isn’t to say it’s always necessary but I think it’s good to have the option.
There’s definitely a different mentality when designing as opposed to developing
It’s about the final result
Some people might start to get their hackles up at this point. I’m not saying that designing mockups, task flows, IA, and illustrations aren’t an Act of Creation or not important. I’m saying that the more we can be directly involved in the final result, the more accurate it can be. We’ll need to be less reliant on developer interpretation of our design and more empowered to flesh out those designs or, at the very least, have the option to do so.
What platforms are there?
Some form of low-code / no-code has always been around, for example, Visual Basic and later frameworks like Scratch, which was developed by MIT so kids could learn to code. Now, there are literally hundreds of services offering to help you create apps with little to no code.
This is distinct from the hundreds more that let you create websites without any coding such as Webflow, SquareSpace, Wix, etc. Today though, I’m going to only be focusing on services that allow for some form of “logic” to be applied as opposed to those that are essentially just Content Management Systems (CMS).
Not all apps are really “apps”
There can be some amount of overlap in this area as well. Some “app generators” are technically apps in that they can be customized a bit and downloaded in a standalone format from the Apple and Google app stores. For example, an app that shows off your restaurant displays a map, has a contact page, Twitter feed, branding, and allows customers to make reservations. However, this is more of a marketing site in an app format since you really can’t integrate any conditional logic yourself. I wouldn’t consider them to be actual applications, although the backends that power them certainly are.
Major enterprise platforms
A few of the major players in the true low-code/no-code space are (let’s just say low-code from now on since I’m getting tired of typing out the slashes + hyphens and because very few platforms are actually completely no-code in reality). Here are some of them with my superficial opinions (YMMV):
- Microsoft’s Power Apps — Great if you are in the MS ecosystem. Hard to globally style.
- Appian — Super enterprisey
- AppSheet — Recently purchased by Google. UI is a bit weird. Replaced AppMaker
- Mendix — looks interesting. But didn’t get to try.
- Zoho Creator — Good for ingesting info from forms or external sources and some decent templates. They have their own language you need to learn to really extend it.
- Sales Force Lightning — Probably great if you’re in the SalesForce ecosystem.
- Betty Blocks — Demo only and pricing…ouch! Looks like it might be good though.
More consumer-oriented platforms
Even though you might use these also in enterprise and vice versa for the above list, on the more general, consumer-based side there’s:
- AppGyver — very cool and established but a bit confusing
- Build Fire — Looks promising but pricing and custom dev upsell made me wary
- Wappler — More of an editor and it helps a lot if you have some development background. Looks interesting though!
- Airtable — They’ve recently gotten into the game and might be a promising candidate
- Bubble — Mature product, drag and drop visuals, decent pricing with a free tier and real conditional logic.
There is a slew of others and I did a superficial review of lots of them that didn’t require you to contact them for a demo.
Data digestion machines
The major player enterprise-oriented platforms are very geared towards grabbing existing information resources, building an app (really a form) around that structured data and/or having you build a form that feeds into one or more databases and then generates some charts and analytics. They generally have some kind of Excel-like logic you can apply to sort, filter and sort that data. It’s pretty much a spreadsheet generator/viewer and analyzer. Most of them also have lots of ways to extend logic and functionality to manage business processes.
I think this is probably fine for the vast majority of business use cases but in truth, I didn’t find any of the UI very inspiring and the standard practice of per seat usage (per user not just per creator seat) was pretty off-putting. Plus, you don’t really feel like you’re making an app, more a data ingestion service.
Get in the Bubble
Then there’s Bubble.io
Disclaimer: I am in no way affiliated with Bubble.
As a designer, I really felt a bit of a “holy grail” moment when I tried it out. This isn’t to say it doesn’t have its warts. It definitely does. More on that later. But for what it is, I really do feel that it’s what people have in mind when they think of a low code app creation tool.
Bubble’s advantages were pretty much what I was expecting from an App Design tool.
Visual Design
I can drag, resize, style, and set my grids, fonts, etc. All the standard things that are in most design tools. The UI is a little dated but I suspect it’s because it’s a mature product that’s been ongoing for about ten years. That said, it’s fully featured which is what counts in my book. It even implements Responsive design, albeit a little awkwardly. I understand both the UI and the Responsive approach are supposed to be refreshed in the near future (I’m writing this as of version 10).
They also have a Beta feature to import Figma files into Bubble. It also allows for element animations with a degree of customization.
Data
Although Bubble is able to grab data from a variety of standard resources like external databases and APIs, it has its own native database which makes things most straightforward when trying it out and its drag and drop components give you a lot more flexibility than the other platforms and you can feed that data to almost any component in your app. They have a great “repeater” tool similar to Adobe XD’s repeater. This is great to define a list of data, think table rows, and repeat data grabbed from the database in the same format. Except you could use the card design pattern instead or anything else that uses the same pattern over and over.
Logic and real interaction
Most importantly, you can add logic to any of the components placed on a page. Actions and logic are added in a Workflow section and lots of functionality like registration features and sending emails is part of the default toolbox. If anyone has used Axure, it’s a lot like that. You pick and choose from some choices based on the context. Frankly, I found Axure’s approach a bit better but here you’re creating a real web app!
As a side note, it’s possible to generate “hybrid” native apps as well for the app stores but that’s a bit complicated. I won’t speak to that since I have no experience in that area.
Plug ins galore
It also has both free and paid plugins from Bubble and third parties that allow you to extend functionality (I understand that it’s based on a React frontend and AWS resources) or you can make your own if you want to code or have someone who can. It’s a lot like Wordpress in that way. Just like Wordpress though, support can be an issue for free plug-ins, “installer beware!”. Too many client-facing plug-ins like slideshows, special social media feeds, etc. might bog down your app as well.
Great Documentation
Last but not least, they have really extensive, clear tutorials and documentation. Many of these are interactive walkthroughs and videos. Help instructions are given contextually in the app and available via third party workshops. It usually takes about a week or two to get familiar with the basics on your own. If you’re on the higher payment tiers, there’s direct support from Bubble. There’s also a very active forum community and one of the founders participates regularly. He’s very open, friendly and reasonable even in the face of occasional criticism which speaks well for the company.
Decent Pricing
Speaking of payment tiers, as of this writing, basic “hobby” apps are free with unlimited users and one creator. This is perfect for app or quick small feature prototyping. Apps with more features like data export, white label, and email support are $59 per month / $49 annually on the tier. They recently doubled the price which I’m a little miffed about. (Update: So, I recently rechecked and I’m now seeing half that much but that could be because I’m a current user. New user prices might be as I detailed before.) While this may seem expensive, the price of an actual dev team is still far, far more. If you’re getting paid for the work, it’s perhaps an additional expense but justifiable. As I said, only the creator seats are limited by tier not by number of users. They also have a flat rate agency tier at $71 per designer, which allows you to create apps for clients with full features and then transfer the app and its associated cost to the client when it’s ready.
Now we get to the part of the discussion where I said I’d speak to some of Bubble’s potential disadvantages.
It’s easy to get stuck in a bog of your own making
Just because you’re not coding doesn’t mean you’re not programming. You’ll be building basic interaction via selection choices as opposed to typing things out.
For example, when this login button is clicked show the “Text Logged In” and update the database field “Logged In” to True.
Things can get complex very quickly and it does require a bit of switch in mentality. While you could theoretically do all your designing in Bubble, I do think it’s best to first do initial work in less production oriented tools such as pencil and paper, Sketch, Figma or Adobe XD. Get the basics and overall approach down and then begin to translate it if necessary.
It’s very easy to get bogged down in the details of implementation and lose sight of the actual goal. I speak from experience, lol. With that said, the devil is often in the details. If you’re using this as a means to think through and communicate more complex interactions like forms heavy applications in Customer Service, Financial modeling and so forth, using Bubble can get you much farther than using click thru mockup tools like Figma and Sketch. It can also make the app vision much clearer as well for dev teams once the design is ready for handoff or collaboration. Be very careful though when you find yourself getting too crazy and “into the weeds”. Take a step back to ask if there might be an easier way to prototype this feature. For those who have worked with Axure and its Dynamic Panels, you’ll know what I mean.
If the plan is to build a full MVP though, that’s another matter. Still, trying to err on the side of simplicity is always best.
You may be doing database design
If you have a dev team, nothing says you can’t involve them in the conversation as well or get them to contribute to the design like figuring out database structures in Bubble which can get gnarly. Understanding Bubble’s concept of a database Thing is pretty obtuse at first and I’m not sure I still completely get it. Database design and permissions are also something that can be hard for many designers to wrap their head around.
This dev conversation/help might wind up informing the final dev project though. It has a decent debugger, but interpreting the messages takes a little practice. Making changes across the “codebase” and managing side effects from code changes can also be extremely challenging over time.
Things can get sloooowww
In addition, because Bubble can be customized so much, it may be very performance intensive and has a tendency to load slowly. I understand from the forums that it has a tough time scaling up depending on which tier you’re on. This is similar to traditional hosting in terms of shared vs dedicated hosting because a mixture of people are sharing resources on a server at any given time.
Even on the highest tier, you may run into issues or because you’re not coding directly or didn’t follow best practices, so there might also be slow downs.
Bubble has published a document outlining best practices for performance and they’re always trying to improve but they admit it’s a steep hill to climb. If you’re just using it for design prototyping this shouldn’t be a huge issue. A real MVP is different though.
Make a transition plan
You don’t have to use it but plan for it.
Given the above challenges, in particular with potential maintenance, performance and scaling issues when using it as an MVP, make sure to document and plan for an eventual transition to a developer team based approach using another framework like React, Angular, Vue or Svelte , Laravel, or Rails and backend services. This means good documentation (Bubble allows you to add notes internally to all elements), plus good naming conventions for elements and actions. If you work with an existing dev team, it’s best to get their input on a regular basis so you’re prepared to rebuild when market fit or more investment is found.
Add low-code to your skillset
From a design standpoint, it can be a great prototyping and usability testing tool and even serve as a decent MVP to help clients get market fit or investment for further efforts and scaling. It’s important to set expectations in the latter case.
It may even be good enough for smaller-scale internal enterprise apps. Like it or not, clients and other stakeholders are going to be looking at low-code tools to get the job done. Being ready to talk about the advantages and disadvantages of low-code vs custom design/development will be necessary as well. Good UX still takes research, experience, thought and design skills. We can be in competition with low-code or we can be in partnership with the approach.
When all is said and done, I think Bubble vastly speeds up design iteration and development. I really feel empowered as a designer when I use it. I hope you feel empowered too and I recommend at least giving it and other low-code tools a whirl!
