Design Via Storytelling: No Visuals Before the Story is Set

In the ideal case, the story is first, then comes the design. You could do it the other way around, but then it would suck. Storytelling is the way to design. A couple of days ago, here at Noupe, we published the much-noticed article "Storytelling Kills Design: No Image Says More Than a Thousand Words." My final advice was to start preparing for the death of visual design. Of course, there's no doubt that, even in the future, there will still be websites relying on visual methods for the interaction. After all, it doesn't make sense to build a portfolio or a blog on the foundation of a conversational interface. That doesn't mean that the blogs of the future can't be used with speech. I'm sure that speech will be important for any kind of web presence. The question is the extent. For some types of websites, fully relying on speech doesn't make any sense. For these websites, we'll see a multi-track approach. In general, I'm certain that speech will be one of the default interaction methods, right next to keyboard, mouse, and touch. Back to my recommendation to start preparing for the approaching changes now. How can you do that? After all, we haven't even arrived at the age of conversational interfaces. You could start by changing up your design process a bit.

Story First, Design Suggestions After

So you had an in-depth talk with your client. He was able to make his requirements pretty clear, and even provided you with data material on the target group and on top of that also knew how to define a precise goal for his planned website. Not bad. After a bit of research, you feel like you have a pretty good idea of what the client wants, and how you can realize that. Now, it would be time to come up with a first draft, or at least a wireframe. Don't do that. Instead, put yourself in the position of a film maker. He'd write a story first. And even when he's done with that, he doesn't start to shoot. That's way too expensive. [caption id="attachment_102861" align="alignnone" width="1024"] Photo by Pexels on Pixabay[/caption] So you've put yourself into the situation of a film maker. The idea in your head is pretty tangible. Now, you want to get more precise to describe what should happen within the given film duration. You pretty much write a trailer, a big summary. Regarding our website, write down what it is supposed to accomplish. Basically, explain the goals and methods of your website to a third party, and tell that unknown reader why he'll enjoy using the site. This form of purely verbal communication forces you to take a stand. After all, this method does not allow you to throw around some eye candy to blind your audience. When explaining, make sure to avoid unnecessary length. Brevity is the soul of wit. The shorter the story, the higher the likelihood of you getting to the point. Discuss your story with the client. He may be wondering why he gets a text, and no layout. But you'll be able to explain. Once the story has been approved, go on thinking about how to transfer this story over to a design. You'll notice that there are more and less optimal visual approaches to displaying the story. Before, you would not have thought about that. Now, you think about which design approaches can strengthen your story's message the best. Use them.

Look at the Available Voice Assistants

Amazon's Alexa can already be equipped with so called skills. Here, skills are abilities that allow the assistant to execute tasks that it couldn't do without the respective program. Looking at it like this, the design of a skill can be compared to the design of a web app. In the end, it's all about controlling and designing the user journey. Errors have to be intercepted, and helpful feedback has to be provided. The user expects just as good of a user experience as he'd have with the conventional controls using hand-eye-coordination. The team of the Canadian radio station CBC has already exposed itself to these realizations. In this medium article, UX designer Natasha Rajakariar explains what she and her team have learned. In the end, Natasha concludes that the design process for the conversational interface is not that much different from creating a visual design. That's definitely a reassuring statement for the worried colleagues among the designers. First, Natasha thought that the produced radio content would be a good fit for the medium Alexa. However, she realized that, with the new option of conversation interfaces, the production of the content would have to change too, if you want to exhaust the medium. If you don't like Alexa, check out Apple's SiriKit, or Microsoft's Cortana . At the moment, only the usual suspects are moving into these markets. I don't think it can hurt for "normal" designers to take an early look at conversational interfaces, even if it's only the side project of a side project.

Sources to Continue Reading:

• Storyframes Before Wireframes | uxdesign.cc
• Lovely Collection of the Best Digital Stories | Storytelling.Design
• The Power of Storytelling | Design.org
• Adventures in Conversational Interface: Designing for the Amazon Echo | CBC

Featured image by Angelina Litvin on Unsplash