Creating a user-flow diagram using ChatGPT that covers edge cases
Here’s an example of how you can use OpenAI in your UX work. Here’s a link to the end result on Mermaid UML.
What you’ll need
- ChatGPT playground
- Mermaid UML diagraming tool
- Your natural language of choice
Here’s my series of prompts and the responses from the robot
Can you describe the steps required to authenticate into Instagram from a 3rd party app that shares data with Instagram
1. Obtain an Instagram API key from the Instagram Developer Portal.
2. Register your application with the Instagram API.
3. Generate an access token for your application.
4. Include the access token in the header of your API requests.
5. Make an API request to Instagram to confirm the user’s identity.
6. Use the response from the request to create a secure session for the user.
7. Retrieve the user data from Instagram’s API and store it in your application.
Okay great. Can you descibe a GUI that would allow a user to perform this operation?
The GUI would consist of a login form that prompts the user to enter their Instagram username and password. Once the user has entered their details, the application would make an API request to Instagram to confirm the user’s identity. If the request is successful, the application would generate a secure session for the user and then retrieve the user data from Instagram’s API. The GUI would then display the user data on the screen.
Okay great. Can you describe the user’s workflow for this? E.g. what are the steps a user would need to take to use the GUI you described?
1. The user would open the application and be presented with the login form.
2. The user would enter their Instagram username and password.
3. The application would make an API request to Instagram to confirm the user’s identity.
4. If the request was successful, the application would generate a secure session for the user and then retrieve the user data from Instagram’s API.
5. The GUI would then display the user data on the screen.
6. The user can then interact with the application and use the data retrieved from Instagram.
Okay great. Can you include all of the edge cases where there may be user or system error? E.g. there could be an API outage or a user may not have the correct password.
- If there is an API outage, the application would not be able to make the API request to Instagram and thus the user will not be able to authenticate.
- If the user has entered an incorrect username or password, the API request to Instagram will fail.
- If the user has not registered their application with the Instagram API, they will not be able to generate an access token and thus will not be able to authenticate.
Okay great. Can you now describe the user’s workflow for this including the edge cases? E.g. what are the steps a user would need to take to use the GUI you described?
1. The user would open the application and be presented with the login form.
2. The user would enter their Instagram username and password.
3. The application would make an API request to Instagram to confirm the user’s identity.
4. If the request was unsuccessful due to an API outage or incorrect username/password, an error message would be displayed to the user.
5. If the request was successful, the application would generate a secure session for the user and then retrieve the user data from Instagram’s API.
6. The GUI would then display the user data on the screen.
7. The user can then interact with the application and use the data retrieved from Instagram.
Okay great. Can you convert this user workflow into Mermaid UML format?
graph LR
A[Open Application] → B[Enter Instagram Username and Password]
B → C[Make API Request to Instagram]
C → D{API Outage or Incorrect Username/Password?}
D — Yes → E[Display Error Message]
D — No → F[Generate Secure Session]
F → G[Retrieve User Data]
G → H[Display User Data]
H → I[Use Application]
