Story Map
Rise from pixel-pusher to a product visionary with a new type of design document called a “story map.”
What is a story map?
A story map is a new type of design document that shows the big idea of your product experience at a glance.
A good story map is your golden ticket to unify your team, secure executive support, and help you find a way to ship.
Halfway between a storyboard and a treasure map, it bundles the value and functional flow of your product with the delight people might feel at each step in your product. It sketches the UX flow without locking it down, and it delivers the gist of an idea and the emotional gestalt without prematurely belaboring the details.
A good story map conveys what
your project can do at a glance.
A story map depicts how your product works and why it matters—but crucially—it does not explicitly spell out the final design, UI or in-the-weeds UX logic. It does, however, hold the product vision and works as a rubric against which the team can make better and faster decisions.
A good story map serves as
a decision-making-machine.
A story map is not a mock, it is a guide to make sure everyone is solving the same problem, building the same product and pointing at the same piece of paper while making decisions. Fight the temptation to design the actual UI too soon and steel yourself against the urge to dive head first into final, pixel-perfect mocks before it’s time.
The mocks can wait.
First you need to get your story straight.
A story map conveys the urgency and delight of the core idea, without arrogantly assuming you (or anyone else) already knows all the answers. In other words — it is a sketch with a purpose that can become the backbone of the real UX flows, mocks, product flows and engineering plans. It is plan, not a list of instructions. And honestly? It’s pure gold.
Print it out and carry it around with you, like a pirate captain leading a crew ashore with a real-life treasure map, so that when you are talking about the project, designers, engineers and PMs can point to the same drawing at the same time and explain how they see the challenge and how they want to try to solve it.
Also, when your CEO walks by and asks “How’s the big project going?” you just hand over the story map so at a glance, she knows exactly what’s happening.
How to make one
There are two main types or story maps: the journey and the orrery (an orrery is a functional model of the universe). I’ve also include two more styles: the Hybrid Map and the Results Map to show how you can take this method and apply it to your other work.
The Journey
A journey story map starts with a person in an initial emotional state who ends with a transformed state.
In the example above, which depicts part of Twitter’s recent World Cup experience, a person starts watching the World Cup on TV and ends up connected to a rich and lively community of fans and celebrities and enthusiasts—all through an SMS sign-up flow I coined as “Text-To-Join.”
There’s lots to discuss about the actual mechanisms at work in the product depicted here, which I won’t go into now, but the big idea is this: We gave people a chance to tell us directly what they liked and then we delivered a custom version of Twitter directly to their phone via SMS—all based on their stated interest.
The mechanism, it turns out, is marvelous, and can be used for many different interests. I used the World Cup as the example in the Story Map, but it could work for any interest. Above is an early trial we ran with the Cincinnati Reds.
Having a story map helped us
get to the solution faster
Now it’s possible that the many different teams at Twitter who collaborated on this project would have gotten to the final experience without a map, in fact, several teams had been independently thinking about similar ideas, but each had been coming at the idea different angles.
The teams hadn’t yet connected on a unified project—somehow having a story map helped us get to the solution faster—and it helped us work together.
Once we had a story map, everyone could point at the same piece of paper and talk about how each person’s ideas might fit into the whole experience.
With a map in hand, we could start to execute like a unified team instead of five different departments. Marketing, Business Development, Product, Design and Engineering each had their own additional project documents, of course, but the story map brought us all together.
The engineers even found a way to share code across similar projects because we were all talking about the big picture while working on the details, and maybe, in some small way, the map helped us gain some efficiencies (and in some cases, exposed a few things we thought were working that in fact needed to be fixed).
Finally, a story map made it easier for executives to say “yes” and offer on-going support. Which makes sense, would you rather look at a treasure map and a demo, or a spreadsheet and a deck?
Would you rather look at a treasure map and a demo
or a spreadsheet and a deck?
How to draw a “journey” story map
Start by drawing the initial state in the upper left hand corner. This is the entry point into the experience. Draw all the different ways a person might come in, and draw it in a way that gives a hint at the emotional state and the contextual environment. Are you on the couch watching TV? On the bus with your phone out? Are you in a meeting or out to dinner or hiking? The initial state needs to paint a picture of an emotional state AND the context from which the experience will start.
Next, start to draw what happens at each subsequent step—expand your drawing across the page (and add on more pages or resize your canvas if there are more steps than you originally anticipated). Get all the way through and then draw the final destination on the bottom right, which is your final, happy, transformed state of a person who has had a terrific experience with your product and is ready to share, re-engage and perpetuate the love.
The Orrery
The second type of story map is the orrery. It’s one of my favorite design/science words. Basically, it’s a model or map that tries to explain the universe. You can see a few here: (links to “Orrery” on Google Images)
Use the orrery style for your story map when you need to explain how a whole system works together. Here is an orrery for the Oscars.
Whether your orrery describes a consumer experience or a revenue product, always place people at the center of the universe. If a brand or a revenue product occupies the center, then you’ve missed an opportunity to deliver value. People, whether they are users or customers or just checking things out, ALWAYS occupy the center of an orrery story map.
In this case, the people at the center of the universe are friends gathered for an Oscars party. Some are active Twitter users, some are not, all are watching TV and having fun. Swirling around them are the orbital elements of interaction, including backstage Twitter Mirrors for celebrity selfies, in-platform voting with lovely photos and vote buttons that turn into animated bar graphs, embedded Tweets, on-air broadcast moments, profile pages accessed through search engines, and the amplified catalysts of the Twitter platform and celebrity reach.
Hybrids
Sometimes, you already have some pieces in place, and you need to come up with a Story Map that connects the dots between existing pieces to create a mini-loop within an experience. Here is an example of a mini-loop for a “click-to-buy” experience invented for the World Cup that puts your @handle on the back of a jersey (and then let’s you buy it right from the Tweet).
Later, I reworked the flow to figure out a proper UX for the project, spelling out possible designs for each step in the process. Notice these still aren’t pixel-perfect. The goal remains to create a map, not to do the final design work.
Results Map
Once your project is a huge success, you can borrow from the story map method to present your results. Here’s the same project from above, presented as a “results map.”
Present a results map to your boss as you tell her the story of your design/product/guerrilla process. A good results map can help her relive the project and feel transformed when she arrives at the end.
How to use a Story Map in meetings
Super important: Print it out.
Bring your story map to every team meeting. Print it out and lay it on the table while everyone is talking. Point to the different parts of the map to make sure everyone is talking about the same challenge. If something is missing, sketch it in, right on top of the print out. Cross elements out, re-work sections. Give pens to everyone in the room and let everyone draw together while working through the problem (learn more about how to Draw Together in meetings here).
After the meeting, go back to Photoshop and re-draw the map. Mail the current version around to the team and print out a big copy for your war room or project area.
You’ll be amazed how owning the map will transform you from service-provider to product visionary. Designers, PMs, TPMs and Engineers (depending on the company) complain about not having any power. Want some power? Own the map. Because it’s not a map, it’s a decision-making machine that will determine the success of the entire product.
Carry it around with you everywhere. When anyone asks you how’s it going, pull out the map and show them. Take them on the journey to find the buried treasure. Trace the flow with your finger and let them discover the gold at the end of the trail. Ask for feedback and suggestions and ideas about how to make it better and whether or not it connects up with any projects she or he is currently cooking or about to ship. Often, other complementary projects will emerge as soon as people have a framework in which to imagine their own work.
And that’s the secret of the journey or the orrery—creating a universe that has room for everyone’s great work while ensuring we all end up finding the treasure.
If you make a story map, please let me know! I’d love to see your work and hear your ideas on how to improve the process and the results. Find me on Twitter.
Special thanks to @stop for encouraging me to publish the Story Map process, @jbrewer for believing in story as a design tool and encouraging me to design with text as well as pixels, and @samanthatoy for her generous example of giving back to the community, and all the super Designers, PMs, Engineers, Marketers and Execs at Twitter. And thanks to @Ev, @biz, @goldman, @jack and @dickc for taking a chance on a me four years ago.
❤
Want more?
Sign up for occasional (every other fortnight)
emails on design, art, story and the human condition here.
