DEV Community

Cover image for Design Prototyping, Research, Handoff, Heatmaps, Info. Architecture, Participant Panels Tools | UX
Eleftheria Batsou
Eleftheria Batsou

Posted on • Originally published at blog.eleftheriabatsou.com

Design Prototyping, Research, Handoff, Heatmaps, Info. Architecture, Participant Panels Tools | UX

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

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

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

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

FLUIDUI-LOGO.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

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

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

naview-logo.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

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

pencil.jpg

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

powermockup-520x392.jpg

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

protoshare.jpg
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 like:

12. Adobe XD

13. Antetype

14. Balsamiq

15. iRise

16. JustInMind

17. iPlotz

18. Keynote

19. Proto

20. Indigo Design by infragistics

21. MockingBird

22. moqups

23. Pidoco

24. Wireframe Sketcher

We've seen most of them in the category of Diagramming.

Design Research

25. User Interviews

user.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:

26. Firefly

Handoff

For this category, I'm afraid I already showed you all the 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

28. inVision

29. Just In Mind

30. Macaw

31. Sketch

32. specfox

33. UXPin

Heatmaps

34. Clicktale

CLICKTALE NEW LOGO.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

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

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

hotjar-logo.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

Inspectletlogo.jpg

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

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

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

smart.jpg

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 before are:

42. Chalkmark

43. Feng Gui

44. Loop11

44. Matomo

Information Architecture

45. FlowMapp.com

flowmapp.jpg

** 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

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

usability hub.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

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

UserZoom_Logo.jpg

** 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 before are:

50. Naview

51. Loop11

52. OptimalSort

Participant panels

53. UserPeek (formerly Usertest)

userpeek-logo-vertical.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

Userlytics_Logo.jpg

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

usertesting-logo-vector.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 before are:

56. UserZoom

57. ARCS – Automated Recruiting and Communication System

58. UsabilityHub


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 but If you can't that's ok too!

cofGif.gif


🙏It would be nice to subscribe to my Youtube channel. It’s free and it helps to create more content.

🌈Youtube | Codepen | GitHub | Twitter | Site | Instagram

Top comments (0)