Design
September 10, 2020

No-code platforms as a prototyping tool for designers

Małgorzata Maksimowicz
UX Designer

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:

  • Bubble - a platform that allows the creation of apps for desktop and mobile web browsers. One can easily sign up with his/her Google account and use one of four subscription plans. The one named “Hobby” is free and includes core platform features (mentioned as those “required to create and host fully functional web app”), Bubble branding, and community support.
  • Webflow - promises the ability to create responsive websites without a single line of code, from simple SaaS websites to complex online stores. Just as in Bubble, one can sign up with a Google account. We recommend starting with the Starter plan which is free as long as it’s being hosted with Webflow. This entry plan is limited to two projects only, though. Additionally, the company has a “Webflow university” where one can find categorized courses and tutorials to learn more about different aspects of using this tool.
  • Honeycode - Amazon’s child targets business customers (enterprise) rather than individuals. Focuses on creating apps for teams that work on various databases. To get started one needs to register to provide their work email address. This simple task gives access to a free basic plan that supports small projects and teams up to 20 members. What distinguishes this platform from others is a mobile app that allows projects’ management, customer tracking, and so on.
  • AppGyver - this platform will soon allow custom plugins from the community, which - at least in theory - should mean the product might one day become a real contender. Until then, however, its usage is limited. Simple designs are fairly easy to do but the fun stops when it comes to more complex interactions such as notifications, reminders, or in-app purchases. In general, the platform might be simply a bit too technical and complicated for non-technical users (such as designers) while not yet providing the desired complexity to those who are indeed technical. 
  • Appian - low-code automation platform to build enterprise software applications. It’s a solution clearly intended for business clients and bigger market players unlike most of its competitors. If one wants to try this tool, they have to request a trial which is free but has limited features compared to the full version.

Diving into prototyping waters with Bubble

Bubble no-code builder

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”. 

Bubble panel

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.

bubble panel

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.

Bubble summary

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

Honeycode panel

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 panel

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.

Appian register panel

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.

Appgyver panel

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.

Design Sprint
From a bold idea to prototype
Learn more
Written by
Małgorzata Maksimowicz
UX Designer

You may also like

Like what you read?
Get monthly business and technology insights straight to your inbox.