Illustration by Rouba Shabou
When breaking new ground and designing cutting-edge products or features, it’s critical to communicate to the people you work with what your north star vision is. A north star vision illustrates where you are headed with the product: what you are designing, who you are designing it for, and why it matters.
The key to doing this effectively is to create and share a design vision story. I’ve worked extensively on creating design vision stories for emerging products at Adobe and Microsoft — and in this post I’ll share:
- Defining design vision stories: strategic narratives that inspire and align
- Design vision story format: story beats and visuals
- Principles of a good design vision story
- Documents to help craft your own design vision story
1) Design vision stories: strategic narratives that inspire and align
A successful design vision story is a strategic narrative packaged into a storytelling medium that makes the design goal understandable, inspires others, and sparks meaningful conversations. It’s different from other design artifacts like user flows, personas, archetypes, and design explorations. It’s a vision-focused story that you tell people.
Design vision stories are especially impactful in early, generative phases of product development, when you’re still in the process of aligning on exactly what you’re going to build. When something new is getting off the ground, it’s easy to talk about it in the abstract. But creating a design vision story often necessitates the creation of visuals to illustrate the narrative, making the vision more concrete — and much easier to get alignment on.
Example of a design vision story, presented in the form of a deck.2) Design vision story format: story beats and visuals
Design vision stories consist of story beats and visuals — packaged together in a storytelling medium.
Story beats
The crux of a design vision story is a narrative with an emotional core, a clear progression, and a meaningful ending solving a real problem. Story beats are the building blocks that create the narrative. These story beats are either explicitly or implicitly articulated.
Explicit
Implicit
- Action (ex: in a live-action video, action and dialog within the video may serve as implicit story beats)
This video from Microsoft uses a combination of voiceover narration (explicit) and action/dialog (implicit) to tell a design vision story.Visuals
The visuals help to bridge the imagination gap for the audience and make the vision more concrete. Visuals can fall on a spectrum of fidelity and abstraction. I have personally found much more success telling these stories at a higher fidelity with less abstraction. While more costly to create from a time and resourcing perspective, higher-fidelity visuals tend to spark better conversations and serve as a stronger source of inspiration for a team moving forward.
Different levels of fidelity/abstraction trigger different kinds of alignment conversations.Of course, higher-fidelity visuals come with a risk — it must be clearly communicated to the audience that these are not final, user-tested designs. Instead, they are simply an exploratory direction for where the product or feature could go.
And of course, it’s more time-consuming and costly to create higher-fidelity visuals. Be strategic about the level of fidelity you introduce — get to the right fidelity level for your team to have meaningful conversations and leave feeling inspired.
Common visuals might include:
- Storyboards or illustrations
- Animation
- UI/screens
- Live-action video (often showing polished UI screens composited into devices)
This video from Microsoft shows UI/screens composited into devices. Storytelling medium
These visuals and story beats are served up to an audience in a storytelling medium. The storytelling medium is how the story ultimately gets consumed by an audience.
Common storytelling mediums include:
But you might consider other mediums, like live demos or immersive VR! If you’re looking for scalability, make sure to think about whether you’re packaging up the story in a way that can stand alone without you there to provide additional context.
A slide from a presentation (storytelling medium) consisting of written text (story beats) + UI/screens (visuals).3) Principles of a good design vision story
- It has an emotional core. At its best, product design is about solving real problems for people. Being clear about pain points and successfully conveying the feeling from users when those pain points are overcome helps tell a great story. Bring people along for the emotional journey.
- It brings a product to life. Closing the imagination gap is hard. Even if the visuals shown are not in their final form (since you’ll certainly go through more exploration, user research, and iteration), a design story has elements that make it feel grounded in reality — enough details in the story to make it feel tangible. Characters are developed with nuance. UI feels real or almost-real. The problem being solved is a meaningful one and not cartoonishly simplified.
- It doesn’t get hung up on implementation details. It’s okay to be hand-wavy from a tech implementation perspective at this stage, as long as expectations are set appropriately for the audience. Focus on telling a good story. This is about gaining alignment on a vision, not a technical strategy.
- It has a beginning, middle, and end. Every good story has a beginning that establishes the characters and sets up the context/pain point. The middle should show how the product or feature helps the character(s) get closer to achieving their goal. At the end, the story should be conclusive. The problem is solved, the character(s) have some gratification or emotional reward, and the narrative threads are tied up.
- It has one key takeaway. Yep — just one. The audience should leave with one thing in their mind. What is it that you want them to think, feel, say or do after they hear this story?
4) Documents to help craft your own design vision story
It can be intimidating to figure out how to create a narrative that encompasses an entire design vision! Here are the documents I create to organize my thoughts and develop a story.
Note: At every checkpoint, ensure all your stakeholders are aligned, otherwise you’re in for many headaches. Especially if you’re telling your story through a less-iterative medium that bakes in decisions (like a video) — there are certain things that can be hard to change as you get further down the road.
Document 1: Critical story decisions
This document outlines the most important elements of the design vision story. These are your stakes in the ground.
Narrative elements
- In a broad sense, who is this story about and what core problem are they trying to solve? (e.g., a creative professional looking for a better way to communicate with her team)
- How will solving this problem impact them and make them feel?
- What are the value propositions we are trying to showcase?
- Are there any specific features that must be highlighted? Why?
- Are there any specific devices that must be highlighted? Why?
Tactical/strategic considerations
- What is the one key takeaway from this story?
- Who is the audience for this design story?
- When will this design story be shared with that audience?
- What presentation medium will we be using for this design story? Why?
- What type of visuals and story beats will we be using for this design story? Why?
Document 2: One-sentence pitch
Taking what you’ve decided in the above critical story decisions document , now is the time to start brainstorming story ideas. Keep it short and simple. Words are cheap, visuals are expensive. Start with a single sentence. Try out all kinds of different characters, scenarios, and specifics related to the problem they’re trying to solve.
At the end of this stage, you’ll probably have 1–3 story pitches that resonate with you and feel like they have the most promise. Take those into the next stage.
Examples of one-sentence pitches from a brainstorm session — consider using Adobe XD’s Whiteboard Plugin if you prefer to work digitally or collaborate with others!Document 3: Paragraph pitch
Now, it’s time to take your 1–3 one-sentence story ideas and start filling them in with more detail. This stage will help you identify any holes that might be associated with a particular story direction.
Write out a short paragraph or two for each of the story ideas outlining the premise of the story. Keep it high-level.
- What is the context?
- Who is it about?
- What are they trying to do?
- Can you find a way to up the emotional stakes?
As you’re writing — you’ll probably find that you start to connect more deeply with one of the stories. Pay attention to your instincts here! Telling a good story means believing in it yourself. At the end of this, you should have a short pitch that you can expand on with all the details.
You can also include reference imagery if it helps to inspire you and communicate the emotional core of your narrative.Document 4: Story beats
This document will help you finalize the story and give you a framework for your next steps. I start by creating a two-column table:
- Story beats: what’s happening in the story
- Visuals: what the audience will see
If helpful for your own mental organization, you can add a third column for “chapters” of the story — a larger bucket that encompasses multiple story beats.
Referencing your paragraph pitch and critical story decisions document, start enumerating each discrete moment in the story — every action taken by the character(s). These beats form the skeleton of your story.
Then, fill in the visual that accompanies that story beat — the clearest way you can think of to visually communicate that action to the audience. Don’t actually draw the visuals, just explain in a sentence or two what they will be.
Break up beats that are trying to communicate too much. If you can’t think of a single visual the audience will see that represents that action, split up that beat into multiple rows. Consider each story beat to represent one slide in a presentation deck or a single shot in a video.
Excerpt from a story beats document.The process of creating a rigid story beat and visuals structure forces you to think deeply about each moment in the narrative. Once you have this table filled in, you should be in a good stage for your next steps.
Workshop the story with other people by talking through the story beats. Ask them the following questions:
- What is your main takeaway?
- Does the story make sense to you? Are there any obvious holes in it?
- Do you identify with the characters? Why or why not?
- What is the problem being solved?
- How did this story make you feel?
- What could make this story more compelling? What could raise the emotional stakes?
- What resonated with you?
Try and get a variety of feedback from a diverse group of people and revise your story beats if necessary.
What’s next?
Your specific next steps will depend on the storytelling medium and visuals you’re using. A presentation deck and a live-action video will have very different next steps.
At a high level, though, you now have the framework in place for your design vision story. It’s time to start building out the visuals and the presentation itself.
Now go tell that story!