It’s all here! Nine self-developed efficiency-enhancing tools commonly used by user experience designers

In our Sanfenshe product design community, we often discuss a topic, which is which tool is better for designers to use during the design process? In fact, the main functions of many design tools are often very similar or have unique emphases, because the tools are designed to solve similar or specialized pain points for designers, so it is easier to judge. However, the detailed functions, operating experience, and ecosystem are often the focus of our designers' discussions. After all, they are basically detail-oriented!

As a product designer, which one is the best to use, Figma, XD or Sketch? For me, it doesn’t really matter. What matters is which advantages and features can better empower daily work and which tools are more suitable for me or my team. In addition, promoting domestically developed tools is exactly what we need most urgently.

In addition to the mainstream product design tools, we also use some less-noticed tools in the product design process. We have previously tried Miro, Notion, Google Docs and other efficiency-enhancing tools.

Here, I share some of the efficiency tools that my team and I often use. Some niche tools work wonders at certain points. Maybe you are also using these tools. That's great! Great minds think alike! At the same time, you are also welcome to leave a message to recommend them to more designers.

We all know that the project attributes (types) that product designers are involved in on a daily basis will be different, so the corresponding tools needed will also be different. For example, the tools used by designers who focus on mobile apps and designers who focus on the web will be different. In addition, team structure, collaboration process and corporate culture are also influencing factors. Therefore, we seek common ground while reserving differences and start from the conventional product design process divided into 5 different stages: research, ideation, design, handoff and acceptance (QA), and take stock of the tools I have used. I found that there is currently no tool that can cover all stages, and more are using foreign tools, which is inevitably a bit timid.

Okay, let's get started and use different tools to make the product design process more efficient.

Whiteboard

Do you have the same habit as me, that is, writing and drawing in your notebook, recording your daily thoughts and some work to-do items? Every year, the company will give us corporate notebooks. I have to use several of them in a year, which is a huge amount of paper. Now the team has basically achieved paperless office, iPad has replaced notebooks, and the whiteboard tool can well preserve my previous habits. At the same time, it allows me and team members to communicate on a platform, brainstorm, and organize conceptual ideas.

During project meetings and design sprints, you can also brainstorm, share ideas, and create wireframes together.

There are several types of whiteboard tools available:

Abroad: Figjam, Miro, WhiteBoard, Mural, Collaboard, Explaineverything, Lucidspark

Domestic: Fabrie, Bosi Whiteboard

Applicable to: Research stage/Concept stage/Delivery stage/Design QA stage

Fabrie interface

Website link: https://kebuxi.datasink.sensorsdata.cn/t/y

Registration code: fabire

Research phase : I can view and edit the information collected by each team member from different channels in order to decide on a more complete solution. Product, R&D, and marketing personnel can also put all the information on the whiteboard in a simple and fast way to show the background information of different dimensions of the project to all members of the team. The most convenient thing is that you can get timely feedback and can also annotate and modify at the same time.

In addition, members can organize the collected information in an orderly manner. User roles, user journey maps, and affinity diagrams can be built on the whiteboard. Most whiteboard tools have many professional templates integrated, which also makes it easier to build project diagrams.

Concept stage: Another notable feature of whiteboard tools is that they are large. As long as you become a member of them, you will have borderless paper and unlimited capacity. These annual fees are really not worth mentioning compared to the notebooks you bought before. When we are co-creating design thinking and design sprints, we often need to discuss functional frameworks, task priorities, and product visions with the product team. We also use whiteboard tools to plan interfaces and task boundaries with projects and development. Maybe we still can't do without physical whiteboards, such as magnetic whiteboards with rollers, glass whiteboards fixed on the wall, or A3 paper, but in the end we will get used to taking pictures of the content on the physical whiteboard, syncing them to online whiteboard tools for display, archiving, and sharing.

Examples of sketching with Miro on desktop and iPad.

Design delivery phase: We organize user flows, task flows, and maps, where the map specifies the user added to each value, as well as the dependencies of all nodes. All information is shared with developers using whiteboard tools. This ensures that the solution can be designed and implemented as planned after the development process.

Design acceptance phase: If there are some differences between the design and R&D implementation, we will collect all screenshots and correct them. Create a whiteboard document for developers to review one by one. For problems that cannot be described by screenshots, video records and design drafts will be attached, and a link will be generated so that R&D can understand the interaction status more clearly.

Screen Recording

Screen Recording Tool is used quite frequently in my current team. Use screenshots or videos with sound to record the entire screen or only a specific area of ​​the screen, and also provide description information. Use the screen recording tool to create video files that can be uploaded to cloud storage or whiteboards and shared with my team.

There are many types of screen recording software available now:

Overseas : Loom, Quicktime, CloudApp, Vimeo

Domestic: None

Applicable to: Research stage/Delivery stage/Design QA stage

I am more accustomed to using: Quicktime, the screen recording tool that comes with Apple. At present, I have not found a better domestic tool. If you have any recommended domestic screen recording tools, you are welcome to leave a message to let me know.

Screen recording tools can be used for research in different areas of the product design process, such as user interviews, usability testing, and benchmarking marketing. Here are some examples to better illustrate this:

• Benchmark Marketing: If you are developing a product and you are thinking about solutions for it, you can find some references by using competing products. When using a competing product, record the screen so that you can review the product later without logging into the competing product.
• Interaction: Screen recording tools can also record the interaction status of different products. For example, search for product text prompts or interactions with other components. When you find a particularly interesting user interface interaction, record it and use it as a design reference.

Screen recording is especially important when conducting user interviews and usability testing so that you can re-watch the audio and video to ensure that nothing was missed.

Delivery stage: Screen recording tools are also used. Since some interactive designs contain too many details, in order to allow leaders/customers to better understand the product design plan and the general prototype after R&D implementation, in order to reduce R&D costs, and to quickly and realistically display the reporting materials, we will not only keep an interactive dynamic prototype, but also provide annotated screen recordings. In this way, intangible concepts are converted into tangible materials, based on which it is easier to reach a consensus and explore different ideas.

Design QA stage: We may find some problems in the product process or interaction. After communicating with R&D many times, we find that screenshots and text cannot clearly explain these problems. We cannot reach a consensus for a long time. In this case, we will point out the details of the problem by recording a video.

Cloud Storage

Cloud storage refers to cloud storage tools that can be used to store files. In my opinion, cloud storage is already quite common. Personally, I need a lot of materials and references in the design process, and I also store a lot of design source files and business documents. Before, I used a large-capacity desktop hard drive plus a mobile hard drive to collaborate with other designers in the team. Then I promoted the team to establish and use SVN to share files on the local area network. Now, the multi-terminal real-time synchronization and ready-to-use cloud storage method have well met the needs of our team's work in terms of convenience and capacity.

Abroad: Dropbox, Google Drive, OneDrive, iCloud.

Domestic: Nut Cloud, Alibaba Cloud Disk, Baidu Cloud Disk

Applicable to: Research stage/Delivery stage/Design QA stage

Whether it is an individual or a team, cloud-based multi-person real-time collaboration is becoming a basic standard for tools. Perhaps we also need to worry about whether the cloud storage tools you use are safe. At present, I personally save all design-related files in iCloud. I have to say that Apple's ecosystem is still very complete. However, I am trying to migrate my files to Huawei Cloud Space, and I still have some caution about foreign companies. If it really replaces Apple, I may not have to wait too long. Baidu Cloud Disk is the most commonly used data storage space for me and my team.

Social Media

Social media is often where I use it for product research and asking questions to learn. If you don’t understand something or you have some doubts about the knowledge of UX design, you can ask questions on some product design communities to gain relevant knowledge and insights.

Overseas: Facebook, Linkedin

Domestic: Zhihu, Maimai

Applicable to: Research stage

The development of the Internet provides more practice scenarios and discussion atmospheres for user experience designers. In addition to some professional design websites, social media is also one of the channels for obtaining research data and seeking questions. Not only are there a large number of Internet users from different industries, but there is also no shortage of senior experts with many years of experience in a certain industry. We can establish connections with them to obtain different insights. In fact, our team also has its own product design media community, which is also a source of information for establishing long-term product usage feedback with our users.

I personally stay on Maimai and Zhihu, and rarely use foreign social media. Occasionally, when I need to communicate with foreign designers, I will use Twitter. In these social media, a lot of useful information can be obtained, which is also a way for me to try to transcend the circle of rigid thinking.

Speech to Text

Speech-to-text tools are a great choice for user interviews, usability testing, and routine meetings. They mainly solve a headache for our team: we often organize interviews and meetings, and find that the content is large and the time is long, so it is difficult to record text in real time, and key information is often missed. At the same time, we will also quote what the interviewer said, and speech-to-text can save us a lot of typing time.

Overseas: Happy Scribe, Otterr

Domestic: iFlytek Voice Recorder, Sogou Dictation

Applicable to: Research stage

During the research phase, we conducted user interviews with our research team. During each interview, we needed to record their suggestions and ideas. Writing would not be enough, so we all carried a recorder. What awaited us was that we often had to spend a lot of time organizing these recordings. Since we used speech-to-text tools, the conversion time between sound and text has been greatly reduced. Later, we also used it in interviews with experts and dialogue programs. It also comes with practical functions such as automatic error correction, noise elimination, and audio track separation.

We are used to using: iFLYTEK Voice Note. As a three-point media attribute, language-to-text conversion is also an indispensable tool. As expert users, we will also give some practical feedback on its use.

Text Correction

Tools are used to improve the copywriting of documents and digital products. Some of these tools are mainly used to check and correct spelling or grammar errors in the copywriting, while others are mainly used to improve the expression style of the copywriting. Our marketing creative designers use tools to change the expression of the copywriting to better match the picture style. When designing a landing page, the tool can also help the designer improve the copywriting on the landing page.

Abroad: Grammarly and LanguageTool check correct spelling and grammar, and Wordtune changes the copywriting style.

Domestic: Effidit Intelligent Creation Assistant

Applicable to: Delivery phase

Wordtune is a great tool to improve your writing style

Delivery stage: Check/optimize text content. These tools are often used in experience and marketing copywriting to help us reduce basic errors. Many of these tools use artificial intelligence algorithms, which greatly accelerates work efficiency and accuracy. Our official account backend editor also has a similar plug-in to check text errors. Designers can see typos and simple language incoherent annotations at a glance when reviewing articles. By the way, our team's knowledge base also has a text error correction function.

knowledge base

Knowledge bases have become an indispensable part of the team. We use tools to record and share knowledge. Teams can create a space in such tools to save all information related to products or projects. Establishing a constantly improving knowledge ecosystem in the team is often also a valuable team asset.

Overseas: Notion, Confluence bit.ai, Slite

Domestic: Yuque, WeChat official account, Knowledge Planet

Applicable to: Research stage/Concept stage/Delivery stage/Design QA stage

Yuque - Sanfenshe Knowledge Base · Collect 100+UED team articles

At present, many knowledge base tools have emerged one after another, and some storage space has been enhanced. Knowledge base or document tools can easily create user interviews and usability testing scripts. We can use sample templates. Then organize all the collected information and write it into the knowledge base. Multi-person collaboration has also become a standard feature. Sharing information in this way allows everyone in the team to become the owner of design resources.

Our team has also promoted the establishment of a knowledge base for R&D, products, and designers, and has connected the content of related fields to each other. In order to fully understand our products, it is necessary for us to understand the background operations of the products and the historical version process. For example, the team may have decided not to add batch operations for the time being because this is not the most important feature for users and they want to focus on other areas of the product. By providing this information in writing, all relevant personnel in our team will be able to review the team's original decision plan and reasons.

Additionally, it helps to record this information. Generally speaking, we forget what we agree on, so if you start managing and recording content from the product design stage, you can review it later to verify the design decisions. It will accumulate into knowledge, and knowledge will not become an island.

project management

Project management tools are mainly used to track the progress of a project. They can help manage tasks, set deadlines, and break down large tasks into various subtasks. Usually, these tools are managed by product managers or product owners. As a design leader, I can see the tasks of individual members and the tasks and data of the team. However, some designers are reluctant to use these tools, thinking that these tools are more focused on development rather than product design. However, I recommend that everyone on the team spend some time to understand these tools, which will strengthen the team members' grasp of the project progress.

Overseas: Monday, Notion, ClickUp, Trello, Jira

Domestic: TAPD, PingCode, Worktile

Applicable to: Research stage/Concept stage/Delivery stage/Design QA stage

Tencent TAPD One-stop agile R&D collaboration cloud platform

Core UX/UI Design

I believe that I don’t have to write a lot about this, as most designers are familiar with this type of tool and it is a staple in our design process.

Abroad: Figma, Sketch, Adobe XD, Balsamiq, InVision Studio, Framer, UXpin

Domestic: Pixso, MasterGo, Instant Design

Applicable to: Concept phase/Design phase/Delivery phase

MasterGo, a design tool recommended by Luo Yonghao, mastergo.com

As a user experience designer, you should be familiar with these software. However, not every design tool will be used for a long time and everyone will make a judgment whether to continue or change other tools. Here, as far as our team's usage is concerned, we are still using Sketch. Because according to the team's actual working years, cooperation mode, and data security, we prefer this software. Because of data security, the cloud team sharing function is blocked. In other words, we are not currently using this design tool to the maximum extent, which is a pity. We have never planned to replace XD from beginning to end. On the one hand, we will encounter the same situation, and the functions are basically the same. The most important reason is that if the product and R&D are to adapt to the new software tools along with the replacement of our delivery documents, it is actually difficult. The migration of the component library will actually generate new work.

Three years ago, we began to encourage the team to use the more efficient tool Figma, and gradually transferred some Sketch files and specification materials to this tool. Daily collaboration was also gradually migrated to it. After a period of painful operational learning and internal and external promotion, it has indeed greatly improved the efficiency of collaboration between teams.

I never thought that I didn’t know enough about foreign tools. Figma’s data and usage security are minefields that we have to guard against. So I decided to let the team return to Sketch. However, MasterGo’s functions and ecology are the biggest obstacles that prevent our team from settling in. In order to support our self-developed products, Sanfenshe’s internal editors and designers still mainly promote MasterGo because they don’t have more sophisticated collaboration scenarios for the time being. Looking forward to more improvements in functions and experience.

…

With this, I will briefly introduce the efficiency-enhancing tools that my team and I have used in the design process. I believe you also have your own useful tools. You are welcome to leave a message at the end of the article to let me know. Finally, I sincerely hope that our domestically developed products can rise.