Learn / Guides / UX design

Back to guides

The 12 best UX design tools to improve the user experience (and how to use them)

Consistently implementing the best practices of user experience (UX) design helps you create brilliant products, websites, and apps that truly captivate, engage, and delight your customers.

But with the wide variety of UX design tools to help you do everything from conducting research to prototyping, how do you even begin to select the perfect one that will bring your vision to life?

The trick is finding the right combination of tools and learning how to use them in the context of a user-centric UX design strategy to achieve the best results.

Last updated

29 Nov 2023

Reading time

11 min

Share

The right combination of UX design tools supports product-oriented teams across the entire development process—from the ideation phase, through prototyping and design, up to the testing and iterating stage.

This chapter of our UX guide lists the best UX design tools for each stage of the process to help you solve the problems you and your users face, and explains how to use each (or a combination of them) to deliver an outstanding user experience.

Improve UX with digital experience insights from Hotjar

Use Hotjar to understand how real users are experiencing your website or app—then improve it for them!

Learning how users behave on your site, use your app, and interact with your product is one of the best ways to improve their experience.

Since Lean UX design is user-centric and relies on a collaborative approach, rapid experimentation, and prototyping to get user feedback, it’s a great way of structuring and combining your UX tools to create a comprehensive framework to improve the user experience.

Here are three types of UX tools according to each Lean UX design phase:

  1. THINK phase: UX research

  2. MAKE phase: UX design

  3. CHECK phase: UX testing

THINK phase: UX design tools for user research

Knowing your audience is the first phase in UX design and helps you develop experiences that reflect the voice and needs of your users. To understand your audience, you'll need UX research tools and a few other UX resources.

Observing customers and collecting feedback is incredibly powerful: based on UX research, you can develop a problem statement or hypothesis, and identify areas you want (or need) to improve.

Some user research tools answer questions about why or how to fix a problem, giving you qualitative insights. Others do a much better job of answering how many or how much questions, providing you with quantitative data.

Both types of user research tools—qualitative and quantitative—work together to help you identify UX issues and how to solve them. Let’s dive in!

1. Hotjar Engage

Hotjar Engage is a UX research tool that lets you recruit the right users, conduct interviews, and gather (and share) insights, all in one place. 

Engage saves you from spending valuable time on admin tasks, so you can conduct research and usability tests to understand user behavior, identify improvement opportunities, and validate assumptions. 

#Conduct user interviews during the research phase of the UX design process with Hotjar Engage
Conduct user interviews during the research phase of the UX design process with Hotjar Engage

How to use Hotjar Engage to conduct research and improve UX design:

  • Recruit users from 175,000+ research participants or invite your own users

  • Automate the scheduling and hosting of your moderated interviews

  • Download your interview transcripts

  • Create video clips of your interview’s key insights

  • Use brilliant collaboration features to share highlights and time-stamped notes with your team

  • Bring in additional team members as observers and moderators

2. Loop11

Loop11 is a remote UX research tool that lets you run moderated and unmoderated interviews, allowing you to test prototypes and live websites across multiple devices (mobile, desktop, and tablet) to gather and share insights on how users experience your product.

#Loop11 lets you collaborate with your UX team and visualize insights gathered during user testing
Loop11 lets you collaborate with your UX team and visualize insights gathered during user testing

How to use Loom11 to conduct research and improve UX design:

  • Watch users perform actual tasks on your site to gauge its usability

  • Benchmark how your site compares to your competitors

  • Test prototypes before fully developing them to validate new features and updates

  • Evaluate the multiple designs of your A/B tests by observing which one provides the best user experience, live

3. Hotjar Observe & Ask tools

Hotjar is the only digital experience insights platform that provides visual behavior insights, in-the-moment feedback, and 1:1 interviews, all in one place. Hotjar Observe gives you access to Heatmaps, Recordings, and Funnels tools, while Hotjar Ask provides Surveys and Feedback tools.

#With behavior analytics and voice-of-the-customer (VoC) tools, Hotjar offers a comprehensive solution to understand what users do on your site, and why
With behavior analytics and voice-of-the-customer (VoC) tools, Hotjar offers a comprehensive solution to understand what users do on your site, and why

How to use Hotjar Observe and Ask to conduct research and improve UX

1. Gather page performance insights with heatmaps

Heatmaps provide the visual insights you need to improve the user experience, helping you identify which page elements they engage with (or ignore). 

Are users clicking on an image thinking it links somewhere? Are they scrolling past a key CTA? Heatmaps help you answer all these questions (and more).

For example, use:

  • Click maps to discover where users click and tap (or don’t) on the page

  • Scroll maps to find out where you’re losing users’ attention

  • Move maps to understand how users navigate on the page

  • Engagement zone maps to gauge how much users interact with page content

  • Rage click maps to pinpoint exactly where users get frustrated

#Engagement zones combine data points from click, scroll, and move maps into a single view
Engagement zones combine data points from click, scroll, and move maps into a single view

💡Pro tip: highlight key heatmap insights so your entire team can easily find them…in Highlights.

2. Identify pain points that cause users to drop off

Use Funnels to uncover where users drop off in your most important flows, and understand why, in one place, with session replays of users who didn’t move on to the next stage.

3. Let your users tell you what works (and what doesn’t) as they experience your site

Use one (or more) of our many survey templates to get direct input from your users:

#Use concept testing surveys to get early user input on your ideas and designs
Use concept testing surveys to get early user input on your ideas and designs

You can also collect in-the-moment feedback using an embedded feedback widget, or a floating one, like that little red tag on the right side of this page 👉

💡Pro tip: boost team collaboration by sending survey responses and user feedback to your communication tool with the Slack and Microsoft Teams integrations.

4. UXPressia

UXPressia is a customer journey mapping tool that lets you easily see customer touchpoints and create customized journey maps. Plus, it doubles as a user persona creator tool.

#An example of a UXPressia buyer persona
An example of a UXPressia buyer persona

How UXPressia helps you conduct research to improve UX design:

  • Create a visual overview of how customers interact with and experience your website, app, or product across multiple touchpoints

  • Map out and compare existing vs desired user paths

  • Visualize customers’ emotions at each step of the journey and identify their pain points and moments of delight with the experience graph

  • Work on the same file with your whole team at once in real-time collaboration

  • Export your customer experience maps in multiple formats

💡Pro tip: easily see and map your users’ uninterrupted journey across tabs and browser windows with Recordings. You can even filter recordings using the Engagement and Frustration scores to jump straight into your most insightful user sessions. 

MAKE phase: UX design tools to wireframe, prototype, and create

User interface (UI) design tools deal with the visual part of UX design—they help designers brainstorm, schedule, and turn ideas into something real. During this phase, designers and developers try to build features to solve a problem or improve the website, app, or product.

The best UI/UX design tools help you with:

  • Flowcharting: map out your predicted user flows based on your users’ needs, thoughts, and actions identified during the research phase

  • Wireframing: generate low or high-fidelity visualizations of potential solutions to problem statements

  • Prototyping: create more sophisticated visualizations of design solutions that behave like the final product with interactions

  • Collaborating: whether it’s async or in real time, let your team provide feedback and decide on which designs to push to production

5. Figma

Figma is an all-in-one collaborative UX design platform that lets you build interactive prototypes with a user-friendly UI that has little-to-no learning curve (yes, we do love Figma).

#What prototyping looks like in Figma
What prototyping looks like in Figma

How to use Figma to improve UX design:

  • Use the mockups and wireframing tools to create the best UI for your site or product 

  • Design dynamic, high-fidelity prototypes and simulate interactions like clicks and hovers by including animations, transitions, and dynamic overlays

  • View and work on your project as a team with real-time collaboration features

  • Toggle between the design files and functional prototypes to run usability tests within the platform

  • Make developer handoff a breeze with CSS already included in your designs

6. InVision

InVision is a freemium collaborative design platform that goes beyond the functionalities of traditional UI tools to craft and improve the user experience.

#An example of an InVision prototype dashboard
An example of an InVision prototype dashboard

InVision’s platform lets your team:

  • Create, share, and comment collaboratively on designs and on their web-based whiteboard tool, Freehand

  • Take advantage of wireframing and prototyping tools to build realistic designs that look and behave like the final product

  • Conduct usability testing via add-ons and plugins

  • Connect the tools you already use, from other UI design tools like Figma to product management tools like Airtable or Monday

7. Sketch

Sketch is premium, all-in-one UI design software native to macOS that allows teams to create wireframes and prototypes.

#Designing the UI for a travel mobile app in Sketch
Designing the UI for a travel mobile app in Sketch

Sketch’s design systems let you:

  • Control every aspect of your site or product’s UI, from basic features that let beginners adjust fonts and resize elements, to advanced ones like vector editing

  • Create, manage, and reuse symbols, colors, and styles across multiple files to create consistent designs

  • Cover the entire design process, from canvas to testing to code, in one place

8. AdobeXD

Adobe XD is a premium collaborative UI/UX design software. As part of Adobe’s Creative Cloud suite, you can purchase it as a standalone tool or integrate it with Photoshop, Illustrator, and After Effects.

#Example of an interactive prototype in Adobe XD
Example of an interactive prototype in Adobe XD

How to use Adobe XD to improve UX design: 

  • Create simple wireframes faster with the Quick Mockup plugin

  • Drag-and-drop dynamic elements to design faster and with more flexibility than with traditional UI kits

  • Use (mobile and desktop) templates to jumpstart your creative process

  • Turn low-fidelity wireframes into high-fidelity UI designs with Themes and Element Styles

  • Build advanced interactive prototypes with animations and voice-enabled features

💡Pro tip: gather even more insights by testing Figma, In Vision, Sketch, and Adobe XD prototypes with Hotjar’s Heatmaps, Recordings, Surveys, and Feedback tools via Anima.

9. Miro

Miro is an online whiteboard that enables real-time and async collaboration throughout the mobile or web design process.

#An example of team collaboration in Miro’s whiteboard
An example of team collaboration in Miro’s whiteboard

How to use Miro to improve UX design:

  • Kickstart the brainstorming phase by jolting down ideas in sticky notes, and keep it visual with emojis, shapes, and images

  • Create flowcharts and diagrams with its intuitive drag-and-drop functionality

  • Invite project stakeholders to contribute async or in real-time, or share boards with them 

  • Organize and communicate your ideas with the Mind Map feature

  • Reach a decision faster with Voting and the built-in Timer

👏 Honorable UX design tool mentions (in alphabetical order): 

  • Axure: a premium all-in-one UI design and prototyping tool

  • Balsamiq: create low-fidelity wireframes and mockups fast with built-in UI kits

  • Framer: a freemium no-code website builder and UI design tool

  • Lucidchart: a basic flowchart and diagramming software with real-time collaboration and drag-and-drop functionality

  • Marvel: a web-based wireframing tool with support for interactivity and animations

  • Origami Studio: a free UI/UX design tool

  • Proto.io: a web-based premium UI prototyping tool

  • UXpin: a premium web-based wireframing and prototyping tool

CHECK phase: UX design tools for testing and experimenting

Whether it’s after creating your working prototype or after you’ve handed it off to your developers who implemented it on your site, you need to test how users respond to your new designs.

The checking or testing phase is when teams test the new feature, website, app, or product using UX tools to figure out whether their hypothesis was correct, see how users interact with the design, and refine their approach accordingly.

User testing tools are a great way to validate your hypotheses and determine if the changes you made are working. Once you’ve got that result, you can implement changes with confidence.

10. Optimizely

Optimizely is an experimentation platform that lets your UX team gather insights on the designs you’ve built through split and multivariate testing, so you can learn, iterate, and keep improving the user experience.

#Result of an A/B test run with Optimizely
Result of an A/B test run with Optimizely

How to use Optimizely to improve UX design:

  • Conceptualize ideas and make changes to your website with an easy-to-use ‘what you see is what you get’ (WYSIWYG) visual editor (no HTML required)

  • Merge and deploy code without having to actually release features until all stakeholders are ready, then simply flip the switch

  • Tailor experiences to specific users or groups, measure the impact of these personalization efforts, and iterate

  • Unify customer experiences by synchronizing tests across platforms

💡Pro tip: take your A/B and multivariate tests to the next level by analyzing user behavior or your experiments’ variants with the Hotjar-Optimizely integration. For example:

  • Test a new navigation bar design: first, create different variations of your site’s nav bar as an Optimizely experiment. Then watch Hotjar recordings filtered by that Optimizely experiment to see how users interact with each variant and choose which version of the navigation bar to launch

  • Identify the most successful user journeys: design multivariate tests for slightly different user journeys from landing page to purchase, discover which flows convert more, and understand why with recordings and heatmaps

  • Get feedback from users about a new feature: set up a survey on the variant with the new feature and let users tell you what they think before deciding whether to launch the new feature or make improvements

11. Omniconvert

Omniconvert is a conversion rate optimization (CRO) and experimentation tool tailored to ecommerce websites that helps you turn one-time buyers into lifetime customers by pioneering the ‘customer value optimization’ movement.

#Omniconvert A/B testing dashboard
Omniconvert A/B testing dashboard

How to use Omniconvert to improve UX design:

  • A/B test your hypotheses and run experiments

  • Use custom attributes and on-page variables to segment users and personalize your tests

  • Understand, monitor, and nurture your best customers to increase retention and customer lifetime value

💡Pro tip: Omniconvert also integrates with Hotjar, letting you filter session recordings and heatmaps based on your Omniconvert experiments to find out why users prefer one design over another.

12. Maze

Maze is a product experience insights platform that lets you test the usability of your concepts and prototypes, with a focus on continuous product discovery.

#Gather user insights continuously with Maze
Gather user insights continuously with Maze

How to use Maze to improve UX design:

  • Experiment with and validate prototypes, wireframes, concepts, and copy with unmoderated testing

  • Integrate it seamlessly with the best UI/UX design tools listed on this page to validate ideas and speed up the design process

  • Get actionable user insights with automated metrics and reports

  • Send targeted research campaigns to your tailored participant database

Help users achieve their goals, so you can achieve yours

To truly nail UX design, you have to go beyond numbers and data and explore emotional user connection.

As you use these tools listed above, keep the big picture in mind: you’re building and implementing a holistic UX design strategy that works for your website, app, or product—and your audience. Think of more than just improving numbers; instead, help your users achieve their goals so you can achieve yours.

Improve UX with digital experience insights from Hotjar

Use Hotjar to understand how real users are experiencing your website or app—then improve it for them!

FAQs about UX tools