SCREENWRITING PRINCIPLES IN WEBDESIGN

Exploration of story based experience design

Article based on the talk of Joost Schrickx and Mark Geljon at the World Information Architecture Day 2018 in Utrecht at GriDDs offices.

For the video registration and slides of this talk see the bottom of this page.

During their World IA Day talk, Joost Schrickx and Mark Geljon explain how website design can learn from more traditional crafts such as screenwriting. Joost Schrickx is a screenwriter and director of documentaries and corporate films. Mark Geljon is a story architect and founder of GriDD.

The Relationship between Screenwriting and Information Architecture

Joost and Mark have decided to work together to research on ways that their professions (web design and screenwriting) can strengthen each other. This symbiosis was inspired by the realisation by Mark that what was missing in most IA discussions and in most of the IA work he worked on, was content. The fact is that the future of webdesign will be all about r(e)inventing the way stories are told and how storytelling-tools can be used to design and create better content that has more impact. Storytelling has proved to be a powerful movie-tool that reaches across generations and inspires powerful feelings. Therefore, although Joost and Mark come from different professions, they decided to work together to find ways to make the professions of webdesign and screenwriting strengthen each other.

It was not a smooth transition though, for every similarity that exists between screenwriting and webdesign, there exist several differences. Therefore, Joost was hesitant at first. His reaction was “I didn’t really understand why Mark asked me to work with him, because the art of filmmaking seems completely different from that of designing websites.“ First of all, the experiences offered by both forms of media are quite different. The audience of a movie expects a story while users of a website want easy access to information; besides movies are created in the mind of the audience while the web experience is screen based. The reactions they elicit from consumers are also different. While leaving is not acceptable when watching a movie, websites are designed so that users can leave whenever they want; while movie characters exist thanks to obstacles, web experiences avoid obstacles at all costs. So the symbiosis between webdesign and screenwriting was far from an easy one to establish.

The Expedition Into Similarities

The first challenge was to discover which tools exist to enhance stories in films and then see in how far these tools can be applied to websites to have this same improving effect or at least some similar effect.

The first screenwriting-tools investigated were some character based techniques which aim to put the user in the center of the story you are trying to convey. Dramatic events are designed to fit the personal premise, core question and wants & needs of the protagonist of the story. An example given by Joost is of a documentary on pigeon fancying which originally began as an investigation into fancying events but which could only be told in an interesting way from the personal perspective of a family trying to keep up the tradition. Google’s Inside Abbey Road project is a good example of a website that tries to use this same character based technique. The website breaks the fourth wall, making the visitor the hero of the journey and with just a click of a mouse or a tap of a screen, he or she can step Inside Abbey Road to explore the famous studios (virtually of course).

The second group of screenwriting techniques investigated were some interconnection based techniques, creating connections between different elements in the story you are trying to tell so that the beginning, middle, and end of the story get all related. Enhancement of interconnection, is the main reason why the special abilities, features and powers of movie protagonists are introduced at the beginning of the movie. These introductory elements help the audience to understand and fathom the storyline by subtly applying proved screenwriting techniques such as advertising, plant & payoff, parallelism, suspense, and surprise. The Tesla website offers a unique web experience making use of this screenwriting technique. On the website you are able to configure your very own automobile which is pretty cool. However, if you try going back to the homepage, your screen changes to contain an image of the car you just created. So, you can continue redesigning your car or order the one you’ve made. Thus, the home page offers an experience that makes you see yourself as a potential Tesla buyer.

The third group of screenwriting tools investigated have to do with the structure of the story. A hero in the movies always goes through different phases, which creates structure and helps to establish the flow of a movie. A story that has structure has appeal to the audience as it helps to keep them interested, making them a part of the story. Every good movie story always consists of three parts; an exposition or a setup in which the hero is introduced, the middle part in which the hero is confronted with his main problem or challenge and the final part in which conclusions are drawn and the problem or challenge is resolved. A setup is always needed, because audience want to know first where the story takes place, who the main characters are, and what’s at stake, before going into the real adventure of the film. This demands for structure and structure can be developed by applying the screenwriting tools ‘the hero’s journey’ and the law of three. A great example is the site of Humaan, an agency that tries to bring an experience that is carefully setup and results in a 'start a project' conversation.

Moral of This Story: Our Findings

There is obviously an overlap between screenwriting and webdesign. This can be called ‘story architecture’ and by properly utilising this overlap, both the moviemaking and Information Architecture communities can learn from each other.

From Marks perspective:

• "Although I knew about the available story tools beforehand, looking at web experiences from a filmmaking perspective really helps to improve web experiences.
• There are a lot of good examples out there that show that using this perspective almost always leads to improvement.
• We should be humble towards older crafts such as filmmaking as there is a lot more to learn especially because boundaries are disappearing between crafts.
• Designing emotion and drama is a craft that can be learned and as a designer, you CAN achieve emotional impact."

From Joosts perspective:

• "Filmmakers can adapt to current technical interactive possibilities by learning how to deal with the non-linear behavior of their audience from modern crafts such as web design.
• It is suprising to see that screenwriting principles can be used also outside the movie business such as in webdesign.
• Not only in webdesign but also in screenwriting, it makes sense to carefully design for your audience since the real protagonist is the audience!"

How to Start Using These Findings?

Do you want to create impact by applying the synergies between storytelling and webdesign? Think of these directions:

Think stories in webdesign and go beyond embedded videos by looking at the sitemap as a storyline. What are the key elements of the site and how do you want the visitor to go through them? Also try to think of the experience as being linear and introduce story arcs. For example introduce little ‘cliffhangers’ at the top of the page, indicating that there is more to be found/experienced at the bottom. The most important thing is to lose the functional perspective and start feeling. You know how you are doing by how well you can answer the question: are you as a user connected to the experience? Consider following a screenwriting class or storydesign workshop to embrace this thinking and apply it as webdesigner.

Think experience-design in screenwriting. The audience is the real protagonist, so what are the stages you will lead him through. Both when looking at the end result as before and after that? Consider introducing interactive elements and interactive videoplatforms such as Eko (https://helloeko.com/stories/)

Videoregistration of the talk:

Slides on slideshare: