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.
Prompt: What is a typical user journey for a user wanting to deposit a cheque for a banking application in 10 steps
A typical user journey for depositing a cheque through a banking application, simplified into 10 steps, is as follows:
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.
Prompt: Can you generate a user flow for the login section of a banking application
Certainly! Here's a user flow for the login section of a banking application:
It is possible to write prompts to simulate possible positive and negative results for each task.
Prompt:: Simulate good and bad reactions
Good reaction:
Bad reaction:
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.
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:
The resulting sample Mermaid diagram in text form was:
journey title User Journey: Deposit Check in Banking Application with Scoressection 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