The best ChatGPT plugin for creating user flows that every designer needs
Creating User Flows Using the Whimsical ChatGPT Plugin
In recent months, I have focused on testing and learning many generative AI tools. Mainly focusing on ChatGPT with the new code interpreter and plugins, BUT also testing and experimenting with Google Bard and LLama.
Knowing more tools doesn’t make someone a better designer. However, it can help to know the latest tools and technologies available. In addition, our tools will incorporate AI power and capabilities. This will enable us to use more AI tools and features to help us design and iterate on solutions faster.
One way artificial intelligence can help us work faster is by creating diagrams. Whether they’re simple user flow diagrams or complex user journeys, these can be beneficial when working alone or collaborating in a team during regular meetings or in a design thinking workshop.
In this article, I will discuss the best ChatGPT plugin I found that assist product designers with diagrams. This AI tool can help designers to increase efficiency and maximize productivity.
What are ChatGPT Plugins?
ChatGPT plugins are compact extensions designed to enhance the capabilities of ChatGPT from Open AI. They allow ChatGPT to access diverse information sources, execute computations, and integrate with third-party services.
ChatGPT has over 800 plugins catering to various needs, from finding recipes to gift recommendations to searching within PDF documents. Some of these plugins are free, while others are paid.
How to access ChatGPT plugins
To access ChatGPT plugins, you’ll need a ChatGPT Plus account. After securing one, follow these steps to enable plugins:
- Launch ChatGPT.
- Navigate to the ‘Settings’ option on the left side.
- Select the ‘Beta Features’ tab.
- Toggle the ‘Plugins’ setting to ‘On.’
How to Install Plugins from the ChatGPT plugins store
To install plugins from the ChatGPT plugin store, follow this:
- In the ChatGPT interface, hover over the ChatGPT-4 TAB.
- Select Plugins.
- Open the select component and click on “Plugin store.”
- Search for a ChatGPT plugin.
- Click on the plugin you wish to install and then click “Install.”.
- After installation, make sure the plugin is marked in the checkbox.
- You are ready to work with your AI plugin.
The Whimsical Plugin
Whimsical is a third-party plugin that is based on its interactive whiteboard tool. This plugin allows users to generate flowcharts and mind maps based on their needs. The user can ask the plugin to create a user flow, and the tool will create it, then the user can work on it on the whiteboard.
Designers can use it when working on a new design and in design thinking workshops, enabling them to collaborate on a single whiteboard and build upon the information generated through ChatGPT.
How it works
Let’s see how you can use the plugin to work much faster. I will start with a simple case and then show more advanced ways.
Create a simple flow
After you choose the plugin, you write a prompt for it. It could be something like this:
I am a product designer that designs an e-commerce store that sells running shoes. Create for me a user flow for a user that buys from my online running shoe shop based on the steps the user takes:
1. The user visits the website
2. Browse Products
3. Select a product.
4. Add to Cart
5. The user clicks on Checkout.
6. Provide details.
7. Payment.
8. Order confirmation.
9. Shipping.
10. Delivery.
11. Feedback/Review.Once you click “Send message,” the plugin will run and provide a straightforward user flow diagram.
Here is the result:
It is not a significant advance, but if you have written the flow with text, it can save you time in creating the diagram.
If you click “View or edit this diagram in Whimsical,” the plugin will open the Whimsical app, where you can play with the diagram.
Ask for chatGPT to create the flow and iterate from there
The second thing you can do to work with the plugin is to work in two steps: first, you ask chatGPT to create the flow by text, and then you can play with the results and ask the plugin to create the diagram based on your specific needs.
For example, you can write this prompt:
I am a product designer that designs an e-commerce store that sells running shoes. Here are the steps the user takes:
1. The user visits the website
2. Browse Products
3. Select a product.
4. Add to Cart
5. The user clicks on Checkout.
6. Provide details.
7. Payment.
8. Order confirmation.
9. Shipping.
10. Delivery.
11. Feedback/Review.
Go to step number 3 (Select a product) and write down the user's actions in this step.This was the result
Sure, here are the steps numbered:
1. View Product Categories: The user might start by looking at different categories of running shoes (e.g., trail running, road running, racing, etc.).
2. Filter Products: The user applies filters based on their preferences, such as size, color, brand, or price range.
3. Sort Products: The user sorts the product listings based on criteria like popularity, newest arrivals, or customer reviews.
4. Search for a Specific Product: If the user has a specific product in mind, they might use the search bar to find it quickly.
5. Click on a Product: The user clicks on a product that catches their eye to view more details.
6. Read Product Details: The user reads the product description, specifications, and any other relevant details.
7. View Product Images: The user browses through multiple images of the product, possibly zooming in to see finer details.
8. Read Customer Reviews: The user checks reviews and ratings from other customers to gauge the product's quality and fit.
9. Check Size and Fit: The user might consult a size chart or any fit recommendations provided by the store.
10. Check Availability: The user checks if the desired size and color are in stock.
11. View Related Products: The user might also look at related products or those "frequently bought together."
12. Add to Wishlist: If the user is not ready to purchase immediately, they might add the product to their wishlist for future consideration.You can use it as is, but I tweaked it to be more straightforward and asked to generate the flow based on less steps:
1. Search for a Specific Product: If the user has a specific product in mind, they might use the search bar to find it quickly.
2. Click on a Product: The user clicks on a product that catches their eye to view more details.
3. Read Product Details: The user reads the product description, specifications, and any other relevant details.
4. View Product Images: The user browses through multiple images of the product, possibly zooming in to see finer details.
5. Read Customer Reviews: The user checks reviews and ratings from other customers to gauge the product's quality and fit.
6. Check Size and Fit: The user might consult a size chart or any fit recommendations provided by the store.
7. Check Availability: The user checks if the desired size and color are in stock.
8. Add to cart: The user added the selected shoe to the cart.Then the plugin created a diagram for me. I can not say that it’s a complex diagram (all goes in one direction), but the fact that I got info from ChatGPT made the process much faster. Many ideas came to me in one click. Then I was able to open the link and edit it on the app.
Here is the result:
Create a flow with a condition
Up to now, the flows that we generated were simple; now let’s see how we can create a more complex flow:
I asked ChatGPT to generate a case where the user added the shoe to the cart but abandoned the cart. Because it is more complex, I will ask ChatGPT for ideas on what to do so the user will back and buy the shoe.
I will continue from the second example I showed here and ask ChatGPT.
The prompt:
What can I do when the user abandons their cart? Please give me ideas on how to push the user to complete the purchase of the shoe.This is what ChatGPT wrote me:
1. Retargeting Ads: Use retargeting ads on platforms like Facebook, Google, or Instagram to remind users of the products they left in their cart.
2. Abandoned Cart Emails: Send a series of reminder emails. The first can be sent within a few hours of abandonment, the next within 24 hours, and perhaps another one with a special offer after a few days.
3. Offer Limited-Time Discounts: Provide a time-sensitive discount or incentive to encourage immediate purchase.
4. Free Shipping: Offer free shipping for a limited time or if the purchase exceeds a certain amount.
5. Streamlined Checkout Process: Simplify the checkout process by reducing the number of steps, offering guest checkout, and ensuring the process is mobile-friendly.
6. Payment Options: Offer multiple payment methods, including popular ones in your target market, to cater to all user preferences.
7. Live Chat Support: Implement a live chat feature where users can ask questions or address concerns in real-time.
8. Trust Signals: Display security badges, customer testimonials, and guarantees to assure users of the safety and reliability of their purchase.
9. Save Cart Feature: Allow users to save their cart for later, so they can easily pick up where they left off.
10. Exit-Intent Popups: When a user is about to leave the site, display a popup with a special offer or a reminder of what's in their cart.
11. Product Recommendations: Suggest related or complementary products that might interest the user.
12. Clear Return & Refund Policies: Ensure users are aware of easy return and refund policies to reduce purchase hesitancy.
13. Stock Notifications: If a product is out of stock, offer to notify the user when it's back in stock.
14. Loyalty Programs: Offer points or rewards for purchases that can be redeemed in the future.
15. Social Proof: Display how many people are viewing the same product, how many have bought it recently, or even showcase user-generated content.
16. Payment Plans: Offer installment payment options for higher-priced items.I am proceeding with the plan to email the user. In this scenario, let's assume that the user was logged in to the website, enabling me to target them.
My following prompt is:
Create a diagram with idea number 2 (Abandoned Cart Emails) and make it with the condition of whether the user abandoned the cart.Then I got this diagram.
So I executed the next prompt:
Make a condition for each "Send Abandoned Cart Email" step: if the user bought, do not move to the next step.Now I got this more advanced result which includes the conditions.
Merge the results
Once you create many different flows, you can combine them all into one big flow.
Creating a huge user flow is not the best practice from my point of view, but combining some small flows into something that gives a wide picture can be great. The most important thing is that the flow should give value and be easily understood.
To do so, copy and paste from one whiteboard to another and organize the flow as simply as you read it.
Alternatives to Whimsical
In addition to Whimsical, I found two plugins that create diagrams with ChatGPT. The first is Show Me Diagrams, and the second is Eraser.
From my point of view, Whimsical is a better option for product designers because it is based on a whiteboard program, and it is designed in a way that, for me, it was easier to work with.
In any case, test these two alternatives to get a better perspective.
To summarize
In this article, I wanted to show you how to use Whimsical, a ChatGPT plugin that helps you create diagrams.
I started by explaining what plugins are and how to use them. Next, we moved to a deeper look at Whimsical. I showed you how to use ChatGPT and Whimsical to create flows you can use in your design. We started with simple flows, and then I showed you how to create flows with conditions and merge many results into one flow.
I want to mention that the plugin store is full of many ChatGPT plugins that you can use to make your AI assistant more productive.
You can find some plugins that you can use as a link reader, so you write a link, and it can get information from it (like Access Link). In addition, you can find plugins for automating tasks, like the Zapier plugin. You can also find plugins to work with data, like the Wolfram plugin, and plugins that can help you plan your next trip, like the Expedia plugin.
🚀 Boost Your Efficiency: Uncover Figma Secrets & AI Techniques (Including ChatGPT) in My Upcoming Course!
I am preparing a workshop showcasing how you can enhance productivity as a product designer.
I will show different Figma tips, demonstrate techniques to work with AI tools (including ChatGPT), and introduce other diverse tools.
Thank you for reading the article. I hope this article helped you understand how to build diagrams and charts with ChatGPT. Please feel free to share it with your friends or team members, and if you have any questions, please let me know.
If you enjoyed my article, I suggest you follow me and subscribe so you’ll receive an email whenever I post.
