No-Code Apps For Product Design

/ design

A glut of "low-code" and "no-code" application platforms have popped onto the scene over the last decade. Some of these are powerful tools targeting developers, others are WYSIWYG products to empower designers. This is an article about the latter.

Designers are finding themselves to be more responsible than ever before to implement their own solutions, without the help of developers.  

A Brief History

Ever since the rise of the world wide web in the late 90s, there's been a need for people with limited coding skills to build websites. This was a bit unreasonable; to think that anyone could create a site by learning HTML and basic database queries, not to mention Javascript, was asking a lot.

Then came Microsoft's FrontPage. It allowed anyone with basic computer skills to create their own web page and share it with the world. Following along were applications like Adobe Dreamweaver and GoLive giving birth to a new role: web designer. With the help of these first generation low-code applications, tech-savvy creatives could create websites and give businesses new opportunities via an online presence.

'Memories, in the corner of my mind"

Flash forward twenty-something years (yikes has it been THAT long?) and the crystal ball predictions that business would predominantly be online have come true. The web designer role has split into multiple new titles including visual designer, UX designer, digital product designer and the dubious "design technomixologist" (a prototyper by day, DJ by night). It's not good enough to have an eye for design. "Design" now means building solutions with software that function as well as they look.

The business world has also evolved. Being online is no longer an advantage but a requirement. New product ideas need to be released, validated and improved as fast as possible in order to be viable. The digital transformation movement has seen businesses making their own internal operations more efficient with modern technology. The mantra of “Make it Faster.... Make it Better…. Make it Cheaper...” are chanted by executives everywhere.

Business culture is changing as well. Due to the higher demand for remote work, technology needs to be more available to distributed teams. Designers are finding themselves to be more responsible than ever before to implement their own solutions, without the help of developers.

Back To Today

This leads us to the state of software today. "No-code" and "low-code" applications offer a visual development environment that allows anyone to create more complex applications without prior coding knowledge. Platforms for blogging and e-commerce are common utilizing methods such as drag-and-drop, customized styling and reusable components.  However, early no-code applications were designed to solve a single business problem and were not meant for customization into unique digital products. Until now.

The designers at Border recently evaluated several no-code applications that provide robust data and logic configuration along with user-friendly UI design and customization. The advantage of such an application could be tremendous, so we wondered: could these platforms create a functional product for our clients? We decided to give them a try and take an in-depth look.

What We Desire

Create a usable product solution (not just a prototype): We want to create a digital product that could be used in the real world and solve an actual business problem. It needs to be public-facing, and not just used behind the scenes. This requires a certain degree of reliability and presentability.

Custom logic, not pre-made solutions: There is an endless list of no-code applications that can create a website or mobile app with plug and play features. While this may be useful for many business marketing needs, our clients hire us to solve unique problems they can't find solutions to elsewhere. This requires custom logic and flexible UI design.

API integration: Most products that we create require managing data from different sources. The ability to integrate and use this data is required.  Even more appealing is a solution where someone who is not a developer can access and work with the data.

Designer friendly: At least the majority of the work needs to be done by our designers, and the tool must give them the ability to implement the solutions they design.  

Responsive design for web and mobile: Most of the products we create need to be used on both desktop and mobile devices.  

Affordable vs. enterprise pricing: We are focused on affordable solutions therefore we did not dive into the enterprise solutions that require larger financial and time commitments.

The Contenders

Here are the three no-code applications we investigated:

1. AppGyver Composer Pro

Pricing: FREE for life, enterprise solutions available


AppGyver positions Composer Pro as an application development solution that makes it easy to bootstrap ideas within native mobile environments. It simulates native mobile phone features and design patterns with a drag-and-drop editor and can add custom HTML and JavaScript. The logic workflow is straightforward. Thanks to an informative onboarding tour, there is a relatively low learning curve.

A basic understanding of programming principles is enough to visually create complex logic. An extra bonus is the quick distribution of a full app build to team members and easy deployment directly to AppStore and Google Play.

Pros

  • Robust logic and data capabilities
  • Impressive API integration
  • Can create reusable components and upload them to a shared marketplace
  • The AppGyver MobileApp can view applications in real-time
  • Every UI component has extensive preset design properties

Cons

  • More geared towards developers improving their workflow rather than for designers implementing their designs
  • Requires a working knowledge of app development
  • The design workflow is clunky and tedious with little documentation
  • The marketplace of reusable components has limited submissions
  • It's not clear how to use responsive design elements effectively as it's primarily targeting mobile phones
  • No community of learning resources outside of their own documentation

Conclusion

It’s a great opportunity to create complex data and logic quickly. Plus.. IT'S FREE! The results created by Composer can feel more like a mobile app rather than a responsive web application. It would be a better option if the interface design is not a priority.

2. Adalo

Pricing: Free with limited data and Adalo Branding, $50-200 month for Pro plans


Adalo is a no-code platform for building web and mobile apps that can include payments, notifications, and more. They claim: "If you can make a slide deck, you can make an app!"

Designers will feel right at home with this app. The interface is clean and intuitive. Much like Sketch and Figma, you can design multiple screens at once. Although the UI components are well designed, outside of color and font-weight/size, they are not customizable. You can't even change the font family.

A user can easily manage data types and integrate them into the design where some conditional logic can be applied. API integration can be used but it relies on working with a third-party application.

Pros

  • Intuitive for tech savvy users
  • Simple drag-and-drop UI design
  • Easy to manage data types and parameters
  • Clean and professional pre-made UI components

Cons

  • Logic may be limited
  • More expensive–plans start at $50/month
  • Limited documentation
  • Requires third-party applications for API integration
  • Limited custom design
  • No community of learning resources outside of their own documentation
  • Basic responsive design layouts–work best for mobile.

Conclusion

Compared to its competitors, Adalo is an expensive non-enterprise solution. It works well for creating websites that list, filter, and display details of custom data types. It could be an excellent solution for validating startup ideas quickly with minimal cost. You might be limited if you had to create a more custom or robust solution.

3. Bubble

Pricing: Free with Bubble Branding. $25-475/month for pro features.

Bubble integrates data, logic and presentation into an easy to use platform. It has an intuitive drag-and-drop builder, a powerful visual programming tool and the ability to define your own data structures.

The tool is free to build; you only pay for it once your audience starts to grow.

Pros

  • Robust logic and data capabilities
  • Easily connect APIs
  • Extensive marketplace with 3rd party plugins and templates available
  • Custom responsive design at specific breakpoints
  • Active user community with a variety of tutorials and resources

Cons

  • Design elements are not intuitive and clumsy
  • Buggy design elements "break" for unknown reasons
  • Everything is set at "absolute" position, which can be problematic for web design
  • Steep learning curve to master

Conclusion

Bubble use of logic and data is fantastic. It gives unbelievable power to create dynamic and robust solutions. But, like any superhero, with great power comes great responsibility. We found the design flow to be a bit unreliable and clumsy, to a point where creating the designs was actually becoming more problematic than the programming itself.

It does have a strong community with samples and templates. If a designer were to complete its steep learning curve, it's reasonable to think that a viable digital product can be made. But it would probably be limited and not scalable.

Honorable Mentions

Before we jump to our conclusions, we thought we'd throw a few more options out there for consideration. These may be better suited for your needs (or worse), but they didn't meet the criteria for our limited evaluation.

  • Retool for internal tools and Admins
  • Webflow WSYWIG for designers, marketing sites
  • Airtable is a power data app that can be built quickly
  • Outsystems if you want to build more hard-core software

Our Judgement

After reviewing these contenders, one analogy came to mind. The Swiss Army knife...

A Swiss Army knife has many great features. A knife, a can opener, a screwdriver, among others. They all could be useful in the right situation. But is it a great knife? A great can opener? A great screwdriver? Would you want to fight off a bear with a Swiss Army knife? (The answer should be no, but some of you are braver than others.)

Many of these apps offer great features. You can manage data easily. You can create an interface that works. You can launch quickly. But what about that ever looming bear?

Hi There! Don't mind me, I'm just looming.

We concluded that given the right situation, along with the right need, these tools could provide value to a business. It is important to understand the tradeoffs, the limitations and the learning curve of each before making a decision and what kind of impact it will have in the future.

Most likely, it's probably wise to get a better knife.

Pros

  • Simplified Process, fewer resources to include
  • Reduce overhead costs
  • Express and ideas quickly
  • Encourage experimentation

Cons

  • Not scalable, difficult to maintain
  • The user still needs to have either core design/dev skills, not really made for "just anyone."
  • Tradeoff consideration: designers are not great with dev logic and devs are not great designers. Who can make it better?

Good For

  • Simple utilities to streamline business tasks
  • Hi-fidelity prototypes for user testing
  • Communicate ideas or logic to stakeholders
  • Validating product ideas for startups with minimal cost
Frank Overland

Frank Overland

Frank is a problem solver that is passionate about collaborating with teams and mentoring emerging talent.