Blog /

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

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.

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.

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.

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.

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

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.

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.

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.

• Using the Vision Storyboard to keep teams aligned and focused
• Product visioning through storytelling
• Storytell your Product Vision with a storyboard
• How We Used Storyboards to Make Our Company Vision More Tangible
• How To Create a Storyboard: A Guide for UX/Product Designers
• Storyboards Help Visualize UX Ideas
• Advanced Storyboarding with AI
• I just tried Midjourney’s new consistent character feature – here’s how it looks

Blog /

17 August 2020 | 5 min read

As part of my role at NCVO, I lead on the UK Civil Society Almanac – an annual research publication on the state of the charity sector in the UK. Since its first launch in 1997 as hardcopy only, the Almanac kept evolving and went online in 2012. However, when I started managing the project in 2018, the website and print publication felt outdated and incoherent while the content had almost become a copy and paste exercise. I was tasked with a redesign and this blog summarises what I learned.

In line with greater digitalisation, the Almanac is now mainly published online while the hardcopy has changed from 170 text heavy pages to a 50-page professionally designed summary report. Compared to many other research outputs our starting point wasn’t that bad, but at a closer look some issues emerged.

In 2012, the Almanac website was built by a member of the research team using WordPress. Even though this gave us control over content, it also meant that a lot of the team’s resources were going towards maintaining the website. Plugins like HighCharts and TablePress provided great flexibility for data visualisation but required skills in Json and CSS to create nice looking charts. The print publication, which was produced simultaneously, lacked connection with the digital version in terms of messaging and visual design. The print publication had been outsourced to the same agency for more than 10 years and did not meet data visualisation standards that had advanced in recent years.

It became clear that we had to come up with a more consistent narrative and bridge the gap between the different outputs. The publications should be driven much more by the needs of our audience.

You might think a research report is not a brand. This is probably true for one-off smaller publications, but it is highly effective for a project like the Almanac that consists of multiple outputs and channels. Over the years while the Almanac had changed with the times, it had not adopted a consistent communication strategy. I was able to commission Furthr – a branding and data visualisation agency – to run a three-hour workshop to get clarity on the Almanac’s goals, audience, benefits and tone of voice. With external support we were able to pin down what the main objective was and make hard decisions on our main audience and what they should take away from our research. As an overall goal, the Almanac should work for our core audience of senior stakeholders such as CEOs of charities, in terms of content and the way it is presented. This guided all our later decisions on our outputs and how we communicate.

At the same time, there was an organisation wide project on the way to create a new digital publication platform. This meant we could use the new content management system for our Almanac website and the development was led by the digital team. During this process, we met regularly to review the progress and ensure the tool would meet our needs.

For more specific research content, such as tables and charts, we had to find a suitable data visualisation tool that could be integrated with the website. So I signed up to various data visualisation libraries and compared their offers. We decided on DataWrapper as it’s easy to use, has a clean look and a lot of free features. Although it isn’t as flexible as HighCharts, it reduced the amount of time and skills needed to produce professional looking charts that were on brand. For the print edition, I found a few design agencies focusing on data visualisations and put together a design brief based on our goals. We then decided to go with Data Design Studios as they had a lot of existing data skills, including in-house researchers, and their proposal linked well to our brief.

While working on the technical development, we also reviewed our published content to make it more centred around what our users wanted to know. As a first exercise we created a Knowledge Board based on previous user research. Fortunately, we had a range of user data to draw from and drive our discussions, including stakeholder interviews, surveys with charities and Google Analytics data. This drove our decisions around the structure of the report, the topics we would cover and the prominence of each. Although, a lot was limited by our methodology, we also added more additional data sources to meet our users’ interests. We also added a wider range of content, including definitions we’re using and downloadable data tables.

While focusing on user needs, we also wanted to improve our content based on evidence and good practice in communicating research. Previously, most of the heading and chart titles within the Almanac were purely statistical. But research has shown that good headings and titles are more memorable when they are descriptive. The ONS digital team has done a great job in sharing knowledge of how and why they are changing the way they communicate statistical information. To help users understand the content more quickly, we started to focus on the key messages. We also prioritised them in terms of how important and useful they are for our main target audience – decision makers in charities – to reduce overall noise. We did this across all our channels (website, print and social media).

Our plans to create a more coherent content strategy, to change print designers and develop a new website in one year were very ambitious, but we did it. I was extremely pleased with the overall outcome and we received a lot of positive feedback. Since then, we have continued to improve things, including making use of Google Analytics to inform our content and homepage layout as well as adding spotlight sections on interesting aspects based on stakeholder input.