Design by storytelling: Whoever writes, stays

Ideally, the story comes first, then the design. You can do it the other way round, but then it’s shit.

Some time ago, Dr. Web the highly regarded and engaged discussed article “Storytelling kills design: No image is worth a thousand words”. My final recommendation was to prepare for the passing of the visual design right now.

Of course, it remains undisputed that there will continue to be websites that rely on visual methods for interaction. After all, it makes no sense to build an image website or a portfolio or even a blog based on a conversational interface.

This does not mean that not even the blogs of the future will be able to be partially used with language. I assume that language will be important for any kind of web presence. The question is then, to what extent. For some types of websites, it makes little sense at first glance to fully and solely to language. At these sites, we will see a multi-pronged use. In any case, I assume that besides keyboard, mouse and touch, language will also be one of the standard interaction methods in the future.

Back to my recommendation to prepare for the upcoming changes at this point in time. How can you do that? After all, we have not arrived yet in the age of conversational interfaces.

You could start by changing your design process a bit.

First the story, then the design proposal

So you talked in detail with the customer. He was able to make his requirements clear to you and was also able to provide you with data on the target group and even knew to formulate a specific goal of his planned website.

Not bad. Now that you’ve done your own research, you think you have a pretty good idea of what the customer wants and how you can do it. Now you might plug a first draft, at least one wireframe together.

Do not do it. Instead, you put yourself in the position of a filmmaker. He writes his story first. And even when he finishes, he does not shoot directly. Everything is too expensive.

So you put yourself in the situation of a filmmaker. The idea is quite concrete in the mind. Now you want to describe more specifically, what should happen within the given movie length. You write something like a trailer, respectively a big summary.

With reference to our website, you write down what the website should achieve. You practically tell a third person, the unknown reader, what the goals and methods of the website you are trying to think of and why the unknown reader will enjoy using this page.

This form of purely verbal communication forces you to clearly profess color. After all, this method does not give you the opportunity to throw around a little eye candy and blindfold your audience.

When describing, you want to avoid unnecessary lengths. Brevity is the soul of wit. The shorter the story, the safer you really hit the essence. Then vote your story best with the customer. Maybe he will be surprised that he gets a text and no layout. But you will be able to explain that to him now.

When the story is matched, you start thinking about how to turn that story into design. You will notice that there are more and less good graphic approaches to stage the story. You would not have thought about that before. Now think about which design approaches can best reinforce the message of your story. You are now using this one.

Look at the available language assistants

Amazon Alexa you can already be provided with so-called skills at the present time. Skills, in English: skills, allow the language assistant to perform certain tasks that they would not be able to do without this logic. So, the design of a skill is very similar to the design of a web app.

It’s all about controlling and shaping the user journey. It is important to catch mistakes and provide helpful feedback. The user wants at least as good a user experience in voice control as in conventional control via hand-eye coordination.

The CBC radio team from Canada has already abandoned the findings. UX designer Natasha Rajakariar describes in this media article what she and her team have learned.

In the end, Natasha concludes that the process of designing for the Conversational Interface is not so different from creating a visual design. That is a reassuring statement for the more timid colleagues among the designers.

Where Natasha had initially thought that the already produced radio content would be quite natural for the medium Alexa, she found that with the new possibility of conversational interfaces, the production of the content would have to change if one the medium really would want to exhaust.

If you do not like Alexa, check out Apple’s SiriKit or Microsoft’s Cortana. At the moment, only the usual suspects are moving into these markets. I think it can not hurt if Otto Normaldesigner also deals, albeit marginally, as a side project to the side project, with Conversational Interfaces at an early stage.

Sources to read on:

  • Storyframes before wireframes |
  • Very worth seeing collection of the best digital stories | Storytelling.Design
  • Adventures in conversational interface: designing for the Amazon Echo | CBC

(Product Image: Depositphotos)