There are many ways that image generation might be benefit UX design, including

  • Storytelling - create unique persona images to build a common narrative

  • Analysis - highlight key design trends and design principles for a given app(s)

  • Inspiration - create and iterate a range of options to drive direction

  • AI-Aided Design - get expert help for any design task

  • Specifications - generate requirements to build the design

Storytelling

Tell stories about how your product will help users, which will develop empathy and establish context. Image generation is more flexible than stock photography and any scenario can be dreamed up. Future improvements in image generators should allow a sequence of images to be created that always show the same person, today a very detailed description is required to ensure that it looks like the same person.

Generated images: Sarah has started HRT for menopause after talking to her doctor. She purchased drugs costing $234 from her local pharmacy. To get reimbursed, she needs to log in to her healthcare provider and fill in a several forms.

Analysis

Image generators can understand the composition of an interface through reverse engineering and provide a breakdown of the information architecture and other design fundamentals. This written breakdown can help when writing requirements for a similar app and also aid prompt writing. Providing multiple images can allow the image generator to draw a comparison between apps.

Screenshot: Google Maps

A breakdown of the information architecture of this image by OpenAI:

• Minimalism: The interface avoids clutter while offering a wide array of functionalities.

• Bottom navigation: Essential features are placed within easy thumb reach.

• Personalization: Profile pictures and customized recommendations like "Latest in the area" suggest a personalized experience.

• Accessibility: Voice search is prominently featured for ease of use. This layout optimizes for usability, ensuring that the most frequently used features are easily accessible while less frequent actions are still available but do not overwhelm the primary interface.

Inspiration

Starting a new project can be intimidating and image generation can provide inspiration to get started. Need some inspiration for a design system for a new project? Quickly create an image as a moodboard or showing the application of particular colours .

Generated images: Colour studies for toys and ceramics

AI-Aided Design

After Computer-Aided Design (CAD), we seem to be entering the age of AI-Aided Design (AAD). OpenAI can process an image of an existing app and make design proposal for e.g. how to add a timestamp to each post.

Screenshot: Instagram

A proposal of where to add a timestamp by OpenAI:

In your current layout, this could be just below the username 'cortexbrand' or at the end of the post description, before or after the 'Like by' information. It should be in a smaller font size than the primary content to ensure it doesn't compete with the main message of the post.

A common format for these timestamps is relative time for recent posts (e.g., '3h ago' for three hours ago) or a specific date format for older posts (e.g., 'Sep 10'). This helps users quickly assess the recency of the content without being too intrusive.

Specifications

Once a design is complete, an image generator can be used to review the design and generate requirements for an engineer or testing team.

Figma design: Formulary Intelligence

A sample of the requirements written by OpenAI to build this screen are as follows:

Selection Interaction:

Selecting a formulary item should update the sub-formulary list to show corresponding items.

Multiple sub-formularies can be selected at once.

Refresh Button:

Placed at the bottom of the screen, it should refresh the data on the page.