Inside the product design community, there is a debate about the tools each product designer needs to use to achieve the best from the design process. It is funny for me to read in different communities people that debate about the best design tool designers can use. It is especially noted when people debate about the core UX design tools. Is it best Figma, XD or Sketch?

Designers like to debate about the best product design tool

Apart from the main UX design tool, we use other tools in the product design process that sometimes stay out of the spotlight, like Miro, Notion, Google Docs, etc.

In this article, I would like to share some tools that can help during the design process. I will try to go beyond the normal tools and share tools and some techniques that are not so famous.

I would like to note that different product designers may have different needs. For example, a designer specializing in mobile applications may require different tools than a designer whose primary focus is web applications. Apart from that, each process is different and it will be worth taking from this article only the information that can help your particular case.

I will show how some tools can be used at different stages of the design process and provide examples. Because product design creation is usually constructed from 5 phases: Research, Ideation, Design, Handoff, and Design QA, I will attempt in this article to demonstrate how we can use them in each of these phases.

Whiteboard application

A whiteboard application is a program that can be used by one or more people to brainstorm, organize, and conceptualize ideas. A big advantage of utilizing a whiteboard application is that many people can use it simultaneously in order to share ideas, brainstorm, and create wireframes during meetings, design thinking sessions, or design sprints.

Many types of whiteboard applications are available today. Among the most common we can find Figjam, Miro, Mural, Collaboard, Explaineverything, and Lucidspark.

Figjam, the whiteboard from Figma.

Whiteboard application for research

When it comes to the research phase, Whiteboard is like magic. Using it, you can share with everyone in the team the information gathered from different sources that you need to be able to design a great solution. (For example, users, developers, benchmarketing, etc.) In a quick and dirty manner, you can place all the information inside the board to be able to show it to your teammates. Be aware that in this context I am not only referring to scheduled meetings but also cases when we wish to show our teammates something in a rapid manner for quick feedback. For example, when you design icons for your product, you can store all the research you did for the icon, such as screenshots, and present it to the team. In addition, it is a great place to organize the information you collect from developers about technology limitations or information about the market and the targets that the project manager explains to you.

Aside from that, you can organize all the information cleanly. For instance, as part of my user research, you can build user personas, user journeys, and affinity maps. There are great templates in most of the products and that makes it super easy to build all of these items.

Whiteboard application for Ideation

Whiteboard applications are characterized by large whiteboards, which come with an array of tools suitable for use during the ideation phase and they are useful during the product design process.

You may think of designing thinking workshops or a design sprint when we talk about the Ideation phase, and that is accurate. Moreover, you can discuss the scope of features, prioritizing tasks, and also shape the product vision with the product team. In many cases, these products come with a wireframe library, and it is very useful to begin planning the interface with the PM and the developers during a meeting.

Aside from collaboration with your team, some apps are also available for the iPad, and you can use a pencil to sketch your ideas inside the app.

An example of sketching with Miro using the desktop app and the iPad app.

Whiteboard application for Handoff

Whiteboards are useful ​for supporting the design handoff process. In the software, you can organize all the charts and other information that you need to provide to the developer. An example might include user flow, task flows, and an input map that specifies the values a user can add to each input, as well as whether it has any dependencies.

Whiteboard application for design QA

Many product designers perform a design quality assurance process to ensure that the solution has been implemented exactly as they intended after the development process. You can use Whiteboard tools to organize all the information you want to share with the developers. For example, if you notice some differences between the design and the implementation, you can organize all the screenshots inside and paint over them to illustrate the errors and explain the correct behavior below them. A well-organized document will allow the developer to review it point by point. For issues that cannot be described with a screenshot, you can attach a video screen record and post the link so the developer can see more clearly what’s happening.

Screen recording program

A screen recording program is a type of software that records what is displayed on the screen.

A big benefit of this program is that you can record the entire screen or just a specific area of the screen with a screenshot or a video that includes sound that allows you to describe and communicate information easily as a designer. Video files created with this software can be uploaded to cloud storage and shared with your team.

There are many types of screen recording software available today. Loom, Quicktime, CloudApp, and Vimeo are among the most popular.

Screen recording ​for research

Screen recording applications can be used for research in different areas during the product design process such as user interviews, usability tests, and Benchmarketing. Below are some examples to illustrate this better:

• Benchmarketing: If you are researching a solution for a product you are developing, you can use the competing applications to understand what you can learn from them. While using the product, you may record your screen. By doing so, you will be able to return to the video afterward and review the product without logging in.
• Interaction: Screen recording software also allows you to record interactions you see in different products. As an example, if you are searching for the interaction of a tooltip or other component, you can review a variety of products, and when you find a particularly interesting interaction on the user interface, you can record the screen and refer to it as needed.

User interviews and usability tests

It is especially important to record the screen while conducting user interviews and usability testing in order to be able to rewatch the video to ensure that nothing has been missed.

Screen recording ​for handoff

In some cases when the design includes a lot of details, you can build an interactive prototype and record the screen. You can explain each screen during the recording. By sharing the video with the developers they can take a look at it before implementation and understand better what you mean.

Screen recording ​for design QA

When we perform the design QA, we may find errors in a flow or interaction, and screenshots do not clearly explain these errors. If this is the case, a video screen recording would be preferable. To explains the error to the developer, you can record a video and speak your explanation.

Cloud Storage

When I say cloud storage, I mean any application that you can use to store files. It could be for instance Dropbox, Google Drive, or OneDrive.

Any file associated with the design process can be saved using these applications. Video files are a good example. Video files are heavy, so the correct place to save and share them is on the cloud.

Facebook and Linkedin

Facebook and LinkedIn can be used for research purposes. Now that you’re wondering, why does he mention making use of Facebook and LinkedIn during the research phase? Answering this question is straightforward. If you do not understand something or find a gap in your knowledge about an aspect of UX, you can ask a question on Facebook or LinkedIn communities. When you ask questions in communities, you can gain an understanding of some things and gain knowledge.

An example of a question I asked in the Facebook community about product design.

Voice to text apps

Voice to text software is a program that allows you to convert audio to text. ​Using these tools is a great option for user interviews, usability testing, and sometimes in a regular meeting. These programs have two major advantages

• We sometimes converse with people whose accents are difficult to understand. In that case, the program helps you since you can read from a text.
• In cases where you want to quote the person as it is, it saves typing time.

If you are interested, you can check out these programs: Happy Scribe, Otterr.

Grammar, spelling, and UX writing

You can use great tools to improve the text you write in a document as well as in your digital product. Some of them are more aimed at reviewing your text and correcting any spelling or grammar errors, and others are aimed at improving your text and changing its style. Young startups are an example of an environment where a tool that changes the style of the text can be used by a designer. As the team is small, it may be necessary for the designer to design a landing page. The tool can help improve the text on a landing page.

For correct spelling and grammar, you may wish to use Grammarly or LanguageTool. You can use Wordtune to change the style of your text.

Wordtune is a good tool to improve your writing style

Documentation and wiki tools

You can use this type of tool to document and share knowledge. With these tools, teams can create a space where they can keep all the information related to their products or projects. The use of a wiki tool in an organization is important since it allows information to be easily exchanged. Comoom tools in this category include Notion, Confluence bit.ai, and Slite.

Documentation and wiki tools for research

When discussing the research phase, you can use them in that ways:

• Create, share, and organize user interview templates and testing results.
• Research related to the product you are designing.

Templates and results documentation for user interviews and usability tests

There are several tools available for creating scripts for conducting user interviews and usability tests, but an easy way is to use the templates you save with the wiki tools. If you need to conduct a usability test or user interview, you can use the templates you created. When you have completed the user interview or usability test, you can organize and write in the wiki tool all the information that has been gathered. Because those software programs are also collaboration tools, you will be able to share information that way, so everyone on my team can access it easily.

Research related to the product design

In order to fully understand our product, we need to understand its legacy. It is most likely that you will be required to design a part of a product that you have not worked on in the past. Reading what the developers, product managers, designers, and technical writers wrote about this area will help you to understand the overall picture and feel confident that what you will design is appropriate.

The wiki tools can be used to document team decisions

A wiki tool is a powerful tool when you need to document some decisions that your product team agreed to during the design process. For example, the team may have decided that for now, they will not add a bulk action because, at that moment, the team believes that it is not the most important feature for users and they wish to focus on other areas of the app. By putting this information in writing, you will have the ability to review the team decisions and explain why certain decisions were made.

Moreover, Documenting all this information is helpful because in general, we do not remember what we agreed on, so if you organize it from the start of the product design, you will be able to back up and verify the design decisions.

Project management tool

A project management tool is a software that tracks the progress of the project.

Utilizing project management tools can assist in organizing tasks, setting deadlines, and breaking larger tasks into smaller pieces.

Typically, these tools are managed by the product manager or product owner. As a designer, you can see your tasks and the team’s tasks.

However, some designers are unwilling to work with these products as they believe that these products are more focused on the development and not on product design I suggest you invest some time to learn about these products, as it will enhance your understanding of agile processes.

Monday, Notion, ClickUp, Trello, and Jira are among the most popular tools.

Core UX/UI design tool

I believe that I do not have to write a lot since most designers are familiar with this type of tool since it is our main tool during the design process The most popular are Figma, Sketch, and Adobe XD, but there are others such as Balsamiq, InVision Studio, Framer, and UXpin.

Figma, the most common design tool for product designers today

UX/UI design tool For a usability test

These tools are highly recommended if you wish to create a prototype and test it with users. It is easy to construct a clear user flow and test it. You do not need to build it with high-fidelity screens. Prototype with Low fidelity wireframes can also be used to test some concepts. Remember that wireframes can be generated quickly if you have a UI kit containing all the assets you require.

Core design tool for HI fidelity and Handoff

When we need to prepare all the screens and deliver them to the developers, this is the tool to use. You must have a clear UI kit of your design system in order to work quickly and accurately.

The developer can be made aware of small details by adding small explanations below some of the screens, for instance, “Make sure a tooltip appears when the user hovers over the icon”, for example. In addition to the screens, you may wish to create a prototype to assist the developers in understanding the flow.