Skip to main

No-code platforms as a prototyping tool for designers

by Małgorzata Maksimowicz

No-code platforms as a prototyping tool for designers

In the times of high demand for developers in start-up and enterprise industries, coding skill is worth its weight in gold. The lack of access to this core competence becomes an obstacle for some companies, especially in the reality of the post-COVID-19 new norm 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 at supporting developers or even replace them. But why use this solution only to create an end-to-end product and not get the prototyping phase to a higher level? In this article, we will answer the question if and how a designer can make the use of no-code applications in the design process.


What is the 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 well-known 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 - finally - what are the instances when one simply can’t go about designing without the help of an experienced developer.

Solutions at your fingertips

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. One can find an enormous list 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.

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.

  • Limitation of interactions in the prototyping tools.

     

    Some popular tools (e.g. Figma, Sketch, Adobe XD) do not allow creating complex interactions in the prototype. No-code platforms could help better reflect the desired interactions and provide new possibilities of imitating the experience of a real product.

  • Problems with accessing the prototype by participants during 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). Sometimes it may even crash, or it may require installing a plugin, which is not very convenient for not tech-savvy people. 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 wars between designers and developers about not a pixel-perfect implementation that often occurs.

No-code platforms, as has been hopefully proven above, could easily solve big 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 the 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 - they can definitely use this tool. The problem arises when one needs to then translate the prototype into visual design, which means the necessity 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 resolve the challenge of limited interactions. It’s also faster to create a prototype from provided elements, and not 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 it’s 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 fun, and I dare to say that one can ditch visual designer 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.

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 the designer’s perspective is that these platforms are never a tool in which you can build everything in - from mobile and web apps to websites. 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 one can use predefined and working elements (e.g. sliders, file uploaders, maps) that otherwise take time to draw and to connect interactions with one another.

Pros:

  • A rich library of predefined and working interface elements that you can use with simple drag and drop

  • Some apps offer themes, which makes the interface immediately look better than a basic prototype 

  • Helpful onboardings that in 5-30 minutes teach you about how to use the tool and add logic to your prototypes

  • 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) which can actually make the prototyping process longer

  • Some apps require technical knowledge and working database

So, 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.


IntroductionArticle

Related Articles