{"id":130,"date":"2015-04-06T10:38:17","date_gmt":"2015-04-06T10:38:17","guid":{"rendered":"http:\/\/blog.soton.ac.uk\/onep\/?p=130"},"modified":"2015-04-28T13:32:37","modified_gmt":"2015-04-28T13:32:37","slug":"our-designs-wireframes","status":"publish","type":"post","link":"https:\/\/blog.soton.ac.uk\/onep\/2015\/04\/06\/our-designs-wireframes\/","title":{"rendered":"Wireframe Designs"},"content":{"rendered":"<p>Follwing on from the last blog about design theory, below\u00a0are the prototype designs for TravelSafe. The group\u00a0wanted to go with a simple, minimalist look so that the application is more intuitive to use for the user. These prototypes were developed using Balsamiq Mockups (https:\/\/balsamiq.com\/).<\/p>\n<p><strong>Site Map<\/strong><\/p>\n<p><a href=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/SiteMap.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-201\" src=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/SiteMap-300x139.png\" alt=\"SiteMap\" width=\"300\" height=\"139\" srcset=\"https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/SiteMap-300x139.png 300w, https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/SiteMap-1024x473.png 1024w, https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/SiteMap.png 1341w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>The diagram above shows the site map for the application, with each page extended in the wireframes below.<\/p>\n<p><strong>Our Designs<\/strong><\/p>\n<p>Here are the first two screens that the user\u00a0will see when they\u00a0enter TravelSafe.<\/p>\n<p>The screen in Figure 1 has been kept as simple as possible so that it is as self-explanatory as possible for the user.<\/p>\n<p>Figure 2 \u00a0has been kept as simple as possible, and used to divide the rest of the content that is shown below.<\/p>\n<p>If a user\u00a0selects &#8216;View Saved Locations&#8217;, Figure 3 is the screen that the user\u00a0will be taken to. When the users\u00a0searches a location from the Home screen, the bottom of the page will give them\u00a0the option to save the location\u00a0&#8211;\u00a0a shortcut for places you visit all the time so that they\u00a0don&#8217;t have to search for it every time (see Figure 4). If they\u00a0search a location, or click &#8216;View Live Updates&#8217; on a saved location, they will\u00a0be taken to the screen in Figure 4 where they\u00a0can choose what action they\u00a0want to take, or go back to the previous screen.<\/p>\n<p>&nbsp;<\/p>\n<div id=\"attachment_132\" style=\"width: 165px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/EnterScreen.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-132\" class=\"size-medium wp-image-132\" src=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/EnterScreen-155x300.png\" alt=\"Screen visible when opening the application\" width=\"155\" height=\"300\" srcset=\"https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/EnterScreen-155x300.png 155w, https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/EnterScreen.png 209w\" sizes=\"auto, (max-width: 155px) 100vw, 155px\" \/><\/a><p id=\"caption-attachment-132\" class=\"wp-caption-text\">Figure 1<\/p><\/div>\n<div id=\"attachment_133\" style=\"width: 168px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/Home.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-133\" class=\"size-medium wp-image-133\" src=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/Home-158x300.png\" alt=\"Wireframe of Home Screen\" width=\"158\" height=\"300\" srcset=\"https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/Home-158x300.png 158w, https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/Home.png 214w\" sizes=\"auto, (max-width: 158px) 100vw, 158px\" \/><\/a><p id=\"caption-attachment-133\" class=\"wp-caption-text\">Figure 2<\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_138\" style=\"width: 164px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/SavedLocations.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-138\" class=\"size-medium wp-image-138\" src=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/SavedLocations-154x300.png\" alt=\"Wireframe of Saved Location screen\" width=\"154\" height=\"300\" srcset=\"https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/SavedLocations-154x300.png 154w, https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/SavedLocations.png 209w\" sizes=\"auto, (max-width: 154px) 100vw, 154px\" \/><\/a><p id=\"caption-attachment-138\" class=\"wp-caption-text\">Figure 3<\/p><\/div>\n<div id=\"attachment_134\" style=\"width: 163px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/LocationHome.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-134\" class=\"size-medium wp-image-134\" src=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/LocationHome-153x300.png\" alt=\"Wireframe of Location Home Screen\" width=\"153\" height=\"300\" srcset=\"https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/LocationHome-153x300.png 153w, https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/LocationHome.png 209w\" sizes=\"auto, (max-width: 153px) 100vw, 153px\" \/><\/a><p id=\"caption-attachment-134\" class=\"wp-caption-text\">Figure 4<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>The next five screens show examples of the kind of information the user\u00a0would see, updated for each location. If they\u00a0were to download a resource pack, the information would be taken from each of these and saved into a folder on their\u00a0phone, accessible from &#8216;View Saved Locations&#8217; and giving them\u00a0access to:<\/p>\n<ul>\n<li>bus and train timetables<\/li>\n<li>ungerground\/metro map<\/li>\n<li>area map<\/li>\n<li>7-day forecast<\/li>\n<li>list of areas to avoid<\/li>\n<li>travel, health and safety tips from Government organisations such as embassises, World Health Organisation and Police.<\/li>\n<\/ul>\n<div id=\"attachment_137\" style=\"width: 163px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/RouteGenerator.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-137\" class=\"size-medium wp-image-137\" src=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/RouteGenerator-153x300.png\" alt=\"Wireframe of Route Generator screen\" width=\"153\" height=\"300\" srcset=\"https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/RouteGenerator-153x300.png 153w, https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/RouteGenerator.png 210w\" sizes=\"auto, (max-width: 153px) 100vw, 153px\" \/><\/a><p id=\"caption-attachment-137\" class=\"wp-caption-text\">Figure 5<\/p><\/div>\n<div id=\"attachment_131\" style=\"width: 165px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/AreaSafety.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-131\" class=\"size-medium wp-image-131\" src=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/AreaSafety-155x300.png\" alt=\"Wireframe of Area Safety screen\" width=\"155\" height=\"300\" srcset=\"https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/AreaSafety-155x300.png 155w, https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/AreaSafety.png 210w\" sizes=\"auto, (max-width: 155px) 100vw, 155px\" \/><\/a><p id=\"caption-attachment-131\" class=\"wp-caption-text\">Figure 6<\/p><\/div>\n<div id=\"attachment_140\" style=\"width: 163px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/TravelInformation.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-140\" class=\"size-medium wp-image-140\" src=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/TravelInformation-153x300.png\" alt=\"Wireframe of Travel Information Screen\" width=\"153\" height=\"300\" srcset=\"https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/TravelInformation-153x300.png 153w, https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/TravelInformation.png 208w\" sizes=\"auto, (max-width: 153px) 100vw, 153px\" \/><\/a><p id=\"caption-attachment-140\" class=\"wp-caption-text\">Figure 7<\/p><\/div>\n<div id=\"attachment_141\" style=\"width: 164px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/WeatherInformation.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-141\" class=\"size-medium wp-image-141\" src=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/WeatherInformation-154x300.png\" alt=\"Wireframe of Weather Information screen\" width=\"154\" height=\"300\" srcset=\"https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/WeatherInformation-154x300.png 154w, https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/WeatherInformation.png 210w\" sizes=\"auto, (max-width: 154px) 100vw, 154px\" \/><\/a><p id=\"caption-attachment-141\" class=\"wp-caption-text\">Figure 8<\/p><\/div>\n<div id=\"attachment_136\" style=\"width: 167px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/NewsInformation.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-136\" class=\"size-medium wp-image-136\" src=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/NewsInformation-157x300.png\" alt=\"Wireframes of News Screen\" width=\"157\" height=\"300\" srcset=\"https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/NewsInformation-157x300.png 157w, https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/NewsInformation.png 211w\" sizes=\"auto, (max-width: 157px) 100vw, 157px\" \/><\/a><p id=\"caption-attachment-136\" class=\"wp-caption-text\">Figure 9<\/p><\/div>\n<p>The last set of functionality included in the\u00a0application is the &#8216;Translate&#8217; functionality and the ability to access and edit a user&#8217;s\u00a0own information, as shown below. The translate functionality would make use of Google&#8217;s API to incorporate Google Translate, giving access to a large number of languages as well as the ability for the phone to &#8220;speak&#8221; the translation &#8211; this would allow travellers to show locals what they were trying to say to aid understanding. The idea of &#8216;My Information&#8217; is to give the user\u00a0a place to store important information that they\u00a0might need, such as Travel Insurance information, flight details and passport number so that they\u00a0have a quick and easy way to access it, straight from the menu on the home screen.<\/p>\n<div id=\"attachment_139\" style=\"width: 164px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/Translate.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-139\" class=\"size-medium wp-image-139\" src=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/Translate-154x300.png\" alt=\"Wireframe of text translation screen\" width=\"154\" height=\"300\" srcset=\"https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/Translate-154x300.png 154w, https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/Translate.png 207w\" sizes=\"auto, (max-width: 154px) 100vw, 154px\" \/><\/a><p id=\"caption-attachment-139\" class=\"wp-caption-text\">Figure 10<\/p><\/div>\n<div id=\"attachment_135\" style=\"width: 170px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/MyInformation.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-135\" class=\"size-medium wp-image-135\" src=\"http:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/MyInformation-160x300.png\" alt=\"Wireframe of user information screen\" width=\"160\" height=\"300\" srcset=\"https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/MyInformation-160x300.png 160w, https:\/\/blog.soton.ac.uk\/onep\/files\/2015\/04\/MyInformation.png 217w\" sizes=\"auto, (max-width: 160px) 100vw, 160px\" \/><\/a><p id=\"caption-attachment-135\" class=\"wp-caption-text\">Figure 11<\/p><\/div>\n<p>As these designs show, the group\u00a0has\u00a0tried to keep a consistent design throughout all the screens, as well as minimising the amount of searching a user has to do and a limited number of steps between all screens. In terms of maintaining standards, the mobile phone application would work alongside all usual touch screen functionality, such as swiping and touch input.<\/p>\n<p>&nbsp;<\/p>\n<p>Written by Emily.<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<p><em>This post represents that the group has chosen appropriate economic and social Contextual Factors\u00a0that directly link to the marking criteria, and are vital to understanding what requirements app design has. This is based on market analysis, evaluation, and platform decisions. There is evidence that research has been\u00a0chosen intelligently (by reference to literature and analysis) to produce a conclusion of professional quality, leading to a successful product.\u00a0<\/em><\/p>\n<p><em>This post additionally represents Engineering and Design decisions. These are based on the Contextual Factors and literature review which the group have tailored the product to incorporate. This means that the app design has considerable research, fluent design and well planned steps to achieve this. This post illustrates how and why the product has been influenced in its design, and shows how engineering this app feature will solve problems, and how the product will further incorporate design decisions.\u00a0<\/em><\/p>\n<p><em>In addition, this post illustrates considerable use of media, innovation and creativity. This is apparent through applying Contextual Research, Design steps and engineering guidelines to produce wireframe designs which contribute to the product solution, summarise what the product does, and provides visualisations that align with the target market.\u00a0<\/em><\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Follwing on from the last blog about design theory, below\u00a0are the prototype designs for TravelSafe. The group\u00a0wanted to go with a simple, minimalist look so that the application is more intuitive to use for the user. These prototypes were developed using Balsamiq Mockups (https:\/\/balsamiq.com\/). Site Map &nbsp; The diagram above shows the site map for [&hellip;]<\/p>\n","protected":false},"author":61105,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[865342,316629,931326],"tags":[990795,939690,939857],"class_list":["post-130","post","type-post","status-publish","format-standard","hentry","category-design-professionalism","category-engineering","category-media-use","tag-design-professionalism","tag-design-layout","tag-front-end"],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.soton.ac.uk\/onep\/wp-json\/wp\/v2\/posts\/130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.soton.ac.uk\/onep\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.soton.ac.uk\/onep\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.soton.ac.uk\/onep\/wp-json\/wp\/v2\/users\/61105"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.soton.ac.uk\/onep\/wp-json\/wp\/v2\/comments?post=130"}],"version-history":[{"count":15,"href":"https:\/\/blog.soton.ac.uk\/onep\/wp-json\/wp\/v2\/posts\/130\/revisions"}],"predecessor-version":[{"id":411,"href":"https:\/\/blog.soton.ac.uk\/onep\/wp-json\/wp\/v2\/posts\/130\/revisions\/411"}],"wp:attachment":[{"href":"https:\/\/blog.soton.ac.uk\/onep\/wp-json\/wp\/v2\/media?parent=130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.soton.ac.uk\/onep\/wp-json\/wp\/v2\/categories?post=130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.soton.ac.uk\/onep\/wp-json\/wp\/v2\/tags?post=130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}