http://jaredcomis.com Jared Comis - Design Portfolio Wed, 15 May 2013 01:04:50 +0000 http://jaredcomis.com en http://jaredcomis.com/Responsive-Website http://jaredcomis.com/following/jaredcomis.com/Responsive-Website Wed, 15 May 2013 01:04:50 +0000 Jared Comis - Design Portfolio 5610318 <img src="http://payload165.cargocollective.com/1/7/225404/5610318/responsive-comp.jpg" width="450" height="338" width_o="450" height_o="338" src_o="http://payload165.cargocollective.com/1/7/225404/5610318/responsive-comp_o.jpg" data-mid="30310902" border="0" align="left"/>A dentist in my hometown (who also happens to be my father) needed a new website. The current website for the business (designed by myself years ago) was out of date and out of style. Patients were complaining that they were not able to find simple information such as the address when accessing the site from their mobile device. I set out to refresh the web presence for the business and create a site that provided patients with all the information they need regardless of device. The OutcomeI built a responsive website for the practice, comisdental.com, from the ground up. The site utilizes media queries to shape the content and navigation on mobile, tablet, and desktop browsers. I also trimmed and edited the verbose brochure content to the essentials to ensure users can easily find the information they are looking for. <img src="http://payload165.cargocollective.com/1/7/225404/5610318/starting-resources.jpg" width="600" height="450" width_o="600" height_o="450" src_o="http://payload165.cargocollective.com/1/7/225404/5610318/starting-resources_o.jpg" data-mid="30311297" caption="&lt;h1&gt;Starting Point&lt;/h1&gt;&lt;p&gt;My resources at the start of this project were an ancient website (designed by myself years ago) and a text heavy brochure. I knew I needed to make a lot of changes to the existing content to meet the need of users on the web.&lt;/p&gt;&lt;p&gt;I conducted an informal user study with friends and coworkers to learn what kind of information they would want from their dentists website.&lt;/p&gt;" border="0" align="left"/> <img src="http://payload165.cargocollective.com/1/7/225404/5610318/information-arch.jpg" width="600" height="450" width_o="600" height_o="450" src_o="http://payload165.cargocollective.com/1/7/225404/5610318/information-arch_o.jpg" data-mid="30311770" caption="&lt;h1&gt;Information Architecture&lt;/h1&gt;&lt;p&gt;Using the results of my user study as a guide I created a rough taxonomy and began to parcel out existing content to the appropriate sections. &lt;/p&gt;&lt;p&gt;A lot of content needed to be cut down and edited heavily to meet the criteria from my user research.&lt;/p&gt;&lt;p&gt;Once I had the content edited and divided into my information architecture I realized that a multi[age website might not be needed. I decided to rework my content architecture into a linear design, forming a single page site.&lt;/p&gt;" border="0" align="left"/> <img src="http://payload165.cargocollective.com/1/7/225404/5610318/implementation.jpg" width="600" height="450" width_o="600" height_o="450" src_o="http://payload165.cargocollective.com/1/7/225404/5610318/implementation_o.jpg" data-mid="30311865" caption="&lt;h1&gt;Implementation&lt;/h1&gt;&lt;p&gt;From the start of this project I knew I wanted to implement a responsive design. One of the failings of the previous site was that it was not usable on mobile, and difficult on tablets. I used several media queries to target the content for desktop, tablet, and mobile devices.&lt;/p&gt;&lt;p&gt;Since I was going for a single page site my goal was to keep it as lightweight as possible. My target was for the full site to weigh in under 400kb. I used several tricks to save space such as &lt;a href=&quot;http://www.fontello.com&quot; target=&quot;_blank&quot;&gt;Fontello&lt;/a&gt; to create my own custom curated icon font, saving me from including dozens of icons I would never use.&lt;/p&gt;" border="0" align="left"/> <img src="http://payload165.cargocollective.com/1/7/225404/5610318/final.jpg" width="600" height="450" width_o="600" height_o="450" src_o="http://payload165.cargocollective.com/1/7/225404/5610318/final_o.jpg" data-mid="30311807" caption="&lt;h1&gt;Final Product&lt;/h1&gt;&lt;p&gt;The site is currently up and operational at &lt;a href=&quot;http://www.comisdental.com&quot; target=&quot;_blank&quot;&gt;comisdental.com&lt;/a&gt;. I met my goal of keeping the footprint of the entire site well below 500kb, with the total size being 380kb. The site meets user needs on all platforms from desktop to mobile. It also has the added bonus of being much more SEO friendly thanks to the cleaned up content.&lt;/p&gt;" border="0" align="left"/> A dentist in my hometown (who also happens to be my father) needed a new website. The current website for the business (designed by myself years ago) was out of... http://jaredcomis.com/EASE-Air-Sensor http://jaredcomis.com/following/jaredcomis.com/EASE-Air-Sensor Fri, 08 Mar 2013 16:10:41 +0000 Jared Comis - Design Portfolio 5124569 <img src="http://payload141.cargocollective.com/1/7/225404/5124569/top-blue-box.jpg" width="450" height="338" width_o="450" height_o="338" src_o="http://payload141.cargocollective.com/1/7/225404/5124569/top-blue-box_o.jpg" data-mid="27608824" border="0" align="left"/>EASE is an air quality sensor that detects allergens and other particulates present in the air in the home or other indoor environment. This was the final project of a class focused on human centered product design and entrepreneurship. The device is designed to provide relief to allergy and asthma sufferers in two ways. First, it provides realtime air quality readings on the device on a LCD display. Second, it allows the user to track how air quality affects their well being over time through a journaling option. The device is also connected to the internet and feeds all data and journaling to a web app for easy viewing. The OutcomeWe created several versions of our prototype to end up with the device pictured. The device met our goals of detecting air particulate, allowing users to record their status, and broadcasting this data to a web app. <img src="http://payload141.cargocollective.com/1/7/225404/5124569/research.jpg" width="600" height="450" width_o="600" height_o="450" src_o="http://payload141.cargocollective.com/1/7/225404/5124569/research_o.jpg" data-mid="27612507" caption="&lt;h1&gt;Research&lt;/h1&gt;&lt;p&gt;The first step in our design process was to conduct research into the air quality sensor domain. We discovered that most sensors are focused on outdoor air quality with results that are generalized over large areas such as cities and neighborhoods. We also found that sensors designed for the indoors were quite expensive and not geared toward the consumer. &lt;/p&gt;&lt;p&gt;This lead us to target the home environment with the goal of creating an easy to use device that not only provided air quality information but a simple way to correlate that information to allergy and asthma symptoms.&lt;/p&gt;" border="0" align="left"/> <img src="http://payload141.cargocollective.com/1/7/225404/5124569/test-parts.jpg" width="600" height="450" width_o="600" height_o="450" src_o="http://payload141.cargocollective.com/1/7/225404/5124569/test-parts_o.jpg" data-mid="27612524" caption="&lt;h1&gt;Resource Gathering &amp; Testing&lt;/h1&gt;&lt;p&gt;In order to begin building our device we had to gather and test many different parts to find something which met our goals. The main part we tested was the particle sensor, which had to be accurate enough to be useful, but also cheap enough for a home device.&lt;/p&gt;&lt;p&gt;After we selected and sourced all of our parts, we integrated them with an Arduino R3 board.&lt;/p&gt;" border="0" align="left"/> <img src="http://payload141.cargocollective.com/1/7/225404/5124569/first-prototype.jpg" width="600" height="450" width_o="600" height_o="450" src_o="http://payload141.cargocollective.com/1/7/225404/5124569/first-prototype_o.jpg" data-mid="27612531" caption="&lt;h1&gt;First Prototype&lt;/h1&gt;&lt;p&gt;After we got everything working with Arduino, we designed a simple enclosure to contain everything, allowing us begin testing.&lt;/p&gt;&lt;p&gt;We learned a lot from this first prototype and it heavily influenced our future designs.&lt;/p&gt;" border="0" align="left"/> <img src="http://payload141.cargocollective.com/1/7/225404/5124569/build-process.jpg" width="600" height="450" width_o="600" height_o="450" src_o="http://payload141.cargocollective.com/1/7/225404/5124569/build-process_o.jpg" data-mid="27612541" caption="&lt;h1&gt;Build Process&lt;/h1&gt;&lt;p&gt;To build our prototypes, we utilized a laser cutter and 3mm birch boards for the enclosure. Using a laser cutter not only saved us time over cutting a box by hand, but also allowed us to make extremely precise cuts based off of a digital blue print we created. &lt;/p&gt;&lt;b&gt;Here is a &lt;a href=&quot;https://vimeo.com/61208186&quot; target=&quot;_blank&quot;&gt;short video&lt;/a&gt; of a typical prototype build process&lt;/b&gt;&lt;/p&gt;" border="0" align="left"/> <img src="http://payload141.cargocollective.com/1/7/225404/5124569/iterations.jpg" width="600" height="450" width_o="600" height_o="450" src_o="http://payload141.cargocollective.com/1/7/225404/5124569/iterations_o.jpg" data-mid="27612547" caption="&lt;h1&gt;Iteration&lt;/h1&gt;&lt;p&gt;Here are a few examples of the different iterations we created of our product.&lt;/p&gt;&lt;p&gt;Each iteration had different goals. Earlier versions were simple proof of concept type prototypes while the latest version, the blue device pictured left, was designed to be used in usability tests to gather feedback.&lt;/p&gt;" border="0" align="left"/> <img src="http://payload141.cargocollective.com/1/7/225404/5124569/final-prototype.jpg" width="600" height="450" width_o="600" height_o="450" src_o="http://payload141.cargocollective.com/1/7/225404/5124569/final-prototype_o.jpg" data-mid="27612552" caption="&lt;h1&gt;Current Prototype&lt;/h1&gt;&lt;p&gt;This project is still in development. We are currently in the process of testing the device with users to get more feedback into how people want to interact with the device and receive air quality information.&lt;/p&gt;&lt;p&gt;Once we refine the design and interaction more, we plan on streamlining the device by removing the Arduino component for a custom board and creating a sleeker design.&lt;/p&gt;" border="0" align="left"/> EASE is an air quality sensor that detects allergens and other particulates present in the air in the home or other indoor environment. This was the final project... http://jaredcomis.com/SpaceScout-App http://jaredcomis.com/following/jaredcomis.com/SpaceScout-App Wed, 06 Mar 2013 00:23:55 +0000 Jared Comis - Design Portfolio 5119529 <img src="http://payload140.cargocollective.com/1/7/225404/5119529/top-comp.png" width="450" height="338" width_o="450" height_o="338" src_o="http://payload140.cargocollective.com/1/7/225404/5119529/top-comp_o.png" data-mid="27493527" border="0" align="left"/>SpaceScout is an android application which allows students to find open study and collaboration spaces on UW's campuses in Seattle, Tacoma and Bothell. SpaceScout started out as a native iOS app which is already released. The goal of this app is to serve the 35%+ UW students who use android based devices, and allow them to easily filter and view information about the diverse set of spaces on campus. My role on this project was to design SpaceScout for the android platform from the ground up. Though I had the iOS app design as a guide, my goal was to design an experience that came across as distinctly android and not a simple port of an iOS app. The OutcomeThe design of SpaceScout android is still underway. This app is being developed as an open source project, which you can follow on github. Designs will be finalized in late May 2013 with development beginning shortly after. <img src="http://payload140.cargocollective.com/1/7/225404/5119529/sketches.jpg" width="600" height="450" width_o="600" height_o="450" src_o="http://payload140.cargocollective.com/1/7/225404/5119529/sketches_o.jpg" data-mid="27643167" caption="&lt;h1&gt;Early Sketching &amp; Ideation&lt;/h1&gt;&lt;p&gt;Though I was working from the previously existing iOS app the Android version required some significant changes. The main difference being the platform, but extensive feedback from users and a set of new features to be included in the app created a lot of new interaction problems to be solved.&lt;/p&gt;&lt;p&gt;I began my design process through a number of iterative sketches and a close study of the &lt;a href=&quot;http://developer.android.com/design/index.html&quot; target=&quot;_blank&quot;&gt;Android design standards&lt;/a&gt;. I work very quickly with pencil and paper which allows me to test out the multitude of design options that were available&lt;/p&gt;" border="0" align="left"/> <img src="http://payload140.cargocollective.com/1/7/225404/5119529/mockups.png" width="600" height="450" width_o="600" height_o="450" src_o="http://payload140.cargocollective.com/1/7/225404/5119529/mockups_o.png" data-mid="27494165" caption="&lt;h1&gt;Mock Ups&lt;/h1&gt;&lt;p&gt;After finalizing the basic layouts, interactions, and views in the sketching stage I moved into creating mock ups. For this stage I used Omnigraffle to rapidly flesh out my design into a realistic android interface.&lt;/p&gt;" border="0" align="left"/> <img src="http://payload140.cargocollective.com/1/7/225404/5119529/design-spec.png" width="600" height="450" width_o="600" height_o="450" src_o="http://payload140.cargocollective.com/1/7/225404/5119529/design-spec_o.png" data-mid="27494167" caption="&lt;h1&gt;Design Spec&lt;/h1&gt;&lt;p&gt;After the mock ups were completed I wrote a detailed design spec to clearly describe all views and interactions in the app. The goal of the spec is provide the developer on the SpaceScout project enough detail to complete the project.&lt;/p&gt;&lt;p&gt; This spec shares a lot of similarities to the iOS client spec but has been modified to account for the difference in platform and the addition of many new features such as computer lab statistics, filter results pagination, and multi-campus support.&lt;/p&gt;&lt;p&gt;The design spec can be view on &lt;a href=&quot;http://github.com/uw-it-aca/spacescout-android/wiki/Design-Spec&quot; target=&quot;_blank&quot;&gt;Github.&lt;/a&gt;&lt;/p&gt;&lt;p&gt;Please note, this is still a work in progress.&lt;/p&gt;" border="0" align="left"/> SpaceScout is an android application which allows students to find open study and collaboration spaces on UW's campuses in Seattle, Tacoma and Bothell. SpaceScout... http://jaredcomis.com/MyUW-Mobile http://jaredcomis.com/following/jaredcomis.com/MyUW-Mobile Thu, 08 Nov 2012 16:30:31 +0000 Jared Comis - Design Portfolio 4381839 <img src="http://payload104.cargocollective.com/1/7/225404/4381839/topimg.png" width="450" height="338" width_o="450" height_o="338" src_o="http://payload104.cargocollective.com/1/7/225404/4381839/topimg_o.png" data-mid="23281995" border="0" align="left"/>MyUW is the University of Washington's student portal website, acting as a landing page for numerous student needs such as course information, schedule, and links to other important university services. Over 10% (and rapidly growing) of the roughly 3 million monthly visits to MyUW are from a mobile device, but the site was not optimized for mobile at all.As UX designer on the team tasked with designing a mobile version of MyUW, my goals were to create a simple and easy to use mobile interface to allow students to access their most important information on the go. We worked off of extensive research and incorporated student feedback throughout our design process in order to maximize the mobile experience for students.The OutcomeMyUW mobile is currently live and in use by UW students. A short video demo can be seen here. Our mobile design will eventually become the basis for the desktop version of MyUW in the near future. <img src="http://payload104.cargocollective.com/1/7/225404/4381839/myuw-interaction-design-sketches.jpg" width="600" height="450" width_o="600" height_o="450" src_o="http://payload104.cargocollective.com/1/7/225404/4381839/myuw-interaction-design-sketches_o.jpg" data-mid="23293770" caption="&lt;h1&gt;Early Sketching &amp; Ideation&lt;/h1&gt;&lt;p&gt;Based on an in depth user research report of current student usage of MyUW, and their expectations for a mobile version, we began our design process with extensive sketching.&lt;/p&gt;&lt;p&gt;My goal at this stage was to get as many ideas on paper as quickly as possible. I wanted to explore different interaction patterns and see how (and if) they could work with the type of requirements we had.&lt;/p&gt;" border="0" align="left"/> <img src="http://payload104.cargocollective.com/1/7/225404/4381839/myuw-wireframes.png" width="600" height="450" width_o="600" height_o="450" src_o="http://payload104.cargocollective.com/1/7/225404/4381839/myuw-wireframes_o.png" data-mid="23325680" caption="&lt;h1&gt;Wireframes&lt;/h1&gt;&lt;p&gt;The next step in the process was to create some basic wireframes to crystalize our best ideas from our sketchs. At this stage our goal was to get a basic idea of what we wanted to move forward with in terms of interaction and information architecture.&lt;/p&gt;" border="0" align="left"/> <img src="http://payload104.cargocollective.com/1/7/225404/4381839/prototype.png" width="600" height="450" width_o="600" height_o="450" src_o="http://payload104.cargocollective.com/1/7/225404/4381839/prototype_o.png" data-mid="23325500" caption="&lt;h1&gt;Prototype&lt;/h1&gt;&lt;p&gt;In order to get as much user feedback through our design process as possible, we decided to utilize a rapid prototyping strategy. We created a simple HTML/CSS/JS prototype which allowed us to conduct multiple usability tests as we were developing MyUW mobile. The results of these tests informed our designs heavily as we continued development.&lt;/p&gt;" border="0" align="left"/> <img src="http://payload104.cargocollective.com/1/7/225404/4381839/final-visual-design.png" width="600" height="450" width_o="600" height_o="450" src_o="http://payload104.cargocollective.com/1/7/225404/4381839/final-visual-design_o.png" data-mid="23326213" caption="&lt;h1&gt;Final Design&lt;/h1&gt;&lt;p&gt;The final product of this project was launched to the UW student body in October 2012. Based on our research and testing we decided to go with a simple minimalist design which utilized color to differentiate different course sections. Since the release mobile usage of MyUW has steadily increased.&lt;p/&gt;&lt;p&gt;Development of MyUW Mobile is ongoing, with future releases planned to introduce many new functions.&lt;/p&gt;" border="0" align="left"/> MyUW is the University of Washington's student portal website, acting as a landing page for numerous student needs such as course information, schedule, and links... http://jaredcomis.com/Seaflow http://jaredcomis.com/following/jaredcomis.com/Seaflow Tue, 01 May 2012 00:55:40 +0000 Jared Comis - Design Portfolio 3308803 <img src="http://payload50.cargocollective.com/1/7/225404/3308803/seaflow-portfolioimg.png" width="450" height="338" width_o="450" height_o="338" src_o="http://payload50.cargocollective.com/1/7/225404/3308803/seaflow-portfolioimg_o.png" data-mid="16980523" border="0" align="left"/> As part of the Hackademia Research Group at UW I am working on a project in collaboration with the School of Oceanography to help create visualizations for their SeaFlow Phytometer. This project is currently still in development. Our goal is to create a easy to understand and fully interactive visualization of the phytometer data. We are utilizing the d3 javascript library along with jQuery to harness the power of vector graphics and animations. <img src="http://payload50.cargocollective.com/1/7/225404/3308803/seaflow-mockup-port.png" width="600" height="450" width_o="600" height_o="450" src_o="http://payload50.cargocollective.com/1/7/225404/3308803/seaflow-mockup-port_o.png" data-mid="17834681" caption="&lt;h1&gt;Wireframes&lt;/h1&gt;&lt;p&gt;We began by exploring various wireframes and mockups to experiment with different variations from the current display setup.&lt;/p&gt; " border="0" align="left"/> <img src="http://payload50.cargocollective.com/1/7/225404/3308803/Seaflow-Viewer-port.png" width="600" height="450" width_o="600" height_o="450" src_o="http://payload50.cargocollective.com/1/7/225404/3308803/Seaflow-Viewer-port_o.png" data-mid="17835020" caption="&lt;h1&gt;Prototype&lt;/h1&gt;&lt;p&gt;Our next step was to start working with a small dataset to create a functional prototype utilizing the d3 JavaScript library. Our goal here was to understand how d3 handled the Seaflow data and to begin to explore different time based visualizations.&lt;/p&gt;&lt;p&gt;Here is our &lt;a href=&quot;http://students.washington.edu/jcomis/hackademia/&quot; target=&quot;_blank&quot;&gt;current prototype&lt;/a&gt; " border="0" align="left"/> As part of the Hackademia Research Group at UW I am working on a project in collaboration with the School of Oceanography to help create visualizations for their... http://jaredcomis.com/The-Perfect-Pint http://jaredcomis.com/following/jaredcomis.com/The-Perfect-Pint Fri, 06 Apr 2012 14:02:19 +0000 Jared Comis - Design Portfolio 3155070 <img src="http://payload42.cargocollective.com/1/7/225404/3155070/pint-top.jpg" width="450" height="338" width_o="450" height_o="338" src_o="http://payload42.cargocollective.com/1/7/225404/3155070/pint-top_o.jpg" data-mid="30530298" border="0" align="left"/>This project was completed for a class focusing on interaction design. The only requirement was to design an interaction for a captive audience. I decided to design an interactive craft beer menu to help bar and restaurant patrons select a beer while they wait. For this project my goal was to not only design an interaction which served the "captors", but also the captive audience by providing them an enjoyable and informative experience. <img src="http://payload42.cargocollective.com/1/7/225404/3155070/QRcode.png" width="164" height="164" width_o="164" height_o="164" src_o="http://payload42.cargocollective.com/1/7/225404/3155070/QRcode_o.png" data-mid="16126453" border="0" align="left"/>The OutcomeThe final deliverable for this project was an interactive prototype created with HTML5 and jQuery. The prototype can be viewed here or by scanning the QR Code. Please note that this mostly uses placeholder content to represent the interaction. <img src="http://payload42.cargocollective.com/1/7/225404/3155070/initial-concept_6.png" width="600" height="450" width_o="600" height_o="450" src_o="http://payload42.cargocollective.com/1/7/225404/3155070/initial-concept_6_o.png" data-mid="16713578" caption="&lt;h1&gt;Initial Concept&lt;/h1&gt;&lt;p&gt;The goal of this process was only to design an interaction, meaning not much time was spent on user research or visual aesthetics. However, being a craft beer aficionado and home brewer I felt I had a good amount of background knowledge.&lt;/p&gt;&lt;p&gt;This concept sketch represents the culmination of brainstorming on the topic of a captive audience.&lt;/p&gt;" border="0" align="left"/> <img src="http://payload42.cargocollective.com/1/7/225404/3155070/user-journey.png" width="600" height="450" width_o="600" height_o="450" src_o="http://payload42.cargocollective.com/1/7/225404/3155070/user-journey_o.png" data-mid="16713582" caption="&lt;h1&gt;User Journey&lt;/h1&gt;&lt;p&gt;The next step in the process was to plan out the user journey. Initially, I had envisioned this project to be a native app. However, after drawing out the journey as seen here I decided to build this as a web app. I was looking for a solution that could easily function across many platforms, so I changed my target from a native app experience to the mobile web.&lt;/p&gt;" border="0" align="left"/> <img src="http://payload42.cargocollective.com/1/7/225404/3155070/wireframe.png" width="600" height="450" width_o="600" height_o="450" src_o="http://payload42.cargocollective.com/1/7/225404/3155070/wireframe_o.png" data-mid="16713583" caption="&lt;h1&gt;Wireframes&lt;/h1&gt;&lt;p&gt;This interactive wireframe was created in Axure RP. The wireframes can be &lt;a href=&quot;http://students.washington.edu/jcomis/HCDE598/wireframe/&quot; target=&quot;_blank&quot;&gt;viewed fully here&lt;/a&gt;.&lt;/p&gt;&lt;p&gt;I used this to get a feel for the interaction and also as a platform to run a series of usability tests to confirm my findings.&lt;/p&gt;" border="0" align="left"/> <img src="http://payload42.cargocollective.com/1/7/225404/3155070/prototype-comp.jpg" width="600" height="450" width_o="600" height_o="450" src_o="http://payload42.cargocollective.com/1/7/225404/3155070/prototype-comp_o.jpg" data-mid="30530544" caption="&lt;h1&gt;Prototype&lt;/h1&gt;&lt;p&gt;Using what I learned from the previous steps, I created an interactive web app using HTML5, CSS3 and jQuery. I implemented some basic media queries to allow this prototype to scale to various mobile devices.&lt;p/&gt;&lt;p&gt;You can test the prototype by scaning the QR code above or clicking &lt;a href=&quot;http://students.washington.edu/jcomis/HCDE598/perfectpint/&quot; target=&quot;_blank&quot;&gt;here&lt;/a&gt;.&lt;/p&gt;" border="0" align="left"/> This project was completed for a class focusing on interaction design. The only requirement was to design an interaction for a captive audience. I decided to design... http://jaredcomis.com/The-Green-Room http://jaredcomis.com/following/jaredcomis.com/The-Green-Room Fri, 06 Apr 2012 13:02:58 +0000 Jared Comis - Design Portfolio 3154573 <img src="http://payload42.cargocollective.com/1/7/225404/3154573/topcomp.png" width="450" height="338" width_o="450" height_o="338" src_o="http://payload42.cargocollective.com/1/7/225404/3154573/topcomp_o.png" data-mid="16698782" border="0" align="left"/>The endurance of bandmate relationships depends on a complex mix of factors. Despite this fact, the default bandmate-finding process involves a haphazard sequence of posting generic ads on Craigslist followed by rounds of back-and-forth emails. Our goal was use the user centered design process to research this problem to discover a solution. The OutcomeWe designed a platform which overcomes the traditional pitfalls normally associated with finding a musical collaborator and created a prototype, The Green Room. By providing the most-wanted information in an easy to search, sort, and filter interface, bands can find new members in a fraction of the time it would take going back and forth through email or Craigslist. The application helps the user answer all of the questions up front to avoid awkward conflicts and wasting time on a bad match. Essentially, it takes the work out of finding a bandmate, so the user can focus on what they love. <img src="http://payload42.cargocollective.com/1/7/225404/3154573/surveyresults.png" width="600" height="450" width_o="600" height_o="450" src_o="http://payload42.cargocollective.com/1/7/225404/3154573/surveyresults_o.png" data-mid="16698779" caption="&lt;h1&gt;User Research&lt;/h1&gt;&lt;p&gt;We began our user research through a web based survey to gain insight into current practices of musicians in terms of how they connect with collaborators, their expectations in these communications, and their reasoning behind them. We surveyed over 50 musicians. A full overview of our results can be &lt;a href=&quot;http://students.washington.edu/jcomis/Survey_Results.pdf&quot; target=&quot;_blank&quot;&gt;found here&lt;/a&gt;.&lt;/p&gt;&lt;p&gt;We also conducted a number of interviews with musicians who have used the internet to connect with a fellow musician in order to form or join a band. I helped draft the interview prompt and conduct the user interviews. A copy of the prompt can be &lt;a href=&quot;http://students.washington.edu/jcomis/Music_Interview_Protocol.pdf&quot; target=&quot;_blank&quot;&gt;viewed here&lt;/a&gt;.&lt;/p&gt; " border="0" align="left"/> <img src="http://payload42.cargocollective.com/1/7/225404/3154573/affinity.jpg" width="600" height="450" width_o="600" height_o="450" src_o="http://payload42.cargocollective.com/1/7/225404/3154573/affinity_o.jpg" data-mid="16698778" caption="&lt;h1&gt;Ideation&lt;/h1&gt;&lt;p&gt;We utilized affinity diagramming to help sort and prioritize features. This was especially helpful in determining the amount of information required to sign up.&lt;br /&gt; &lt;/p&gt; " border="0" align="left"/> <img src="http://payload42.cargocollective.com/1/7/225404/3154573/whiteboard.jpg" width="600" height="450" width_o="600" height_o="450" src_o="http://payload42.cargocollective.com/1/7/225404/3154573/whiteboard_o.jpg" data-mid="16698783" caption="&lt;h1&gt;Wireframes&lt;/h1&gt;&lt;p&gt;&lt;br /&gt; We utilized collaborative whiteboard wireframing to help refine our design ideas before moving on to high fidelity comps. Here are a few examples from this stage in the process.&lt;br /&gt; &lt;/p&gt; " border="0" align="left"/> <img src="http://payload42.cargocollective.com/1/7/225404/3154573/comp.png" width="600" height="450" width_o="600" height_o="450" src_o="http://payload42.cargocollective.com/1/7/225404/3154573/comp_o.png" data-mid="16698978" caption="&lt;h1&gt;Prototype&lt;/h1&gt;&lt;p&gt;Based on the insights provided by the research, the design team on this project created the following prototype.&lt;/p&gt;&lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; I did not participate in the visual design. I include these comps to illustrate what was created as a result of the research, wireframing, and analysis provided by myself and the research team as part of the overall group.&lt;/p&gt; " border="0" align="left"/> The endurance of bandmate relationships depends on a complex mix of factors. Despite this fact, the default bandmate-finding process involves a haphazard sequence... http://jaredcomis.com/Therapy-Tracking-App http://jaredcomis.com/following/jaredcomis.com/Therapy-Tracking-App Fri, 06 Apr 2012 00:35:23 +0000 Jared Comis - Design Portfolio 3152258 <img src="http://payload42.cargocollective.com/1/7/225404/3152258/topcomp_11.png" width="450" height="338" width_o="450" height_o="338" src_o="http://payload42.cargocollective.com/1/7/225404/3152258/topcomp_11_o.png" data-mid="30102969" border="0" align="left"/>The Evidence-Based Practice Institute through funding by the National Institute of Mental Health was in the early process of developing an online web based tool set to aid psychotherapists. As part of a class project, myself and two other classmates were tasked with developing a solution to present to EBPI to assist in their goals of creating an application suite to assist in the processing and tracking of data from therapy sessions. We chose to focus on one aspect of this process, identifying and treating suicidal ideation because it was identified through our research as an area of stress and concern to therapists as well as being a critical point in therapy. The OutcomeWe utilized the User Centered Design process to approach this design challenge. Our final deliverable was an interactive prototype for a tablet application based on our extensive research. This application was subsequently used as part of a grant application for additional funding for the project from the National Institute of Mental Health. <img src="http://payload42.cargocollective.com/1/7/225404/3152258/interview_1.jpg" width="600" height="450" width_o="600" height_o="450" src_o="http://payload42.cargocollective.com/1/7/225404/3152258/interview_1_o.jpg" data-mid="16698061" caption="&lt;h1&gt;User Research&lt;/h1&gt;&lt;p&gt;My team and I conducted several interviews with working therapists in order to gain a better understanding of their usage and feeling about technology in their current practice.&lt;p/&gt;&lt;p&gt;This is our &lt;a href=&quot;http://students.washington.edu/jcomis/Therapist_Interview_Prompt.pdf&quot; target=&quot;_blank&quot;&gt;interview prompt&lt;/a&gt;, drafted by myself and another team member&lt;br /&gt; &lt;/p&gt;&lt;p&gt;&lt;br /&gt; We also conducted contextual inquiry with a therapist in his home office to discover and understand the process pre/post session as well as at the daily wrap up process.&lt;/p&gt;" border="0" align="left"/> <img src="http://payload42.cargocollective.com/1/7/225404/3152258/primarypersona.png" width="600" height="450" width_o="600" height_o="450" src_o="http://payload42.cargocollective.com/1/7/225404/3152258/primarypersona_o.png" data-mid="16698063" caption="&lt;h1&gt;Personas&lt;/h1&gt;&lt;p&gt;By analyzing the interviews and contextual inquiry, as well as extensive research, we created 4 personas which we felt best represented who we were designing for: a single primary persona, 2 secondary and one negative persona.&lt;br /&gt; &lt;/p&gt;&lt;p&gt;We determined our primary design focus was on early career therapists for a variety of reasons. They are already familiar with usage of technology for documentation and analysis, and also are the most in need of assurances that they are following proper process. They also will most likely not be able use or afford large enterprise scale applications which are currently available. &lt;/p&gt;" border="0" align="left"/> <img src="http://payload42.cargocollective.com/1/7/225404/3152258/all-client-overview.jpg" width="600" height="450" width_o="600" height_o="450" src_o="http://payload42.cargocollective.com/1/7/225404/3152258/all-client-overview_o.jpg" data-mid="27643118" caption="&lt;h1&gt;Ideation&lt;/h1&gt;&lt;p&gt;As a group we brainstormed over 100 ideas for features, interactions and designs. This is just one example of many.&lt;/p&gt;&lt;p&gt;My goal here was to go for quantity. I researched extensively into the domain of therapy and therapists, but stilled lacked the context and experience of someone who actually works in this field. I found that this approach of creating numerous sketches yielded the best results.&lt;/p&gt;" border="0" align="left"/> <img src="http://payload42.cargocollective.com/1/7/225404/3152258/Patient_QuickView.png" width="600" height="451" width_o="600" height_o="451" src_o="http://payload42.cargocollective.com/1/7/225404/3152258/Patient_QuickView_o.png" data-mid="16109360" caption="&lt;h1&gt;Wireframes&lt;/h1&gt;&lt;p&gt;After we completed critiquing and expanding our sketches, we moved forward to wireframes. Here is a wireframe I completed in Axure RP software.&lt;/p&gt;" border="0" align="left"/> <img src="http://payload42.cargocollective.com/1/7/225404/3152258/comp2_8.jpg" width="600" height="450" width_o="600" height_o="450" src_o="http://payload42.cargocollective.com/1/7/225404/3152258/comp2_8_o.jpg" data-mid="30062075" caption="&lt;h1&gt;Final Prototype&lt;/h1&gt;&lt;p&gt;By applying our research, personas, sketches and wireframes I created an interactive prototype using Adobe Photoshop and Powerpoint. The goal here was to provide a means to test several priority tasks with participant therapists in a usability test.&lt;/p&gt;&lt;p&gt;The therapists we tested this prototype with responded very positively. " border="0" align="left"/> The Evidence-Based Practice Institute through funding by the National Institute of Mental Health was in the early process of developing an online web based tool set...