When we think of artists and craftsmen of ancient times or the Renaissance, we can easily imagine the instruments they used to create their masterpieces. But in the digital era, what are the tools used by people behind our favorite apps and online platforms? And more specifically, what is a product designer’s toolbox?
Jonathan Lieberman, a Product Designer at Uber, surveyed a handful of world-class designers. He asked them how tools have shaped them as professionals. In his article for the UX collective, Lieberman shared the results - 85% of respondents said that tools they have been using in their work daily have shaped them as designers. Indeed, the designer's toolkit is an important part of the design process and affects the result.
On the other hand, the number of product design tools these days grew dramatically and their functions overlap. So in this article, Eleken designers want to share their recommendations and go-to tools that can help you and your team bring new brilliant design ideas to life.
Product design process
Different stages of design creation require different tools. So to learn what is the product design toolbox we need to talk about the process of product design first. Let’s quickly recap the main stages of product design and what is going on during them.
Every design project starts with research. The design team researches not only the product they are about to design or redesign, but also analyze users, customer journey, competitors, and, of course, the latest design trends.
When the research is done it’s time to brainstorm ideas and build a strategy. This is the most exciting and creative part of the design process. At this stage, designers brainstorm various ideas, analyze them, build mood boards, pick the direction of the future design and create wireframes.
The strategy is ready, and here begins the most fundamental design stage. We start with prototyping. The prototype is the simplest version of a product and its main goal is to bring the client and design team on the same page regarding how the product is going to look like.
After all the expectations are met we proceed to the next stage, which is testing. Here we identify what works and what doesn’t in terms of design and implement the best solution.
Once the product design is ready, the designers hand it off to developers and collaborate with them until release. This is a basic product design lifecycle.
Now that we’re on the same page in terms of the product design process, let’s see what tools product designers use at every stage mentioned.
Tools for the research stage
Understanding who will use the future product leads to more human-centric designs. Sometimes information about focus groups is provided by the clients, but very often it’s on the designers’ team table.
A popular method in user research is UX surveys. For questionnaires, designers can use tools like SurveyMonkey, Typeform, and Google Forms. These tools work as anonymous surveys. The key here is the right questions to ask the audience. SurveyMonkey offers some question templates that can save time for the team. And Typeform has a more intuitive one-question-a-page approach, customization, and templates. Our team’s choice is Google Forms as we like that the results can be easily exported to Google Sheets. Such surveys can bring valuable insights.
An important part of good research is user interviews. Here the team can use Descript. It was created as a platform for podcasting and video editing. But it’s also very handy for professional user interviews. Videos can be recorded and decrypted within the platform. Decrypted and subtitled videos are easier to work with so this platform also became one of our tools.
For some projects, the design team may need access to Google Analytics. It is quite a complex tool but if you know what information you are searching it can help a lot. Convenient dashboards and reports will help decrypt the data. Google Analytics can tell details like interests, location, user demographics, device they use, frequency of visits, and time of engagement. Such information lets designers understand users better and create a design that is effective for business goals.
We need to keep in mind that often tools used in product design for research overlap with tools that are used for prototype testing. The reason is that for both processes we need smart analytics. For example, Hotjar or Maze. On both platforms, you can pay users to participate in your research or test your prototype. We will talk about them in more detail later when it comes to testing.
After the information has been collected during the research, the design team can start brainstorming based on everything they know about the product and its users.
Brainstorming tools for product designers
Brainstorming is fun! A simple whiteboard and sticky notes proved to be the best tools for ideation. And for remote teams, there are digital analogues, such as Lucidchart. The app was designed for teams to collaborate and visualize complex ideas. It lets you create all kinds of diagrams which can be a powerful method of structuring information, processes, and ideas. Lucidchart also has a handful of integrations, starting with Jira, Slack, and Google Workspace. Designers say it’s great for an early-stage conceptualization of a product and user flows.
For Figma fans, the company has introduced a product Figjam. Besides white-boarding tools, Figjam has audio chat for the teams along with a built-in timer. These add-ons make collective brainstorming quick and smooth. Plus the tool has been created specifically for design teams. Another feature that product teams might find useful is “Open Sessions''. It lets invite external guests, clients, or experts to brainstorm together without a login.
Each of these tools is great for collective brainstorming and strategy building. Check them out and pick the one that meets your team’s needs the most.
Design execution - main tool in the designer's toolbox
When it comes to product designers’ toolbox most designers will name Sketch, Adobe, or Figma as their main work instruments. Our team’s choice is Figma. Figma has lots of benefits and is a leader among tools used in product design. First of all, it is a completely cloud-based and real-time platform. There’s no need to pass files or download the web app, which makes collaboration with the team, developers, and clients much easier. Figma can be used for fast prototyping, wireframing, user flows, user journeys, and high-fidelity design.
Prototyping tools
Prototyping is the process where the idea comes to life in simple real-app models. Having a reliable prototyping instrument is essential for product designers' toolbox. With its help designers can create visuals and navigational elements to represent how the future design will look like. If you use Figma, you can create prototypes there, but we recommend paying attention to the following platforms.
InVision Studio is one of the digital product design platforms for prototyping, collaboration, and workflow. Designers often choose it for high-fidelity prototyping. The solution offers mobile device mirroring, preset controls, instant playback, and Sketch integration. It’s really great for rapid prototyping.
Designers who want to add a little sparkle to their prototypes often highlight Principle. This is a designing tool for animated and interactive user interfaces for the web, mobile, and desktop. Device presets and intelligent integrations with Figma and Sketch make it a convenient tool for fast prototyping. A strong toolset for animation broadens the prototyping opportunities. For newcomers, the website offers tips and courses that help pick up Principle skills.
Design teams also choose cloud-based UXPin with its set of UX templates and elements.
For product design, we recommend those platforms and tools that let us prototype as fast as possible. The choice of prototyping tool might be overwhelming, as there are so many of them on the market. And, to be honest, they are all good. So it makes sense to test a couple of them and add to your product design toolkit the one that brings you the best result.
Designer’s testing tools
Design is going along with the pace of the modern world. Usability testing is the method that helps product designers quickly try what works and what doesn’t. As we’ve mentioned, understanding users’ motivation helps designers build more user-friendly designs.
Hotjar is an analytics platform that combines analysis and feedback tools that reveal users’ behavior online. Such a tool helps to understand how users interact with the product. Hotjar provides heat maps and session recordings. Heatmaps mark the most and least popular areas on the website. Such insight lets designers place important elements and features of the product where users can easily find them.
Session recordings are also very insightful, they even can show why users leave websites. For example, they try to click unclickable buttons and get frustrated. With this tip, designers can fix the issue and provide a better product experience.
Image source: HotJar
A similar instrument on the product design tools list can be Maze. It is a rapid testing platform that allows building simple tests and validating prototypes. Maze has handy integrations with Figma, Adobe, and Sketch.
Tools for collaboration with developers
At some point, it is time for the designer to share their work with developers. Guess what, there are tools for such cooperation, too. Zeplin is collaboration software for product teams to share work. It supports Figma, Sketch, and Adobe XD designs.
Zeplin automatically generates specs, assets, and code snippets. So there’s no need to manually write out sizes or margins, type the copy, export icons. It saves a lot of time for designers. Developers love it too. Also, designers can share their design system with the team. They can create style guides linking them to multiple projects. This way developers can easily reference the design system.
These days most design platforms such as Figma, UXPin, InVision Studio offer convenient solutions to collaborate with developers. So the need to pass files and directions manually remains in the past.
Neat documentation tools
Part of the smooth team’s workflow and an important instrument in the product design toolkit is a perfect documentation tool. Many companies around the world trust Google Workspace (former Google Suite). We chose another neat and simple documentation tool - Notion. This is a project management system where you can manage tasks and projects, create docs and notes and collaborate in real time. Its minimalistic design and intuitive structure make Notion one of our favorite tools for project documentation.
Image source: Notion
As an alternative, there is Atlassian product Confluence which works similarly and has great integration with Jira.
Communication tools
The product designer toolbox wouldn’t be full without communication tools. Successful teams communicate constantly. Popular recommendation service Wirecutter named Slack the best messaging platform for teams. We at Eleken use Slack every day. This instant messaging platform for teams is very work-focused. Slack can be used for calls and has great culture-based functions that create a great work mood. The benefit for designers is that Slack has integration with Figma.
If you are looking for alternatives to Slack, try Rocket. Chat. It is a communication platform for communication. Through Rocket. Chat the team can talk not only to each other but also to customers and vendors. The tool is fully customizable and is well-known for its high data protection.
Task management tools and time trackers also make the work of product designers more effective. There are lots of them on the market. Toggle, Asana, Jira, Trello, and Todoist are the most popular. Try which one works best for you and manage your team, your own time, and tasks like a boss.
To sum up
Digital product design is a complex process. But with the right set of tools, it becomes smooth and more effective.
The tools above are not the full list, they have proven to be effective by the product designers community and our team. But before selecting any of them, we suggest testing them by yourself and choosing the one that works best for your team. Handpick a tool for every stage of the design process, and don’t forget to add to your product design toolbox documentation, communication tools, and task trackers.
Here at Eleken, we believe that it’s not a fancy toolbox that makes a good design. However, it is undoubtedly true that a good set of tools definitely makes the workflow less stressful. If you are thinking of building a digital product, feel free to drop us a line, or read our related article on product design and why it matters.
