{"id":38,"date":"2017-06-11T17:00:53","date_gmt":"2017-06-11T17:00:53","guid":{"rendered":"http:\/\/digm.drexel.edu\/uxid\/?p=38"},"modified":"2018-03-18T18:29:05","modified_gmt":"2018-03-18T18:29:05","slug":"trestle-app","status":"publish","type":"post","link":"https:\/\/philsinatra.net\/branches\/uxid\/2017\/06\/11\/trestle-app\/","title":{"rendered":"Trestle App"},"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_44777\"  width=\"326\" height=\"183\"  data-origwidth=\"326\" data-origheight=\"183\" src=\"https:\/\/www.youtube.com\/embed\/3lQ69UWNd34?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>Built from the ground up, Trestle is a web application that bridges communication between parents, teachers, and other caregivers in the lives of students with Autism Spectrum Disorder.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-39\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2017\/07\/trestle-team.jpg\" alt=\"\" width=\"960\" height=\"537\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2017\/07\/trestle-team.jpg 960w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2017\/07\/trestle-team-300x168.jpg 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2017\/07\/trestle-team-768x430.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/p>\n<p>There were two primary obstacles that were tackled in the creation of Trestle. First was Dr. Hassrick\u2019s method of using pencil and paper for her data collection. This was tedious and unreliable. Second, Dr. Hassrick had discovered that parents and teachers of children with autism were often communicating poorly, or not at all. Through weekly meetings with Dr. Hassrick, the team was able to define the needs of the application.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-40\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2017\/07\/trestle-users.png\" alt=\"\" width=\"482\" height=\"373\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2017\/07\/trestle-users.png 482w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2017\/07\/trestle-users-300x232.png 300w\" sizes=\"(max-width: 482px) 100vw, 482px\" \/><\/p>\n<p>Based on the people involved in Dr. Hassrick\u2019s research, they determined that the app would have 4 user types.<br \/>\nDr. Hassrick is in charge of entering and managing all Trestle accounts. Based on the people involved in Dr. Hassrick\u2019s research, we determined our app would have 4 user types. The school admin is a faculty member at a school that is participating in Dr. Hassrick\u2019s research. They are responsible for pairing teachers to the students they work with. Parents and teachers make up our two main user groups. They create the majority of the data used in Dr. Hassrick\u2019s research. They are the able to view and create posts that outline the activities and learning strategies that the children participate in. This is the data that is used by Dr. Hassrick in her research. For privacy reasons, the parents only have access to the teachers that work with their own child.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-41\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2017\/07\/trestle-whiteboard.jpg\" alt=\"\" width=\"960\" height=\"540\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2017\/07\/trestle-whiteboard.jpg 960w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2017\/07\/trestle-whiteboard-300x169.jpg 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2017\/07\/trestle-whiteboard-768x432.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/p>\n<p>From the start, we designed the application to be simple and intuitive, but also fun. This helps streamline the data collection process while still providing an engaging user experience. The process started by white boarding design ideas. Using these to create user journeys to define how each user type would navigate throughout the application. From there, wireframes were created to define the structural organization of the pages to be created in the app.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-42\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2017\/07\/trestle-styleguide.png\" alt=\"\" width=\"918\" height=\"543\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2017\/07\/trestle-styleguide.png 918w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2017\/07\/trestle-styleguide-300x177.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2017\/07\/trestle-styleguide-768x454.png 768w\" sizes=\"(max-width: 918px) 100vw, 918px\" \/><\/p>\n<p>After multiple iterations through design idea generation, based on assorted feedback and research a style guide defining a fully custom, colorful, and clean look was developed. In addition to all the elements in the style guide, the team implemented a little Trestle mascot into the design as well. By appearing throughout pages of the application, the Trestle mascot adds a friendlier and inviting feel.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-43\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2017\/07\/trestle-prototype.png\" alt=\"\" width=\"480\" height=\"435\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2017\/07\/trestle-prototype.png 480w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2017\/07\/trestle-prototype-300x272.png 300w\" sizes=\"(max-width: 480px) 100vw, 480px\" \/><\/p>\n<p>The style guide was then applied to the wireframes to create a cohesive and easy to navigate application. The colorful theme was useful in calling the user\u2019s attention to certain buttons, menus, or areas of the page. While the app was in the process of being coded, the team tested the design with users in a prototyping tool called Invision. Through Invision, they were able to conduct usability testing to get necessary feedback from parents, teachers, and colleagues of Dr. Hassrick.<\/p>\n<p>To build the app, the team used the Mean stack; Mongo DB, Express, Angular, and Node. As the app involves collecting personal information, a big concern was making sure it was secure as possible. The team made sure to build Trestle around industry best security practices, using some of the most reliable platforms, including Amazon web services, and took every precaution to make sure the user\u2019s data was safe.<\/p>\n<p>Once all of this useful information is stored within our database, Dr. Hassrick only has to click a single button to download all of it and begin using it in her research. As you can imagine compared to her previous pencil and paper method, it\u2019s become a much easier process.<\/p>\n<p>Trestle was created by Jacob Blank, Sarah Naftzger, Craig Conville, Matt Baggaley, Diego Torres, and Farah Fauzi, and advises by Prof. Troy Finamore<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Built from the ground up, Trestle is a web application that bridges communication between parents, teachers, and other caregivers in the lives of students with Autism Spectrum Disorder. There were two primary obstacles that were tackled in the creation of Trestle. First was Dr. Hassrick\u2019s method of using pencil and &hellip;<\/p>\n","protected":false},"author":2,"featured_media":39,"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\/38"}],"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=38"}],"version-history":[{"count":2,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/38\/revisions"}],"predecessor-version":[{"id":3884,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/38\/revisions\/3884"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/media\/39"}],"wp:attachment":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/categories?post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/tags?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}