{"id":2011,"date":"2017-02-27T11:00:46","date_gmt":"2017-02-27T17:00:46","guid":{"rendered":"http:\/\/alliwalk.com\/blog\/?p=2011"},"modified":"2017-07-05T17:04:57","modified_gmt":"2017-07-05T23:04:57","slug":"skillshare-course-in-ios-design-user-experience","status":"publish","type":"post","link":"https:\/\/alliwalk.com\/blog\/2017\/02\/skillshare-course-in-ios-design-user-experience\/","title":{"rendered":"Skillshare Course in iOS Design: User Experience"},"content":{"rendered":"<h1><em>Introduction<\/em><\/h1>\n<p>In my <a href=\"http:\/\/alliwalk.com\/blog\/?p=2009\">last post<\/a>, I discussed a project I had been completing as part of a Skillshare class. This is the second post in that series.<\/p>\n<h2>Sketches<\/h2>\n<p>As I left off in my last post, I skipped over the persona portion of the course. I did return, in part, to personas but not until the visual design.<\/p>\n<p>I ended up doing about 3 pages of sketches. My documentation shows how I worked out smaller interaction elements, like navigation elements.<\/p>\n<p>&nbsp;<\/p>\n<p><div id='gallery-1' class='gallery galleryid-2011 gallery-columns-2 gallery-size-large'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/alliwalk.com\/blog\/2017\/02\/skillshare-course-in-ios-design-user-experience\/img_6492\/'><img width=\"840\" height=\"630\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6492-e1487202154390-1024x768.jpg\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-1-2026\" srcset=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6492-e1487202154390-1024x768.jpg 1024w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6492-e1487202154390-300x225.jpg 300w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6492-e1487202154390-768x576.jpg 768w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6492-e1487202154390-1200x900.jpg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-1-2026'>\n\t\t\t\tSketches\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/alliwalk.com\/blog\/2017\/02\/skillshare-course-in-ios-design-user-experience\/img_6493\/'><img width=\"840\" height=\"630\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6493-e1487202131443-1024x768.jpg\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-1-2027\" srcset=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6493-e1487202131443-1024x768.jpg 1024w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6493-e1487202131443-300x225.jpg 300w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6493-e1487202131443-768x576.jpg 768w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6493-e1487202131443-1200x900.jpg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-1-2027'>\n\t\t\t\tSketches (green ink)\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/alliwalk.com\/blog\/2017\/02\/skillshare-course-in-ios-design-user-experience\/img_6494\/'><img width=\"840\" height=\"630\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6494-e1487202037116-1024x768.jpg\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-1-2028\" srcset=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6494-e1487202037116-1024x768.jpg 1024w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6494-e1487202037116-300x225.jpg 300w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6494-e1487202037116-768x576.jpg 768w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6494-e1487202037116-1200x900.jpg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-1-2028'>\n\t\t\t\tFinal sketches\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n<br \/>\nThis is the part of the workflow is where the interaction design and user experience start to come together. The instructor chose to update the Southwest app. The visual design looked great and I liked her workflow overall. But there was a piece of this workflow that was missing &#8211; and that was competitive research. There was little in the way of looking at related apps to get an idea of what people might experience from something similar.<\/p>\n<p>It&#8217;s easier to become efficient with a new interface if it contains familiar elements. This is one reason why I research competitors. I&#8217;ve also found that using real life examples helps convince others on the team that the product is actually feasible and can implemented as designed.<\/p>\n<p>I did some looking around on my own, finding screenshots from different library websites. The Audible, the Apple Music and Podcast apps, and SoundCloud were helpful. It may be confirmation bias, but this competitive research was far more useful than the personas I didn&#8217;t create.<\/p>\n<div id='gallery-2' class='gallery galleryid-2011 gallery-columns-3 gallery-size-large'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/alliwalk.com\/blog\/2017\/02\/skillshare-course-in-ios-design-user-experience\/img_6496\/'><img width=\"576\" height=\"1024\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6496-576x1024.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-2-2035\" srcset=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6496-576x1024.png 576w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6496-169x300.png 169w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6496.png 750w\" sizes=\"(max-width: 576px) 85vw, 576px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-2035'>\n\t\t\t\tAudible books\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/alliwalk.com\/blog\/2017\/02\/skillshare-course-in-ios-design-user-experience\/img_6495\/'><img width=\"576\" height=\"1024\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6495-576x1024.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-2-2034\" srcset=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6495-576x1024.png 576w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6495-169x300.png 169w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6495.png 750w\" sizes=\"(max-width: 576px) 85vw, 576px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-2034'>\n\t\t\t\tAudible playback\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/alliwalk.com\/blog\/2017\/02\/skillshare-course-in-ios-design-user-experience\/img_6499\/'><img width=\"576\" height=\"1024\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6499-576x1024.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-2-2031\" srcset=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6499-576x1024.png 576w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6499-169x300.png 169w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6499.png 750w\" sizes=\"(max-width: 576px) 85vw, 576px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-2031'>\n\t\t\t\tMy Podcasts\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/alliwalk.com\/blog\/2017\/02\/skillshare-course-in-ios-design-user-experience\/img_6498\/'><img width=\"576\" height=\"1024\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6498-576x1024.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-2-2032\" srcset=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6498-576x1024.png 576w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6498-169x300.png 169w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6498.png 750w\" sizes=\"(max-width: 576px) 85vw, 576px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-2032'>\n\t\t\t\tPodcast playback\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/alliwalk.com\/blog\/2017\/02\/skillshare-course-in-ios-design-user-experience\/img_6497\/'><img width=\"576\" height=\"1024\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6497-576x1024.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-2-2033\" srcset=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6497-576x1024.png 576w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6497-169x300.png 169w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/IMG_6497.png 750w\" sizes=\"(max-width: 576px) 85vw, 576px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-2033'>\n\t\t\t\tSoundCloud\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n\n<h2>Wireframes<\/h2>\n<p>The difference in the wireframes for this project, and projects I&#8217;ve done at work, is how she used a vertical layout to present her work. I thought that was pretty smart. And, though it wasn&#8217;t specified in the course, I included annotations because I wanted to include ambiguity.\u00a0(Normally\u00a0I&#8217;d include more.)<\/p>\n<p>For the actual wireframes, I created 2 layouts. I noticed when reviewing the other apps that there&#8217;s often a large image in the center of the screen. I felt that this was unnecessary, especially on the playback screen. My solution was to reduce it and focus on the controls.<\/p>\n<div id='gallery-3' class='gallery galleryid-2011 gallery-columns-2 gallery-size-large'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/alliwalk.com\/blog\/2017\/02\/skillshare-course-in-ios-design-user-experience\/canvas-1\/'><img width=\"483\" height=\"1024\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/Canvas-1-483x1024.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-3-2040\" srcset=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/Canvas-1-483x1024.png 483w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/Canvas-1-141x300.png 141w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/Canvas-1-768x1630.png 768w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/Canvas-1-1200x2547.png 1200w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/Canvas-1.png 1727w\" sizes=\"(max-width: 483px) 85vw, 483px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-3-2040'>\n\t\t\t\tFinal wires\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/alliwalk.com\/blog\/2017\/02\/skillshare-course-in-ios-design-user-experience\/canvas-2\/'><img width=\"603\" height=\"1024\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/Canvas-2-603x1024.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-3-2039\" srcset=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/Canvas-2-603x1024.png 603w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/Canvas-2-177x300.png 177w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/Canvas-2-768x1304.png 768w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/Canvas-2-1200x2037.png 1200w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2017\/02\/Canvas-2.png 1727w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-3-2039'>\n\t\t\t\tTraditional alternative\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n\n<hr \/>\n<h2>Next Post&#8230;<\/h2>\n<p>The next and final post in this series will be about the visual design work I did for this project.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction In my last post, I discussed a project I had been completing as part of a Skillshare class. This is the second post in that series. Sketches As I left off in my last post, I skipped over the persona portion of the course. I did return, in part, to personas but not until &hellip; <a href=\"https:\/\/alliwalk.com\/blog\/2017\/02\/skillshare-course-in-ios-design-user-experience\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Skillshare Course in iOS Design: User Experience&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":2027,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,1,343,3],"tags":[331,390,391,480,392,387,320,322],"_links":{"self":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts\/2011"}],"collection":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/comments?post=2011"}],"version-history":[{"count":10,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts\/2011\/revisions"}],"predecessor-version":[{"id":2056,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts\/2011\/revisions\/2056"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/media\/2027"}],"wp:attachment":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/media?parent=2011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/categories?post=2011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/tags?post=2011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}