by Donna Lichaw
Case Study: Slack
Here’s how an origin story might map for a product like Slack, the online collaboration tool outlined in the previous chapter (see Figure 4.4)—the answers are in italics.
• Exposition: The current state of things (same as your concept story)
• Who is your target customer? Busy professionals
• What’s good in her world as it relates to your product or service? Communication and collaboration at work is easier and happening more than ever before. They’ve got more tools to get their job done—for example, email, Twitter, instant messaging.
• What is her general goal as it relates to your product or service? To be in touch with her team.
FIGURE 4.4
Slack’s origin story, reverse-engineered.
• Inciting Incident: The problem or emotional trigger (same as your concept story)
• What is her problem or pain point? Communication and collaboration is a pain. While it’s more accessible than ever, it’s difficult to keep track of everything. This means that what should be easier, ends up being harder, wasting your time and money.
• Rising Action: How can she find you or the acquisition channels?
• What event or events will happen that maps out onto this pain point? Hears about your product or service from a friend.
• Climax: Why should she care?
• Where do you want your customer to land after she first hears about you and heads out on her journey? Home page
• How will you get her to care about what you have to show her? What parts of your story will you show her to make what she sees resonate? On their home page, Slack literally spells it all out for you (see Figure 4.5): “Slack is a platform for team communication: everything in one place, instantly searchable, available wherever you go.” In case you don’t read (what? never!), no worries, you can see photos of people like you using the product.
FIGURE 4.5
Slack’s home page spells out its value proposition, which is the high point of this origin story.
• Falling Action: The user takes some kind of action
• What action do you want her to take at this point in time? You want her to sign up.
• End:
• This is where she meets her goal: to communicate and collaborate with a group of people.
• How will you measure success? The increased percentage of new sign-ups? The total amount of registered users? Both are valid, but it’s important that you choose one as your marker for success.
If you haven’t signed up for Slack or joined an existing Slack group, I highly recommend trying it out. Much like Pinterest, it is a great example of story architecture that doesn’t end with a simple sign-up flow and a bored user. Falling action, in the case of Slack, works as its own little story, because a new user is introduced to the concept, prompted to try things out and interact with the service, and sees the value and outcome of what she signed up for. Much like Pinterest, she doesn’t just get the promise of communicating, but she actually does it. As with a usage story that you’ll learn about in Chapter 5, “Usage Stories,” she not only sees the value, but also experiences it. Just like a good story.
Case Study: FitCounter’s Origin Story
At FitCounter, the concept story was something we stumbled upon during research. We initially thought the company was in the business of producing short, up-to-the-minute exercise and fitness videos, essentially maintaining a blog and directory of content. But the business couldn’t figure out how to make money off this model without selling advertising, which was not an option. Most people were not signing up for new accounts, nor were they paying for premium content. But what we did know was that a core group of devoted (and paying) customers had a universal story: with FitCounter, they could get fit and stay fit.
Refocusing Our Vision
Once we identified this concept story, it helped us refocus our strategic vision and fully understand what the product was and could be for customers and potential customers. This simple story helped us develop, adapt, and reconfigure our product roadmap to align with it. As a strategic vision, the story was most valuable because it provided us with a foundation on top of which we could build the product anew. The product the way it was built before was mostly unsalvageable. We had to, shudder, redesign it.
Typically, I stay away from big product, website, or software redesigns because they are costly, take too much time, and are too risky. For example, what if you relaunch, and you were wrong about something? Next thing you know, data shows that you’re not meeting your goals—or worse yet, performing worse than before—and the product needs to be fixed all over again.
In this case, however, we decided to redesign the product because it didn’t feel as risky as it could have been. After all, we had a story, and it was a good story that a core set of passionate customers had uncovered for us. Plus, it was a story that we had tested and validated with a new set of potential customers to make sure that we were on the right track.
Our concept story helped us find a strategic vision and direction, as well as feeling more confident about our overall direction and product market fit. But even though redesigning the product felt less risky, it was still risky. It would take months, all of our budget, and we could fail, which would mean going out of business.
Testing Our New Vision
To mitigate this risk, we decided to build, prototype, and test our new story in a tangible way so that we could validate it on a larger scale than with small in-person tests. If our superfans found value in what they could do with this product, we hoped that this story would resonate with a larger group of people.
After conducting a series of small tests, like running Facebook ads to see what people clicked on and radio ads to see what drove new customers en masse, we felt confident enough to start our redesign with the smallest body of work that would give us the highest impact: redesigning the product’s home page. We wanted to see if we could utilize our concept story to increase our conversion rate and get more people to sign up for the service. We didn’t care about them paying to upgrade to premium at this point; we just wanted to know if they would sign up. Could this be a viable ending to a potential customer’s origin story?
If our home page experiment worked, we would see if we could engineer our story into everything from branding and identity to marketing and messaging, to content strategy and product strategy, as well as the actual product itself. While doing all of that was still risky, it would be less risky knowing that the story was validated on our home page. And if we couldn’t validate this story on our home page, we would figure out Plan B. But we didn’t think too hard about that because we were confident in what we were about to do.
The Plan
With our concept story in hand, we set out to map our origin story and build the front door to an online training platform that communicated everything our superfans told us they needed. This platform would help people train and get fit. This product was no longer a way to watch videos about the newest, shiniest running trend. Instead, it was a way to learn how to train yourself or others for something like running a marathon. Before we could build a product that did that, we needed to communicate to a new set of visitors what they could do with this product if they signed up to use it. For that, we drafted an origin story.
What we needed to determine at this stage of product development was the following information:
• How would potential users (we called them visitors until they signed up) find us? In other words, what were all the possible channels and touchpoints where they could first access us? For example, did they find us through word of mouth and direct traffic to our home page or an App Store landing page? Did they look for something specific in a search engine and first encounter the product by landing on a lower-tier video page? All of the above? What else? We outlined all of the journeys and scenarios we could think of.
• What value should we communicate at each of these points
of entry? Whatever we previously communicated either didn’t work to get people using the product or if it did, it just confused them afterward. We decided to tell people directly why this thing was awesome. Plain English. Or maybe other languages? Evaluating channels would help us figure that part out.
• What affordances should we show? For example, what should people see that they could do with the product? (And we didn’t just mean buttons, although buttons might be a solution for calls to action.)
• How should this first-time encounter story end? People knowing what they could do with a product wouldn’t save the business. We needed to figure out what the first action would be that we needed them to take. Did we want them to sign up, use the product, convert to premium, or all of the above? Each ending had a different strategy associated with it and we needed to consider them all.
The Cliffhanger
In order to answer these questions and determine our origin story (or stories), we started by looking at some quantitative data. We involved our SEO team and analyzed search engine queries and traffic so that we could see what kinds of keywords people searched for when they first found us. We also looked at our Web analytics. Did people find us through word of mouth and go directly to our home page? Or did they find us through Google or social media sharing? We needed to identify the stories our data was telling us. Were new users having experiences with our product that meshed with the stories we heard from our superfans?
Luckily, the data substantiated what our superfans told us: most of our visitors found us by searching Google. Instead of wanting to find out things like who won the NYC marathon (like we initially thought), they were searching for things like “how to train for a marathon.” We also saw this trend in our internal Web and mobile analytics. By far, the most highly consumed content was training related, not news or special interest. People were using the product to train, but the product never told them they could do so. We needed to change that.
The story that our data showed us was that while our superfans had a complete story with our product—one with a beginning, middle, end, inciting incident, climax, etc.—our data illustrated an incomplete story. Here’s how the origin story played out for someone finding the home page for the first time (see Figure 4.6):
• Exposition: People want to train themselves or someone else, and they prefer to replace or just supplement the in-person interaction with online training.
• Inciting Incident/Problem: Making high-quality training videos or finding them on YouTube and then compiling them into a series is a pain. There must be a better way.
• Rising Action: They find the FitTracker on Google by searching for something like “how to train for a 5k” or “fitness training.”
• Crisis: They go to the home page, and don’t see what they’re looking for, so they bounce. Instead of seeing something that tells visitors that they can use this product for fitness training, they see a website that asks you to sign up to get up-to-the-minute news on sports, fitness, training, and exercise.
As you can see, this story is a cliffhanger, because it ends at the moment of crisis near the top of the arc.
FIGURE 4.6
The FitCounter cliffhanger: people signed up, but rarely used the product.
This cliffhanger appeared in other origin stories, too. Like the one with the email invitation as the rising action. Or the one that took place in the Apple App Store. Or the one that happened when someone would come across a single video page, watch a video, and leave. All cliffhangers. We needed to complete this origin story, not just for the business, but also for our potential customers. Without a complete story, the goals weren’t being met.
The Story
Based on our customer interviews and quantitative data analysis, we hypothesized that potential customers wanted online fitness training. And we knew that we could offer that if we redesigned the product. But we just needed to make sure that we were on the right track, starting with how a potential customer would first convert to being a registered user. Just like a superhero.
What we needed to design for was an origin story that looked more like what you see in Figure 4.7 and let people do these things:
• Climax/Resolution: I see that I can use FitCounter to get and stay fit. In particular, with FitCounter, I can get personalized training plans that utilize bite-sized, high-quality videos. I can train on my own time, anywhere, and do so alone or with others.
• Falling Action: Sign up to try it out.
• End: Get fit (and help others get fit).
Unlike before, our story was now complete. The story contains all of the values and high points that we outlined in our concept story based on what our superfans told us. Our hope with this was that if people experienced a story like this, the first-time encounter with the product wouldn’t be a cliffhanger for them or for the business. Once we had a clear idea of what our origin story was, we set out to redesign the home page so that visitors not only knew what to think about our product, but also what they could do with it. As you can imagine, this is when our marketing, product, and design teams all became best friends as we aligned toward a single vision and a single story.
FIGURE 4.7
An ideal (and climactic, we hoped) origin story for FitCounter.
The Solution
Outlining an origin story is only the first step toward building a path to discovery and conversion (or whatever your goal might be on a given project). We needed the home page to embody this origin story. And then we needed visitors to experience this story. Much like any design project, we set out to build a new home page and measure its success. We wanted to see if potential customers’ words (we would test designs out in-person with potential users) and actions (in this case, clicks and conversion rates) mapped out to an origin story that we heard and believed could happen for more people than just our superfans.
As you can see in Figure 4.8, the content for the former home page tells you that you could “sign up” and “stay up-to-date on all things training and fitness.” But, as we now knew, this is something that very few people want or need to do. What you can see instead in Figure 4.9 is a schematic for a home page that embodies a different story for a visitor. It literally spells out what they can do with it: “Get fit, stay fit, and start training.”
FIGURE 4.8
A rough outline of the former home page.
FIGURE 4.9
An ideal (and climactic, we hoped) origin story for FitCounter (the new rendition).
In addition to clearly communicating what visitors could do with the product, as well as its value propositions, it echoed this story with testimonials from our…you guessed it: superfans. Our marketing and content teams wrote words that communicated a story, and we collectively chose our users’ words so that they could tell their own stories of how they got fit using FitCounter. As a visitor, you could now see what your story might be: get fit, stay fit.
The Results
This home page is not perfect, and it is something that the business still tests and iterates today, but as we found out, it was a pretty great start. Good enough to get 40% more people to click on the sign-up button than before, which is something we had never been able to do previously. And we did that by building around an origin story that we first heard from our customers and then repeated for a broader set of people. We built this page story-first, as opposed to being built on best guesses and intuition. Finally, our site resonated with people.
In this case, qualitative and quantitative data were essential in diagnosing, understanding, and hypothesizing FitCounter’s origin story. We didn’t just listen to our superfans and build what they told us. Rather, we saw their stories echoed in our analytics as we looked at usage data, traffic patterns, and funnels. We heard a story from our superfans, posited it as an educated guess (hypothesis informed by real life data), then prototyped it, and tested it to see how it performed.
We also used the origin story to determine requirements that suppor
ted the story (more in Chapter 7). For example, we outlined that the home page needed to do these things:
• Include photos of people doing things that matched our primary persona’s behavior, using materials we gathered during our initial research when we found our concept story. These were regular people who wanted to get fit or stay fit, not professional athletes with already toned and chiseled bodies. It was important that the imagery be identifiable but obtainable.
• Communicate persona goals as something attainable: they could get fit or help others train and get fit.
• Clearly articulate what our target personas could do with the product. The page’s primary call to action should reflect what they could do. Visitors rarely sign up for a product or service as a goal in life. The call to action like “start training” maps to the potential users’ origin story, whereas “sign up” does not.
• Search engine optimization: now that we had a better idea of what people could use our product for, we could optimize for queries like “fitness training” or “how to train for a marathon.”
We also used the framework of an origin story to plan for, design, build, and test ideas for many different contexts, user types, channels, and paths with similar results. We drafted origin stories and requirements for journeys involving the App Store, deep-linked back doors (directly to video content), social media sharing, paid advertising, and email invites. We also drafted and tested origin stories for different types of personas to make sure we accounted for different goals. We even used our master origin story as the foundation of a radio ad that performed extremely well. In developing a product with a solid story structure, not only did we make new customers happy, but we also made our ad agency happy.