{"id":2501,"date":"2017-09-04T19:34:14","date_gmt":"2017-09-04T23:34:14","guid":{"rendered":"https:\/\/rmu.andrewyames.com\/?page_id=2501"},"modified":"2021-09-22T11:01:01","modified_gmt":"2021-09-22T15:01:01","slug":"a-better-morning","status":"publish","type":"page","link":"https:\/\/rmu.andrewyames.com\/?page_id=2501","title":{"rendered":"A better morning"},"content":{"rendered":"<h1>Part I<\/h1>\n<p>Lets begin by creating a <strong><em>Strategy<\/em><\/strong> for a new product (system\/app\/site etc). (150-200 words) that could give our users a better morning. The strategy should outline the user&#8217;s needs so, to better understand your user, create 3 <strong>user profiles.<\/strong> Knowing your user&#8217;s needs will allow you\u00a0to define your goals for the new product. Through understanding who you are designing for you should be able to answering the following questions: What do you as the creator of your product hope to achieve through its creation? And what will your product \u00a0users hope to gain or achieve by using it?<\/p>\n<p>Part 1.2<\/p>\n<p>Second, define the <strong><em>Scope<\/em><\/strong> of the product.\u00a0by choosing the features and functions it will have (250-300 words). The features you choose must help you meet the goals defined in the strategy,\u00a0for example a <strong>goal<\/strong> is: to sell a product; a <strong>feature<\/strong>\u00a0to meet that goal would be a shopping cart and method for collecting payment. For the shopping cart to work it will need a database to store products &amp; inventory, and a merchant account to process credit cards to function. In other words <strong>features are what the users see<\/strong>, <strong>functions are what makes things work<\/strong>. These two\u00a0elements are due next week and must be ready before we move onto benchmark 2.<\/p>\n<h1>Part II<\/h1>\n<p>In class outline a <em><strong>Structure<\/strong><\/em>, aka an information architecture\/ <a href=\"https:\/\/creately.com\/blog\/diagrams\/user-flow-diagram\/\">user flow<\/a>, based on your Strategy and Scope. This should illustrate how users can navigate through your product (this should be done in your sketchbook first, then polished in illustrator, photoshop or omnigraphle). This should determine the organization methods.<\/p>\n<p>With your Structure complete, create the <strong><em>Skeleton<\/em> (wireframes),<\/strong> of your product. This should determine the types of navigation used (i.e. <strong>global<\/strong>, <strong>local<\/strong>, <strong>supplementary<\/strong>, <strong>contextual<\/strong> and <strong>courtesy<\/strong>), as well as, outline the placement of content, navigation, images, video, etc.<\/p>\n<p>Before the end of class photocopy your information architecture and wireframes so everyone in the group has the same set.<\/p>\n<p>As the final step of part 2, construct a <strong>paper prototype<\/strong>\u00a0that shows all of the necessary navigation outlined in your Structure and follows the the design of the Skeleton. A robust prototype is due next week and should be ready for user testing.<\/p>\n<h2>Articles and Resources:<\/h2>\n<ul>\n<li><a href=\"http:\/\/usabilitygeek.com\/paper-prototyping-as-a-usability-testing-technique\/\">http:\/\/usabilitygeek.com\/paper-prototyping-as-a-usability-testing-technique\/<\/a><\/li>\n<li><a href=\"http:\/\/alistapart.com\/article\/paperprototyping\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/alistapart.com\/article\/paperprototyping<\/a><\/li>\n<li><a href=\"http:\/\/www.uie.com\/articles\/prototyping_tips\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.uie.com\/articles\/prototyping_tips\/<\/a><\/li>\n<li><a href=\"http:\/\/www.uistencils.com\/products\/website-stencil-kit\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.uistencils.com\/products\/website-stencil-kit<\/a> &lt;these are mostly just cool<\/li>\n<li><a href=\"https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2017\/09\/UI_Stencils_Letter.01.zip\">UI_Stencils_Letter.01<\/a> &lt;to help with your wireframes &amp; prototypes.<\/li>\n<\/ul>\n<h1>Part III<\/h1>\n<p>Individually, shift your focus to the <em><strong>Surface<\/strong><\/em> stage of the design process by creating final design comps that highlight the most important pages of product. These comps should be based on your groups refined wireframes and paper prototypes and use any or all of the following: photoshop, illustrator and\/or fireworks. The visual design should be yours, however it must be based on the group\u2019s <strong>structure<\/strong> (information architecture) and <strong>skeleton<\/strong> (wireframes). These comps should be either printed and mounted on matte board using dry mount, or presented using google slides.<\/p>\n<p>Lastly, bring the individual parts of your process back together. Create a PDF of your brainstorming notes, proposal (your <strong>strategy<\/strong> &amp; <strong>scope<\/strong>), architecture, wireframes (make photo copies so everyone has the same set), script and tasks for user testing, reflection on user testing, and comps. Treat this as a portfolio ready piece that will showcase the forethought and planning behind your final visual solution.<\/p>\n<h2>Resources for final comps<\/h2>\n<ul>\n<li><a href=\"http:\/\/speckyboy.com\/2011\/04\/11\/50-free-psd-ui-kits-and-templates-for-web-designers\/\" target=\"_blank\" rel=\"noopener noreferrer\">50 Free PSD UI Kits and Templates for Web Designers<\/a><\/li>\n<li><a href=\"http:\/\/www.topdesignmag.com\/30-stunning-psd-files-for-web-designers\/\" target=\"_blank\" rel=\"noopener noreferrer\">30 Stunning PSD Files For Web Designers<\/a><\/li>\n<li><a href=\"http:\/\/tobiasahlin.com\/blog\/common-mac-os-x-lion-cursors\/\" target=\"_blank\" rel=\"noopener noreferrer\">Common Mac Cursors<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Part I Lets begin by creating a Strategy for a new product (system\/app\/site etc). (150-200 words) that could give our users a better morning. The strategy should outline the user&#8217;s needs so, to better understand your user, create 3 user profiles. Knowing your user&#8217;s needs will allow you\u00a0to define your goals for the new product. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/rmu.andrewyames.com\/?page_id=2501\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;A better morning&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":31,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2501","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/pages\/2501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2501"}],"version-history":[{"count":10,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/pages\/2501\/revisions"}],"predecessor-version":[{"id":5462,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/pages\/2501\/revisions\/5462"}],"up":[{"embeddable":true,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/pages\/31"}],"wp:attachment":[{"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}