by Donna Lichaw
FIGURE 5.6
The third step of Twitter’s sign-up flow shows you how to find and follow people.
Crisis
At some point, after spending a few minutes on this sign-up flow (they claim it only takes 60 seconds, but I never completed it that fast), which is eons in Internet time, you might start to get bored. How many more people do you need to follow? How many more interests and hobbies can you think of? You understand what a tweet and timeline are and how the system works. Why follow more people? Not only that, but is reading tweets from Mariah Carey and Brad Pitt all that Twitter is about? You hit the next button.
Climax/Resolution
Now, Twitter invites you to find people you know (see Figure 5.7). My friends are here? Oh, OK, Twitter isn’t just about following celebrities. I can also follow my friends and see what they’re up to. That’s how Twitter helps me be in the know.
FIGURE 5.7
In what could be a crisis moment of Twitter asking you to add contacts, the climax of the story is when you see that your friends are there.
Mini-Crisis
I want to see which of my friends are on Twitter, but is this secure? I don’t want Twitter to spam my friends or steal my contact information. As I scan down past the call to action buttons on the left side of the screen, I come to a block of text that allays my fears: I can see exactly how this works. It’s safe and secure. Good. I search for and add my contacts from Gmail or wherever.
Falling Action: Add Character
I’ve learned about tweets, followed celebrities, expressed some of my interests, found my friends, and filled out a timeline. I’m part of this community now. I see everyone’s smiling faces and the things they say. I may as well add my avatar and a little bio (see Figure 5.8). I know it should be short because tweets are short. Unlike all of the previous steps in this sign-up flow, I can skip this if I don’t want to add my information.
What I don’t know is that Twitter already got me to do everything it needed me to do—filling out my personal info is nice to have, but not a must-have. Again, what matters is that I understand how “following” works, and I can see the results of following people. At this point, I can add my information or skip it. Falling action like this can be its own story, as with the end of Slack’s on-boarding flow (see Chapter 3, “Concept Stories”).
FIGURE 5.8
For the falling action, you can personalize your profile. This part is optional, however, since you’ve already experienced the value of Twitter: it’s social.
End
I’m home (see Figure 5.9). Logged in home. This home page is different than the home page where I started this journey. Before I signed up for an account, the home page told me that I could be in the know. After signing up for an account, the home page shows me what it’s like to be in the know. I see a timeline full of tweets from people and organizations that I’m interested in about topics that I care about.
FIGURE 5.9
At the end of this story, you arrive home (logged in home). But home is better than when you started (logged out home).
What becomes obvious in the story of Twitter’s on-boarding flow is that it never once prompted you as a new user to actually try sending a tweet. Instead, at the end of the journey, when you end up home, you can just sit back and consume what’s in your timeline without ever sending a tweet. This is a story of following people, consuming content, and being in the know. The story supports not only your user journey, but also a strategic business goal: to get more people to consume content. As Twitter transitioned from a service based on broadcasting to consumption, the story followed along. Traditionally, people are more likely to consume rather than generate content using social media services like Twitter. This flow and resulting story has optimized the story that users are more likely to have and that the business wants them to have.
While the old flow converted new users, the new flow converts quality users—ones who are more likely to engage. You can think of the previous, shorter, simpler flow as the flat or anti-climactic version (similar to the iPhone), or the simple solution for getting people to sign up. The updated flow, on the other hand, is the one that reads more like a story that resonates with the right type of user in the right type of way.
In the end, Twitter is a way to “start a conversation, explore your interests, and be in the know,” as millions of people who signed up for the service using this flow found out. Even though you may not have started a conversation yourself, you can see a timeline full of conversations from people whom you are interested in. By the end of this sign-up flow, you’re in the know and have had an engaging time getting there.
Mapping the Usage Story
Usage stories can be broad or compact. I recommend starting out with the broadest first and working your way down until you’ve uncovered all you need. In my experience, each usage storyline you develop should be as simple and straightforward as possible. At the point that you’re mapping out many subplot points and getting complex, you should ask yourself if you can break your storyline into smaller stories. Then you should address each separately, starting with the largest first.
Imagine if a TV writer tried to plot out a season-long storyline at the same time as a specific scene from a specific episode. As you can imagine, it’s difficult to stay high- and low-level at the same time. Focusing your scope and approaching one storyline at a time will not only improve the quality of your usage stories, but will also help you move faster as you retain focus.
To create a usage story large or small, answer these questions:
• Exposition:
• Who is your target customer?
• What are her goals as they relate to your product?
• What is the problem or impediment standing in the way of this person meeting her goal?
• Inciting Incident:
• What will kick-start the customer on this specific journey? This will probably be some kind of call to action or event.
• Rising Action:
• What is the first action that the user should take?
• What’s next?
• And next?
• Crisis:
• What might get in her way of solving her problem and meeting her goal? It could be something tangible, like a paywall, or emotional, like boredom. For each usage flow, you’re likely to have a list of possible barriers.
• Climax/Resolution:
• What is the high point of this experience or flow?
• How will her problem be resolved?
• What value do you want the user to experience during this flow?
• What will make all of her conflict, crisis, and work she puts in so far be worthwhile? Value can be functional or more abstract, like brand value.
• Falling action:
• What then? Humans like closure. You don’t want to just leave them at a high point and suddenly end the story. Now that her problem is solved, how will you wrap this episode up as quickly as possible so that the user is that much closer to meeting her goal?
• End:
• Where does the user end up—both in terms of character development and logistics? How has she grown? What has she learned? Where is she? What’s next? Is this really the end or perhaps the starting point of her next story?
How Big Should Your Story Be?
Stories can be big. And they can be small. They can happen one at a time. They can happen in serial. There is no right or wrong way to scope out the timeline for your stories. Sometimes, you’ll scope out a very large story that lasts over a period of years in your customer’s journey with your product. Sometimes, you’ll focus on a tiny story that lasts only a few seconds. Scope your story so that it answers whatever questions you need to answer.
Maybe your question is “How do we get customers to stay active after a few years so they don’t keep dropping off?” In that case, you’ll map out an epic journey that lasts a few years. Maybe your question is “How do we get people to come
back next time? And the time after that?” In that case, you’ll map out something that looks like a serial or a soap opera. Maybe your question is “How do we get people to keep coming back and using our product to do this one core task when there are competitors out there that also do the same thing?” In that case, you’ll map out a micro-story. In each case, you have the same plot points and overall structure—only the timeline is different.
Epic Journeys
Epic journeys take place over a long period of time. That timeline can be a day, a week, months, or many years. These journeys are epic because they traverse single sittings or interactions with a product. Maybe you want to map out the lifelong journey from when someone starts using your product to infinity. For example, I worked on a project where we needed to assess the content for a nonprofit educational program—all of its content.1 That was a lot of content! They wanted to go digital and didn’t know what to digitize, what to keep, and what to get rid of.
When we mapped out the user journey over a period of seven years to figure out what content needed to be digital so it could support the story, we saw that there was a lack of content supporting the story around year five, in general. This coincided with a drop-off the nonprofit saw with member engagement, which usually happened around five years after starting to work with the program.
Structuring this journey like a story enabled us to quickly assess strengths, weaknesses, and opportunities in their content and program structure. What it also helped us do was to put an “end” point to the member journey so that we could start to envision ways to help members start a new journey with the program after five to seven years. What we found was that after five years, many members dropped off, while others instead became evangelists for the program, disseminating information and training new members. Mapping the journey helped us see that we could plan for not just one epic that lasted five to seven years, but a second story that could last another five to seven years for the user.
Serials and Soap Operas
Sometimes, you will explore your stories in serial. What treating stories in this fashion helps you do is see the relationship between single interactions with a product as a series of stories (see Figure 5.10), rather than just an epic. Doing so will help you figure out how or why to hook people in, get them invested, and stay invested over time as they want to find out what comes next or see what they missed since the last time they tuned in. Just like a soap opera—or The Wire or Breaking Bad, if that’s more your thing—serials are great ways to visualize, plan for, and troubleshoot long-term engagement with a product or service.
FIGURE 5.10
In a serial narrative, there are mini-stories or episodes that string together over time. Each requires its own beginning, middle, end, and plot points to move the action and user forward.
What visualizing serial stories helps you see is that stories as episodes need to get better for your users over time. If they don’t get better, it’s much harder to keep users engaged over the long term. Treating stories in this matter also helps you visualize the relationship between different episodes or stories.
For example, I once worked for an organization that put on annual events like conferences, workshops, and online seminars. We used serial structure to assess why devoted repeat-attendees attended the first time and chose to return…or not return. The business was selling lots of tickets to its events, and the owners wanted to know if it could do even better. Mapping customer journeys as serial narratives helped us see clearly why people attended (problems and inciting incidents), as well as the value and takeaways that these customers got year-to-year. Mapping serials also enabled us to see the cliffhangers where customers dropped off, as well as gaps and opportunities where the business could add value not just as a whole, but episode by episode.
Micro-Stories: Core Tasks
No flow or task is too small to be treated like a narrative. If you’re designing a core task for a system and want to make sure it’s memorable and wows your user, thinking in a narrative fashion is a great way to add a layer of complexity and excitement to an interaction—even a simple, seemingly trivial one like adding a calendar event.
The most effective story-driven core task interactions I’ve seen don’t happen during activities like checkout flows. Instead, they are core tasks that are central to a product or service, like sending a message or “liking” something on Facebook. Core tasks are interactions that you want and expect users to perform over and over again.
Consider the iOS Calendar app that comes standard with every iPhone. The story of performing the core task of entering a calendar event works like this:
• Exposition: You’re having coffee with Jane at 2 p.m. tomorrow. You want to make sure you remember this event.
• Inciting Incident: You tap the “Add Event” button to add the event to your calendar.
• Rising Action:
• You type an event name.
• Add a location.
• Select a time.
• Crisis: Tap…tap…tap…you have to tap so many times to complete this otherwise simple task.
• Climax/Resolution: You tap to save the event, and the screen slides down out of view to let you know that the action is complete. It’s valuable to know that the system is saving your event and animation supports the story.
• Falling Action: Where did your event go? There is nothing on the screen that shows you where your event went or how to return to it if you want to edit it. You hope you saved and entered everything in correctly. This can be a crisis or a cliffhanger, depending on how it plays out in real life.
• End: If you’re like me, you probably added the event to the wrong day, oops. Or you take a leap of faith and assume that you entered it correctly and will be at coffee on time.
Here’s how the same core task works in another iOS calendaring app, Fantastical:
• Exposition: You’re having lunch with Elon in Palo Alto tomorrow. How exciting. You definitely don’t want to miss this.
• Inciting Incident: You tap the “Add Event” button to add the event to your calendar (see Figure 5.11).
FIGURE 5.11
The inciting incident or call to action of adding a calendar event to Fantastical: a button that lets you add a new event.
• Rising Action: You start typing “Lunch with Elon in Palo Alto” (see Figure 5.12), and the screen starts to fill in your location information on a timeline visualization that shows you when and where lunch is (see Figure 5.13). How smart—it assumes that lunch is at noon. When you’re done adding your event, you tap the Add button (see Figure 5.14).
• Crisis: There is none because…
FIGURE 5.12
Rising action for Fantastical: the text you type animates to indicate that something is happening.
FIGURE 5.13
Rising action for Fantastical: you see that the app automatically parsed your event type and location for noon in Palo Alto.
FIGURE 5.14
Rising action for Fantastical: saving your calendar event.
• Climax/Resolution: The event shrinks and animates onto the correct day in the calendar (see Figure 5.15), and at the end of that animation, it glows red (see Figure 5.16) before the red fades away (see Figure 5.17). It’s such a subtle, fast animation, but it’s helpful to see feedback after you complete a task. Feedback in this case communicates that your event was added and added to the correct day. The animation also supports the mental model of events being placed on a calendar. “Fast and friendly” is how Fantastical’s developers describe the app, and this climax embodies that description. They say it in their marketing materials, and you experience it in the micro-interaction.
FIGURE 5.15
Fantastical: crisis averted. Animation communicates system feedback that your event has been saved.
FIGURE 5.16
Fantastical: crisis averted. The rest of the animation communicates that your event has been saved on the correct date: tomorrow, October 18.
FIGURE 5.17
Fantastical: All done. The end…for now.
• Falling Action/End: You have no doubt that this calendar event was added, not just to your calendar, but also to the correct day. Task complete. You’re glad you downloaded this app to use instead of the Calendar app, which is so not smart.
Something as simple as a calendar app, with a core task that you want users to repeat and repeat, can benefit from this structure. Otherwise, your core task flow falls flat, just like the built-in iOS Calendar app did. Is Apple in trouble? Not at all. Unless calendaring becomes core to their business and engagement strategies.
When software is your service and your primary means for acquiring and retaining customers, you need to make sure that everything, no matter how small, reads like a story. Contrast something seemingly trivial like iOS’s Calendar app to the unboxing experience for the iPhone. The latter absolutely reads like a story, from the moment you rip off the plastic wrap to the minute you turn on your phone… and then continues into the setup UI. The iPhone is core to Apple’s strategy. The iPhone is built on story. Many stories. When it matters, you should plot even the smallest and seemingly trivial core tasks story-first.
For even the smallest interactions, good design incorporates affordances, minimizes steps to completion, and gives users feedback. Story does all of those things, as well.