AI & Creativity #2: Merging UX and Design to Personalize Online Ads with AI

The new generative filling features of Photoshop (Beta) or Midjourney’s “vary region” give users more control over the outcome and consistency of the AI-generated images, allowing us to make specific adjustments to single areas or elements. This opens the door to exploring variations of the variation by simply varying parts of the original prompts, which leads to endless possibilities, especially if these generated visuals are combined with fitting generated texts.

So let’s start this prototypical experiment by pretending we are lazy, we’re working on a project for upper management, we want to solve it quickly and with support of our new AI friends ChatGPT and Midjourney:

• The Setup: We will use ChatGPT to get familiar with the task given to us to simulate UX research, do some target groups and user stories, and learn about the interaction of the user groups.

• The Persona: In the next step, we shape prototypical personas and try to visualize them. We will also learn about their pains and gains that we could later address with our online banner communication.

• The Banners: We will create the main key visuals for online banners by combining ChatGPT and Midjourney for the text and visual elements and animate them with the image-to-video feature of Runway.
• The Hyper-Personalization: With Midjourney’s “vary region” feature, it is now possible to adjust and refine particular image parts. This will allow us to prompt as many controlled variations as we want. Finally, we can use ChatGPT to find a fitting headline for each variation to highly personalize the online banners. 

Spoiler

TLDR – in a nutshell
Let’s sum it up, as this blog post will be a long scrolling experience.
We will illustrate how we can use existing AI tools for UX, create a persona and transform the findings into ultra-customized online banner visuals.

1. Part – The Setup

How to get started
First, we give ChatGPT a short briefing about what we want to achieve - in our example, we want to create an “informative online health portal.” We ask for target groups and content sections to dive into this topic.

It provides us with six target groups and seven informative content sections. While the target group results show us who we might be looking for, the segments could be later a valuable hint for navigation or article labels:

User stories – figure out some needs and goals
We ask for 3-4 (could also be more) user stories for each target group and let it justify the generated stories by giving us some background information:

In this case, the additional information in the second and third column already helps us to understand better for whom our “online health portal” would be interesting and what they are looking for and want to achieve:

Pick a user story – for more information about interactions.
We pick one of the provided user stories, “A user who recently received diagnoses is looking for information,” and ask for possible interactions with our site:

The provided reply might be general; however, it could reveal some helpful inputs for us, e.g.:

• Recommendations from doctors are likely, so address them in the ads
• The Search Bar is a crucial feature; therefore, it should be prominent
• Patient Stories make it personal and should be highlighted
• Bookmark features, help the user and link them to the page

Form general to specific user stories
To learn more, we could generate more insights by making the user journey more specific as we ask for a harmless diagnosis and a severe diagnosis:

2. Part – The Persona

Make it personal – facts and figures.
We check if ChatGPT remembers the target groups. After this, we directly ask it to select two of them – e.g., Older people & caregivers and Health-conscious people – and to generate two persona profiles for each:

Make it personal – putting a face to it.
Let’s choose Helga Meyer (73) and Lisa Müller (32) for the following steps and ask ChatGPT for prompts to generate pictures in Midjourney by simply copy and paste the text without editing it and see what we get:

Optimizing the prompts
As we are not satisfied here, we will analyze and optimize our prompts directly in Midjourney to add more “depth” to the images and their contextual backgrounds. It can be done in several ways within Midjourney:

• /shorten: This command helps us to analyze our prompt, showing which parts or words had been taken into consideration and which had been taken out (crossed out) by Midjourney to create the image
• /describe: Upload an image representing the style/content as a reference and let Midjourney explain how it would prompt this image.

Pitstop
So far, we have generated classic, basic profiles for two personas – Lisa Müller (32) and Helga Meyer (72).

Value Proposition Canvas – Pains, Gains
Let’s ask for a Value Proposition Canvas (VPC) to find out more about our user’s pains and gains in the interaction with the online health platform:

3. Part – The Banner

Communication is key – get their attention.
In the following steps, we want to reach out to our personas’ attention and will create an exemplary online banner with text elements (headline, copy) and key visuals.

Headline & Copy
Let’s ask ChatGPT to create fitting headlines and copy texts for a social media ad that covers our chosen persona’s character and their pains and gains, according to the VPC.

Key visuals – ChatGPT for prompt
Now, we want to create key visuals for our online banners that get our persona’s attention, which we can use as a prompt to generate.

Key visuals – Midjourney for image generation
Let’s see what we get and choose one for the following steps:

Generative Fill – edit the image
With the new generative fill features, e.g., Photoshop (Beta) or Midjourney’s “vary region” option, extending an image was never easier than now.

Bring it all together.
As we now have all we need, let’s see where we got so far – We have a Persona, Headline, and Copy, as well as a key visual:

Runway – Add motion to the still image
You are right; we are not throwing paper against the screen. If you show a running woman in your online ad, we should also animate it.
With AI tools like Runway, it is now possible to generate videos by referencing another video (video-2-video), by text prompts (text-2-image), and image prompts (image-2-video).

We will use the image to-2-video option and just drag and drop our image.

After we download the generated video, you can add the text elements again with a video-adding tool of your choice.

4. Part – The Hyper-Personalization

Unlocking the Potential of Hyper-Personalized Banners with AI
Now, we come to the fun part, which will demo the future potential of ultra-customized or hyper-personalized online advertisements - especially if this will be automated in the next generation of these AI tools.

Endless possibilities with generative fill
The new generative fill features are a bliss for image editing. In Photoshop Beta (generative fill) and Midjourney (vary region), you can now mark the whole image or specific parts and refine it by just describing/refining your prompt. In contrast, the unselected details stay untouched in the following generated version. This leads to a high consistency within the created series of motifs in their variations.

So, Forget about A/B testing, as A/XYZ testing is around the corner…

Variation of the Variation
Depending on our imagination – or the marketing results from research :-) – we can change the backgrounds or the models just by adjusting the prompt’s description, e.g.:

• Keep the background, change the model
• Keep the model, change the background

 Figuratively speaking – here, is where the magic begins.
Frankly, there are no limits, as we can apply countless {variables} to the main motif separately or even in combination – just think about the possibilities here!

• {Heritage}, {Gender}, {Age}, {Size}, {Styling}, {Clothing}, {Background}, {Time of Year/Day}, {Props}, {...}

Just say it – Let's keep running.

Now, as we have built a “logic tree” with variations of the key visuals, the final thing to do is customize the written communication.
We give ChatGPT a short briefing to set the context and give it the task to adjust the headlines and copy texts by describing the different subjects.

Et voilà
We got several campaign images with fitting headlines/texts as a final result.
These could be placed as online banner ads, tested, and adjusted again based on the analytics' generated date.

 Conclusion

The future of Hyper-Personalized Banners with AI is just getting started
AI tools for writing and image generation are developing at a rapid speed. They are de facto-built to deal with complexity and large data sets. Therefore, I am convinced that the shown applications and steps will be streamlined and even automated shortly.

Not only will this lead to productivity enhancement on the conceptual and creative part, but it will also open the door to hyper-personalized marketing if connected to data analytics.

The "exemplary trial run" carried out here is intended to show what new possibilities are opening up here; however, despite all the enthusiasm, it should not conceal the fact that responsible handling of these AI tools is required.

One reason for this is the urge to hastily opt for the first available solution without thoroughly questioning which data sets were used to reach the findings and comparing them to "real" research. Failing to question them morally and using them uncritically can reinforce existing problems such as bias and result in mediocre results instead of innovative solutions.

So ultimately it's up to ourselves again, therefore:

Don't be scared; just be creative!