User Flows

AI can be used to generate an expect user flow for a website or mobile application. This can help with determining what visual assets and content sections need to be created for a project.

UX Designers can also use the user journey steps as reference for testable areas of their applications.

Example 1: User Journey for a Banking Application

Prompt: What is a typical user journey for a user wanting to deposit a cheque for a banking application in 10 steps

Response

A typical user journey for depositing a cheque through a banking application, simplified into 10 steps, is as follows:

  1. User opens the banking application and logs in.
  2. User selects the "Deposit" option from the main menu.
  3. User chooses the account to which they want to deposit the cheque.
  4. User captures a photo of the front side of the cheque using the application's camera.
  5. User captures a photo of the back side of the cheque.
  6. User confirms the cheque details displayed on the screen.
  7. User verifies the accuracy of the information and checks for any previous deposits.
  8. User provides their consent to deposit the cheque digitally.
  9. Application securely processes the cheque images and initiates the deposit.
  10. User receives an on-screen confirmation of the successful cheque deposit.

This simplified user journey highlights the essential steps involved in depositing a cheque through a banking application, focusing on the core actions performed by the user. However, please note that the actual user journey may include additional steps or variations based on the specific features and design of the banking application.


Example 2: User Flow for the Log In Process of an Application

Prompt: Can you generate a user flow for the login section of a banking application

Response

Certainly! Here's a user flow for the login section of a banking application:

  1. User opens the banking application.
  2. User is presented with the login screen, prompting them to enter their credentials.
  3. User enters their username and password.
  4. User clicks on the "Login" button.
  5. The application verifies the entered credentials.
  6. If the credentials are correct, the user is granted access to their account.
  7. User is redirected to the account dashboard or home screen.
  8. If the credentials are incorrect, the application displays an error message.
  9. User has the option to reset their password or recover their username.
  10. User clicks on the "Forgot Password" or "Forgot Username" link.
  11. User is directed to the password/username recovery screen.
  12. User enters the required information (e.g., registered email address, security questions).
  13. The application verifies the provided information.
  14. If the information is correct, the user is provided with instructions to reset their password or recover their username.
  15. User follows the instructions and completes the password/username recovery process.
  16. User is redirected back to the login screen.
  17. User can now enter their updated credentials to log in.
  18. User successfully logs in and is directed to the account dashboard or home screen.
  19. User decides to log out of the application.
  20. User clicks on the "Logout" or "Sign out" option.
  21. User is logged out and the application returns to the login screen.

Example 3: Generative Possible Scenario Reactions

It is possible to write prompts to simulate possible positive and negative results for each task.

Prompt:: Simulate good and bad reactions

Response Sure! Here are simulated examples of good and bad reactions for the user journey of depositing a check in a banking application:

Good reaction:

  1. User: Opens the banking application and logs in.
  2. User: Navigates to the "Deposit" section within the app.
  3. User: Easily finds the option to deposit a check using the camera feature.
  4. User: Positions the check properly and captures a clear photo of the front side.
  5. User: Verifies that the image is clear and readable.
  6. User: Takes a photo of the back side, endorses it correctly, and confirms the endorsement.
  7. User: Reviews the back image and ensures it is clear and readable.
  8. User: Enters the correct check amount and selects the desired deposit account.
  9. User: Carefully reviews all the deposit details and confirms the deposit.
  10. User: Receives a confirmation message that the check deposit has been successfully submitted for processing.

Bad reaction:

  1. User: Opens the banking application but faces issues logging in due to a technical error.
  2. User: Struggles to find the "Deposit" section as it is buried deep within the app's navigation.
  3. User: Encounters difficulties in locating the option to deposit a check using the camera feature.
  4. User: Faces challenges in capturing a clear photo of the front side of the check due to poor lighting conditions.
  5. User: Realizes that the image taken is blurry and needs to retake the photo multiple times.
  6. User: Struggles to take a photo of the back side and experiences issues with the endorsement process.
  7. User: Encounters problems reviewing the back image as it appears distorted or partially cut off.
  8. User: Mistakenly enters the wrong check amount or experiences difficulties in selecting the desired deposit account.
  9. User: Attempts to review the deposit details but finds them displayed in an unclear or confusing format.
  10. User: Experiences frustration as the banking application fails to provide a clear confirmation message, leaving them uncertain if the check deposit was successfully submitted or not.

These simulated reactions illustrate the difference between a smooth and successful user experience (good reaction) and a challenging and frustrating one (bad reaction) during the user journey of depositing a check in a banking application.


User Flow Diagrams

It is possible via natural language prompts to take the text based results to produce
diagrams. In this example the graph was created by asking for some simulated positive and negative
workflow steps and then creating a Mermaid User Journey graph from it using the available diagramming syntax
for user workflows.

It is very important to indicate:

  1. To use the "correct" syntax for user workflows
  2. To reference the documentation for correctness if possible.
  3. To indicate the exact format of tasks, as ChatGPT in this case added labels for where the tasks originate from which is illegal Mermaid syntax.
  4. To indicate a scoring range and to use absolute score and to score all appropriate tasks.
  5. Clearly indicate which sections you want and which tasks are under each section.

The resulting sample Mermaid diagram in text form was:

Mermaid Graph (text)
journey
    title User Journey: Deposit Check in Banking Application with Scores
section User opens banking application
    Open banking app : 5
    Display login : 4
    Experiences login error : 3

section User logs in
    Enter credentials : 6
    Verify credentials : 5
    Successfully log in : 6

section User navigates to deposit section
    Go to Deposit area : 6
    Display Deposit area : 5

section User selects check deposit option
    Choose check deposit : 6
    Prompt front image capture : 6
    Capture front image : 7

section User captures front side of check
    Verify front image clarity : 6
    Image is blurry, retake photo : 4
    Capture clear front image : 7

section User verifies front image
    Ask for verification : 5
    Confirm image clarity : 7

section User captures back side of check
    Capture back image, endorse check : 7

section User verifies back image
    Ask for verification : 5
    Capture clear back image : 7

section User enters check amount and account
    Enter amount and select account : 7
    Validate entered amount and account : 6
    Valid inputs : 7

section User reviews deposit details
    Review deposit information : 6
    Display deposit details : 5

section User submits check deposit
    Confirm deposit submission : 7
    Deposit submitted successfully : 8

A simpler form of this without adding negative and possible results can look like this

journey title User Journey: Deposit Check in Banking Application section Opens banking app Display login: 7 section User logs in Enter credentials : 8 Successfully logged in : 9 section Navigate to deposit section Display Deposit section : 8 section Select check deposit Choose check deposit: 8 section Capture both sides of check Capture check images : 8 section Enters check amount Enter amount : 9 Validate amount : 8 section Submits deposit Deposit successful: 9

The summary prompt generated is:

Sure! Here's a single prompt that encapsulates all the requirements from the previous prompts:

Please create a Mermaid.js user journey graph representing the process of depositing a check in a banking application. The graph should include steps such as opening the banking application, logging in, navigating to the deposit section, capturing images of the check's front and back sides, verifying the image clarity, entering the check amount and account, reviewing deposit details, and submitting the check deposit. Each step should be assigned an absolute score from 0 to 9, indicating the user's experience or task success level. The graph should not indicate the task origin, and the score for each step should be displayed using the syntax ":" followed by the score. Please make sure to follow the Mermaid.js syntax and structure the graph in a clear and readable manner.

Please ensure that the Mermaid.js graph is formatted correctly and represents the user journey of depositing a check in a banking application, including the assigned scores for each step.

Example:

journey title User Journey: Deposit Check in Banking Application with Scores section User opens banking application Open banking app : 5 Display login : 4 Experiences login error : 3 section User logs in Enter credentials : 6 Verify credentials : 5 Successfully log in : 6 section User navigates to deposit section Go to Deposit area : 6 Display Deposit area : 5 section User selects check deposit option Choose check deposit : 6 Prompt front image capture : 6 Capture front image : 7 section User captures front side of check Verify front image clarity : 6 Image is blurry, retake photo : 4 Capture clear front image : 7 section User verifies front image Ask for verification : 5 Confirm image clarity : 7 section User captures back side of check Capture back image, endorse check : 7 section User verifies back image Ask for verification : 5 Capture clear back image : 7 section User enters check amount and account Enter amount and select account : 7 Validate entered amount and account : 6 Valid inputs : 7 section User reviews deposit details Review deposit information : 6 Display deposit details : 5 section User submits check deposit Confirm deposit submission : 7 Deposit submitted successfully : 8