{"id":402,"date":"2025-09-26T22:24:59","date_gmt":"2025-09-27T02:24:59","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp200\/?p=402"},"modified":"2025-09-26T22:24:59","modified_gmt":"2025-09-27T02:24:59","slug":"module-11","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/module-11\/","title":{"rendered":"11. App Design Workflow"},"content":{"rendered":"\n<p>In this module you will start designing your app. We will start by reviewing two application design workflows, the waterflow model and the agile model. Informed by the agile approach, you will select one user task to prototype, and complete a full cycle of prototyping, testing, and refining. For this quick cycle you will draw a user flow to plan the steps users take to complete the task and use it to create a low-fidelity prototype. You will share the design with classmates and refine it based on the feedback. You will do the same for two more user tasks.<\/p>\n\n\n\n<p><strong>Learning outcomes<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Design user flows that map clear and efficient path to complete a task<\/li>\n\n\n\n<li>Design a low-fidelity prototype, focusing on one user task at a time<\/li>\n\n\n\n<li>Articulate interaction and design problems found in prototypes of peer projects<\/li>\n\n\n\n<li>Modify user flow design based on peer feedback.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Read\/Watch<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Design and Development Process<\/h5>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/cuny907-my.sharepoint.com\/:p:\/g\/personal\/revital_kaisar22_login_cuny_edu\/EdM9kXOREkdOgp81gtz4i4IBADhIQtErt_BMhNS1DTr8aQ?e=sxAnmc\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-content\/uploads\/sites\/467\/2020\/06\/The-design-process-1024x576.png\" alt=\"\" class=\"wp-image-2153\" style=\"width:1024px;height:576px\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-content\/uploads\/sites\/4354\/2020\/06\/The-design-process-1024x576.png 1024w, https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-content\/uploads\/sites\/4354\/2020\/06\/The-design-process-300x169.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-content\/uploads\/sites\/4354\/2020\/06\/The-design-process-768x432.png 768w, https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-content\/uploads\/sites\/4354\/2020\/06\/The-design-process-356x200.png 356w, https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-content\/uploads\/sites\/4354\/2020\/06\/The-design-process.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\"><em>Click on image to read and watch slideshow<\/em><\/figcaption><\/figure>\n\n\n\n<h5 class=\"wp-block-heading title style-scope ytd-video-primary-info-renderer\">Rapid Prototyping: Sketching<\/h5>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Rapid Prototyping: Sketching | Google for Startups\" width=\"1505\" height=\"847\" src=\"https:\/\/www.youtube.com\/embed\/JMjozqJS44M?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">User Testing<\/h5>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"User Testing: Why &amp; How (Jakob Nielsen)\" width=\"1505\" height=\"847\" src=\"https:\/\/www.youtube.com\/embed\/v8JJrDvQDF4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Journal 9<\/h4>\n\n\n\n<p><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-200-spring-2024\/journal-9-1\/\" data-type=\"page\" data-id=\"1062\">See instructions<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"final\">Final Project<\/h4>\n\n\n\n<p>You should have completed the creative brief and <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/persona\/\" data-type=\"post\" data-id=\"1106\">persona <\/a>by now, If you have not, do it before moving forward with the steps below.<\/p>\n\n\n\n<p><strong>TASKS<\/strong><\/p>\n\n\n\n<p>Select one user task to prototype, and complete a full cycle of prototyping, testing, and refining. For this quick cycle draw a <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/user-flows\/\" data-type=\"post\" data-id=\"1067\">user flow <\/a>that describes the steps users take to complete the task and use it to create a <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/prototype\/\" data-type=\"post\" data-id=\"2016\">low-fidelity prototype <\/a>in Figma. Share the design with classmates and refine it based on the feedback. Do the same for two more user tasks. <\/p>\n\n\n\n<p><strong>STEPS<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>User flows<\/strong>: identify one important user tasks in your app and <strong>draw a <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/user-flows\/\" data-type=\"post\" data-id=\"1067\">user flow <\/a>for it<\/strong>. Use pencil on paper or directly in Figma. The drawings should just be sketches- focus on the elements that the user interact with and omit any graphic detail. If drawing in Figma, use B\/W lines, boxes and text only.\n<ul class=\"wp-block-list\">\n<li>If you draw on paper you can print and <a href=\"https:\/\/cuny907-my.sharepoint.com\/:b:\/g\/personal\/revital_kaisar22_login_cuny_edu\/Ef7c1BWOalFOh4vGEwEfAWABoZd9HCnpN4xIKddL0d9ORQ?e=DOwv7z\">use these templates to start with.<\/a> <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Prototype <\/strong>this ONE task completely. Create a low-fidelity prototype using the drawings of your user flows in Figma (using scans of your drawings, if drawn by hand).\n<ul class=\"wp-block-list\">\n<li>To scan your user flow drawing you can use a free scanner app on your phone such as <a href=\"https:\/\/acrobat.adobe.com\/us\/en\/mobile\/scanner-app.html\">Adobe Scan<\/a>.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.figma.com\/proto\/pVBGjsoeUCdoHp3A6TlVJd\/low-fi-prototype?scaling=min-zoom&amp;node-id=12%3A0\">See this Sample low-fidelity prototype <\/a>done from scans of user flows. <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Testing<\/strong>\n<ul class=\"wp-block-list\">\n<li>Test your prototype with a classmate or a student friend. Publish your prototype and share a link with your tester. Include any information he or she needs to know before testing it. Ask your tester the following questions:\n<ul class=\"wp-block-list\">\n<li>How easily they identify and interact with active interface elements?<\/li>\n\n\n\n<li> How quickly it is it apparent what the app offers and how to accomplish it. <\/li>\n\n\n\n<li>Is the path to accomplish it efficient? <\/li>\n\n\n\n<li>Considering the context in which the the app might be used, what worked for them, what did not, what was confusing, and what expectations they had that were not met. <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Revise <\/strong>your design and prototype based on the feedback from your tester.<\/li>\n\n\n\n<li><strong>More user flows<\/strong>: draw user flows for two more user tasks and add them to your prototype<em>.<\/em><\/li>\n<\/ol>\n\n\n\n<p><strong><em>Submission<\/em><\/strong>: 3 <em>user flows, low-fidelity prototype<\/em><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Resources<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.lucidchart.com\/blog\/rapid-application-development-methodology\">4 Phases of Rapid Application Development Methodology<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webdesign.tutsplus.com\/articles\/a-designers-introduction-to-agile-methodology--cms-23349\">A Designer\u2019s Introduction to \u201cAgile\u201d Methodology<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/theblog.adobe.com\/prototyping-difference-low-fidelity-high-fidelity-prototypes-use\/\">Prototyping 101: The Difference between Low-Fidelity and High-Fidelity Prototypes and When to Use Each<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=JMjozqJS44M\">Rapid Prototyping: Sketching &amp; Paper Prototyping<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxmatters.com\/mt\/archives\/2012\/10\/tips-on-prototyping-for-usability-testing.php\">Tips on Prototyping for Usability Testing<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.nngroup.com\/articles\/ten-usability-heuristics\/\">10 Usability Heuristics for User Interface Design<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this module you will start designing your app. We will start by reviewing two application design workflows, the waterflow model and the agile model. Informed by the agile approach, you will select one user task to prototype, and complete a full cycle of prototyping, testing, and refining. For this &hellip;<\/p>\n","protected":false},"author":33,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"categories":[3],"tags":[],"class_list":["post-402","post","type-post","status-publish","format-standard","hentry","category-modules"],"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/posts\/402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/comments?post=402"}],"version-history":[{"count":60,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/posts\/402\/revisions"}],"predecessor-version":[{"id":4799,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/posts\/402\/revisions\/4799"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/media?parent=402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/categories?post=402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/tags?post=402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}