Rethinking UX for AI Illustration Generator
Long story short, we released a new version of Illustration Generator. It will include new features, which require us to revise the interface a bit. Here is the use case for the AI-based web app UX redesign.
New process of generation
We shorten the generation process so that users can see what they will get faster.
Before:
- The user initiates the generation by text prompt and picks the settings (illustration style, aspect ratio).
- The generator shows four low-detailed drafts.
- The user chooses one of the drafts as the best fit.
- The generator polishes the draft, and the user gets the final image.
Now:
- The user initiates the generation by text prompt and picks the settings.
- The generator processes the prompt, and the user gets the final image.
With the new workflow, free users will see the result with a watermark. We decided to go with this option to show users the final result before payment. They can decide on their subscription purchase based on the quality of the actual generation.
Community picks
Social features are the new black. We created a gallery of our generated images and the free users’ generations for inspiration.
It appears right after typing the prompt and shows the gallery results similar to this prompt.
We had to work hard to understand what the gallery should look like. It should be big enough to be helpful but not distract users from the main workflow.
First, we wanted to reuse the element from our product for the marketing design Mega Creator. It has a section with automatically selected options that suit the design.
We worked on several options, from safe to the crazy ones…
Playing with the CTA button
We highlighted the “purchase” button. Classic never dies: the most important button should be the one you can find the fastest, even at a glance. We filled it with an accent color and placed it on the left under the generation result because most users read from left to right.
This subtle shift in positioning is intended to guide users naturally toward the purchasing process without disrupting the creative flow.
Expanded style library
The style library now includes ten distinct styles, three of which are vector-based. We didn’t try to reinvent the bicycle here. Since we designed this section to be scalable from the beginning, we integrated new styles seamlessly into the existing UI grid.
There is still a discussion among our team is whether we should keep the “New styles coming soon!” block. On one hand, it is always good to hint that we are about to expand the style library any time soon. On the other hand, it takes up some space on the panel, and users can not interact with it.
Prompt suggestions for better results
We noticed that users often struggle with formulating effective prompts. To address this, we’ve introduced alternative prompt suggestions in the interface.
Although various iterations of a “prompt cloud” were proposed, not all were implemented. The suggestions aim to guide users toward more detailed results without overwhelming the interface.
Subtle UX Tweaks
Several minor yet impactful adjustments were made to improve the overall experience:
- Small descriptions were added to each style, emphasizing their strengths.
- Buttons were reorganized based on their functions, grouping those related to result generation separately from those handling operations.
Lastly, we’re considering two new interface layouts for version 3.0. However, they are still in the conceptual phase, and further iterations will determine their feasibility.
Do you have any thoughts on Illustration Generator's new UI? We hope it helped you gain some insights into how the interface of AI tools can be both functional and visually pleasing.
