{"id":3084,"date":"2022-04-12T10:30:00","date_gmt":"2022-04-12T10:30:00","guid":{"rendered":"http:\/\/kaceymorrow.com\/361\/?p=3084"},"modified":"2022-04-12T19:24:14","modified_gmt":"2022-04-12T19:24:14","slug":"apr-12-2","status":"publish","type":"post","link":"https:\/\/kaceymorrow.com\/361\/apr-12-2\/","title":{"rendered":"Apr 12"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/giphy.com\/embed\/aYzH8ZuH97cYWbUR9a\" width=\"240\" height=\"240\" frameBorder=\"0\" class=\"giphy-embed\" allowFullScreen><\/iframe><\/p>\n<p><a href=\"https:\/\/giphy.com\/gifs\/tiramisu-tira-miss-u-pusheen-pun-aYzH8ZuH97cYWbUR9a\">via GIPHY<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">PROJECT 1: <a href=\"http:\/\/kaceymorrow.com\/361\/project-1\/\">Humanizing Product Design<\/a> (<a href=\"http:\/\/kaceymorrow.com\/361\/etsy-keep-commerce-human\/\">Etsy<\/a>) (<a href=\"http:\/\/kaceymorrow.com\/361\/alaska-airlines-creating-an-airline-people-love\/\">Alaska<\/a>)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>DURING CLASS: Conduct at least 3-4 Usability Tests on your Lo-Fi Prototype and test others<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Copy<\/strong> <strong><a rel=\"noreferrer noopener\" aria-label=\"Usability Test Form (opens in a new tab)\" href=\"https:\/\/docs.google.com\/forms\/d\/18carLF-ERKanP7Xt0JuYM-QtT92OyVnD52R_iZlbT8k\/edit?usp=sharing\" target=\"_blank\">Usability Test Google Form<\/a><\/strong> OR <strong>Print the <a rel=\"noreferrer noopener\" aria-label=\"Usability Test PDF (opens in a new tab)\" href=\"http:\/\/kaceymorrow.com\/361\/wp-content\/uploads\/2022\/04\/usability_test_feedback_form.pdf\" target=\"_blank\">Usability Test PDF<\/a> in class.<\/strong><\/li><li>If copying the Google Form: Click on the three vertical dots on the top right and click on &#8220;Make a Copy&#8221; and save to your own folder. <\/li><li>Come up with<strong> 3 tasks <\/strong>for someone to complete. Don&#8217;t make the tasks too easy, vague, or leading &#8211; or what is the point of testing? <ul><li>For example, &#8220;Update your personal photo and bio&#8221; is better than &#8220;Go to the Profile Screen.&#8221; <\/li><li>You can always reference your user task flows you previously created.<\/li><\/ul><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Also still need to leave feedback on each other&#8217;s <strong>Product Statements <\/strong>on the <strong>#project1 channel on Slack.<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#ff191d\">DUE THURSDAY <\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>LOOK OVER the Following UI Lectures to prepare for Hi-Fi prototype:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><a rel=\"noreferrer noopener\" aria-label=\"GUI Design Basics  (opens in a new tab)\" href=\"http:\/\/kaceymorrow.com\/361\/wp-content\/uploads\/2022\/04\/GUI-Design-.pdf\" target=\"_blank\">GUI Design Basics <\/a><\/strong><\/li><li><strong><a rel=\"noreferrer noopener\" aria-label=\"iOS Human Interface Guidelines (opens in a new tab)\" href=\"http:\/\/kaceymorrow.com\/361\/wp-content\/uploads\/2022\/04\/iOS-Human-Interface-Guidelines.pdf\" target=\"_blank\">iOS Human Interface Guidelines<\/a><\/strong><\/li><li><strong><a rel=\"noreferrer noopener\" aria-label=\"Icon Design (opens in a new tab)\" href=\"http:\/\/kaceymorrow.com\/361\/wp-content\/uploads\/2022\/04\/Icon-Design.pdf\" target=\"_blank\">Icon Design<\/a><\/strong><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>TASKS 14-16 Deliverables<\/strong> <br><br>Turn deliverables into Team folders on Google Drive found on <a href=\"http:\/\/kaceymorrow.com\/361\/slack\/\">Slack #0_classinfo<\/a>. Label each file accordingly by task number and name. <\/p>\n\n\n\n<p class=\"has-text-color has-blue-color wp-block-paragraph\"><strong>[expand title=&#8221;TASK 14 \u2013 USABILITY TEST KEY TAKEAWAYS&#8221;]<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Written summary\/main takeaways of usability test results. &nbsp;<\/strong>Try to identify the primary things that you can work on and improve during the next iteration of your product redesign prototype based upon the feedback you received.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to Turn In:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Written Key Takeaways<\/strong><\/li><li>Google Doc or PDF. <\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">[\/expand]<\/p>\n\n\n\n<p class=\"has-text-color has-blue-color wp-block-paragraph\"><strong>[expand title=&#8221;TASK 15 \u2013 STYLE BOARD&#8221;]<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>PDF: <a href=\"http:\/\/kaceymorrow.com\/361\/wp-content\/uploads\/2022\/04\/Style-Board-Examples-.pdf\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Style Board Examples (opens in a new tab)\">Style Board Examples<\/a><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Look in the class Google Drive for your company&#8217;s Brand Guidelines<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For this task you will be&nbsp;<strong>creating a single style board&nbsp;<\/strong>to demonstrate the look and feel of the brand or rebrand for your product redesign. A style board is similar to a mood board, where it gives the client or stakeholders an idea of the overall look-and-feel of your product design.&nbsp;You can use the provided overall brand guidelines found in the Google Drive to create this style board if you like. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Process of creating a style board<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Start with a few keywords. Include adjectives and emotions that describe the mood\/style you are aiming for and what your brand stands for.<\/li><li>The style board is a collage that usually shows some or all of the following aspects:<ul><li>logo<\/li><li>colors<\/li><li>typefaces<\/li><li>image style &#8211; such as photography or illustration style.<\/li><li>texture\/pattern<\/li><li>icons<\/li><li>any other ui elements<\/li><li>animation<\/li><li>tone of voice &#8211; a.k.a writing sample text<\/li><\/ul><\/li><li>If you are keeping the current product&#8217;s brand style:<ul><li>You could reference the current provided brand style guidelines<\/li><li>Take screenshots of the current product<\/li><li>Find an existing Figma or Sketch interface toolkit for your brand <em>(you just have to Google something like &#8220;Etsy Figma UI Toolkit&#8221; or &#8220;Alaska Airlines Sketch UI Toolkit&#8221;)<\/em><\/li><\/ul><\/li><li>If you are aiming to update the product&#8217;s style:&nbsp;<ul><li>Then you will want to show what you intend to change &#8211; so show your proposed mood, colors, typefaces, image style&#8230; (things listed above)&nbsp;<\/li><li>Ask yourself what makes it better than the original? Why did it need improvement?<\/li><\/ul><\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Design Inspiration\/Resources<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/unsplash.com\/\" target=\"_blank\">Unsplash&nbsp;<\/a><em>(copyright-free photography)<\/em><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/thenounproject.com\/\" target=\"_blank\">The Noun Project&nbsp;<\/a>&nbsp;<em>(icons)<\/em><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/coolors.co\/\" target=\"_blank\">Coolors&nbsp;<\/a><em>(color schemes)<\/em><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.typewolf.com\/\" target=\"_blank\">Typewolf&nbsp;<\/a>&nbsp;<em>(popular typefaces)<\/em><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Alaska Airlines Additional Resources:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Typography guidance:&nbsp;<a rel=\"noreferrer noopener\" href=\"http:\/\/auro.alaskaair.com\/typography\/overview#gsc.tab=0\" target=\"_blank\">http:\/\/auro.alaskaair.com\/typography\/overview#gsc.tab=0<\/a><\/li><li>Color guidance:&nbsp;<a rel=\"noreferrer noopener\" href=\"http:\/\/auro.alaskaair.com\/color\/overview\" target=\"_blank\">http:\/\/auro.alaskaair.com\/color\/overview<\/a><\/li><li>Voice and tone:&nbsp;<a rel=\"noreferrer noopener\" href=\"http:\/\/auro.alaskaair.com\/core\/voice-and-tone\" target=\"_blank\">http:\/\/auro.alaskaair.com\/core\/voice-and-tone<\/a><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to Turn In:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Single Style Board<\/strong><\/li><li>PDF<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">[\/expand]<\/p>\n\n\n\n<p class=\"has-text-color has-blue-color wp-block-paragraph\"><strong>[expand title=&#8221;TASK 16 \u2013 START HI-FI PROTOTYPE DESIGN&#8221;]<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Each teammate take a stab at applying hi-fi designs<\/strong> to the various screens and we&#8217;ll choose a direction in class. No specific number of screens &#8211; Just choose a few screens each and try out different looks &#8211; color combos, type combos, image styles, and so on.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to Turn In:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Hi-Fi Prototype in progress. <\/strong><\/li><li>Each teammate take a stab at applying a design to the various screens and we&#8217;ll choose a direction in class. <\/li><li>Figma link on <strong><em>#project1 Slack Channel. <\/em><\/strong><\/li><li>To clarify, this is just an in-progress check. The full finished hi-fi prototype is due next Tuesday.<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to create a clickable Hi-Fi Prototype<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Reference your Lo-Fi prototype and usability test feedback.\u00a0<\/strong>You can either try and make a new Figma project file or you can work in the same project file and create new\/updated &#8220;Pages&#8221; and &#8220;Frames&#8221; to eventually link together.<\/li><li><strong>How to create it?\u00a0<a rel=\"noreferrer noopener\" aria-label=\"Watch the same provided demo video (opens in a new tab)\" href=\"https:\/\/youtu.be\/N7QpSTyBG_Y\" target=\"_blank\">Watch the same provided demo video<\/a>\u00a0<\/strong>to learn how to create a simple interactive prototype and how to export the link to share with your classmates on Slack.<ul><li>Double-check that the link you share says\u00a0<strong>&#8220;Anyone with the link&#8221; can view it.\u00a0<\/strong><\/li><\/ul><\/li><li><strong>Required Design Aspects:<\/strong><ul><li>Have actual text, icons, photos\/illustrations, and so on. It should look more refined and more understandable for the user to test.\u00a0<\/li><li>Have a consistent color scheme, typography, icon set, and use of hierarchy throughout.<\/li><\/ul><\/li><li><strong>Choice of Style:<\/strong>\u00a0The design could be based upon the style guidelines of your existing brand or it can be your own updated design style.\u00a0<\/li><li><strong>Optional Free UI Kits:\u00a0<\/strong>You are allowed to use built-in interface elements from existing Free Figma UI Toolkits, such as the keyboard, tab bar, nav bar, icons. Just make sure it is free and give the the creator credit in your Case Study at the end of the project.\u00a0Once downloaded and opened, you just copy and paste over the elements you want into your own file. You can visit one of the Free Figma UI Kit websites listed below. <ul><li><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.apple.com\/design\/resources\/\" target=\"_blank\">iOS Toolkits<\/a>. <em>(Sketch files listed can open in Figma)<\/em><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/material.io\/resources\/\" target=\"_blank\">Google Material Toolkit<\/a>. <em>(kits are under &#8220;Design Resources&#8221;)<\/em><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.microsoft.com\/design\/fluent\/#\/\" target=\"_blank\">Microsoft Toolkits<\/a><\/li><li>You could also try searching for a UI Kit for your specific brand to see if they have one.<\/li><\/ul><\/li><li><strong>Human Interface Guidelines:\u00a0<\/strong>If you don&#8217;t use a UI Kit, you will want to reference the lecture on\u00a0<a rel=\"noreferrer noopener\" aria-label=\"Human Interface Guidelines (opens in a new tab)\" href=\"http:\/\/kaceymorrow.com\/361\/wp-content\/uploads\/2022\/04\/ios_human_interface_guidelines.pdf\" target=\"_blank\">Human Interface Guidelines<\/a> or visit the\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/ios\/overview\/themes\/\" target=\"_blank\">Human Interface Guidelines website<\/a> to look at standards of sizing and placement.<\/li><li><strong>Next Week:<\/strong>\u00a0You will be testing people on this hi-fi prototype next week, this will provide you the feedback to make final decisions on your redesign.<\/li><\/ul>\n\n\n\n<p class=\"has-text-color has-dark-gray-color wp-block-paragraph\"><strong>Inspiration\/Resources for Layout Patterns<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/uxdesign.cc\/mobile-ui-13-basic-patterns-of-app-ui-design-to-know-about-d3f7c6176f13\" target=\"_blank\">13 basic mobile UI patterns<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/iospirations.com\/ios-app-ui\" target=\"_blank\">iospirations<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/screenlane.com\/?ref=uimovement\" target=\"_blank\">screenlane<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/mobile-patterns.com\/search\/patterns?q=home:tag\" target=\"_blank\">mobile-patterns<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/mobbin.design\/browse\/ios\/apps\" target=\"_blank\">mobbin<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"http:\/\/ui-patterns.com\/patterns\" target=\"_blank\">ui-patterns<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/designvault.io\/patterns\/\" target=\"_blank\">design vault<\/a><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Student Hi-Fi Prototype Examples<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/xd.adobe.com\/view\/47bf04b0-2741-4b13-9432-4718460cac9e-12ec\/\" target=\"_blank\">Tinder&nbsp;<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/xd.adobe.com\/view\/180568a3-32c8-40db-bd7c-ec8eda7146ee-4d56\/?fullscreen&amp;hints=off\" target=\"_blank\">NPR&nbsp;<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/xd.adobe.com\/view\/72c82fc4-22b5-4e53-9fce-ce2773ec83c5-279b\/\" target=\"_blank\">Zoom&nbsp;<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/xd.adobe.com\/view\/b51c7115-037e-4d59-9c6f-8a0f72bbde59-e04f\/\" target=\"_blank\">Amazon Prime&nbsp;<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/xd.adobe.com\/view\/1faa2f91-2ad6-46d1-953b-9648b1d99961-4af9\/\" target=\"_blank\">Pinterest<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.figma.com\/proto\/Ppi2l9cWIyZsmf9mFuY5Z0\/Redbox-HiFi?node-id=1%3A2&amp;scaling=min-zoom\" target=\"_blank\">Redbox&nbsp;<\/a><em>(this one uses animation which isn&#8217;t required)<\/em><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">[\/expand]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>PROJECT 1: Humanizing Product Design (Etsy) (Alaska) DURING CLASS: Conduct at least 3-4 Usability Tests on your Lo-Fi Prototype and test others Copy Usability Test Google Form OR Print the Usability Test PDF in class. If copying the Google Form: Click on the three vertical dots on the top right and click on &#8220;Make a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3084","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/posts\/3084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/comments?post=3084"}],"version-history":[{"count":47,"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/posts\/3084\/revisions"}],"predecessor-version":[{"id":3155,"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/posts\/3084\/revisions\/3155"}],"wp:attachment":[{"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/media?parent=3084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/categories?post=3084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/tags?post=3084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}