Design Your Narrative Before The Product

Your user experience is your product. When marketing people don’t talk to product people, what you get is less than ideal user journey. Below, I’ll explore how writing your product narrative first can help you design more welcoming experiences for potential customers.

A case of disconnected user journey

YouTube is a perfect marketing channel for some companies. If you target a niche audience, understand their behavior well, and find the right Youtuber to promote your product, it’s a deadly strategy for competitors.

A few days ago, one of the Youtubers whom I subscribed to made an irresistible offer: Hanz de Fuko sampler pack, for free! Hanz de Fuko makes hair products that use organic ingredients, and in this case, the offer was for six different samples of hair styling molding paste.

I wasn’t even looking to stray from American Crew Fiber, but I really liked the YouTuber, and he did a fantastic job showing me how he used it to style his own hair. I headed over to the Hanz de Fuko website armed with the discount code he provided.

Briefly, here is what I did once I landed on the home page:

• I clicked on Shop and added the Deluxe Mini Kit to the cart.
• I added the discount code into the Coupon Code field.
• Realizing that that added a duplicate item into the cart, I deleted one of them. Not sure why that happened, and it undermines trust in the company.
• After I landed on the Checkout page, I entered my shipping info and proceeded to the shipping page. Of course, it wasn’t totally free – it had a $5.00 shipping charge. It would have been nice to know beforehand.
• I went to review my order on a new page, but I forgot I had to enter a different billing address (my shipping and billing address is different), so I went back to do that on the Checkout page.
• When I tried to advance through the purchase process like I did before, I got the error message below.

A totally unhelpful error message. Who wasted their breath writing it?

What is this robot-speak? Let’s break down the confusion.

• What is a “valid shipping rate”? It’s not clear why I’m missing a valid shipping rate. This is techno-jargon, and the language doesn’t help me do anything differently.
• What is a “shipping service selection”? Again, the problem needs to be described more clearly, without jargon. And where can I go to do this?
• What is “all required information”? This is vague. It puts all the responsibility on the customer to figure out what items are needed to complete the purchase. How am I supposed to verify them if I don’t know what they are?

Confused, I clicked on the Shipping tab again to see if anything different would happen. Here is what I got:

It isn’t any clearer how I can solve this on my own.

Again, it’s not helpful. Same questions remain:

• How and where can I select a valid shipping service?
• How do I verify my address information?
• If an error is preventing me from seeing valid shipping rate, you should just fix the design, not tell me about the problem. In this case, you’re guaranteed to get a customer service call if a customer has any patience left at all.
• Just a side note, it would have been nice to leave the contact info in the pop up so I don’t have to dig through the website trying to find it.

Frustrated, I tried to close the tab. Suddenly, the website became smart, and I received a pop-up with a code for free shipping.

How nice of you to wave another coupon in my face!

So I went back through the purchase flow to enter it. Behold, another error message!

I have no patience with this trickery! It’s like getting an IOU present wrapped in pretty paper with a bow on top.

Apparently, I can’t use two coupon codes at once even though it doesn’t say that anywhere. (At least make it findable.) Fine, I’ll dig around and see if I could find anything that resembled a check box or a dropdown for selecting a shipping service. After a few minutes of trying to deduce where it could be, I gave up. Missed opportunity for Hanz de Fuko.

I imagine this is a typical scenario for many websites and mobile apps. Not to mention, this was a perfect purchase case for Hanz de Fuko since I was already engaged with the brand, thanks to the YouTuber. The user experience behind the website simply didn’t hold their end of the bargain. And it makes that YouTuber look bad for recommending the brand. How many potential customers like me has the company lost because of a bad user experience?

Hanz, I’m not going to leave this section without helping you redeem yourself. Here is what I would do:

• Follow through on promise. If you’re doing a promotion on a free product, make sure you enable the coupon code that allows people to receive a product for free. Going back to delete the duplicate item creates friction.
• Create helpful error messaging. Clearly describe what the problem is and how to fix it without using jargon or machine language. Say what’s wrong from the customer’s point of view, and provide helpful steps that would likely solve the issue. Using nicer language that doesn’t make people feel bad helps, too.
• Keep track of customer input. If I’ve already entered one coupon code, either display instructional text telling me I can’t add another one, or use affordances to prevent me from entering another code.

If you think this is me whining about a brand experience, I’ve got a lesson for you: start with content.

Leading with content to define user experience

Clearly, Hanz de Fuko thought about their marketing strategy, but the actual brand experience was disconnected from their promotion. They only got half of the story right.

You could avoid a disjointed user journey by thinking about content first. Start with the conversation you want to have with your users from promotion to purchase. Write down how you will guide people through the process. Conversation is low risk and low cost.

By starting with words and using them to drive design, you could cut whatever that doesn’t align with users’ and your ultimate goal. Also, starting with content helps your team collaborate and agree faster since everyone will be on the same page. It’s not about the design or the device; it’s about the conversation going from Point A to B.

User stories are, well, useful but they only tell you what happens, not the actual words people need to read. When all you have is a to-do list, it’s hard to design for people since you’re too abstracted from the actual experience.

Steph Hay gave a wonderful talk about shifting the paradigm from building then writing, to writing first. In this process, you create the overall narrative before designing. To illustrate:

• Before: Learn –> Structure –> Build –> Write
• After: Learn –> Write –> Structure -> Build

According to Steph, there are two kinds of narratives:

1. Marketing narratives which set expectations
2. Functional narratives which meet expectations

It’s clear that Hanz de Fuko thought through the marketing narrative, but their functional narrative fell short. Had they wrote down the conversation first, they might have gained a new customer (and probably many more).

So how do you create this narrative earlier in the design process? Steph outlines three steps:

1. State your goal. What conversation do you want to have with your users? What conversation are you currently having with your users? What are you trying to accomplish? What are your users trying to accomplish?
2. Learn about the users’ behavior. She explains how to use Google Keyword Planner (identifying words), Adwords (identifying a specific real-person problem), and Google Analytics (which pages are the most popular) to accomplish this.
3. Write the conversation you’d have with users in real life. Real content shapes the story that’s being told by the software or UI, which informs the user experience.

If you want to learn the details about this content-first approach to UX, head over to the Break Development website (~50 minute video).

Not just content, but narrative

Writing content first helps you plan for a more holistic user experience. Content strategists and web designers have been saying this for years. Death to Lorem Ipsum! Don’t use dummy text! There’s support for lorem ipsum, too.

But this is more than that. It’s about creating a narrative that guides content, design, and development. I found Braden Kowitz’s “story-centered” design intriguing, where you create narrative use cases that simulate every step through the user journey. Some advantages that he listed include:

• Spotting problems earlier.
• Clarifying design goals up front.
• Encouraging desirable user behaviors.

The narrative has an added advantage of connecting siloed teams that work on the product, like marketing, development, and user experience. I would imagine this speeding up the go-to-market process.

In a similar vein, Jessica Collier, who coined the term, Narrative UX, describes the underrated role of words in design. She writes:

“A good app is, in a sense, a choose-your-own-adventure tale: through a series of choices, the user brings to life a story that reflects their particular way of moving through the product. When we design products, it’s our responsibility to set up a framework that guides them through that story.”

She explains that every product tells a story, and therefore, it should be written down first as words, then translated through the design. Consequently, this would mean that we ought to think about the product story before the content.

Not unlike Steph and Braden, Jessica asks why we aren’t designing the language if we want to ultimately create a coherent user experience. In her eyes, words form the backbone of UX design.

Design the conversation first

There’s probably more to be said about narratives, but I’ll end here. Although Hanz de Fuko’s website would benefit from a better user experience, I don’t know what trade-offs they made so my suggestions are riddled with assumptions.

One thing is clear, though. You are essentially building a narrative, not a product. A product is like a fork in your company’s overall narrative. Does it match the story you want to tell?

Products come and go, but a narrative endures. A narrative holds a sense of history, establishes a way of being, and structures relationships between people. It takes a long-term view. A product punctuates its existence within this narrative.

Although help content and microcopy might seem like tiny blips within the product, they too add to the larger story. Someone needs to design those experiences, too.

[Featured image: Florian Klauer]