Regarding process design, there are three kinds of flowcharts… After understanding the business, determining the requirements, and sorting out the information architecture of the product.
When I first entered the industry, I would rush to draw prototype drawings, because the sense of accomplishment was the greatest when drawing prototype drawings. After all, this is the output in the true sense! Finally drew the perfect and beautiful prototype diagram, and showed it to review or communicated with the development, only to find that there are many logical loopholes, either lack of branching process, or did not consider the abnormal state, just modify the prototype diagram back and forth like this, despised by the development students and low efficiency Not to mention, I started to doubt myself.
With the increase of project experience and the gradual improvement of methodology, I finally know that there are two walls between requirements and prototype diagrams, one is information architecture and the other is process design. Only by crossing these two walls in accordance with the corresponding design principles can we be aware of and considerate when drawing the prototype, rather than following the feeling.
What is a flowchart?
Do you feel that you don’t have a common language with some people? It’s not because we speak different languages, but because we know different concepts or have different understandings of the same concept, which leads to communication difficulties. You are clearly talking A, the other party understands it as B. This kind of communication between chicken and duck is really unbearable. Since the concept is so important, when learning new knowledge, the first thing is to thoroughly understand the concept, and then expand the methodology and practice under the premise of understanding the concept, in order to learn the new knowledge well. Most people know a flowchart, but when they are combined, what meaning does it express?
Flow chart: A series of operations with a specific logical relationship carried out by a specific subject in order to meet specific needs in a graphical way. To simplify, the flowchart is to use icons to represent a series of operations. This operation process has a specific subject, which is to meet specific needs and has a specific logical relationship. For example: JD’s shopping process, the specific subject is the user, the specific demand is shopping, and the specific logical relationship is the logic of the user’s shopping process.
There are three types of flowcharts involved in product design, business flowcharts, task flowcharts, and page flowcharts.
Three flow charts
1. Business Process Diagram
Everything has a process, including the simplest way to eat, sleep, and brush your teeth. When brushing your teeth, you must first pick up the toothbrush and toothpaste, squeeze the toothpaste, brush your teeth, rinse your mouth, wash the toothbrush, and put the toothpaste toothbrush away.
You have found a pain point for users and want to solve it. After product positioning and demand analysis, you need to analyze the entire business model, and you need to consider several questions ①Which subjects are involved? ②What tasks does each subject have? ③How are the subjects related to each other?
This is a swim lane diagram of online shopping and payment, which is used to reflect the business process. The above swim lane diagram involves sellers, buyers, third-party payment, banks and other subjects; each subject has its own corresponding tasks; and arrows are used to indicate the sequence of tasks.
3. Task Flow Chart
The swimlane diagram analyzes the entire business process from the strategic level, and then it will be broken down to the specific operation of each task level. For example, the task of buyer buying goods above involves searching for goods, browsing search results, viewing product details, and If you are satisfied, enter the order task, if you are not satisfied, return to the search result or search again. This is the process of a specific task.
When drawing the specific task flow, pay attention to from the overall flow to the partial flow, from the main flow to the branch, and from the normal flow to the abnormal flow. For interaction designers, the subject of the task flow is generally the user of the product, and the task flow diagram reflects the user’s behavior.
Take Didi and Yidao for example, taxi is the main process. Checking the itinerary, checking coupons, and setting is the branch process. When designing, you should consider the taxi process first, and then improve other processes; the normal process for users to get a taxi is the normal process. Abnormalities, failure to get a car during peak hours, etc. are abnormal processes. First consider the normal process and then the abnormal process, and the abnormal process must be considered comprehensively. Most of the logical vulnerabilities of the product are due to the failure to consider the abnormal process, so drawing a task flowchart can effectively reduce the logical vulnerabilities of the product prototype.
Although the flowchart is simple, there is also a set of rules. Draw according to the rules so that you will not be laughed at.
Page flow
Through the swim lane diagram and flow chart, the business process and the task flow of each function are clearly sorted out in a graphical way. The task flow chart intuitively tells us what the entire business model is, which subjects are involved, and what tasks are under these subjects to complete; the task flow diagram shows the main tasks and branch tasks, and describes the general flow of a task.
The object of the page flow chart is the page, which is the most basic unit of Internet product design. Whether it is APP, H5, or PC, these products are composed of individual pages. The page flow describes which pages the user needs to go through to complete a task. That is where I am, after what operation, where can I go. The page flow has three elements: page, action point, and connection line. Take the shopping page flow as an example below:
When drawing the page flow, generally only consider the user’s normal path. If you need to point out the abnormal flow, draw the abnormal flow near the normal flow. Product design from demand analysis to information architecture, to business process-task process-page flow, and then to the final prototype diagram (wire frame) is a process from abstraction to concreteness, and also a process from overview to subdivision. After step-by-step analysis, the idea is gradually turned into a real product. This is the charm of product design. Among them, the process design plays a pivotal role and cannot be ignored.
