[UX] User flow and work flow

When it comes to talking about user flow, I have been thinking about the gap of the output for co-workers in the project. As I am a UX designer or product designer in the team, I should understand what users do in the product and also consider how to deliver them to other co-workers like developers, marketers, or others.

---

1. Prologue

This is my big question about the “User flow” or “Work flow”, whatever people call that in the project. 

'How much detailed should I describe it in the document?'

By the way, I have seen the situations so much at work. If I don’t care about so much, nobody cares about this as well.

Then, can you guess what happens to users? I found out a lot of bugs of the feature, tangled user scenarios. I really can’t believe nobody finds this kind of problems in the product, and they are still there.   

2. How to make the output

Output of the user flow analysis looks simple, but I can find a lot of errors by itself when I take a look at the outputs by others. Let’s make sure of these 3 things.

• Flow goes from the top to the bottom and from the left to the right except some obvious flows. 
• There are three major different blocks, start/end block, conditional block, and process block. (Of course, we can define more blocks, but let’s keep focused these today.)
• Conditional block has to one input flow and two different output flows for “Yes” or “No”.

Many designers make errors to define the conditional block. If you think you should need another input flow, or more than 2 output flows in the conditional block, that means you surely miss something, or you need another block. 

Moreover, the sequence of the blocks can be also very important to the architecture while programming, but I am not going to talk about this today.

3. Case

Here is the case. I can find most of products adopt the sign in feature, and in the feature, OAuth is very common these days to guarantee usability in the product.

By the way, OAuth is one of the way to sign in with other service accounts like Facebook, Twitter, Google, or so on.

1. Sign in with credentials as usual
2. Sign in with OAuth

4. User flow

I want to use the term, User flow, compared to Work flow. In this article, I want to user flow is just simple output considering mostly user side interaction. 

User flow chart for sign in

As you can see above, users can choose the sign in type, then do the process, and then see the result in the product.

However, this flow chart doesn’t consider that the sign in is the first time or not, how to interact with the errors, and how to handle more security specifications in the feature. 

5. Work flow

I want to use the term, Work flow, which includes more detailed process for the system and users. I believe this truly helps your co-workers when they develop the code or test the product. 

Work flow chart for sign in

As you can see above, there is a process, “Need the permission” block, if the permission is needed or not after the select the account for OAuth sign in. 

Users can deny the permission anytime from the product like Facebook, Twitter, Google, or so or by accident. Therefore, this process should be considered when user try OAuth feature. 

When you look at the process, “Need more scenarios” block, you can notice there are two different errors. 

• Firstly, there is still an error after the action that user even granted the permission. 
• Secondly, there is an error if the user doesn’t need the permission because the user already did it and didn’t change it at all.

The critical error is the first one because the user thinks he/she followed the process, and did it well, so it is always better to make it clear and distinguish the problems, and interact them with users. 

If you want to specify the feature for the security, you may also consider the CAPTCHA process, “Errors over 5 times” block. You may set the frequency of the errors and then request the CAPTCHA process to users. This is also very common process these days, so I defined that in the flow chart. 

6. Epilogue

I am just wondering how much you guys do this work in the project, how much detailed you guys make the output. However, one thing is clear for me. I can catch more undefined or unknown problems with the fine meshed net before I just go ahead. Please share your experiences about this. Thanks.