Product design – Inside numbers https://inside-numbers.com Thu, 28 Nov 2024 15:15:00 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.5 https://inside-numbers.com/wp-content/uploads/2020/07/cropped-Asset-6-32x32.png Product design – Inside numbers https://inside-numbers.com 32 32 How to create storyboards for your product vision using generative AI https://inside-numbers.com/how-to-create-storyboards-for-your-product-vision-using-generative-ai Wed, 27 Nov 2024 17:06:11 +0000 https://inside-numbers.com/?p=2272

Blog /

How to create storyboards for your product vision using generative AI

27 November 2024 | 6 min read

A storyboard communicates a story through a sequence of images that chronologically maps the story’s main events. They are common in film, animation, or comic books, but can also hold great value for product design. This is how I created a storyboard using Midjourney to support our product strategy and roadmapping process. We used the outputs in workshops with commercial and delivery teams to align on a shared vision and ensure user-focused decisions.

Great session. I really like the AI generated images to bring the Ideal Customer Profile to life. — Account Manager

Engaging and helped me to better understand how our offerings are targeted towards our target personas and wider strategy. — Technial Operations Manager

Why use storyboards for product design?

Using storyboards in UX or product design has various benefits:

  • Communicate ideas visually. Using stories and images makes a storyboard easy to understand and remember. It can communicate solutions to complex issues in an engaging way.
  • Create focus and alignment. Storyboards help to communicate an overall vision without getting hung up on details. They can serve as ‘north star’ in roadmapping and prioritisation.
  • Put the user first. A storyboard can bring a persona to life and the problems they are facing. They are great for building empathy and ensuring user centric designs.
  • Provide context. Storyboards show end-to-end user journeys, are based on real-life scenarios, and can provide additional context to tech teams and stakeholders.

Develop your storyboard

There are three common storyboard elements:

  1. Scenario: Storyboards are based on a user story with a clearly defined persona and problem to solve.
  2. Visuals: Each step is represented visually in a sequence through sketches, illustrations, or photos on the environment, quotes from users or the product itself.
  3. Captions: Each visual has a corresponding caption to describe the user’s actions, environment, emotional state, etc. They should be as concise as possible.

The process for creating a storyboard usually includes steps like data gathering, defining a persona and problem/scenario and a storyline that follows good practice storytelling. You can follow one of these useful frameworks from Nielsen Normal Group, UX Collective, UX Design Institute or Fresh Books.

Create visuals with generative AI

Once you got your storyline and content for each panel, it’s time to create more refined visuals. After a bit of research, I decided to test out Midjourney as it seemed more capable in creating a series of images with a consistent character than other tools.

Midjourney prompts

A prompt is a short text phrase that the Midjourney Bot interprets to produce an image. More advanced prompts can include one or more image URLs, multiple text phrases, and one or more parameters.

Image of the structure of a Midjourny prompt. Taken from the official docs https://docs.midjourney.com/docs/prompts

Find out more about how to craft your prompt in the official Midjourney documentation.

Build your persona

A good tip for creating consistent characters is to ask Midjourney to build a character sheet first. In film and animation, these are used in making concept arts of characters to show their emotions, posture, gestures etc. I found this guide and used the following prompt to generate my main persona for the storyboard.

Midjourney will output four slightly different versions based on your prompt. Here are mine.

four images of a character sheet based on a prompt using Midjourney

Generate scenes

Using the character I just build, I started to generate scenes following a similar structure.

  • Text describing the scene
  • The character image I just built in Midjourney to use as a character reference
  • An image with the overall composition
  • An image for a style reference

The prompt would look like this:

And here are some example outputs.

Midjourney outputs to prompt of a man working in an office and looking at monitors
Midjourney output of four images showing two people in an office looking at a monitor

Put it all together

Unfortunately, not all images will come out exactly as you want. I came across several limitations that required some post editing in other tools.

  • Strange/undesired content in the background or on monitors.
  • The main character showing up multiple times in the image or on a screen, some of those really made me laugh.
  • When I tried to incorporate a second person, Midjourney ended up mixing the two character references into one and showed the same person twice.

For the final touches, I used Figma and Photopea (a free Photoshop like application) to remove some of the AI weirdness and create the sequence of scenes. This is also where I added captions and speech bubbles.

Useful resources

]]>