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.
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 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 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.
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.
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.
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.
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.
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).
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 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)
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.
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.
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.
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 toDraw Together in meetings here).
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.
Article from Medium