In times of high demand for developers in start-up and enterprise industries, coding skills are worth their weight in gold.
The lack of access to this core competence becomes an obstacle for some companies, especially in the post-COVID-19 reality that forces businesses both online and offline to reinvent themselves or at least pivot.
At the same time, the inability to code turns out to be a business opportunity for others. It’s not a surprise to see a rising number of no-code applications that aim to support developers or even replace them.
But why not use this solution to get the prototyping phase to a higher level instead of creating an end-to-end product? In this article, we will learn how a designer can make use of no-code applications in the design process.
What is no-code for prototyping all about?
Low-code and no-code platforms appeared as a response to a lack of skilled developers on the market and an increasing need to solve problems quickly during the development process.
They are derived from Rapid Application Development (RAD) tools such as Excel, Microsoft Visual Studio, or Microsoft Access, which give a non-IT-professional user a range of features that touch on coding.
While the mentioned examples required at least some technical knowledge, low/no-code platforms go a step further. Although the line between low- and no-code is still vague and in low-code platforms, a user needs to understand some level of coding, the main goal of this solution is clear: limit the development activity (or developers’ involvement) and speed up the process by using the graphical user interface (GUI).
Potential users of such platforms, like developers, UX/UI designers, or graphic designers, can skip writing lines of code and use visual tools in the form of drag-and-drop components to quickly build a website or application.
As a result, to create a real digital product, one doesn’t even need to know how to code (hence the no-code term). However, no-code has its obvious limitations that raise questions about how effective these kinds of tools are, what their limitations are, and - most importantly - the instances when one simply can’t go about designing without the help of an experienced developer.
Choosing a no-code solution
There are currently a bunch of no-code tools at designers’ disposal that enable them to painlessly build digital products that are not just prototypes but have actual code so that they can be immediately implemented.
There's an enormous amount of platforms that compete with one another in offering more and more advanced solutions, from creating a newsletter (Mailchimp), a website (Webflow, Wix) to building an online shop (Shopify) or even complex web apps (Bubble).
The ease of accessing these platforms can vary. Some of them require additional applications and/or direct contact with the company about a potential collaboration. Nevertheless, many of them don’t require a start-up budget or big investment and can be used for free by a freelancer or a small business.
Overcoming the challenges of prototyping
So, why would a designer want to use no-code platforms? There are a few things that pose a challenge during the design process and user testing stage that no-co platforms could help to overcome.
Limitation of interactions in the prototyping tools
Some popular tools (e.g. Figma, Sketch, Adobe XD) do not allow to create complex interactions in the prototype. No-code platforms could help better reflect the desired interactions and provide new possibilities for imitating the experience of a real product.
Problems with accessing the prototype by participants
This one relates directly to remote user testing. Since the prototype is not a working app or website, it often looks bad on someone else’s computer/phone (consider multiple operating systems, browsers, or screen resolutions).
It may even crash sometimes, or it may require installing a plugin, which is not very convenient for people who are not tech-savvy. With no-code platforms, you could just send a link to the web app and you could be sure that it looks and works fine on all computers.
Ineffectiveness of the development process
Designers spend a lot of time on prototypes that need to be later on implemented on production by developers, which makes the whole process incredibly complex and time-consuming.
It’s not reasonable to expect the designer to code or the developer to design. But what if the designer could actually design a working app with no-code tools? A total win-win. It would also end the disputes between designers and developers about pixel-perfect implementation.
The current state of no-code platforms
No-code platforms, as has been hopefully proven above, could easily solve the bigger challenges of the product design process. But one shouldn’t get too much hope.
These tools are still in their infancy and it will take much more time to even discuss replacing developers if that’s ever going to be possible in the first place. But it doesn’t mean that these tools cannot be useful for designers right now, to make the process more efficient and faster or to bring new prototyping possibilities to reality in an organization.
To analyze the usefulness of no-code platforms from a designer’s point of view, we gave a closer look at the following tools:
Diving into prototyping waters with Bubble
Bubble positions itself as a place where one can prototype, launch, iterate, and scale their web application. As a designer, I was interested in the “prototype” option, which they describe as “Demonstrate your idea before making an investment in technical resources”.
After a quick sign-up, the user is taken to onboarding, which explains the app-building process step by step. This is indeed very helpful, as the interface is complex and doesn’t seem intuitive at first.
The onboarding on the other hand is simple and even though it’s a bit long, it’s well justified, as it helps to really understand what is going on (and why). The whole onboarding consists of 12 lessons that are skippable. Some of them also include a “hard mode” at the completion of a given lesson. With each lesson, the user is taken deeper and deeper into the complexity and possibilities of the product.
When users decide they are ready to build their own web app, they can choose from many types of digital products, such as marketplace, online store, CRM, and many more. This acts as a template for the design of the app in Bubble and is helpful if one doesn’t want to start from scratch.
When building an app, the user is also guided through the interface and all the possible actions.
There’s a ton of elements to choose from, such as text, buttons, video, map, form fields (e.g. file upload, sliders). Users can style every element separately or apply a predefined theme, which immediately makes the app look much better. They can also add simple or more complex interactions - for example when a user searches for an address, it’s displayed on the map and saved in the database.
After testing the app for a while I can confidently say that it can act as a great and efficient prototyping tool. As one can choose from many interface elements and apply interactions almost automatically, it can greatly improve the prototyping process.
I wouldn’t recommend creating a UI Design in Bubble, though, as the styling options are a bit limited. The process is also different from how most UI designers work, where they build their own design system, style single elements, and group them into bigger components.
To summarize, as long as one is not using a predefined design system and wants to quickly prototype an app with complex interactions - it's definitely a useful tool.
The problem arises when the prototype needs to be translated into visual design, which makes it necessary to start off in the design tool from scratch, as every element is in Bubble instead of e.g. Figma or Sketch.
This, however, does not resolve our challenge about the inefficiency of the process but does help us with the challenge of limited interactions. It’s also faster to create a prototype from provided elements, instead of having to draw them yourself.
Bubble vs. Competitors
I’ve also tested a few other apps to compare the experience. I tried Honeycode from Amazon, but the app has limited options and is unintuitive, which makes it hard to use by someone without technical knowledge about the AWS platform. I would even go as far as to claim that for designers it’s rather useless.
Webflow, on the other hand, had great user experience, with simple and helpful onboarding. It definitely makes building websites much faster and more fun, and I dare to say that one can ditch visual designers altogether if the desired website is simple and doesn’t have to look very polished. I would definitely use it to do some quick usability testing of the website, and the work would be much faster than building components from scratch in Figma.
I also tested Appian, but I got discouraged by the platform’s unclear logic and complex interface, which makes it difficult to understand the tool and use it effectively and AppGyver seems to have some potential in the future but is more of a work in progress at this point.
A designer’s perspective on no-code tools
Even though all platforms that I’ve tried are so-called no- or low-code tools, some of them require zero technical knowledge, and some of them require some or more.
Even if the app seems easy to use, the onboarding really helps to understand all possibilities of the tool which might be missed during free exploration. What’s significant from a designer’s perspective is that these platforms are never a tool in which you can build everything in. But if one wants to quickly prototype and validate his/her ideas, I’d say that those tools are definitely worth trying.
It will be much faster and easier to use no-code platforms than to build everything from scratch in a prototyping tool since on those platforms you can use predefined and working elements (e.g. sliders, file uploaders, maps) that otherwise take time to draw and connect interactions with one another.
Summary: the pros and cons of no-code platforms
What have I learned by testing those solutions? Here, I've summarized my experience into a short list of pros and cons.
Pros:
A rich library of predefined and working interface elements that you can use with simple drag and drop.
Some apps offer themes, which make the interface immediately look better than a basic prototype.
Helpful onboardings that teach you about how to use the tool and add logic to your prototypes (they take 5 to 30 minutes).
Easy to do remote usability testing as you can quickly share a link to a working app or website.
Cons:
You can only prototype one kind of product (e.g. mobile app, website).
Need to learn a new tool(s) that can actually make the prototyping process longer.
Some apps require technical knowledge and a working database.
Will I use it in the future? Maybe. If so, I will definitely stick to Bubble and Webflow, as they were the most intuitive and helpful in the design and testing process. Try them for yourself, and see how they can improve your prototyping process. Good luck!
Małgorzata Maksimowicz
UX Designer
