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.
Top Stories
What Is a High-Fidelity Wireframe and When to Use It: Designers Explain
For those from outside the industry, the word ‘wireframes’ may sound complex, boring, or even intimidating. But if you are in the design or product field you know that wireframes are actually a great way to present how the digital product will work and look.
We are a UX design agency for product companies so we know a great deal about wireframes and their importance in the design process. We also know that what seems obvious to designers can still be a mystery for specialists in other fields. In this article, we will address all of your concerns related to high-fidelity wireframes and share some examples from our talented UX designers.
But first, it is important to understand the basics.
What is a wireframe?
A wireframe is a schematic layout of the future product, will it be a website, an app, or a platform. A wireframe is always a simple text-and-line representation. It is sort of a skeleton of the future product design.
Wireframes are low-fidelity prototypes. And this causes some confusion: what is considered a wireframe, as wireframes are prototypes, but not the other way around? This topic requires an in-depth explanation, so when you're curious to learn the difference between wireframes, mockups, and prototypes, go read our dedicated article.
Usually, wireframes look like schematic blocks with elements that visually illustrate how various components of the website will be organized. They are monochrome, often black and white, but not always.
Here are high-fidelity wireframes examples our designers built for the cloud-based veterinary management platform. They use black and pink color to highlight different elements of the product's future look.
The understanding of how and why we use wireframes in the design process can help us with high-fidelity wireframe definition.
Designing a product is a complex journey, so we need to break it down to smaller steps.
Wireframing is part of ideation and prototyping stages of the product design. Depending on the stage of product development, designers use different fidelity wireframes ranging from low to high. From the design point of view, fidelity is how detailed the wireframe of the future product will be.
What is a low-fidelity wireframe?
A low-fidelity (lo-fi) wireframe lies between a black and white sketch on paper to a simple digital sketch. Focusing on the main elements of the design, it usually has boxes and lines depicting the main idea of the website or app. Interpretation of the design is missing, and not much is offered as user interface interaction.
Lo-fi wireframes can reflect a product’s basic architecture and features, showing where the content and visuals blocks will be placed. With the help of lo-fi wireframes, the designer can visualize concepts and design possibilities at the beginning of the product development phase.
Low-fidelity wireframes are part of the ideation process. As much of the details are missing at this stage, designers usually present them to the client with some additional comments. Lo-fi wireframes are time-saving for both product owners and the design team. Simplicity, effectiveness, and time-saving characteristics make low-fidelity wireframes a valid part of the product development equation.
We hope that by this point you got an idea of how wireframes work. However, there is still a big question to anser .
What is a high-fidelity wireframe?
Following the logic, a high-fidelity (hi-fi) wireframe is an advanced version of a low-fidelity wireframe. However, it is more than a sketch with more details, but a series of thought-through screens that illustrate each element and the connections between them. But unlike more developed prototypes, wireframes are always static. The graphics of hi-fi wireframes are usually more distinct than of lo-fi wireframes, but not as detailed as of hi-fi prototypes`.
The key difference between low-fidelity and high-fidelity wireframes is that lo-fi represents design direction and general layout while the hi-fi is well-researched and presents a more precise look and functionality of the future product.
Lo-fi sketches can result in human error and deliver confusing messages. High-fidelity, on the other hand, offers fewer chances for human error. The feedback from hi-fi wireframes is more constructive, since the participants get the product design idea more clearly, which also contributes to developing a better and more complete user experience. As a result, hi-fi wireframes leave little to no room for misunderstandings and bring more productive results.
Hi-fi wireframes take more time to develop and provide a better visual representation of main screens. Good hi-fi wireframes should rely on user research to provide a solid base for the finalized UX/UI design. You probably noticed that our hi-fi wireframes mentioned in this article are often different in detail level. The reason is simple:It depends on the project we are working on and the client’s request.
More detailed wireframes require a little more time, but as you can see from our high-fidelity wireframe examples, they must remain very accurate in presenting the future design to avoid confusion.
Now when we figure out what high-fidelity wireframes are and why they are good, it’s about time we address the last question.
When to use hi-fi wireframes?
High-fidelity wireframes are one of the most effective UX deliverables. First of all, they are a great base for more detailed mockups that imitate how the product will work. Wireframes can be used to represent the screens and how they appear after one another when the product is in use.
Hi-fi wireframes can also be used to create a strong framework for your design. High-fidelity wireframes give designers a ground to make better decisions related to the final product's design.
Here’s a hi-fi wireframe and finalized design of our project. You can see that wireframe is a pretty accurate representation of what it will become.
One more indicator that the product needs high-fidelity wireframes is when the designer needs to visualize the specific design ideas to stakeholders. It is sometimes difficult for the client to visualize the outcome of the particular software or app based on very simple lo-fi wireframes, while high-fidelity design delivers most of the details, making it easier for the client to approve or suggest changes.
Hi-fi wireframes can also save you when you are building a startup and are aiming to find investors. To not waste a lot of resources, you can opt for using hi-fi wireframes to present your MVP and get investors to see your ideas.
At Eleken, we use high-fidelity wireframes to get feedback on things like:
- The overall the look-and-feel of the future design;
- How readable text is and what size it should be;
- What images to use for buttons and other graphics;
- How big margins should be between different elements
- Whether your logo fits with the overall design.
- And the overall UI layout enhances the aesthetic and content of the future product.
Our Head of Design recommends building hi-fi wireframes when you are creating a product design from scratch. If you are redesigning the existing product, wireframes can be skipped. And let’s not forget about mockups. We build them for almost every project, and the base for mockups are good old hi-fi wireframes.
Conclusion
High-fidelity wireframes are a very effective part of ideation and prototyping stages of the product design process. Realistic and time-efficient they are the skeleton of the future digital designs and a great way to communicate design ideas to the team and clients.
Eleken designers are ready to guide you through the pros and cons of low-fidelity and high-fidelity wireframes. We will help you pick the approach that is best for your product. Book a trial with our designers and see for yourself that wireframes are the great start to future powerful user experiences.
What Makes a Good Product Manager: 7 Most Wanted Superpowers
Behind every successful product, there’s someone — usually called a product manager (PM) — who effectively combines technology and design to solve users’ problems in a way that is beneficial for business.
Being a good product manager is not easy in any sense. It requires a mix of design, tech, and business knowledge, a mix of competencies and backgrounds, and a mix of technical and soft skills from the strategic to the detail-oriented. Effective product managers sometimes seem to be superhumans that know everything and can handle everything.
Thus, starting a PM career may feel confusing. Where to start from? Which knowledge and skills are essential? What are product manager's responsibilities?
Instead of racking our brains with those questions, we found people who are already in this business and asked them what makes a good PM. Below, you will find the list of most wanted and important qualities of a product manager, according to product managers.
1. Reading your customers’ minds
Product manager roles and responsibilities include determining what gets built and delivered to customers. Sounds simple enough.
What’s hard is to make sure that the product backlog is worth building. That it gives customers something so valuable they consider it worthy of their time, energy and money. Something that overcomes customer pain points.
How to achieve this product-user fit is the biggest business mystery. If there was a working recipe, 90% of startups wouldn’t fail. That's probably why Ibrahim Mehieddine, PM at Peep, calls reading minds the most wanted product managers' superpower.
If you have not yet mastered the skill of reading minds, you may replace it by hiring experienced UX designers that can run user research for you. That’s what Peep has done, basically — the company became a client of Eleken UI/UX agency.
2. Understanding the data
A big part of knowing your customers is understanding what they are doing in your app. The Internet allows figuring customer behavior out with impressive accuracy — thanks to sales analytics, usage analytics and A/B tests. But you can benefit from the piles of data only if you can analyze it, both with the help of algorithms and data scientists, and implement findings to support your product strategy.
According to Arpit, the Founder of Astorik, one of the PM's superpowers should definitely include a good understanding of customer data:
“Every PM needs to own the [analytical] instrumentation for new product features in order to measure usage and impact. Understanding how this data is collected and stored is extremely important.”
3. Imposing structure on chaos
You have collected your cookies, finished research and user interviews. You have analyzed lots of data, and now — what should you do with it next? How do you understand what is important and what is not?
Shreyas Doshi, who built products at Stripe, Twitter, Google and Yahoo, believes that key strengths of a product manager should include turning a kazillion excel spreadsheets full of data into insightful elegant tables or diagrams. “Finding clarity in chaos”, as Toby Rogers summarised it.
Comments under this tweet are full of people who agree with Shreyas’ statement. Alli Rubin, a successful Product Manager at Xpoint, says she feels like 50% of her day is organizing things for people who are content with letting it live unstructured in their minds and just explaining verbally.
4. Knowing your product (and competitor’s product) like the back of your hand
After you learn to read your customers’ minds, it’s time to become an undisputed expert regarding your product and your industry. All PMs we asked agree you can’t move into product management without a deep understanding of your own and your competitors’ products.
A senior person once told Rob Truesdell when he first got into a PM to do the following:
- Know your product better than anyone on this planet.
- Know your competitor's product better than anyone on this planet.
Now Rob Truesdell is the VP of Products at Pangea, so that must have been really good advice.
Another piece of advice that Mr. Truesdell adds himself is to refer back regularly to an article by Ben Horowitz named "Good Product Manager - Bad Product Manager". That’s an iconic PM statement that was published 20 years ago but still remains relevant.
5. Communicating and managing a team
Creating a great team requires a completely different skill set than creating a great product. That’s why many otherwise successful designers and developers never progress to leading a product.
When we asked inhabitants of one product management community on Reddit about PM’s superpowers, people management and communication skills appeared most frequently.
A PM with the nickname Nightrose, for instance, pointed out that listening and making the other person feel heard is what makes a great product manager. Charles-Tupper highlighted the importance of empathy for the customer and team members: the UX designer, the QA, the developers and the stakeholders.
6. Having a strategic product vision
With too many tasks and too little resources, the game for startups is like musical chairs. You can’t implement all the ideas and develop all the features simultaneously, so you need to create a roadmap and prioritize the features for the development team to build.
One of our PM respondents, SamTan007, says: "One of the most important product manager qualities is the ability to prioritize what is a must-have for customers and what is good to have."
If you check out Reddit or Quora, you’ll notice that SamTan007 knows what he is talking about. Prioritizing features and building roadmaps is an all-time struggle for beginner product managers that don’t have a strategic product vision.
7. Writing short and clear
Lucinda Musa, PM at CareRev, is convinced that writing is a PM superpower because writing is a key medium of communication for product managers.
Many PMs are prone to talking, or only write bullets in Jira tickets, but Lucinda believes that’s a lost opportunity. Excellent writing can persuade, inform, and inspire — all things a PM needs to do.
But wait, people don’t like reading long-reads. How would you make stakeholders read a 10-page document?
Lucinda challenges the “people don’t like reading” assumption. Sure, nobody wants to read a 10-page doc, but you increase the chances for success if you:
1. Shorten it.
2. Structure it.
3. Give people time to read WITHIN the meeting.
The third point deserves a particular elaboration:
“Give people space to read *within* a meeting, not on their own. Send the doc out, schedule a meeting, and spend the first X minutes reading it. In silence. Then discuss it. It’s an Amazon thing that works quite well.” — Lucinda Musa
What should I consider as a product manager?
Here we are with seven indispensable PM superpowers. Let’s summarize the characteristics of a good product manager and how to get them:
- Start by becoming a specialist in your target audience. Become your company’s go-to person to understand customers and their behavior, both quantitative and qualitative.
- Learn to analyze user data and make sense of it so that you can share the insights with others.
- Develop a strategic product vision so that you can prioritize product features and build a product roadmap.
- Learn to write clearly and concisely to convey information to your team and stakeholders.
- Become an undisputed expert in your product and your competitors’ products. Again, share your knowledge openly and generously.
- Work on developing strong collaborative relationships with product team members.
- And finally, if you feel that you need quick design support on your product, remember you can always find user experience pros in Eleken agency.
Your email has been submitted successfully. Check your email for first article we’ve sent you.
