{"id":8,"date":"2016-06-05T17:00:57","date_gmt":"2016-06-05T17:00:57","guid":{"rendered":"http:\/\/digm.drexel.edu\/uxid\/?p=8"},"modified":"2018-03-18T18:25:02","modified_gmt":"2018-03-18T18:25:02","slug":"urbn-explore","status":"publish","type":"post","link":"https:\/\/philsinatra.net\/branches\/uxid\/2016\/06\/05\/urbn-explore\/","title":{"rendered":"URBN Explore"},"content":{"rendered":"<figure class=\"wp-block-embed wp-block-embed-youtube is-type-video is-provider-youtube\"><div class=\"wp-block-embed__wrapper\"><iframe  id=\"_ytid_26713\"  width=\"326\" height=\"183\"  data-origwidth=\"326\" data-origheight=\"183\" src=\"https:\/\/www.youtube.com\/embed\/t-5aN1EecX4?enablejsapi=1&autoplay=0&cc_load_policy=0&cc_lang_pref=&iv_load_policy=1&loop=0&modestbranding=0&rel=1&fs=1&playsinline=0&autohide=2&theme=dark&color=red&controls=1&\" class=\"__youtube_prefs__  no-lazyload\" title=\"YouTube player\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe><\/div><\/figure>\n<p>Every day hundreds of people pass through Drexel University\u2019s URBN Center, home to the Westphal College of Media Arts and Design. This winding maze of a building features endless staircases and a disorienting numerical structure that leaves its visitors struggling to find what they are looking for. I worked with a team of students to develop a mobile wayfinding application to help people successfully navigate the building.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-127\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2016\/06\/URBN-beacons.jpg\" alt=\"\" width=\"788\" height=\"421\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/URBN-beacons.jpg 788w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/URBN-beacons-300x160.jpg 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/URBN-beacons-768x410.jpg 768w\" sizes=\"(max-width: 788px) 100vw, 788px\" \/><\/p>\n<p>This project used Estimote beacons. They are Bluetooth enabled sensors that can transform any building into a location-aware environment. Think in a sense like when you use a GPS or an app like Google Maps. Those devices are getting your location from a satellite way up in space. When you\u2019re indoors, the beacons act like those satellites, being able to grab your location while you\u2019re in the URBN Center and therefore make our app possible. With this initial technology we were ready to make our app. We started our project with a solid foundation in design and user experience.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-47\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2016\/06\/URBNresearch.png\" alt=\"\" width=\"2743\" height=\"1433\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/URBNresearch.png 2743w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/URBNresearch-300x157.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/URBNresearch-768x401.png 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/URBNresearch-1024x535.png 1024w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/URBNresearch-1440x752.png 1440w\" sizes=\"(max-width: 2743px) 100vw, 2743px\" \/><\/p>\n<p>The team established three core values that were carried throughout the design process: \u201cSimple, friendly and intuitive\u201d. These served as a foundation to lean on in the face of the various design and development challenges that were experienced throughout the life of the project. The team utilized whiteboard brainstorming, user interviews, and quick iterations of wireframes to settle on screen layouts and a flow that they felt optimized the way-finding process.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-128\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2016\/06\/URBN-Floormaps.jpg\" alt=\"\" width=\"662\" height=\"322\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/URBN-Floormaps.jpg 662w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/URBN-Floormaps-300x146.jpg 300w\" sizes=\"(max-width: 662px) 100vw, 662px\" \/><\/p>\n<p>They developed a visual style guide based on the research and defined rules for the general experience, and made sure that the two worked alongside each other. They moved through a few iterations, and the final look is ultimately very much in line with the core principles. Next, they developed custom map designs, iconography, colors schemes and layout patterns that all work together to make for a refined and effective experience. They simplified the architectural floor maps by combined with our iconography, we used different colors to distinguish a classroom from an office, or an open lab, allowing users ease of use. Altogether, we incorporated these styles throughout the different floor levels into URBN Explore, to present the maps in a more clear and concise way to our users, as well as bring a better grasp on the space as a whole.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-129\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2016\/06\/URBN-ux.jpg\" alt=\"\" width=\"720\" height=\"405\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/URBN-ux.jpg 720w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/URBN-ux-300x169.jpg 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>While the core functionality of the main app was still being developed, they created a prototype using a software known as Pixate. While this software did not have any of the actual location based functionality, they were able to simulate the kind of flow the users would go through when they opened the app. This involved things like what buttons they press, where all the elements are located, and the general timing of each step throughout the app\u2019s workflow. With this prototype in place, they were able to get feedback from a bunch of potential users on the look, feel, and structure of the app\u2019s workflow. They collected a lot of feedback regarding what did or did not work. They would then update the prototype based on based on their findings from these usability testing sessions. With this working prototype in place, the development team knew exactly what the real app needed to be as they worked on making it actually functional.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-130\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2016\/06\/URBN-indoors.jpg\" alt=\"\" width=\"705\" height=\"273\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/URBN-indoors.jpg 705w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/URBN-indoors-300x116.jpg 300w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/p>\n<p>The majority of this app was made by using a software framework known as indoo.rs. Indoors is great because it allowed the team to build the app for both iOS and Android devices. They used it specifically to create the maps necessary for the app to function. The process starts by importing the map files that were created by the design team. Then defining the walls in order to label the rooms, and portals to let the app know how to plan its routes through the hallways, staircases and elevators. Now with the maps ready, the rest of our development team could start to build the app that would guide our users through them.<\/p>\n<div style=\"width: 326px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-8-1\" width=\"326\" height=\"182\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2016\/06\/media5.mp4?_=1\" \/><a href=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2016\/06\/media5.mp4\">http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2016\/06\/media5.mp4<\/a><\/video><\/div>\n<p>With the app, when a user needs to find a room, they can start by searching for it. The main search feature filters its results based off of the room number that all Drexel students see on their class schedule. However, the app can also filter the rooms by what technology it has in it, what type of room it is, and even by the student\u2019s major. There\u2019s a feature to let visitors take a pre-defined route of rooms based on major. The app gives users the ability to toggle on wheelchair accessibility so the app can recommend the best route for them to take. And last, but certainly not least, is the button that will guide users to the nearest restroom no matter what floor they are on.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-131\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2016\/06\/URBN-Watch.png\" alt=\"\" width=\"999\" height=\"680\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/URBN-Watch.png 999w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/URBN-Watch-300x204.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/URBN-Watch-768x523.png 768w\" sizes=\"(max-width: 999px) 100vw, 999px\" \/><\/p>\n<p>For the Apple Watch, they created a companion app to URBN Explore iOS app. This app gives the user subtle, non-interfering updates such as identifying what floor they are currently on, keeping them on track for the room they need to get to and notifying them of some engaging information about the room once they\u2019ve visited it.<\/p>\n<h4>Awards:<\/h4>\n<div><img loading=\"lazy\" class=\"alignleft wp-image-75 size-medium\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2016\/06\/awda2017-229x300.jpeg\" alt=\"\" width=\"229\" height=\"300\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/awda2017-229x300.jpeg 229w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/awda2017.jpeg 420w\" sizes=\"(max-width: 229px) 100vw, 229px\" \/><img loading=\"lazy\" class=\"alignleft wp-image-76 size-medium\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2016\/06\/Rose-Gold-Awards-Site-Bug-2017-01-150x300.jpg\" alt=\"\" width=\"150\" height=\"300\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/Rose-Gold-Awards-Site-Bug-2017-01-150x300.jpg 150w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/Rose-Gold-Awards-Site-Bug-2017-01-768x1536.jpg 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/Rose-Gold-Awards-Site-Bug-2017-01-512x1024.jpg 512w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/Rose-Gold-Awards-Site-Bug-2017-01-720x1440.jpg 720w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/Rose-Gold-Awards-Site-Bug-2017-01.jpg 945w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><img loading=\"lazy\" class=\"alignleft wp-image-77 size-medium\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2016\/06\/Arcturus-Winner-01-195x300.png\" alt=\"\" width=\"195\" height=\"300\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/Arcturus-Winner-01-195x300.png 195w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/Arcturus-Winner-01-768x1183.png 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/Arcturus-Winner-01-665x1024.png 665w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/Arcturus-Winner-01-935x1440.png 935w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2016\/06\/Arcturus-Winner-01.png 1006w\" sizes=\"(max-width: 195px) 100vw, 195px\" \/><\/div>\n<h4>Download:<\/h4>\n<p><a href=\"https:\/\/itunes.apple.com\/us\/genre\/ios\/id36?mt=8\"><img loading=\"lazy\" class=\"alignnone wp-image-10 size-medium\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2017\/07\/download-ios-300x89.png\" alt=\"Link to Apple App Store\" width=\"169px\" height=\"50px\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2017\/07\/download-ios-300x89.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2017\/07\/download-ios.png 540w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.customlbs.android&amp;hl=en\"><img loading=\"lazy\" class=\"alignnone wp-image-11 size-medium\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2017\/07\/download-android-300x102.png\" alt=\"Link to Google Play\" width=\"146px\" height=\"50px\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2017\/07\/download-android-300x102.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2017\/07\/download-android.png 454w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<h4>Team 6K:<\/h4>\n<p>Rahul Jaggi,\u00a0<em>Designer<\/em><br \/>\nJeff Matthews,\u00a0<em>Designer<\/em><br \/>\nXinYi Wang,\u00a0<em>Designer<\/em><br \/>\nPatrick Brady,\u00a0<em>Developer<\/em><br \/>\nDan Mennella,\u00a0<em>Developer<\/em><br \/>\nPaul Phan,\u00a0<em>Developer<\/em><br \/>\nZach Stockmal,\u00a0<em>Project<\/em> Manager<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Every day hundreds of people pass through Drexel University\u2019s URBN Center, home to the Westphal College of Media Arts and Design. This winding maze of a building features endless staircases and a disorienting numerical structure that leaves its visitors struggling to find what they are looking for. I worked with &hellip;<\/p>\n","protected":false},"author":2,"featured_media":135,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[24],"_links":{"self":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/8"}],"collection":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":13,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/8\/revisions"}],"predecessor-version":[{"id":3885,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/8\/revisions\/3885"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/media\/135"}],"wp:attachment":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/media?parent=8"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/categories?post=8"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/tags?post=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}