Design Prototyping, Research, Handoff, Heatmaps, Info. Architecture, Participant Panels Tools | UX
Tags: ux, uxdesign, tools, ui
Published: 2021-08-19 10:56:22

In this UX series, I write about trusty UX tools I have used, or I’ve heard good things about or you folks have suggested.

In my previous articles, I focused on the categories: automated UX analysis, analytics, A/B testing, accessibility, animation, annotation, audio transcription, automation, diagramming, data repository, card sorting, code editor, collaboration, competitor benchmarking, conversion, customer journey, data visualization, design feedback, evaluating design, first click testing and frontend design Tools.

In this article, I will focus on: Design Prototyping, Research, Handoff, Heatmaps, Information Architecture and Participant Panels Tools.

Let's start 😎.

# Design Prototyping

## 1. [Axure RP](https://www.axure.com/)

![Axure_Logo.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629135734255/Dg-FfsTnt.png)

**It can also be used for:** Design Prototyping, Wireframing, Diagramming, Interaction Design	

**Cost:** $29+, there is a 30-day free trial.

**What does it do best:** A rapid prototyping tool that has become an enterprise-level workhorse. Build diagrams, journeys, or add complex interactions into wireframes to create working prototypes.

> Infinite Interactions, Unlimited Power. Axure RP is the only UX tool that gives UX professionals the power to build realistic, functional prototypes. By axure.com


## 2. [Bot Society](https://botsociety.io/)

![Botsociety.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629135742648/8TLjcScxf.png)

**It can also be used for:** Design Prototyping		

**Cost:** Free+

**What does it do best:** Design bot conversations for any platform, including WhatsApp, Messenger, the Google Assistant, Alexa, Slack, and more. Each platform is customized for that tool specifically, so you can be sure that all of your designs will flow as intended.

> Where teams design chatbots and voice. Design, preview, test, and
export conversational interfaces. By botsociety.io


## 3. [Flinto](https://www.flinto.com/)

![flinto.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629135762585/QKDix9ttV.png)

**It can also be used for:** Design Prototyping, Animation		

**Cost:** $99, but there is a free trial.

**What does it do best:** Animated transitions without timelines or programming. A good balance between fast prototyping and realism. Prototypes run on iPhone or iPad and can be shared with anyone.

> The App Design App. Flinto is a Mac app used by top designers around the world to create interactive and animated prototypes of their app designs. By flinto.com

*Note: This tool is only for Mac.*


## 4. [Fluid UI](https://www.fluidui.com/)

![FLUIDUI-LOGO.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629136230654/yWAZif1bB.png)

**It can also be used for:** Wireframing, Diagramming, Design Prototyping, Interaction Design

**Cost:** Free+	

**What does it do best:** Create Android, iOS or Windows8 wireframes or interactive prototypes. Sharing, feedback and collaboration are all built in.

> Create Web and Mobile Prototypes in Minutes. By fluidui.com


## 5. [macaw](http://macaw.co/)

![logo.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629136249969/aR6CnX5Va.png)

**It can also be used for:** Design Prototyping, Interface Design, Handoff	

**Cost:** No Info	

**What does it do best:** A full-featured image editor that also writes semantic HTML and succinct CSS.

> Stop writing code, start drawing it. Macaw provides the same flexibility as your favorite image editor but also writes HTML and CSS. It's time to expect more from a web design tool. By macaw.co


## 6. [MockFlow](https://mockflow.com/)

![MockFlow.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629136266347/1MsVf1GQX.png)

**It can also be used for:** Design Prototyping, Wireframing, Diagramming, Interface Design

**Cost:** Free+

**What does it do best:** Plan, build and share user interfaces, create user flows, document styles and approve designs. Simple and easy.

> Quickest way to brainstorm UI ideas. MockFlow is a powerful tool for drawing UI wireframes that also extends as a full planning suite for product design. By mockflow.com


## 7. [Naview](https://www.naviewapp.com/)

![naview-logo.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629136273256/wzGdWK2ob.png)

**It can also be used for:** Design Prototyping, Information Architecture, Usability Testing		

**Cost:** Free+

**What does it do best:** Create easier navigation by rapidly testing it.

> Naview helps you create easier navigations through prototyping and testing. Design and build navigation prototypes quickly. Test the usability of your navigation with users. By naviewapp.com


## 8. [Notism](https://www.notism.io/home)

![notism.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629136621098/X9hsLA9cF.png)

**It can also be used for:** Design Prototyping, Sketching & Visual Thinking	

**Cost:** $18+, there is a free trial.

**What does it do best:** Share, review and sign-off visual content right where it makes sense. Communicate via notes or sketches - right on your uploaded work.

> Fast & precise feedback. Share, review and sign-off visual content right where it makes sense. Effective collaboration. Communicate via notes or sketches - right on your uploaded work. Video collaboration. Communicate in video timelines and directly on the content. - By notism.io


## 9. [Pencil](http://pencil.evolus.vn/)

![pencil.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1629136627793/fnkXYFeQ7.jpeg)

**It can also be used for:** Design Prototyping, Mockups, Wireframing, Diagramming	

**Cost:** Free

**What does it do best:** A nice little open source GUI prototyping tool with a good set of built-in widgets covering web, windows and sketchy UI components. Can export to HTML, PDF, image or Doc.

> An open-source GUI prototyping tool that's available for ALL platforms. Pencil is built for the purpose of providing a free and open-source GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms. - By pencil.evolus.vn


## 10. [Power mockup](https://www.powermockup.com/)

![powermockup-520x392.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1629137193357/H0uxzUDpT.jpeg)

**It can also be used for:** Wireframing, Diagramming, Design Prototyping		

**Cost:** $60+, but there is a free trial.

**What does it do best:** A large collection of user interface elements and icons made entirely out of PowerPoint shapes, useful for creating screen prototypes for mobile, web, and desktop applications using PowerPoint.

> PowerMockup provides a large collection of user interface elements and icons made entirely out of PowerPoint shapes. With these elements you easily can create screen prototypes of mobile, web, and desktop applications—right inside PowerPoint! - By powermockup.com


## 11. [Protoshare](http://www.protoshare.com/)

![protoshare.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1629136716755/SUg11p3YC.jpeg)
**It can also be used for:** Design Prototyping, Wireframing, Diagramming		

**Cost:** $29+, but there is a free trial.

**What does it do best:** A collaborative prototyping tool that helps teams visualize requirements with website wireframes and interactive software and mobile prototypes.

> Join the thousands of users building better websites, software and mobile apps using ProtoShare, and saving countless hours of pointless rework. ProtoShare is an easy-to-use, collaborative prototyping tool that helps teams visualize requirements with website wireframes and interactive software and mobile prototypes while working together in real-time. Start your trial right now, no credit card required. - By protoshare.com


**For Design Prototyping you can also use some tools we've [seen before](https://blog.eleftheriabatsou.com/series/ux-tools) like:**


### 12. [Adobe XD](https://www.adobe.com/products/xd.html)
### 13. [Antetype](https://www.antetype.com/)
### 14. [Balsamiq](https://balsamiq.com/)
### 15. [iRise](https://www.irise.com/)
### 16. [JustInMind](https://www.justinmind.com/)
### 17. [iPlotz](http://iplotz.com/)
### 18. [Keynote](https://www.apple.com/keynote/)
### 19. [Proto](https://proto.io/)
### 20. [Indigo Design by infragistics](https://www.infragistics.com/products/indigo-design)
### 21. [MockingBird](https://gomockingbird.com/home)
### 22. [moqups](https://moqups.com)
### 23. [Pidoco](https://pidoco.com/en)
### 24. [Wireframe Sketcher](https://wireframesketcher.com/)

*We've seen most of them in the category of [Diagramming](https://blog.eleftheriabatsou.com/diagramming-data-repository-card-sorting-and-code-editor-tools-or-ux).*

# Design Research

## 25. [User Interviews](https://www.userinterviews.com/)

![user.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629137527885/ICuhVsSJ2.png)

**It can also be used for:** Research, Design Research, Participant Recruiting, Remote Research	

**Cost:** Free+	

**What does it do best:** Find participants for any kind of research, or talk to your own users faster. Use Recruit to source from the User Interviews pool of 400,000+ participants, or use Research Hub to talk to your own users in 75% less time.

> The fastest way to recruit research participants. Make better product decisions with seamless access to quality participants. - By userinterviews.com


**For Design Research you can also use this tool we've [seen before](https://blog.eleftheriabatsou.com/series/ux-tools):**


### 26. [Firefly](https://www.fireflyapp.com/)

# Handoff

For this category, I'm afraid I already showed you all the [tools](https://blog.eleftheriabatsou.com/series/ux-tools) I knew 😮. If you have something new for our community, please do share it in the comments!

Let me make a quick recap of the tools we discussed before and are for design handoff. 

*Handoff is the process that the designer will give the design to the developer. The designer doesn't give only a design but also includes code and other interesting details. Most of the code and some of the other details are auto-generated by the design tool.*

### 27. [Figma](https://www.figma.com/)
### 28. [inVision](https://www.invisionapp.com/)
### 29. [Just In Mind](https://www.justinmind.com/)
### 30. [Macaw](http://macaw.co/)
### 31. [Sketch](https://www.sketch.com/)
### 32. [specfox](https://specfox.com/)
### 33. [UXPin](https://www.uxpin.com/)


# Heatmaps

## 34. [Clicktale](https://contentsquare.com/clicktale/)

![CLICKTALE NEW LOGO.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629312305581/5CkvHKwgC.png)

**It can also be used for:** Heatmaps, Mouse/Eye tracking, Analytics		

**Cost:** Free

**What does it do best:** Insights and analytics for digital interactions. Uses rich data, machine learning and human intelligence to deliver findings.

> Clicktale is now Contentsquare. We've joined forces to create the global leader in digital experience analytics. Whether you're analyzing a website or mobile app or troubleshooting performance, our combined technologies will help you bring online customer behavior to life.. By contentsquare.com/clicktale


## 35. [Crazy egg](https://www.crazyegg.com/)

![crazy.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629312314791/YxR85-InI.png)

**It can also be used for:** Heatmaps, Mouse/Eye tracking		

**Cost:** $24+, but there is a free trial.

**What does it do best:** Simple heatmapping of website visitors that complements Google Analytics data for email and ad campaigns.

> Whether your goal is to increase sales, subscriptions, or get more pageviews, our website optimization tools can help you get there. Get rid of best practices, opinions, and design guesswork. Our heatmaps, scrollmaps, and other visual reports will show you exactly how your customers are responding to elements on your site. By crazyegg.com


## 36. [clicky](https://clicky.com/)

![clicky.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629312334347/yQOTddBSx.png)

**It can also be used for:** Analytics, Heatmaps		

**Cost:** Free+

**What does it do best:** See how many visitors are on your site and on the page you're viewing. You can also launch heatmaps from the widget, all without leaving your site.

> Everything is real time. Every report in Clicky is up-to-the-minute real time. Ridiculous detail. Most reports contain high detail on every segment. No bots or referrer spam. - By clicky.com


## 37. [hotjar](https://www.hotjar.com/)

![hotjar-logo.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629312346876/MCGKzjsza.png)

**It can also be used for:** Heatmaps, Mouse/Eye Tracking, Session Replay		

**Cost:** Free+

**What does it do best:** Watch session recordings and see how people are actually using your product. Good for building empathy with users and seeing where they get stuck.

> Understand how users behave on your site, what they need, and how they feel, fast.
The slow, manual days of collating data and feedback are over. Hotjar is an intuitive, visual way to discover, consolidate, and communicate user needs. - By hotjar.com

*Note: Hotjar is one of my favorite tools. I use it on my blog but also on my personal website. It helps a tone if you know how to use it properly.*


## 38. [Inspectlet](https://www.inspectlet.com/)

![Inspectletlogo.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1629312368764/jj43M6Fxy.jpeg)

**It can also be used for:** Heatmaps, Mouse/Eye Tracking, Session Replay, Analytics		

**Cost:** Free+

**What does it do best:** Inspectlet records videos of your visitors as they use your site, allowing you to see everything they do.

> Stop guessing what your visitors want. Google Analytics tells you what, Inspectlet tells you why. Inspectlet records videos of your visitors as they use your site, allowing you to see everything they do. See every mouse movement, scroll, click, and keypress on your site. You never need to wonder how exactly people are using your site again. - By inspectlet.com

## 39. [Mouse Stat](https://www.mousestats.com/)

![mousesta.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629312386977/BatXYFRmN.png)

** It can also be used for:** Heatmaps, Mouse/Eye Tracking, Session Replay		

**Cost:** Free+

**What does it do best:** Record the full session of real visitors like a camera on your website and playback their cursor, clicks, page views and more like a movie.  

> There are lots of great analytic products out there to measure success, but none of them will tell you “how” to become victorious. Browse millions of visitor real interactions on your website and understand what they want. - By mousestats.com


## 40. [Ptengine](https://www.ptengine.com/)

![ptengine.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629312405158/HsvfIP9N7.png)

**It can also be used for:** Heatmaps, Mouse/Eye Tracking, Analytics		

**Cost:** Free+

**What does it do best:** Use website heatmaps and analytics to understand visitor behavior on your site.

> Upgrade your Website with the most Powerful Growth Engine Ptengine is a complete marketing and analytics platform. We help you to truly understand your users and take actions by personalizing content and run tests. It's free to get started and ready to go in a few minutes. - By ptengine.com


## 41. [Smartlook](https://www.smartlook.com/)

![smart.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1629312423392/h0s2I0L00.jpeg)

**It can also be used for:** Heatmaps, Mouse/Eye Tracking, Session Replay		

**Cost:** Free+

**What does it do best:** Record everything visitors do on your website or in your mobile app. Start understanding the 'whys' of your users' behaviors with clear, visual insights.

> Analyze user behavior in ways never possible before. Smartlook records users on websites and in mobile apps. With features that allow you to find useful information even in thousands of recordings in no time. - By smartlook.com

Some other tools that you can use and we have [discussed](https://blog.eleftheriabatsou.com/series/ux-tools) before are:

### 42. [Chalkmark](https://www.optimalworkshop.com/chalkmark/)
### 43. [Feng Gui](http://www.feng-gui.com/)
### 44. [Loop11](https://www.loop11.com/)
### 44. [Matomo](https://matomo.org/)

# Information Architecture

## 45. [FlowMapp.com](https://www.flowmapp.com/)

![flowmapp.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1629351932101/cTHdddBmy.jpeg)

** It can also be used for:** Information Architecture, User Flows		

**Cost:** Free+

**What does it do best:** An online tool for creating visual sitemaps and user flows.

> UX tools for web design. Design exceptional UX for beautiful products, websites, and apps. with the online collaborative tools. - By flowmapp.com

## 46. [Helio](https://helio.app/)

![helio_logo.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629351941291/SmeGr5quy.png)

**It can also be used for:** Information Architecture, Usability Testing		

**Cost:** Free

**What does it do best:** Design successful products by rapidly revealing key user behaviors. Helio makes it easy to get reactions on your designs quickly so your team can focus on solving the right problems, right now.

> A survey platform for asking design, product, and marketing questions. We provide qualitative and quantitative answers from our audience or your customers. - By helio.app

## 47. [UsabilityHub](https://usabilityhub.com/)

![usability hub.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629352006131/dzmVin4Xv.png)

**It can also be used for:** 	Evaluating Design, Information Architecture, Remote Research, Surveying Users, Usability Testing, Participant Panels		

**Cost:** Free+

**What does it do best:** A remote user research platform for testing interfaces, interaction flows, iconography. Recruit your own users free, or select from a 100k= participant panel.

> UsabilityHub is a remote user research platform that takes the guesswork out of design decisions by validating them with real users. Design professionals
Test interfaces, interaction flows, iconography and more, to help you create intuitive and delightful experiences for your users. - By usabilityhub.com

## 48. [usabiliTEST](https://www.usabilitest.com/)

![usabilitestLogo.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629352018433/U3NLtJ59k.png)

** It can also be used for:** Card Sorting, Information Architecture

**Cost:** $24.95+

**What does it do best:** A card sorting tool with open, closed or hybrid test types, and built-in data analytics. For improving the information architecture of your project. Cards can have images, text or both. 

> Improve information architecture (IA) of your project. Get instant results with built-in data analytics. Our Card Sorting tool supports open, closed or hybrid test types and cards can have images, text or both. Try this online tool today and enjoy unlimited tests.- By usabilitest.com

## 49. [UserZoom](https://www.userzoom.com/)

![UserZoom_Logo.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1629352026179/alt84YhZS.jpeg)

** It can also be used for:** Information Architecture, Surveying Users, Usability Testing, Participant Panels

**Cost:** No Info

**What does it do best:** Business-focussed usability test participant sourcing, remote study creation, automated reporting dashboards.

> Experience Insights Management (XIM) for digital teams. Gather, analyze, and share UX and CX insights across your business to create products customers love. - By userzoom.com

Some other tools that you can use and we have [discussed](https://blog.eleftheriabatsou.com/series/ux-tools) before are:

### 50. [Naview](https://www.naviewapp.com/)
### 51. [Loop11](https://www.loop11.com/)
### 52. [OptimalSort](https://www.optimalworkshop.com/optimalsort/)

# Participant panels

## 53. [UserPeek](https://userpeek.com/) (formerly Usertest)

![userpeek-logo-vertical.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629353601185/S0TzHd9sz.png)

**It can also be used for:** Usability, Participant Panels	

**Cost:** No Info

**What does it do best:** Combines qualitative and quantitative approach. Integrated with a 10 million person panel.

> See and hear real people using your website, online shop or app. Take the shortcut to awesome user experience by understanding the why behind the what. - By userpeek.com

## 54. [userlytics](https://www.userlytics.com/) 

![Userlytics_Logo.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1629353683223/Wu37A7BVD.jpeg)

**It can also be used for:** Usability Testing, Analytics, Participant Screening, Participant Panels, Audio Transcription		

**Cost:** $49+

**What does it do best:** Set a screener for their panel of testers, define goals, tasks and questions (with metrics like time-on-task, success/fail, SUS, NPS and SEQ), and get feedback via picture-in-picture videos and automated transcriptions.

> Test your websites, mobile apps, prototypes and even competitor assets; optimize your customer journey, user interface, and your users' overall experience. - By userlytics.com

## 55. [UserTesting](https://www.usertesting.com/) 

![usertesting-logo-vector.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629353677738/-XxqkVR90.png)

**It can also be used for:** Remote Research, Usability Testing, Participant Panels		

**Cost:** No Info

**What does it do best:** Adds usability testing to an agile process. Video, audio and written feedback on designs, run own tests or outsource. One of the largest and most diverse first-party panels. Claims that 80% of test videos will be completed in less than 2 hours.

> Experience what your customers experience. Within a few hours, get the human insight you need to deliver exceptional products, services, or brands. - By usertesting.com

Some other tools that you can use and we have [discussed](https://blog.eleftheriabatsou.com/series/ux-tools) before are:

### 56. [UserZoom](https://www.userzoom.com/)
### 57. [ARCS – Automated Recruiting and Communication System](http://www.m-s-g.com/Pages/arcs)
### 58. [UsabilityHub](https://usabilityhub.com/)



****************************************

# Conclusion
That was my biggest list of UX tools so far🤩.

In this article, we checked different tools you can use for: Design Prototyping, Research, Handoff, Heatmaps, Information Architecture and Participant Panel. Usually, the tools can be used for more than 1 thing (for example convention, heat maps, user testing, etc.). Some tools are free and others are paid. The paid tools, most often, will provide a free trial or a demo!

More categories are coming soon! Make sure to sign in to my newsletter so you won't miss any updates on this or upcoming articles.

I’d love to hear from you. Which one are you most looking forward to using?

**************************************

👋Hello, I'm Eleftheria, Community Manager at Hashnode, developer, public speaker, and chocolate lover.

🥰If you liked this post please share.

🍩Would you care about **buying me a coffee**? You can do it [here](https://www.buymeacoffee.com/elef/) but If you can't that's ok too!

[![cofGif.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1616336641314/ycZgZ44G3.gif)](https://www.paypal.com/paypalme/eleftheriabatsou)


**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/elef_in_tech)