{"id":860,"date":"2020-11-04T07:53:10","date_gmt":"2020-11-04T07:53:10","guid":{"rendered":"https:\/\/artattackk.com\/blogs\/?post_type=uiux&#038;p=860"},"modified":"2024-07-17T09:24:37","modified_gmt":"2024-07-17T09:24:37","slug":"step-4-in-ux-design-scenarios-and-storyboarding","status":"publish","type":"uiux","link":"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/","title":{"rendered":"STEP 4 IN UX DESIGN: SCENARIOS AND STORYBOARDING"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">I recently saw a <\/span><span style=\"font-weight: 400;\">video<\/span><span style=\"font-weight: 400;\"> on Linkedin that perfectly explained the disparity between the way products are designed for use and the way users use them.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The intended interaction between the user and the interface often completely differs from the actual interaction.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But, this can be avoided by inserting one single step between <\/span><span style=\"font-weight: 400;\">Ideation<\/span><span style=\"font-weight: 400;\"> and Prototyping &#8211; Creating User Scenarios.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">User scenarios are a depiction of the various ways a user interacts with the user interface.\u00a0<\/span><span style=\"font-weight: 400;\">Remember all the instances where Alladin needed Genie?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Well, in Alladin\u2019s case:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The instance was the issue faced by the user (here, Aladdin).<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The lamp was the design interface.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">\u00a0Rubbing the lamp was the interaction of the user with the interface.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Having Genie appear was the user goal.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">And, finally, the entire story was the user scenario.<\/span><\/li>\n<\/ul>\n<p><b>WHY CREATE USER SCENARIO?<\/b><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-2749\" src=\"https:\/\/www.artattackk.com\/wp-content\/uploads\/2020\/11\/01-Why-Create-User-Scenario.webp\" alt=\"why create user scenario\" \/><\/p>\n<ul>\n<li><b>Persona &#8211; Design Bonding: <\/b><span style=\"font-weight: 400;\">User scenarios are built around personas. They help us understand how the persona is going to interact with the design. At this stage, you understand whether your targeted persona is able to surpass the pain points he\/she previously faced and achieve his\/her goals.<\/span><\/li>\n<li><b>Reality Check:<\/b><span style=\"font-weight: 400;\"> If ideation is the art of building castles in the air, scenario creation lets you know whether those castles are habitable. User scenarios depict end-to-end user interaction thus, giving a reality check to the ideation design.<\/span><\/li>\n<li><b>Little Things: <\/b><span style=\"font-weight: 400;\">Rushing from ideation to prototyping might lead to missing little nuances that can only be encountered while end-to-end interaction. User scenarios help you encounter these nuances before spending any money on prototyping.<\/span><\/li>\n<\/ul>\n<p><b>PREREQUISITES?<\/b><\/p>\n<p><b>WHO?<\/b> <b>WHAT?<\/b> <b>HOW?<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Who are you building for?<\/span>\u00a0\u00a0<span style=\"font-weight: 400;\">What issues do they face?\u00a0<\/span> <span style=\"font-weight: 400;\">How(potential solutions) can you solve them?<\/span><\/p>\n<p><b>WRITING SCENARIOS<\/b><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-2750\" src=\"https:\/\/www.artattackk.com\/wp-content\/uploads\/2020\/11\/02-Writing-Scenarios.webp\" alt=\"\" \/><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Create situations where your user personas will have to use your product.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Describe the design you want to create will help them go through the situation satisfactorily.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Include the issues that you expect to crop up during these encounters. For example, a slow internet connection.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Describe how your design will help them overcome these issues.<\/span><\/li>\n<\/ul>\n<p><b>Completed scenarios give a detailed view of the user experience you intend to design, and how this design meets the goals you created.<\/b><\/p>\n<p><b>BABY STEPS:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use the experience map you created in <\/span><span style=\"font-weight: 400;\">Step 1.<\/span><span style=\"font-weight: 400;\">\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Choose activities classified separately from the experience map.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Create pairs of team members for each activity.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Each individual will write down each step undertaken by the user to finish the activity and achieve the intended goal.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">After members have individually written down the sub-steps under the activity &#8211; ask them to discuss these steps with their partners in the pairs.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Ask them to integrate the good ideas amongst themselves, and come up with a final interaction process intended for the said activity.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Ask every pair to present their ideas in front of other members of the team. Let the team ask questions.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">When each activity interaction is presented &#8211; the good ideas from each activity will be combined to create one complete scenario.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">This scenario will describe user interaction from start to finish.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">When all the goals set out in <\/span><span style=\"font-weight: 400;\">Step 1<\/span><span style=\"font-weight: 400;\"> of design are achieved, you know you are done.<\/span><\/li>\n<\/ul>\n<p><b>REMEMBER: <\/b><span style=\"font-weight: 400;\">Do no describe interfaces, but describe the interaction. You want to build an interface based on the interaction and not the other way round.<\/span><\/p>\n<p><b>STORYBOARDS:<\/b><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-2751\" src=\"https:\/\/www.artattackk.com\/wp-content\/uploads\/2020\/11\/03-Story-Boards.webp\" alt=\"STORYBOARDS\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Animator Webb Smith created the first storyboard when he drew scenes on separate sheets of papers and pinned them together on a bulletin board to tell a story in sequence.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That\u2019s exactly what the purpose of storyboards is &#8211; to tell the user story in a sequence.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">They show the user\u2019s journey through the interface, focusing on actions, emotions, and intricate details.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The information required for storyboards already exists in scenarios.<\/span><\/p>\n<p><b>STORYBOARD CREATION:<\/b><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-2752\" src=\"https:\/\/www.artattackk.com\/wp-content\/uploads\/2020\/11\/04-Story-Board-Creation.webp\" alt=\"A lady is making storyboard\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">One or two individuals use the inputs given by the entire team from the scenarios.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The scenario text is converted into pictures, helping the team visualize each scene.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The entire storyboard is then reviewed by the team.<\/span><\/li>\n<\/ul>\n<p><b>TIPS<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Storyboards focus on the user and the user journey through the interface. Anything else is just a distraction.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Don\u2019t get caught up in the interface design in this phase. You are just trying to understand user interaction.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Scenarios help you get real. An idea, seconded by everyone on the team, during ideation might be great &#8211; but, the practicality of it is noticed during scenario building. Scenarios put the spotlight on details that we often miss in midst of the excitement of ideation.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Storyboards help us visualize these scenarios. They help us empathize with users because they show a picturized form of the entire scene. Much like comic books.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Visualization also communicates issues that might not be recognizable from the mere text.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Remember, the devil lies in the details.<\/span><\/p>\n<p><b>STEPS AHEAD:<\/b><\/p>\n<p><strong>Paper Prototype:<\/strong> Building the product entirely on a piece of paper.<\/p>\n<p><strong>Interactive Prototype:<\/strong> Building a beta version of the product.<\/p>\n<p><strong>Evaluation:<\/strong> Testing the prototype with representative users and generating a usability report.<\/p>\n<p><span style=\"font-weight: 400;\">This article is a part of 7 article series on UX Design. To read other articles from the series click <\/span><a href=\"https:\/\/www.artattackk.com\/blog\/\"><span style=\"font-weight: 400;\">here.<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Check out the coolest designs <\/span><a href=\"https:\/\/www.artattackk.com\/portfolio\/\"><span style=\"font-weight: 400;\">here.<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">To know more visit <\/span><a href=\"https:\/\/www.artattackk.com\/\"><span style=\"font-weight: 400;\">Art Attackk<\/span><\/a><span style=\"font-weight: 400;\">, and be stunned.<\/span><\/p>\n","protected":false},"featured_media":861,"template":"","class_list":["post-860","uiux","type-uiux","status-publish","has-post-thumbnail","hentry","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.8.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>STEP 4 IN UX DESIGN: SCENARIOS AND STORYBOARDING<\/title>\n<meta name=\"description\" content=\"Learn about step 4 in UX design: scenarios and storyboarding. Discover how to create effective user experiences through strategic planning.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"STEP 4 IN UX DESIGN: SCENARIOS AND STORYBOARDING\" \/>\n<meta property=\"og:description\" content=\"Learn about step 4 in UX design: scenarios and storyboarding. Discover how to create effective user experiences through strategic planning.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/\" \/>\n<meta property=\"og:site_name\" content=\"wordpress\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-17T09:24:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/artattackk.com\/blogs\/wp-content\/uploads\/2024\/04\/ux-ui-blog-7.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"616\" \/>\n\t<meta property=\"og:image:height\" content=\"313\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/\",\"url\":\"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/\",\"name\":\"STEP 4 IN UX DESIGN: SCENARIOS AND STORYBOARDING\",\"isPartOf\":{\"@id\":\"https:\/\/artattackk.com\/blogs\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/artattackk.com\/blogs\/wp-content\/uploads\/2024\/04\/ux-ui-blog-7.webp\",\"datePublished\":\"2020-11-04T07:53:10+00:00\",\"dateModified\":\"2024-07-17T09:24:37+00:00\",\"description\":\"Learn about step 4 in UX design: scenarios and storyboarding. Discover how to create effective user experiences through strategic planning.\",\"breadcrumb\":{\"@id\":\"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/#primaryimage\",\"url\":\"https:\/\/artattackk.com\/blogs\/wp-content\/uploads\/2024\/04\/ux-ui-blog-7.webp\",\"contentUrl\":\"https:\/\/artattackk.com\/blogs\/wp-content\/uploads\/2024\/04\/ux-ui-blog-7.webp\",\"width\":616,\"height\":313,\"caption\":\"blog thumbnail\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/artattackk.com\/blogs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"STEP 4 IN UX DESIGN: SCENARIOS AND STORYBOARDING\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/artattackk.com\/blogs\/#website\",\"url\":\"https:\/\/artattackk.com\/blogs\/\",\"name\":\"wordpress\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/artattackk.com\/blogs\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"STEP 4 IN UX DESIGN: SCENARIOS AND STORYBOARDING","description":"Learn about step 4 in UX design: scenarios and storyboarding. Discover how to create effective user experiences through strategic planning.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/","og_locale":"en_US","og_type":"article","og_title":"STEP 4 IN UX DESIGN: SCENARIOS AND STORYBOARDING","og_description":"Learn about step 4 in UX design: scenarios and storyboarding. Discover how to create effective user experiences through strategic planning.","og_url":"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/","og_site_name":"wordpress","article_modified_time":"2024-07-17T09:24:37+00:00","og_image":[{"width":616,"height":313,"url":"https:\/\/artattackk.com\/blogs\/wp-content\/uploads\/2024\/04\/ux-ui-blog-7.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/","url":"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/","name":"STEP 4 IN UX DESIGN: SCENARIOS AND STORYBOARDING","isPartOf":{"@id":"https:\/\/artattackk.com\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/#primaryimage"},"image":{"@id":"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/#primaryimage"},"thumbnailUrl":"https:\/\/artattackk.com\/blogs\/wp-content\/uploads\/2024\/04\/ux-ui-blog-7.webp","datePublished":"2020-11-04T07:53:10+00:00","dateModified":"2024-07-17T09:24:37+00:00","description":"Learn about step 4 in UX design: scenarios and storyboarding. Discover how to create effective user experiences through strategic planning.","breadcrumb":{"@id":"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/#primaryimage","url":"https:\/\/artattackk.com\/blogs\/wp-content\/uploads\/2024\/04\/ux-ui-blog-7.webp","contentUrl":"https:\/\/artattackk.com\/blogs\/wp-content\/uploads\/2024\/04\/ux-ui-blog-7.webp","width":616,"height":313,"caption":"blog thumbnail"},{"@type":"BreadcrumbList","@id":"https:\/\/artattackk.com\/blogs\/ui-ux\/step-4-in-ux-design-scenarios-and-storyboarding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/artattackk.com\/blogs\/"},{"@type":"ListItem","position":2,"name":"STEP 4 IN UX DESIGN: SCENARIOS AND STORYBOARDING"}]},{"@type":"WebSite","@id":"https:\/\/artattackk.com\/blogs\/#website","url":"https:\/\/artattackk.com\/blogs\/","name":"wordpress","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/artattackk.com\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/artattackk.com\/blogs\/wp-json\/wp\/v2\/uiux\/860","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artattackk.com\/blogs\/wp-json\/wp\/v2\/uiux"}],"about":[{"href":"https:\/\/artattackk.com\/blogs\/wp-json\/wp\/v2\/types\/uiux"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/artattackk.com\/blogs\/wp-json\/wp\/v2\/media\/861"}],"wp:attachment":[{"href":"https:\/\/artattackk.com\/blogs\/wp-json\/wp\/v2\/media?parent=860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}