{"id":487,"date":"2021-12-20T12:54:00","date_gmt":"2021-12-20T17:54:00","guid":{"rendered":"https:\/\/mosher.art\/studentwork\/?p=487"},"modified":"2021-12-13T10:14:20","modified_gmt":"2021-12-13T15:14:20","slug":"hifi-app-prototypes","status":"publish","type":"post","link":"https:\/\/mosher.art\/studentwork\/university-of-central-florida\/hifi-app-prototypes\/","title":{"rendered":"HiFi App Prototypes"},"content":{"rendered":"\n<p>In the second half of DIG2500 students were tasked with designing a mobile app in one of four thematic categories: Autonomous Vehicles, Meaningful Connections, Decision Makers, or Remote Collaboration.  After an extensive design process of needs finding, brainstorming, storyboards, and paper prototypes, students built high fidelity prototypes in Adobe XD.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Autonomous Vehicles<ul><li>In 2020 we saw the radical return of human spaceflight in the United States.&nbsp; In the eight years since the last human space flight we saw space flight controls go from <a rel=\"noreferrer noopener\" href=\"https:\/\/live.staticflickr.com\/7234\/6912974136_454984e10e_b.jpg\" target=\"_blank\">this&nbsp;(Links to an external site.)<\/a> to <a rel=\"noreferrer noopener\" href=\"https:\/\/www.nasaspaceflight.com\/wp-content\/uploads\/2018\/08\/2018-08-17-182711.jpg\" target=\"_blank\">this&nbsp;(Links to an external site.)<\/a>.&nbsp; That&#8217;s pretty dramatic; hundreds of mechanical buttons to a touch screen.&nbsp; This was largely possible because so much of the SpaceX rocket is automated.&nbsp; How will these trends affect the design of automobile controls?&nbsp; Currently, the mechanical controls of cars greatly contribute to our ability to drive them with ease.&nbsp; Conversely, trying to drive an existing car with a touch screen would be a nightmare.&nbsp; But what happens when the car can drive itself?&nbsp; What will the UI of self driving cars look like?&nbsp; The future of automobile UI is up to you!<\/li><\/ul><\/li><li>Decision Makers<ul><li>Humans are terrible at making tough decisions &#8211; things that we may only have to decided on a handful of times in our life.&nbsp; Why?&nbsp; We lack prior experience making the decision, and by the scope of the problem are not able to learn through trial and error.&nbsp; Things like choosing a major, buying a home, accepting a job, and getting married are all in this category of choice problem.&nbsp; How can we help people make this decisions in a more informed and less stressful way?&nbsp; You&#8217;ll be designing an app to help people with that.&nbsp; The app won&#8217;t be specific to any one of those problems but applicable to all of them.&nbsp; You&#8217;ll work to implement some of the decision making strategies outlined by Chip and Dan Heath.&nbsp; Note that while all paths will require some research, this path in particular will require an extra reading.<\/li><\/ul><\/li><li>Remote Collaboration<ul><li>Since the pandemic there has been an explosion of video meeting services like Zoom and Skype.&nbsp; But these platforms are not great for small talk or side conversations as everyone always hears everything said.&nbsp; How can we build a video conferencing app that allows for more socially meaningful communication, that feels more like having an in-person chat?&nbsp; We&#8217;ve seen a lot of growth in this area, though somewhat lesser know entries include: Club House, Gather Town, Spatial Chat, High Fidelity.&nbsp; What can you add to this growing app space?&nbsp; How can collaboration be built into the structure of the platform?<\/li><\/ul><\/li><li>Meaningful Connections (extra challenge!)<ul><li>Social media is&#8230; problematic.&nbsp; While social media sites help us share content with the world they also harbor hate, vitriol, and bullying.&nbsp; How can we make a site that emphasizes building meaningful connections between people rather that endless streams of bragging and showing off?&nbsp; Can you make a social media site that makes users feel better and not worse?&nbsp; That doesn&#8217;t entice them to spend hours idly scrolling? Further, can you design an app to help people make new friends during a socially distanced pandemic? Like, meaningful friends, not the mindless swiping exercises found on Tinder, Bumble, etc..&nbsp; This path is an extra challenge category because most sites that have attempted this have failed, and there are not many good examples of things that worked.<\/li><\/ul><\/li><\/ul>\n\n\n\n<p>Objectives \/ Goals: Create a high quality portfolio ready interactive digital mock up of your app design.<\/p>\n\n\n\n<p>Now its time to up the ante!&nbsp; In this module we&#8217;ll be finalizing our app designs by making high fidelity interactive prototypes in Adobe XD.&nbsp; These should be refined to the point that you&#8217;d be proud to include them in your design portfolio and happy to show them to a potential employer during an interview.&nbsp; Its a lot of work, but there&#8217;s good news, too: You only have transfer one of your paper prototypes to XD, and you&#8217;ve got more time for this assignment.<\/p>\n\n\n\n<p>Keep in mind these requirements:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>App needs 10+ unique pages.&nbsp; Avoid spending too much time on sign up \/ log in pages, as these are obvious and do not contribute to the uniqueness of your app design.&nbsp; These pages are not necessary., though depending on your app a user profile may be.<\/li><li>You&#8217;ll need some kind of global navigation &#8211; typically found a the top or bottom of the page. While this navigation may be visible on all pages, there are circumstances where it may not be practical on some views.&nbsp; You may find you need two nav bars, one top and one bottom, but then both may not be necessary, depends on your design and app complexity.<\/li><li>Navigation should work forwards and backwards on every page &#8211; the user should never get stuck in a &#8216;dead end&#8217; on your UI.&nbsp; Consider having a back and \/ or home button in your global navigation.<\/li><li>App should be designed for Apple iPhone or iPad (specific device size, such as mini or max, is up to you, you only need to make one version) &#8211; use the Apple UI kit for keyboards, clock, battery level, wifi strength, etc.&nbsp; If you&#8217;ve not used an Apple device, do an image search to see where these elements go. Here&#8217;s a <a rel=\"noreferrer noopener\" href=\"https:\/\/drive.google.com\/drive\/folders\/1g7_zbC-2TRkxWE2wuLj9L3CncKda7Hwm?usp=sharing\" target=\"_blank\">link to the iOS 14 kit&nbsp;(Links to an external site.)<\/a> that will work with mac\/windows.<\/li><li>App should be a realistic representation of how you envision it &#8211; do not use placeholder content or proxies for anything.&nbsp; Design all necessary symbols \/ icons \/ logos.&nbsp; You can do this within XD or Illustrator if you have that proficiency already.&nbsp;<\/li><li>Do not use photo place holders, find appropriate photos.&nbsp; DO NOT USE COPYRIGHTED CONTENT.&nbsp; Either take your own pictures or search for images that are creative commons \/ licensed for reuse.&nbsp; <a rel=\"noreferrer noopener\" href=\"https:\/\/www.flickr.com\/\" target=\"_blank\">Flickr&nbsp;(Links to an external site.)<\/a> is a good place for this and also has licensing filters.<\/li><li>Do not use text place holders.&nbsp; Write meaningful demo text.&nbsp; For instance, do not use &#8220;Lorum ipsum dolor sit amet!&#8221; for the opening line of a social media post, but something relevant to your app like, &#8220;Join us on Zoom next time!&#8221;<\/li><li>App should successfully implement visual style.<\/li><li>App should successfully implement the principles of interaction design.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/mosher.art\/studentwork\/wp-content\/uploads\/2021\/12\/hifiVereb.mp4\"><\/video><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/mosher.art\/studentwork\/wp-content\/uploads\/2021\/12\/hifiSlappey.mp4\"><\/video><\/figure>\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=\"hifi\" width=\"620\" height=\"349\" src=\"https:\/\/www.youtube.com\/embed\/DLBBYWjeFs8?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<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=\"hifi\" width=\"620\" height=\"349\" src=\"https:\/\/www.youtube.com\/embed\/V-LLDwIzPZo?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<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=\"hifi\" width=\"620\" height=\"349\" src=\"https:\/\/www.youtube.com\/embed\/K3AmsQf02cE?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<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"hifi\" width=\"620\" height=\"349\" src=\"https:\/\/www.youtube.com\/embed\/rFfJoPjGomo?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<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"hifi\" width=\"620\" height=\"349\" src=\"https:\/\/www.youtube.com\/embed\/lLbe086FXpQ?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","protected":false},"excerpt":{"rendered":"<p>In the second half of DIG2500 students were tasked with designing a mobile app in one of four thematic categories: Autonomous Vehicles, Meaningful Connections, Decision Makers, or Remote&#8230;<\/p>\n","protected":false},"author":1,"featured_media":490,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,6],"tags":[40,57,65,58,33],"class_list":["post-487","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dig2500","category-university-of-central-florida","tag-4d","tag-interactive","tag-lower-level","tag-prototype","tag-undergraduate"],"_links":{"self":[{"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/posts\/487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/comments?post=487"}],"version-history":[{"count":4,"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/posts\/487\/revisions"}],"predecessor-version":[{"id":512,"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/posts\/487\/revisions\/512"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/media\/490"}],"wp:attachment":[{"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/media?parent=487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/categories?post=487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/tags?post=487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}