Understand the flowchart in one article｜Analysis of the whole process of shared bicycles

For any product design, the construction process is an unavoidable link. It lays the foundation for subsequent product framework and is the cornerstone of user experience . This article will start with definition and classification, combined with actual cases, to explain in an easy-to-understand way the role and drawing methods of flowcharts.

definition

Process - as the name suggests: the path of water flow; the arrangement and arrangement of the order or sequence of things in progress. The process exists naturally. It may not be standardized, fixed, or full of problems.

The process of completing a complete behavior by two or more steps can be called a process; note that it is two or more steps.

The core of the flowchart lies in how to arrange the order in which things are done. Different orders may lead to completely different results.

Purpose

The purpose of product managers drawing flow charts is nothing more than a few points:

1. The flow chart is the cornerstone of product design, which can ensure that the product's use logic is reasonable and smooth.
2. Communicate requirements and use flowcharts to better express product logic
3. Check for omissions and verify whether there are any missing branch processes

Classification

Flowcharts are used to describe object classifications, including: business process diagrams, page flow diagrams, functional flow diagrams, data flow diagrams, etc.

Transaction Flow Diagram (TFD)

Let’s take a brain teaser from Song Dandan’s sketch as an example: How many steps are there to put an elephant in a refrigerator?

Three steps:

• The first step is to open the refrigerator door;
• The second step is to put the elephant in;
• Step three: Close the refrigerator door.

This may seem like a joke, but it actually contains strong logical thinking . First of all, many practical constraints are ignored here. For example, it is impossible to stuff an elephant into most refrigerators given the capacity of the refrigerator; for example, is it possible to cut the elephant into pieces and put them in? If you stuff an elephant in there, will it run out again? But putting aside these restrictions, the minimalist process for stuffing the elephant into the refrigerator is just three steps. Open the refrigerator door, put the elephant in, and then close the door.

When we make business process diagrams, we often need to have the mindset of "stuffing an elephant into a refrigerator", putting aside many existing cognitive limitations and abstracting the concrete behaviors one by one.

Combined with the above example, let's take a closer look at the definition of "business process diagram":

Abstractly describes the order and sequence of things, without involving specific operations and execution details. In the Internet software industry, it usually refers to the user behavior process that is separated from product design. Business process diagram is a common language understood by system analysts and is used to describe system organizational structure and business processes.

Regardless of whether you understand the above definition, let’s think about what the business process diagram of shopping behavior should look like with abstract thinking?

The above three steps constitute a simplest process, which completely covers the core of any shopping behavior. Whether shopping online or in a physical supermarket, these three behaviors are the main body and then expanded. Compared to the complicated online shopping flowcharts that we usually see, the above three-step process is incredibly simple, which just proves the principle of simplicity. I have always believed that no matter how complex something is, it can be simplified to something extremely simple. If you cannot simplify it, it means you simply do not understand its core.

Based on the minimum process unit above, we will try to expand it and apply it to a more detailed flowchart.

Page Flow Diagram

Definition: refers to the page jump flow chart presented by electronic products. It carries the business flow information contained in the business process diagram.

The following figure takes Taobao as an example to show the page flow of online shopping.

From the three nodes in the red box in the above figure, we can see that the page flow diagram is still included in the business process diagram. This exactly meets the requirements in the definition and also confirms the correctness of the page flow diagram. Compared to the minimalist flowchart at the beginning, the current flowchart has gradually become more complicated. We mapped the abstract business onto concrete pages and used software pages to carry business needs. The above is the transformation process from business process diagram to page flow diagram.

Function Flow Diagram

Definition: refers to the functional operation flow within a single page or between multiple pages, which is included in the page flow.

Any function is contained in the page, but there is often more than one function in a page, so a page flow chart alone may not be able to fully express all processes. At this time, a functional flow chart is needed to more specifically express the functions contained in each page.

From the four nodes in the red box in the above figure, we can see that the functional flow chart is also expanded from the page flow chart. The functional flow chart is a further development of the page flow chart and becomes more complex. At the same time, it also gradually becomes like the flowchart that everyone sees every day.

Data Flow Diagram

Definition: A diagram specifically refers to a software product that describes the process of data being processed at different nodes. It mainly expresses the implementation principles of computer programs for business. Every operation performed by the user in the functional flow chart will be reflected in the data flow chart. At the same time, the data flow diagram can also be called a program flow diagram (Program Flow Diagram).

It is a major tool that can comprehensively describe the logical model of an information system. It can use a few symbols to comprehensively reflect the flow, processing and storage of information in the system. Data flow diagrams are abstract and general.

Maybe everyone is familiar with business process diagrams, page flow diagrams and functional flow diagrams, but perhaps fewer people know about data flow diagrams. In fact, every flowchart has a core that circulates throughout the system with different operations. For example, most business process diagrams are centered on people, and each node conveys different human behaviors. The page flow chart and function flow chart are similar, both of which are centered on human operation behavior and flow between different pages and functions. But the data flow diagram is different. It is centered on data and shows how data is processed in the entire system.

It is more inclined to technical thinking, and is more about showing the implementation principles of background programs. So, often developers draw this diagram, with product managers less involved. But as product managers continue to grow, they move up to the strategic level and down to the implementation level. Understanding the development principles of the program and the data flow behind it will undoubtedly give product managers a deeper understanding of product design.

The following data flow diagram is still based on the shopping process.

Compared to the previous diagrams, the data flow diagram adds a new dimension - procedures. While the client displays the user's operating behavior, it also expresses the actions of the program behind the user's behavior. Often when people say a product is complex, they may only notice the complexity of its front-end interactions and ignore the complexity of the back-end logic. For an excellent product manager, it is not only necessary to pay attention to the front-end user experience, but also to be able to see the logic behind things. After all, everyone can comment on user experience, but when it comes to program implementation, the professionalism of the product manager is reflected.

summary

The above pictures respectively show the business process, page flow, functional flow and data flow of a product. From this we can see that the expansion is sequential from business to pages, to functions, and then to data processing. A product page or function does not appear out of thin air, but is designed based on the various nodes and processes of the business layer. This is why it is important to understand the business first when doing product design.

When you are initially learning to draw flowcharts, try to clearly distinguish between business, pages, functions, and data, and proceed step by step. Do not mix multiple types of flowcharts together. This will only confuse your thoughts.

Granularity of flowchart

The so-called granularity of a flowchart actually refers to the level of detail of the flowchart.

When I draw flow charts, I often hesitate and wonder whether I need to describe this functional point in more detail. Should this branch be marked? Should this interaction event with the server be reflected in the flowchart? These and other problems are also what product managers encounter when drawing pictures on a daily basis.

Let’s take the shopping process as an example. The simplest business process is divided into three steps. If we break it down a bit, can we draw different flowcharts?

Obviously, different flowcharts can be drawn even for the same process. As shown in the figure above, the product selection is divided into three steps, and the checkout is divided into two steps. But the two flowcharts still express a set of processes. This is why everyone has a different grasp of granularity. Many newcomers always want to get it done in one step and draw a perfect flowchart in one go. But this is actually a very undesirable way of thinking. Any perfect flowchart needs to go through a process from simple to complex, and cannot be achieved overnight.

In theory, the more detailed the flowchart is, the more accurate and smoother the product design will be. But in reality, excessive detail is a waste of time. The ability to grasp the degree requires experience accumulation and team coordination, which is also where the product manager's ability to grasp granularity is reflected. The ultimate goal of drawing a flowchart is to make team members understand our product design, rather than drawing a very detailed flowchart. The ideal situation would be to create a diagram in the simplest form that the whole team can understand.

Flowchart Drawing

The above explains the definition and classification of flowcharts. Now let’s go into the specific process drawing method.

Basic elements of flowchart

The above are the most commonly used elements in flow charts. Less commonly used elements are not shown here, you can view them in Microsoft Visio.

Swimlane diagram

The swimlane diagram is a way of drawing a flowchart, which divides some process nodes in the flowchart according to different operation roles. For example, the data flow diagram just now is actually displayed using the swimlane diagram method, with two different roles at the top - user and server. At the same time, you can also add horizontal lanes on the basis of the vertical ones to classify operations according to different pages.

For complex flowcharts involving multiple roles, drawing a swimlane flowchart will look clearer.

Components of a Flowchart

The flowchart mainly consists of three parts:

1. Main Process
2. Branch process (abnormal process belongs to branch process)
3. Subprocess

The figure below uses the previous functional flowchart example as the main process and then adds branch processes. When drawing a flowchart, we should follow the order of trunk first and then branches, because for most users, the trunk process is the most commonly used path.

Everyone understands the main process and branch process, but what exactly is a sub-process? In the process of drawing flowcharts, there are some processes that you will encounter frequently, such as login process, registration process, and password change process. For e-commerce , there may be return procedures, shopping voucher usage procedures, and so on. It would be tedious to draw it again every time you draw a flowchart related to it. Therefore, a sub-process is a collection of several nodes with logical relationships, which can be reused in various places.

The figure below is the flowchart after the login process is turned into a sub-process.

Structure of a flowchart

There are roughly four structures in the flow chart: sequential structure, conditional structure (also known as selection structure), and loop structure. Basically most flowcharts are composed of these three structures.

Case

Having discussed so much theoretical knowledge and concepts above, let’s start by demonstrating a real case. Originally, I wanted to use e-commerce products as examples, because e-commerce products are products that require extremely strong logical thinking and are relatively common. But later I found that Taobao, JD.com , etc. were extremely large and complex, and too cumbersome to analyze. Then I thought that shared bicycles are a very good teaching case. Its products are extremely simple, but they hide an interesting logical structure behind them. In particular, the different product solutions of Mobike and ofo on the market make the analysis more comparative.

The predecessor of shared bicycles

If we trace back to the earliest shared bicycles, they are probably the docked bicycles launched by the government. The purpose of its launch is nothing more than to ease traffic pressure and reduce environmental pollution. However, due to limitations in cost, technology and the general quality of the population at the time, the solution of docked bicycles was extremely inconvenient. If you want to rent a docked bicycle, you must first apply for an IC card at the relevant unit with your ID card and pay a deposit and pre-deposit fees. Then, you can only rent and return the bicycle at designated locations. Let’s not talk about how troublesome it is to apply for a card, how inconvenient it is to rent and return a car, and how shocking the overtime charges are. If you simply display it with a business process diagram, what should it look like?

The following is still the simplest business form to show the business process diagram of using docked bicycles:

Just looking at the flowchart of docked bikes is actually meaningless. The real significance lies in the horizontal comparison between docked bikes and the current Mobike and ofo. Let’s take a look at the business process diagrams of the two shared bikes:

It is obvious that there is not much difference in the business process diagram whether it is docked bikes, Mobike bikes or ofo bikes . Then why were the docked bikes led by the government many years ago so mediocre, while the shared bikes that appeared in late 2016 became so popular? So what are the differences between Mobike and ofo, two completely different bicycles? We need to analyze each business node more deeply and dissect its functions.

Because the use process of a bicycle is not only on the APP, but also part of the operation is on the physical bicycle, you cannot just use the page flow chart at this time, but you must directly use the function flow chart. And the functional flow chart here is not limited to the functions within the page, but is intended to express every step of the user's operation on the bicycle and APP.

First look at ofo bikes. After paying the deposit in the APP, you then need to find a bicycle. At this time, we found that although ofo has a variety of bicycle styles and a variety of bicycle locking mechanisms. But this case focuses on ofo's first-generation mechanical lock and second-generation pseudo-smart lock.

These two types of locks actually represent two different product solutions. Let’s first discuss the first type, the mechanical lock. (The so-called mechanical lock is actually similar to the password box that we often see in life. Each password box has a preset fixed password. You can unlock it by turning the dial and entering the correct password. And the password of the mechanical lock is fixed and will not change).

We find a mechanically locked bicycle on the roadside, then open the APP, enter the license plate number or scan the QR code, get the mechanical lock password of the bicycle from the APP, and then enter the password to unlock the bicycle lock. At this time, a countdown will begin in the APP, and billing will officially begin when the countdown ends. Finally, after riding to the destination, you need to lock the bike and click the end ride button in the APP to settle the order for this trip.

After reading ofo’s process, let’s compare it with Mobike’s process.

Mobike's product solution is that after scanning the QR code of the bicycle, the lock of the Mobike bicycle will open automatically, without the need for manual operation like a mechanical lock. And after locking the bike, Mobike will automatically end the trip without having to click end in the APP. The bill will be settled the next time the APP is opened.

The following figures are the flow charts for using ofo mechanical lock bicycles and Mobike bicycles (the APP logo represents the user's operation on the APP)

We can clearly see that Mobike's process has two fewer nodes than ofo's, and this is Mobike's advantage over ofo's first-generation mechanical lock. Of course, the first generation of ofo is superior to Mobike in other aspects, such as the riding comfort. But this article mainly focuses on the product process, so it does not spend too much time on the cycling experience.

Looking at the solutions of ofo mechanical lock and Mobike smart lock, ofo is obviously much inferior. The problems caused by mechanical locks are not only the complexity of the usage process, but also many loopholes in the use of the product. For example, after locking the bike, the user must manually change the password, otherwise the next person will be able to ride for free. For example, if the user forgets to click "end" on the APP after the ride, additional charges will be incurred. There are many more questions, which I will not list one by one.

As an aside, ofo also understands these problems. The mechanical lock solution is not satisfactory if it only operates within a closed campus. But once it is launched into the off-campus market, this solution will undoubtedly bring huge losses to the company. Then why does ofo continue to invest so much even though it knows the problems? The reason is simple. With the speed of Mobike's expansion, if he did not leave the campus quickly at that time, he might never have the chance to leave the campus.

Let’s get back to the topic. Previous discussions have always avoided a very important node - "finding a car". Putting aside the random sightings of bicycles on the roadside, let’s just take the example of finding a bike on a map. Ofo’s first generation mechanical lock certainly did not have GPS positioning, so why could it be displayed on the map?

Next, let’s try to draw a flowchart of ofo’s unlocking process.

We start the deduction from the node of "APP scans QR code/enters bicycle number". If I want to ride a bicycle with license plate number XXX, I need to get the password, and the passwords of all bicycles should be placed in ofo's bicycle database. Whether we scan the QR code or enter the bicycle number, the essence should be to transmit the bicycle number to the server and tell it which bicycle's password I want. After the server queries the password of this bicycle, it transmits it back to the APP, and we can see the password of this bicycle.

In order to save power for the bike lock, the server does not contact the bike at this time, but relies on manual password input to open the bike lock. Therefore, ofo will start the countdown after the user gets the password. The unlocking status can be cancelled during the countdown; when the countdown ends, it means that the user has started riding by default, and billing also starts from this time.

If you are an iPhone user at this time, when you minimize the ofoAPP, you will find that the battery bar at the top of the phone turns blue. In fact, this is the key point of ofo to obtain bicycle itineraries. Since mechanical locks cannot transmit data to the server, it is better to let the user's mobile phone take over. To obtain the location of the mobile phone to obtain the bicycle riding route. And after parking, when you click to end the ride, report the location, and the server will mark the parking location of the bicycle. However, there was actually no bicycle at the reported location. This is why there are so many false marks on the ofo map.

The marking method used by ofo is actually very rough. After all, if the user forcibly ends the application, the cycling route will not be obtained. Ofo has also dealt with the situation where the cycling route cannot be obtained. That is to mark the starting point to the end point, and then display the distance according to the route provided by the map.

The picture above is a case I tested myself. The red arrow is my actual cycling route, and the green line is the route calculated through the starting point and end point on ofo’s own map.

Next, we continue to analyze the program flow chart of ofo mechanical lock

Pay attention to the part inside the service in the above picture. It seems that there are very few steps and it is very simple, but the real server must have more complex logical judgments. However, it is impossible for a flowchart drawn by a product manager to fully depict the technical details in programming, and there is no need for the product manager to help the technical staff think about the implementation logic of the code. What we need to do is to understand the macro implementation logic of the program.

For example, after scanning the QR code, why does the APP display the password of this car instead of the password of other vehicles? It's very simple. The passwords of all bicycles must be stored in the server, and the process of scanning the QR code is to transmit the ID of this bicycle to the server. After the server finds the password in the database, it returns it to the user.

During this processing, the server will definitely make other judgments, such as whether the user account is normal or has been blocked? Has the bike been marked as disabled? etc. But you may find that these logical judgments are not drawn in the flowchart above. Did I forget? Actually not. Here we have to mention the core concept of this article - granularity. This diagram is intended to express the macro-level logic of program implementation, so that readers can focus more on the core of the problem. We only need to emphasize the main process. If you add more branch processes and abnormal processes, it will affect the reader's attention. So, it’s still the same old saying: when drawing a flowchart, you must start with the main trunk and then the branches. Don’t blindly pursue details from the beginning.

Back to the topic, although ofo’s first-generation lock solution was full of loopholes, it still used its clever way to display the location of bicycles on the map. The second-generation lock launched by ofo has improved many problems of previous mechanical locks. The biggest effect is that the password of the car lock is no longer fixed, and after locking the car, there is no need to click to end the trip. Since ofo's lock has been optimized, why is it called a pseudo-smart lock in the previous article? What is the difference between it and a real smart lock? Why does ofo's bike lock still require manual password entry, instead of popping open directly like Mobike? Why do we often see cars on maps, but there are no cars at the actual location?

The following is a childhood memory of those born in the 80s and 90s: The General’s Order.

"General's Order" (also known as NetEase Account Protector) is a high-tech identity authentication product independently developed by Guangzhou NetEase Interactive Entertainment Co., Ltd. with complete intellectual property rights. It is a product specially designed to protect the passwords of NetEase Pass accounts ( game accounts) and direct seller accounts. Its unique 60-second dynamic automatic password update technology minimizes the risk of account theft.

The creation of "General's Order" accompanied the popularity of Fantasy Westward Journey at that time, and its innovative technology did solve most of the account theft problems. So what is the implementation mechanism of the General's Order? To explain it briefly: first, open "General's Order", it will generate a string of numbers, when you log in to the game, enter these numbers, and the system will allow the account to log in. At the same time, the number of the "General's Order" changes dynamically every 60 seconds, and the verification code of the "General's Order" will be different every time you log in. The implementation principle is that the "General's Order" and the server maintain the same algorithm, and their calculation results are consistent at the same time.

Looking back at ofo’s pseudo-smart lock, it actually works on the same principle. Each car lock has a separate algorithm stored on the server, and the car lock will change the password according to the algorithm at regular intervals. When you open the APP and check the password of the bicycle, the server uses the same algorithm as the bicycle lock to calculate the password at the current time, so this password must be consistent with the current password calculated by the bicycle lock.

The following figure is the program flow chart of ofo's fake smart lock bicycle

From the above analysis, we can see that even ofo’s second-generation lock does not communicate with the server, and its bicycles still do not have GPS and still rely on the user’s mobile phone for positioning.

Mobike's smart lock

After analyzing ofo’s mechanical lock and pseudo-smart lock above, let’s take a look at Mobike’s smart lock. What’s so smart about it?

First of all, through actual experience we know that Mobike does not require entering a password. Putting aside the Bluetooth local password verification method, the Mobike lock needs to communicate with the server to automatically open after the APP scans.

Based on this principle, the following is a flowchart of Mobike's program:

Comparing the above figure with ofo's process, we can see that the solution adopted by Mobike is to connect bicycles to servers. Make every bicycle a terminal and synchronize it in real time on the entire map. This not only provides a good car-using experience, but also collects user data. In terms of solutions, Mobike is much more complete than ofo.

The above is a comparison between the entire ofo and Mobike solutions, in which I also drew flow charts for different stages. It basically represents some of my ideas for analyzing cases. The most important thing is to enable everyone to understand and apply flowcharts to daily product design and analysis. When we build a flowchart, if we can follow the method in this article, from business to procedures, from simple to complex, I believe it will make your thinking clearer and smoother.

Summarize

This article explains the characteristics of various flow charts in layers from the perspective of definition, classification and drawing methods. Try to explain its principles and mechanisms in a textbook way. Because there is no unified flowchart standard at present, there are inevitably errors and misunderstandings in the article. I hope everyone can point them out and communicate with us.

Although the purpose of this article is to introduce the flowchart, the whole thought process is the core of what I want to express. Any complex thing can be broken down into the smallest units, and then the complex thing can be gradually restored from the smallest units. By extension, this way of thinking is actually a thinking model for analyzing things. Once you master it, you can apply it to a variety of analysis scenarios. I hope to have the opportunity to write a separate article in the future to introduce the thinking model in detail.