21 Best UX Tools You’ll Ever Need [Code-Free]
There’s an overwhelming array of code free tools for UX design and development to choose from.
In this blog, we’ll show you our favorite low code or code free tools for UX for every use case.
Here are the categories of Jobs-To-Be-Done:
Wireframing
Prototyping
Testing
Login Flow
Onboarding
Analytics
Feedback
Project Management
We’ve set out to give a broad picture rather than necessarily choosing directly comparable products. That’s because the kinds of Jobs To Be Done faced by different Product Managers vary widely.
The common thread though is a focus on UX (user experience). That is, how the user experiences content and achieves their goals.
Sometimes this will cross over into UI and other disciplines, but our emphasis here is firmly on UX.
UX Tools for Wireframing
Most UX development will start with a wireframe. That is – a low-fi structural diagram setting out where each control and functional element of your app will sit relative to everything else.
This is incredibly valuable from the point of view of mapping user flows and prompts for action, without becoming distracted by visual design.
Balsamiq
Source: balsamiq.com
Balsamiq is a very popular wireframing tool. Starting at just $9 a month it is affordable to even the smallest businesses. As the image above shows, it creates wireframes with a real hand-drawn, rough feel.
With an intuitive drag and drop interface, Balsamiq is very simple to use and enables you to get started right away. As their promotional materials say – they’re competing with pencil and paper in terms of simplicity.
Balsamiq offers a web version and a downloadable desktop app. It also has integrations with Google Drive, Confluence, and Jira – which are great for collaborations.
Adobe XD
Source: xd.adobe.com
Simplicity and single-minded focus on doing one thing really well are what make Balsamiq stand out.
The problem that leads to is when you want to move to the next step, you have to translate your design into another platform. Balsamiq does offer some basic functionality to make your wireframes interactive, but it’s fairly limited.
Adobe XD has no such limitations, being a core part of the Adobe software suite. In contrast to Balsamiq’s homely style, XD can be used to create very stylish, professional-looking wireframes.
Plus, it enables you to turn your wireframes into properly functional prototypes as well. We’ll talk a bit more about prototyping in the next section.
One downside of XD is that it’s fairly complicated to get the hang of (like all of Adobe’s products) but with a good free plan and paid plans starting from just $9.99 per month, it’s doesn’t need a big investment to give it a go.
Another drawback is that, although collaboration features have been added, it’s still not possible for multiple people to work on the same design at once.
ALSO: Adobe XD is a great tool for prototyping.
Miro
Source: miro.com
Like Adobe XD, wireframing is just one of the elements of “online whiteboard for collaboration” Miro.
Unlike XD, it allows real-time collaboration on designs – which makes it an ideal wireframing for bigger companies working on projects that include a lot of designers.
And yet the entry price of $10 per month makes it very affordable.
UX Tools for Prototyping
Unlike a wireframe, a prototype is a hi-fidelity, detailed working model of your finished product. It combines the functional design set out in your wireframe with the (more or less) complete UI look and feel into something that can be tested on real users.
Webflow
Source: webflow.com
Webflow lets you build functioning prototypes (and websites) quickly and easily with a straightforward drag and drop interface.
It is a no code tool, but it definitely helps if you understand HTML, CSS and other languages because it uses some of their terminology (eg “div”, “padding”) which may be confusing for some.
The best thing about Webflow is that it actually converts your design into code for you. This can save you a lot of time when getting your service up and running.
Plus, Webflow is completely free until you’re ready to set your designs live.
Figma
Source: figma.com
Like Miro, Figma is built for collaboration – allowing lots of people to work on prototypes simultaneously (as long as they are all online! There’s no offline option).
Because of its high graphical specifications, Figma needs a fairly powerful computer to run well: at least 4GB of RAM and an Intel HD 3000 or equivalent graphics card.
Most designers will have a setup like that, but not every Product Manager will – so it’s important to be aware of the limits of your equipment when looking at high-spec software like this.
And once again, there’s a free version which allows up to two people to collaborate on up to three projects. The paid packages start at $12 per month.
ALSO: Figma is a great tool for wireframing.
Bubble
Source: bubble.io
Bubble promises to let you “build anything without code” with a highly intuitive drag and drop editor system.
It’s primarily a website builder, but it’s so easy to use that a lot of people use it to bang together prototypes.
The advantage of this way of creating prototypes is that they can be sent to outside users for testing simply by sharing a URL – which can sometimes be a problem with prototypes created with dedicated tools like Figma and XD.
Even better, Bubble has a free plan which gives access to all of its core features.
ALSO: We’ll come back to Bubble when we look at Login Flow
UX Tools for Testing
Any UX design program needs to include testing. Otherwise how do work out how to improve? Of course, there are many different things you can test and improve…
Optimizely
Source: optimizely.com
Optimizely is a comprehensive product experimentation and optimization platform. It allows product managers to conduct tests on websites, apps – you name it. It also includes powerful statistical tools to help you assess the significance of the results you achieve. In particular, unlike a lot of other testing tools, Optimizely allows you to peek at test results before the end of the experiment and/or to stop tests once a certain threshold of reliability has been reached.
The visual editor is simple to use and to-the-point, making it a good testing platform for users without any coding or statistical experience. There are a few gripes to note though.
For example, the rather high price tag, the lack of heatmaps or session replays, and the single-page test results layout. But on the whole, this is a very good set of code free tools for UX.
Treejack
Source: optimalworkshop.com
Treejack is one of the tools included in the Optimal Workshop user research suite.
I bring it up here because it’s one of the best tools out there for analyzing and testing information architecture and navigation flows.
Like the other Optimal Workshop tools, Treejack deploys your test site to real users and then tracks their path through your content.
This kind of attention to user journey can make a real difference to conversion rates, and it’s not so easy to do without a dedicated tool like this.
Userpilot
Source: userpilot.com
The trouble with a lot of code free tools for UX design is that it’s not always easy to clip them together. Sure, Zapier and ITTT can integrate a lot of services, but this type of bespoke connection is always a little insecure and difficult to work around.
That’s why it’s so helpful when a tool you use for one part of your UX work – for example, onboarding – includes functionality that covers off some of your other Jobs To Be Done.
In this case, Userpilot makes it really easy to carry out and analyze A/B tests on your onboarding flows.
UX Tools for Login Flow
One of the most important UX features in any SaaS is friction-free sign-up and login flows.
In the past, sign-up processes tried to get as much information out of users up front as possible – including their credit card details. But in recent years, practice has turned against this approach.
Why? Because the more info a user has to hand over before they can get started, the more prospective users will be put off!
Auth0
Source: auth0.com
Auth0 is a universal authentication and authorization platform for web and mobile-based applications. It’s not a code free tool (it’s API-based) but it does come with a vast range of tutorials and templates to help you get started.
It works with all programming languages and the overwhelming majority of no code tool builders out there.
It’s also very easy to use once deployed, highly secure and is offered with a freemium model. One downside is that it doesn’t give you the greatest degree of control over the look and feel of your authentication flows.
Bubble
Source: forum.bubble.io
We’ve already talked about Bubble.io in the context of building prototypes and web applications more generally.
As part of that, it offers a drag and drop system for building login flows, which is great.
The reason I wanted to include it here, is that this forum user has figured out a genius method of using the Bubble.io tools for building PASSWORDLESS flows as well!
That just shows how versatile a product Bubble.io really is!
Stripe
Source: stripe.com
If you’re in the e-commerce field, you’ll know that authentication and compliance with high-security standards in the purchase process are critical.
And if I had to pick just one of the options out there to recommend, it would be Stripe.
The best way for non-techie people to get hold of Stripe is via a webstore application, like Bigcommerce or Squarespace, which come with ready-to-go integrations. Otherwise, adding Stripe to your application will definitely require the services of a developer.
Maybe that’s a cheat in an article about code free tools for UX . However, if taking payments is a part of your SaaS experience, then one of these pre-built integrations is surely the simplest way to get the best possible UX.
UX Tools for User Onboarding
Onboarding is surely one of the single most important UX factors. Getting users to realize the value that convinced them to try your product is critical for adoption, retention and monetisation.
Btw. – speaking of adoption – join our Product Adoption School for free now!
Fortunately, there are some really great code free tools for UX design in the onboarding space.
Userpilot
Source: usepilot.com
It won’t surprise you to learn that we think the best of the bunch is Userpilot.
It allows you to build linear, branching and completely interactive walkthroughs, using the full range of contextual cues (modals, slideouts, checklists, hotspots etc). Onboarding experiences can be targeted at particular segments and types of users.
They can even be created to be dependent on user inputs, with our unique Driven Actions – for truly interactive learning.
Once you’ve installed a small JS snippet onto your website and downloaded our browser extension, it’s no code all the way. Everything is done in our intuitive experience builder – and with loads of one-click integrations with other tools, Userpilot is very easy to pick up and add to your stack.
Chameleon
Source: trychameleon.com
Chameleon is another more-or-less code free onboarding service.
I say “more-or-less” because one of their USPs is that they will actually do the styling coding for you. Unlike Userpilot, which has comprehensive in-app tools for adapting the look and feel of your onboarding experiences to that of the rest of your SaaS, Chameleon avoids the issue by doing the work bespoke.
If you have a very specific UI to fit in with, that may be a positive. But for a lot of Product Managers, the cost and the added time to deployment is a drawback.
Appcues
Source: appcues.com
Appcues is also a comparable onboarding tool with features comparable to Userpilot and Chameleon.
It’s a bit more difficult to use and if you’re looking for advanced styling, you’re going to need CSS skills. The in-app options are more limited than the other alternatives we’ve looked at.
UX Tools for Analytics
UX should never be a “once and done” task. Effective Product Managers will keep every aspect of their users’ behavior under observation and adjust the product to optimize performance.
That means building in events-based analytics tracking to your app.
Heap
Source: heap.com
None of the analytics tools we are going to look at here are strictly “code-free” – insofar as you will need to install a JS snippet into your app’s code to use them.
But the examples we’re going to look at more than make up for that little technical requirement with the amount and quality of data they can provide you with. And once they are installed, they can be managed and customized without any more coding.
Heap is an awesome analytics tool, first and foremost because it tracks EVERYTHING. Other tools need to be customized in advance to define the events that will be tracked, but not Heap.
This is incredibly useful, particularly at the early stage in a product’s lifecycle when you don’t know what the key drivers of behavior are. Heap captures a complete data set for you to analyze at your convenience.
Amplitude
Source: amplitude.com
Amplitude doesn’t have that advantage – you do have to define the events you want it to track in advance.
However, of all the analytics packages for SaaS apps out there, Amplitude is widely felt to have the best single user tracking across multiple products.
It is also highly focused on deriving actionable insights from data, which is critical for making UX improvements.
Amplitude is also free for tracking up to 10 million actions. That is a much more generous free data allowance than any comparable analytics tool.
Hotjar
Source: hotjar.com
Hotjar isn’t a strict analytics tool like the others, but in providing heatmaps and screen recordings, it helps to provide critical insight for UX designers and product managers.
Heatmaps can be extremely useful when assessing changes to your overall UX and UI. They are really valuable when adapting your page layout, and can be used to validate or disprove the hypotheses put forward by your wireframes about user behavior.
Tools for User Feedback
Just as you need to track quantitative behavioral data through analytics to improve UX over time, you also need qualitative feedback.
Thankfully, there are tools that you can add to your SaaS very easily which allow you to engage directly with users to find out what they’re thinking.
Typeform
Source: typeform.com
Typeform is one of the best and simplest tools out there for building forms and quizzes without a line of code.
It’s not the most high-tech thing out there. You have to embed your forms into other applications, rather than there being any native integrations.
Plus, it only allows you to have one question on screen at a time. That’s not always the best option for every kind of form.
And finally, the options for presenting your data are pretty limited: spreadsheet view, anyone?
SurveyMonkey
Source: surveymonkey.com
As this animation shows, SurveyMonkey’s UI is totally different from Typeform’s. It shows a live preview of your survey as you are building it, which I find much easier to use.
The two are comparable in price and features, but SurveyMonkey has the added benefit of providing value from the collected total of data it collects across users. This comes in the form of a Question Bank, which can really help you phrase your questions in the most effective way.
Userpilot
Source: userpilot.com
Sometimes a full-on survey is not the best way to elicit user feedback.
Micro surveys, such as those offered by Userpilot, have the advantage of being minimally intrusive. Plus, they can be triggered at the best possible moment for getting a response.
So much of what we are focused on is providing contextual experiences of this sort. That’s why we included a drag and drop micro survey builder in the Userpilot service. Plus, it now supports NPS micro surveys as well!
Sounds good? Jump on a call with us and get a demo of Userpilot today – we’ll be happy to show you around!
Help
- Zendesk, Helpshift, Drift
Project Management
Finally, there are some fantastic off-the-peg project management tools that require little or no customization (let alone code) to enable you to plan, track and execute your UX work.
Airtable
Source: airtable.com
The best description I’ve seen of Airtable is that it gives you “the functionality of a database with the UI of a spreadsheet”.
It’s strengths are collaboration and scheduling, and with the Universe template marketplace, it’s usually fairly easy to get started on even the most unusual use-case.
Airtable is not the easiest platform to work with from scratch though, with a lot of users finding it hard to build formulae. Oddly for a collaboration platform, there are no communications tools included other than leaving comments on data records.
And for users with up to 1,200 records, it is free to use.
Trello
Source: trello.com
If you find Airtable hard to use, maybe Trello is more your scene. It’s very simple to get started (and they have great new user onboarding!) and takes care of a lot of the basic project collaboration and communication functions with ease.
Of course, if you are running more complex projects, Trello’s simplicity can be a drawback. It doesn’t support sub-tasks or dependencies, time, cost of expense tracking and the interaction between boards is not always easy to follow.
But as a free tool for handling the basics of project management – and as an example of amazing UX in a SaaS – Trello deserves your consideration.
Productboard
Source: productboard.com
Airtable and Trello are general tools that can be used for a massive range of purposes, far beyond the realms of UX design. For example, I know couples who use Trello boards to share out household tasks!
Productboard is far more geared towards Product Managers and developers specifically, with its advanced roadmapping tools and novel, dynamic system for prioritising tasks based on user insights.
They offer a 15 day free trial, and after that the entry level price is $20 per month.
So that’s our roundup of the best code free tools for UX design and development. Do you agree? Have we missed anything out? Let us know in the comments!
And finally, get a free demo of Userpilot today and sign up for free – you won’t regret it!
Stay in the loop:
