http://2013.igem.org/wiki/index.php?title=Special:Contributions/Deastman&feed=atom&limit=50&target=Deastman&year=&month=2013.igem.org - User contributions [en]2024-03-29T12:30:50ZFrom 2013.igem.orgMediaWiki 1.16.5http://2013.igem.org/Team:Wellesley_Desyne/Human_PracticesTeam:Wellesley Desyne/Human Practices2013-09-28T03:31:17Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>User Research</h3><br />
<br />
<h4>Overview</h4><br />
<p>This summer, the Wellesley College iGEM team worked extensively with users to create a suite of software tools that improve synthetic biology education, as well as efficiency and collaboration in the context of synthetic biology research. We spoke to many potential users, from researchers heading labs in synthetic biology research, to users in the industry, to college students studying biological sciences. We conducted user studies of our programs with volunteer subjects from the <a href="https://2013.igem.org/Team:MIT">MIT</a> and <a href="https://2013.igem.org/Team:BostonU">BU</a> iGEM teams as well as students from Wellesley College who had a range of knowledge and exposure to synthetic biology. Receiving feedback from future scientists is a vital part of the user-centered design (<a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">UCD</a>) process. We valued all input from the people we collaborated and interacted with during user testing.<br />
</p><br />
<br />
<h4>Basic Wet-Lab Training via <a href="http://www.biobuilder.org/">BioBuilder</a> at MIT</h4><br />
<br />
<div class="panel" style = "float:left; width:275px; margin:10px;"><br />
<img src="https://static.igem.org/mediawiki/2013/7/7e/BioBuilder_wetlab.jpg" ><br />
<p class="caption">Working in the wet lab</p></div><br />
<br />
<p>At the beginning of the summer, the Wellesley iGEM team received an introduction to synthetic biology and basic wet-lab training by Professor Natalie Kuldell at MIT. After reviewing the core concepts of synthetic biology, we discussed in detail the safety concerns of working in a wet-lab environment. During the wet-lab training, we were also able to conduct well-known and highly regarded experiments such as <a href="http://www.echromi.com/">E.chromi</a> and <a href="https://2006.igem.org/wiki/index.php/MIT_2006">Eau d'E coli</a>. Thus, through this experience, our team realized that several factors could strongly affect the success or failure of a synthetic biology experiment: labeling equipment properly, meticulously following clearly written instructions, and communicating with other team members. <br />
<br />
<p>In addition, we discovered that there are many technical difficulties when working in a laboratory environment, especially for future scientists. Most importantly, there are many safety concerns that are not understood or well known to the public because of synthetic biology’s recent emergence as a leading field. Thus, we realized the importance of educating the public, especially the next generation of synthetic biologists, on the safety concerns of working in a wet-lab environment. The Wellesley iGEM team considered these observations carefully when designing our three projects.</p><br />
<br />
<br />
<h4>Brainstorming and Collaboration with BU</h4><br />
<div class="panel" style = "float:right; width:310px; margin:10px;"><br />
<img src= "https://static.igem.org/mediawiki/2013/8/8e/100_1441.JPG" width = "300px"><br />
<p class="caption">BU Brainstorm session </center></p> </div><br />
<br />
<p>We continued our tradition of collaborating with the <a href="https://2013.igem.org/Team:BostonU">BU iGEM team</a>. We had a major brainstorming session with <a href="https://2013.igem.org/Team:BostonU">BU</a> at the beginning of the summer where the teams introduced their projects to each other. We received basic feedback and brainstormed the initial goals for our three projects: <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a>, <a href="https://2013.igem.org/Team:Wellesley_Desyne/zMol_zTree">zTree</a>, and <a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac To The Future</a>. Eugenie in particular benefited immensely from the initial brainstorming because we needed to learn more about the programming language, <a href="http://www.eugenecad.org/">Eugene</a>, that was developed to aid synthetic biologists in designing novel genetic circuits. Once we spent time developing several solid ideas for each of our three projects, we invited the <a href="https://2013.igem.org/Team:BostonU">BU iGEM</a> team to Wellesley to present our ideas to them and to receive feedback on which versions of the projects to pursue further. Throughout the summer, we kept in contact with the <a href="https://2013.igem.org/Team:BostonU">BU iGEM</a> team for information and feedback during project development. As part of our <a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">UCD</a> process, we tested our software with members of the <a href="https://2013.igem.org/Team:BostonU">BU iGEM</a> team, and their feedback and responses helped to shape further development of our projects. <br />
</p><br />
<div class="panel" style = "float:left; width:310px; margin:10px;"><br />
<img src= "https://static.igem.org/mediawiki/2013/f/ff/BUUsers.jpg" width = "300px"><br />
<p class="caption">BU testing Eugenie </center></p> </div><br />
<br />
<h4>Observing BU Lab Meetings</h4><br />
<p>A few times this summer, members of the <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a> project sat in on <a href="https://2013.igem.org/Team:BostonU">BU iGEM</a> lab meetings to observe how members of their research group collaborated while developing novel genetic circuits for their summer research projects. The meetings were informative and crucial in guiding us in the development of software tools that would assist in the novel genetic circuit design process. From observing these meetings, we considered how our programs could help foster collaboration in wet lab research. Some of topics we considered included: how work could be shared and edited between students and PIs, and how our programs would fit in with other the tools that are already being used. <br />
</p><br />
<br />
<br />
<h4>Eliciting Feedback from Users</h4><br />
<br />
<div class="panel" style = "float:right; width:310px; margin:10px"><br />
<img src= "https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300px"><br />
<p class="caption">Eugenie user testing results </p></div><br />
<br />
<p>As part of our desire to receive feedback concerning the design and usability of our programs from students that have a wide range of exposure to synthetic biology, we tested our programs with BU, MIT and Wellesley students. By observing our users as they used our programs to accomplish the assigned tasks, we were able to refine our applications so that the software tools we had created were not hurdles themselves for the users working in synthetic biology research. We also collected both verbal and written feedback, as well as videotaped user studies for further analysis.<br />
</p><br />
<br />
<br />
<h4>Future Work</h4><br />
<p>While our progress made great leaps and bounds this summer, there is still much work to be done to continue developing our projects beyond the scope of iGEM. We hope to continue receiving user feedback from other members of the synthetic biology community, specifically the <a href="https://2013.igem.org/Team:BostonU">BU</a> and <a href="https://2013.igem.org/Team:MIT">MIT</a> iGEM teams. The <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a> team plans to conduct more user testing to ensure that the program is robust enough that any genetic circuit can be designed. <br />
<br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne/zMol_zTree">zTree</a>'s goals are to animate carousels on and off the screen, rather than simply appearing and disappearing. Additionally, we would like to integrate a search feature that will allow users to search for specific parts at any point in their tree traversal. Finally,<br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac To The Future</a>'s goals are also to perform more user testing, to create a gesture-based, interactive tool, and to iterate and improve the usability of the application as well as to maximize its potential for educational purposes. <br />
</p><br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/OutreachTeam:Wellesley Desyne/Outreach2013-09-28T03:28:32Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Outreach</h3><br />
<br />
<div class="panel" style = "float: right; margin: 5px; padding: 10px; margin-left: 15px;"><br />
<img src = "https://static.igem.org/mediawiki/2013/7/76/Eugenie_intern.jpg" alt = "Evan and Raquel" width = "175px"><br />
<figcaption width="175" class="caption">Evan and intern Raquel</figcaption><br />
</div><br />
<br />
<h4>Overview</h4><br />
<br />
<p>At the Wellesley HCI Lab, we are committed to fostering STEM education, passionate about empowering women in the sciences, and strongly believe in the power of mentorship. The 2013 Wellesley iGEM team worked toward achieving these goals by promoting Synthetic Biology public education and awareness with our outreach project Bac to the Future. By demonstrating this project in various public settings, including with groups of middle school and high school students, we focused on making Synthetic Biology concepts fun and accessible to students and non-scientists. Additionally, we participated in the Wellesley College Science Outreach program and mentored high school interns in the human-computer interaction lab throughout the summer.</p><br />
<br />
<div class="panel" style = "float: right; margin: 5px; padding: 10px; margin-left: 15px;"><br />
<img src = "https://static.igem.org/mediawiki/2013/5/53/Ub_test_cropped.jpg" alt = "Upward Bound User Test" width = "200px"><br />
<figcaption width="200" class="caption">Upward Bound students<br> testing Bac to the Future</figcaption><br />
</div><br />
<br />
<h4>MIT-Wellesley Upward Bound</h4><br />
<br />
<p>We performed three user studies for Bac to the Future with the <a href="http://mitpsc.mit.edu/outreach/program/view/75/search">MIT-Wellesley Upward Bound program</a>, student ages ranging from 12-17. To prepare for these studies and explore the potential use of our application in an educational setting, we prepared a brief preliminary presentation to introduce Synthetic Biology concepts and terminology, and also performed a project demonstration. The students then worked through the application in groups of 2 or more. </p><br />
<br />
<div class="panel" style = "float: right; margin: 5px; padding: 10px; margin-top:5px; margin-left: 15px;"><br />
<img src = "https://static.igem.org/mediawiki/2013/b/b0/Bttf_Interns.jpg" alt = "interns" width = "200px"><br />
<figcaption class="caption">Neoreet and Artemis <br> with the art team</figcaption><br />
</div><br />
<br />
<h4>Interns</h4><br />
<br />
<p><br />
Throughout the summer, we had four high schools interns join the HCI Lab: Neoreet Braha ('17), Artemis Metaxa ('15), Raquel Penha ('15), and Yoav Segev ('15). Each intern was paired with lab mentors, and assisted with project development and execution. In the process, they learned about Human-Computer Interaction, user-centered design, Synthetic Biology, and programming skills.</p><br />
<br />
<h4>Summer Poster Session</h4><br />
<p>As a lab, we participated in the annual Wellesley Science Center Summer Research Poster Session, which is attended by students, faculty, and members of the local community. Each project team prepared and displayed a poster outlining the project abstract, design process, results, and future work. We also performed on-site demonstrations.</p><br />
<br />
<br />
<table align="center"><br />
<td><br />
<img src = "https://static.igem.org/mediawiki/2013/d/d3/Wellesley_Outreach_1.jpg" width = "270px"><br />
<img src = "https://static.igem.org/mediawiki/2013/3/3e/Wellesley_outreach_2.jpg" width = "270px"><br />
<img src = "https://static.igem.org/mediawiki/2013/e/ee/Wellesley_outreach_three.jpg" width= "270px"> <br />
<br><br />
<br />
<figcaption class="caption"><br />
Presenting our projects to the Wellesley community <br />
</figcaption><br />
</table><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
<br />
</div><br />
</div><br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/GoldTeam:Wellesley Desyne/Gold2013-09-27T18:08:06Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns main-container"><br />
<!--Gold--><br />
<div class="row"><br />
<div class="large-3 columns"><img src="https://static.igem.org/mediawiki/2013/6/66/Wc_goldMedal.png"></div><br />
<div class="large-9 columns"><br />
<h3>Gold</h3><br />
<ul class="list_default"><br />
<li>Have another team utilize the software developed by your team. You must clearly show how your software was used and the <br />
results that were obtained.</li><br />
<ul><br />
<li>We worked closely with the <a href="https://2013.igem.org/Team:BostonU">BU</a> and <a href="https://2013.igem.org/Team:MIT">MIT</a> <br />
iGEM teams throughout our <a href"https://2013.igem.org/Team:Wellesley_HCI/Eugene#results">process</a> and tested <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a> <br />
with these teams as well as with Wellesley students.</li><br />
</ul><br />
<br />
<li>Use SBOL in your software documentation.</li><br />
<ul><br />
<li>Both <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a> and <a href="https://2013.igem.org/Team:Wellesley_Desyne/zMol_zTree">zTree</a> <br />
incorporate <a href="https://sites.google.com/a/sbolstandard.org/sbol/">SBOL symbols</a> into their user interfaces.</li><br />
</ul><br />
<br />
<li>Build upon existing software from a previous iGEM competition found on the <a href="https://igem.org/The_Registry_of_Software_Tools">The Registry of Software Tools.</a></li><br />
<ul><br />
<li>We utilize <a href="http://eugenecad.org/">Eugene</a> in the implementation of <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a>.</li><br />
<li>We also access the <a href="http://partsregistry.org/Main_Page">Registry of Biological Parts</a> and the iGEM archives.</li><br />
<li>We draw upon <a href="https://2012.igem.org/Team:Wellesley_HCI/MoClo_Planner"> MoClo Planner </a> in the design and implementation of <br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie.</a></li></ul><br />
<br />
<li>Outline and detail how your software affects Human Practices in Synthetic Biology</li><br />
<ul><br />
<li>We applied <a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">user-centered design methodology</a> and conducted extensive <a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">user research</a>.</li><br />
<li>We discuss <a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">safety considerations</a> in our research.</li><br />
<li>We designed and implemented <a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a> to communicate key ideas about synthetic biology to a wider audience.</li><br />
</ul><br />
</div><br />
</div><br />
<!--Silver--><br />
<div class="row"><br />
<div class="large-3 columns"><img src="https://static.igem.org/mediawiki/2013/d/d7/Wc_silverMedal.png"></div><br />
<div class="large-9 columns"><br />
<h3>Silver</h3><br />
<ul class="list_default"><br />
<li>Provide a detailed, draft specification for the next version of your software tool.</li><br />
<ul><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zMol_zTree#futurework">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie#futurework">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC#futurework">Bac To The Future</a></li></ul><br />
<li>Provide a second, distinct (yet complementary) software tools project.</li><br />
<ul><br />
<li>We developed <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a>, which supports the research phase of the synthetic biology workflow as our core team project. Our complementary tool is <a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a>.</li><br />
</ul><br />
<li>Provide a demonstration of software as a video tutorial on wiki.</li><br />
<ul><br />
<li>Video tutorials can be found on our <a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials#tutorials">downloads and tutorials page</a></li><br />
</ul><br />
</td><br />
</div><br />
</div><br />
<!--Bronze--><br />
<div class="row"><br />
<div class="large-3 columns"><img src="https://static.igem.org/mediawiki/2013/2/2f/Wc_bronzeStar.png"></div><br />
<div class="large-9 columns"><br />
<h3>Bronze</h3><br />
<ul class="list_default"><br />
<li>Register the team, have a <a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">great summer</a>, and have fun attending the Jamboree</li><br />
<li>Create and share a description of the team's project via the iGEM wiki</li><br />
<ul><li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Project Overview</a></li></ul><br />
<li>Present a Poster and Talk at the iGEM Jamboree</li><br />
<li>Develop and make available via the <a href="https://igem.org/The_Registry_of_Software_Tools">The Registry of Software Tools</a> an open source software tool that supports synthetic biology based on BioBrick standard biological parts </li><br />
<ul><li>All our source code can be downloaded on our <a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">downloads and tutorials page</a></li> </ul><br />
</ul><br />
</div><br />
</div><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/GoldTeam:Wellesley Desyne/Gold2013-09-27T18:06:04Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns main-container"><br />
<!--Gold--><br />
<div class="row"><br />
<div class="large-3 columns"><img src="https://static.igem.org/mediawiki/2013/6/66/Wc_goldMedal.png"></div><br />
<div class="large-9 columns"><br />
<h3>Gold</h3><br />
<ul class="list_default"><br />
<li>Have another team utilize the software developed by your team. You must clearly show how your software was used and the <br />
results that were obtained.</li><br />
<ul><br />
<li>We worked closely with the <a href="https://2013.igem.org/Team:BostonU">BU</a> and <a href="https://2013.igem.org/Team:MIT">MIT</a> <br />
iGEM teams throughout our <a href"https://2013.igem.org/Team:Wellesley_HCI/Eugene#results">process</a> and tested <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a> <br />
with these teams as well as with Wellesley students.</li><br />
</ul><br />
<br />
<li>Use SBOL in your software documentation.</li><br />
<ul><br />
<li>Both <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a> and <a href="https://2013.igem.org/Team:Wellesley_Desyne/zMol_zTree">zTree</a> <br />
incorporate <a href="https://sites.google.com/a/sbolstandard.org/sbol/">SBOL symbols</a> into their user interfaces.</li><br />
</ul><br />
<br />
<li>Build upon existing software from a previous iGEM competition found on the <a href="https://igem.org/The_Registry_of_Software_Tools">The Registry of Software Tools.</a></li><br />
<ul><br />
<li>We utilize <a href="http://eugenecad.org/">Eugene</a> in the implementation of <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a>.</li><br />
<li>We also access the <a href="http://partsregistry.org/Main_Page">Registry of Biological Parts</a> and the iGEM archives.</li><br />
<li>We draw upon <a href="https://2012.igem.org/Team:Wellesley_HCI/MoClo_Planner"> MoClo Planner </a> in the design and implementation of <br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie.</a></li></ul><br />
<br />
<li>Outline and detail how your software affects Human Practices in Synthetic Biology</li><br />
<ul><br />
<li>We applied <a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">user-centered design methodology</a> and conducted extensive <a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">user research</a>.</li><br />
<li>We discuss <a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">safety considerations</a> in our research.</li><br />
<li>We designed and implemented <a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a> to communicate key ideas about synthetic biology to a wider audience.</li><br />
</ul><br />
</div><br />
</div><br />
<!--Silver--><br />
<div class="row"><br />
<div class="large-3 columns"><img src="https://static.igem.org/mediawiki/2013/d/d7/Wc_silverMedal.png"></div><br />
<div class="large-9 columns"><br />
<h3>Silver</h3><br />
<ul class="list_default"><br />
<li>Provide a detailed, draft specification for the next version of your software tool.</li><br />
<ul><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zMol_zTree#futurework">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie#futurework">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC#futurework">Bac To The Future</a></li></ul><br />
<li>Provide a second, distinct (yet complementary) software tools project.</li><br />
<ul><br />
<li>We developed <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a>, which supports the research phase of the synthetic biology workflow as our core team project. Our complementary tool is <a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</li><br />
</ul><br />
<li>Provide a demonstration of software as a video tutorial on wiki.</li><br />
<ul><br />
<li>Video tutorials can be found on our <a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials#tutorials">downloads and tutorials page</a></li><br />
</ul><br />
</td><br />
</div><br />
</div><br />
<!--Bronze--><br />
<div class="row"><br />
<div class="large-3 columns"><img src="https://static.igem.org/mediawiki/2013/2/2f/Wc_bronzeStar.png"></div><br />
<div class="large-9 columns"><br />
<h3>Bronze</h3><br />
<ul class="list_default"><br />
<li>Register the team, have a <a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">great summer</a>, and have fun attending the Jamboree</li><br />
<li>Create and share a description of the team's project via the iGEM wiki</li><br />
<ul><li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Project Overview</a></li></ul><br />
<li>Present a Poster and Talk at the iGEM Jamboree</li><br />
<li>Develop and make available via the <a href="https://igem.org/The_Registry_of_Software_Tools">The Registry of Software Tools</a> an open source software tool that supports synthetic biology based on BioBrick standard biological parts </li><br />
<ul><li>All our source code can be downloaded on our <a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">downloads and tutorials page</a></li> </ul><br />
</ul><br />
</div><br />
</div><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/EugenieTeam:Wellesley Desyne/Eugenie2013-09-27T18:02:56Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Eugenie</h3><br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style = "float:right; padding-bottom: 20px;"><img src="https://static.igem.org/mediawiki/2013/f/fc/Eugenie_logo_small.png" width="180"></div><br />
<p>Eugenie is a multi-touch application for designing biological circuits using the programming language <a href="http://eugenecad.org/">Eugene</a>. The visual language we created for Eugenie allows synthetic biologists to harness the power of Eugene without having to write Eugene code. The application consists of three representations of the circuit: “TreeView,” “FlowView,” and “EugeneView.” The user can search through <a href="http://clothocad.org/">Clotho</a> and iGEM databases to find the biological parts desired and can drag them to the workspace, graphically create Eugene rules, and view live-updating Eugene code for the circuit. After the user is done specifying a circuit, she or he can then view the search results, which display the possible permutations of a circuit based on a collection of parts. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to prune the results.</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
The design process is divided into three main views: TreeView, FlowView, and EugeneView. A user starts by searching for parts from the Part Registry or their Clotho database and bringing them into their worskspace. In the TreeView, users can specify the order and structure of their design. The behavior of parts in the device is specified using the FlowView. Users specify structure and behavior using a visual language that we developed specifically for the application; the language utilizes SBOL symbols, an open-source standard for in silico representation of genetic designs. The EugeneView updates automatically throughout the design process, and users may click on individual parts in order to see the corresponding code highlighted in the EugeneView. Finally, users may view and export their results to a CSV or <a href="http://pigeoncad.org/">Pigeon</a> files in the ResultsView. <br />
<br><br><br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/9b/Whci_Eugenie_treeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Create the structure of the circuit in the TreeView. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/3/3b/S3.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Define rules between parts in the FlowView.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/93/Whci_Eugenie_codeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">View live-updating Eugene code in the EugeneView.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_Eugenie_resultsview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Generate and export results in the ResultsView.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4> Implementation </h4><br />
<p>We implemented Eugenie using C#, XAML and the Surface <a href="http://msdn.microsoft.com/en-us/library/ff727815.aspx"> SDK 2.0</a>. We also used the MVC framework, <a href = "http://www.eugenecad.org/"> Eugene </a> for the creation of synthetic biology circuits, and <a href="http://pigeoncad.org/">Pigeon</a> to display the circuits visually. </p><br />
<br />
<h4> Goals </h4><br />
We had four goals in creating Eugenie:<br />
<ul class="list_default"><br />
<li>Implementing top-down design<br>We utilized the functionality of Eugene, a programming language that is used to implement top-down design of novel genetic circuits&mdash;design that begins by specifying devices and then instantiating parts.</li><br />
<li>Enhancing sensemaking<br>We implemented sliding panel views, which allow users the option to view multiple sets of information simultaneously or one set at a time, helping users understand the connection between the different types of presentation.</li><br />
<li>Supporting resource integration<br>We give users the option to load parts from the parts registry, access parts in a Clotho database, or use a local database.</li><br />
<li>Fostering collaboration<br> We used the Microsoft PixelSense, which allows multiple people to use Eugenie simultaneously.</li><br />
</ul><br />
<br />
<h4>Results</h4><br />
<br />
<div style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300"><figcaption class="caption" width="300"> Results showing users' experience with Eugenie. </figcaption></div><br />
<br />
<p>We conducted user studies of Eugenie with members of the BU and MIT iGEM teams as well as with Wellesley College students; the majority of the 15 participants were biology or other science majors. Our study began with a brief introduction to the Eugene programming language, the visual language we had created, and the Eugenie user interface. Users were first tasked with interpreting genetic devices from our visual language and then translating SBOL representations of genetic devices into our visual language. <br />
<br />
<p>We next asked participants to use Eugenie to specify one of the genetic devices they had translated. Post task, participants rated the ease of understanding the visual language and of using the program. We also asked participants for their feedback on how the program could be improved. <br />
<br />
<p>The majority of users found it easier to create a device using Eugenie than to draw one by hand. Some participants also remarked that the multiple panels were helpful for understanding the device. Overall, users' response to Eugenie was positive, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work. <br />
</p><br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/EQoIXLh1SxI" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br />
<h4>Future Work</h4><br />
<br />
<div class="panel" style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/7/75/Whci_Eugenie_viz_language.jpg"><figcaption class="caption" width="300">Our visual language</figcaption></div><br />
<ul class="list_default"><br />
<li>Supplement part information with additional information from previous iGEM projects and other synthetic biology databases</li><br />
<li>Allow users to access more parts from other synthetic biology databases</li><br />
<li>Expedite the process for synthetic biologists to create genetic circuits</li><br />
<li>Further incorporate the visual language we created into Eugenie's interface</li><br />
<li>Develop a companion web application to enable widespread access to Eugenie</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/EugenieTeam:Wellesley Desyne/Eugenie2013-09-27T18:00:09Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Eugenie</h3><br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style = "float:right; padding-bottom: 20px;"><img src="https://static.igem.org/mediawiki/2013/f/fc/Eugenie_logo_small.png" width="180"></div><br />
<p>Eugenie is a multi-touch application for designing biological circuits using the programming language <a href="http://eugenecad.org/">Eugene</a>. The visual language we created for Eugenie allows synthetic biologists to harness the power of Eugene without having to write Eugene code. The application consists of three representations of the circuit: “TreeView,” “FlowView,” and “EugeneView.” The user can search through <a href="http://clothocad.org/">Clotho</a> and iGEM databases to find the biological parts desired and can drag them to the workspace, graphically create Eugene rules, and view live-updating Eugene code for the circuit. After the user is done specifying a circuit, she or he can then view the search results, which display the possible permutations of a circuit based on a collection of parts. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to prune the results.</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
The design process is divided into three main views: TreeView, FlowView, and EugeneView. A user starts by searching for parts from the Part Registry or their Clotho database and bringing them into their worskspace. In the TreeView, users can specify the order and structure of their design. The behavior of parts in the device is specified using the FlowView. Users specify structure and behavior using a visual language that we developed specifically for the application; the language utilizes SBOL symbols, an open-source standard for in silico representation of genetic designs. The EugeneView updates automatically throughout the design process, and users may click on individual parts in order to see the corresponding code highlighted in the EugeneView. Finally, users may view and export their results to a CSV or <a href="http://pigeoncad.org/">Pigeon</a> files in the ResultsView. <br />
<br><br><br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/9b/Whci_Eugenie_treeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Create the structure of the circuit in the TreeView. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/3/3b/S3.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Define rules between parts in the FlowView.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/93/Whci_Eugenie_codeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">View live-updating Eugene code in the EugeneView.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_Eugenie_resultsview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Generate and export results in the ResultsView.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4> Implementation </h4><br />
<p>We implemented Eugenie using C#, XAML and the Surface <a href="http://msdn.microsoft.com/en-us/library/ff727815.aspx"> SDK 2.0</a>. We also used the MVC framework, <a href = "http://www.eugenecad.org/"> Eugene </a> for the creation of synthetic biology circuits, and <a href="http://pigeoncad.org/">Pigeon</a> to display the circuits visually. </p><br />
<br />
<h4> Goals </h4><br />
We had four goals in creating Eugenie:<br />
<ul class="list_default"><br />
<li>Implementing top-down design<br>We utilized the functionality of Eugene, a programming language that is used to implement top-down design of novel genetic circuits&mdash;design that begins by specifying devices and then instantiating parts.</li><br />
<li>Enhancing sensemaking<br>We implemented sliding panel views, which allow users the option to view multiple sets of information simultaneously or one set at a time, helping users understand the connection between the different types of presentation.</li><br />
<li>Supporting resource integration<br>We give users the option to load parts from the parts registry, access parts in a Clotho database, or use a local database.</li><br />
<li>Fostering collaboration<br> We used the Microsoft PixelSense, which allows multiple people to use Eugenie simultaneously.</li><br />
</ul><br />
<br />
<h4>Results</h4><br />
<br />
<div style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300"><figcaption class="caption" width="300"> Results showing users' experience with Eugenie. </figcaption></div><br />
<br />
<p>We conducted user studies of Eugenie with members of the BU and MIT iGEM teams as well as with Wellesley College students; the majority of the 15 participants were biology or other science majors. Our study began with a brief introduction to the Eugene programming language, the visual language we had created, and the Eugenie user interface. Users were first tasked with interpreting genetic devices from our visual language and then translating SBOL representations of genetic devices into our visual language. <br />
<br />
<p>We next asked participants to use Eugenie to specify one of the genetic devices they had translated. Post task, participants rated the ease of understanding the visual language and of using the program. We also asked participants for their feedback on how the program could be improved. <br />
<br />
<p>The majority of users found it easier to create a device using Eugenie than drawing one by hand. Some participants also remarked that the multiple panels were helpful for understanding the device. Overall, users' response to Eugenie was positive, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work. <br />
</p><br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/EQoIXLh1SxI" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br />
<h4>Future Work</h4><br />
<br />
<div class="panel" style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/7/75/Whci_Eugenie_viz_language.jpg"><figcaption class="caption" width="300">Our visual language</figcaption></div><br />
<ul class="list_default"><br />
<li>Supplement part information with additional information from previous iGEM projects and other synthetic biology databases</li><br />
<li>Allow users to access more parts from other synthetic biology databases</li><br />
<li>Expedite the process for synthetic biologists to create genetic circuits</li><br />
<li>Further incorporate the visual language we created into Eugenie's interface</li><br />
<li>Develop a companion web application to enable widespread access to Eugenie</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/EugenieTeam:Wellesley Desyne/Eugenie2013-09-27T17:59:32Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Eugenie</h3><br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style = "float:right; padding-bottom: 20px;"><img src="https://static.igem.org/mediawiki/2013/f/fc/Eugenie_logo_small.png" width="180"></div><br />
<p>Eugenie is a multi-touch application for designing biological circuits using the programming language <a href="http://eugenecad.org/">Eugene</a>. The visual language we created for Eugenie allows synthetic biologists to harness the power of Eugene without having to write Eugene code. The application consists of three representations of the circuit: “TreeView,” “FlowView,” and “EugeneView.” The user can search through <a href="http://clothocad.org/">Clotho</a> and iGEM databases to find the biological parts desired and can drag them to the workspace, graphically create Eugene rules, and view live-updating Eugene code for the circuit. After the user is done specifying a circuit, she or he can then view the search results, which display the possible permutations of a circuit based on a collection of parts. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to prune the results.</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
The design process is divided into three main views: TreeView, FlowView, and EugeneView. A user starts by searching for parts from the Part Registry or their Clotho database and bringing them into their worskspace. In the TreeView, users can specify the order and structure of their design. The behavior of parts in the device is specified using the FlowView. Users specify structure and behavior using a visual language that we developed specifically for the application; the language utilizes SBOL symbols, an open-source standard for in silico representation of genetic designs. The EugeneView updates automatically throughout the design process, and users may click on individual parts in order to see the corresponding code highlighted in the EugeneView. Finally, users may view and export their results to a CSV or <a href="http://pigeoncad.org/">Pigeon</a> files in the ResultsView. <br />
<br><br><br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/9b/Whci_Eugenie_treeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Create the structure of the circuit in the TreeView. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/3/3b/S3.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Define rules between parts in the FlowView.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/93/Whci_Eugenie_codeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">View live-updating Eugene code in the EugeneView.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_Eugenie_resultsview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Generate and export results in the ResultsView.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4> Implementation </h4><br />
<p>We implemented Eugenie using C#, XAML and the Surface <a href="http://msdn.microsoft.com/en-us/library/ff727815.aspx"> SDK 2.0</a>. We also used the MVC framework, <a href = "http://www.eugenecad.org/"> Eugene </a> for the creation of synthetic biology circuits, and <a href="http://pigeoncad.org/">Pigeon</a> to display the circuits visually. </p><br />
<br />
<h4> Goals </h4><br />
We had four goals in creating Eugenie:<br />
<ul class="list_default"><br />
<li>Implementing top-down design<br>We utilized the functionality of Eugene, a programming language that is used to implement top-down design of novel genetic circuits&mdash;design that begins by specifying devices and then instantiating parts.</li><br />
<li>Enhancing sensemaking<br>We implemented sliding panel views, which allow users the option to view multiple sets of information simultaneously or one set at a time, helping users understand the connection between the different types of presentation.</li><br />
<li>Supporting resource integration<br>We give users the option to load parts from the parts registry, access parts in a Clotho database, or use a local database.</li><br />
<li>Fostering collaboration<br> We used the Microsoft PixelSense, which allows multiple people to use Eugenie simultaneously.</li><br />
</ul><br />
<br />
<h4>Results</h4><br />
<br />
<div style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300"><figcaption class="caption" width="300"> Results showing users' experience with Eugenie. </figcaption></div><br />
<br />
<p>We conducted user studies of Eugenie with members of the BU and MIT iGEM teams as well as with Wellesley College students; the majority of the 15 participants were biology or other science majors. Our study began with a brief introduction to the Eugene programming language, the visual language we had created, and the Eugenie user interface. Users were first tasked with interpreting genetic devices from our visual language and then translating SBOL representations of genetic devices into our visual language. <br />
<br />
<p>We next asked participants to use Eugenie to specify one of the genetic devices they had translated. Post task, participants rated the ease of understanding the visual language and of using the program. We also asked participants for their feedback on how the program could be improved. <br />
<br />
<p>The majority of users found it easier to create a device using Eugenie than drawing one by hand. Some participants also found the multiple panels helpful for understanding the device. Overall, users' response to Eugenie was positive, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work. <br />
</p><br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/EQoIXLh1SxI" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br />
<h4>Future Work</h4><br />
<br />
<div class="panel" style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/7/75/Whci_Eugenie_viz_language.jpg"><figcaption class="caption" width="300">Our visual language</figcaption></div><br />
<ul class="list_default"><br />
<li>Supplement part information with additional information from previous iGEM projects and other synthetic biology databases</li><br />
<li>Allow users to access more parts from other synthetic biology databases</li><br />
<li>Expedite the process for synthetic biologists to create genetic circuits</li><br />
<li>Further incorporate the visual language we created into Eugenie's interface</li><br />
<li>Develop a companion web application to enable widespread access to Eugenie</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/EugenieTeam:Wellesley Desyne/Eugenie2013-09-27T17:56:45Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Eugenie</h3><br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style = "float:right; padding-bottom: 20px;"><img src="https://static.igem.org/mediawiki/2013/f/fc/Eugenie_logo_small.png" width="180"></div><br />
<p>Eugenie is a multi-touch application for designing biological circuits using the programming language <a href="http://eugenecad.org/">Eugene</a>. The visual language we created for Eugenie allows synthetic biologists to harness the power of Eugene without having to write Eugene code. The application consists of three representations of the circuit: “TreeView,” “FlowView,” and “EugeneView.” The user can search through <a href="http://clothocad.org/">Clotho</a> and iGEM databases to find the biological parts desired and can drag them to the workspace, graphically create Eugene rules, and view live-updating Eugene code for the circuit. After the user is done specifying a circuit, she or he can then view the search results, which display the possible permutations of a circuit based on a collection of parts. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to prune the results.</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
The design process is divided into three main views: TreeView, FlowView, and EugeneView. A user starts by searching for parts from the Part Registry or their Clotho database and bringing them into their worskspace. In the TreeView, users can specify the order and structure of their design. The behavior of parts in the device is specified using the FlowView. Users specify structure and behavior using a visual language that we developed specifically for the application; the language utilizes SBOL symbols, an open-source standard for in silico representation of genetic designs. The EugeneView updates automatically throughout the design process, and users may click on individual parts in order to see the corresponding code highlighted in the EugeneView. Finally, users may view and export their results to a CSV or <a href="http://pigeoncad.org/">Pigeon</a> files in the ResultsView. <br />
<br><br><br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/9b/Whci_Eugenie_treeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Create the structure of the circuit in the TreeView. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/3/3b/S3.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Define rules between parts in the FlowView.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/93/Whci_Eugenie_codeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">View live-updating Eugene code in the EugeneView.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_Eugenie_resultsview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Generate and export results in the ResultsView.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4> Implementation </h4><br />
<p>We implemented Eugenie using C#, XAML and the Surface <a href="http://msdn.microsoft.com/en-us/library/ff727815.aspx"> SDK 2.0</a>. We also used the MVC framework, <a href = "http://www.eugenecad.org/"> Eugene </a> for the creation of synthetic biology circuits, and <a href="http://pigeoncad.org/">Pigeon</a> to display the circuits visually. </p><br />
<br />
<h4> Goals </h4><br />
We had four goals in creating Eugenie:<br />
<ul class="list_default"><br />
<li>Implementing top-down design<br>We utilized the functionality of Eugene, a programming language that is used to implement top-down design of novel genetic circuits&mdash;design that begins by specifying devices and then instantiating parts.</li><br />
<li>Enhancing sensemaking<br>We implemented sliding panel views, which allow users the option to view multiple sets of information simultaneously or one set at a time, helping users understand the connection between the different types of presentation.</li><br />
<li>Supporting resource integration<br>We give users the option to load parts from the parts registry, access parts in a Clotho database, or use a local database.</li><br />
<li>Fostering collaboration<br> We used the Microsoft PixelSense, which allows multiple people to use Eugenie simultaneously.</li><br />
</ul><br />
<br />
<h4>Results</h4><br />
<br />
<div style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300"><figcaption class="caption" width="300"> Results showing users' experience with Eugenie. </figcaption></div><br />
<br />
<p>We conducted user studies of Eugenie with members of the BU and MIT iGEM teams as well as with Wellesley College students; the majority of the 15 participants were biology or other science majors. Our study began with a brief introduction to the Eugene programming language, the visual language we had created, and the Eugenie user interface. Users were first tasked with interpreting genetic devices from our visual language and then translating SBOL representations of genetic devices into our visual language. <br />
<br />
<p>We next asked participants to use Eugenie to specify one of the genetic devices they had translated. Post task, participants rated the ease of understanding the visual language and of using the program. We also asked participants for their feedback on how the program could be improved. <br />
<br />
<p>The majority of users found it easier to create a device using Eugenie than to draw one by hand. Some participants also found the multiple panels helpful for understanding the device. Overall, users' response to Eugenie was positive, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work. <br />
</p><br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/EQoIXLh1SxI" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br />
<h4>Future Work</h4><br />
<br />
<div class="panel" style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/7/75/Whci_Eugenie_viz_language.jpg"><figcaption class="caption" width="300">Our visual language</figcaption></div><br />
<ul class="list_default"><br />
<li>Supplement part information with additional information from previous iGEM projects and other synthetic biology databases</li><br />
<li>Allow users to access more parts from other synthetic biology databases</li><br />
<li>Expedite the process for synthetic biologists to create genetic circuits</li><br />
<li>Further incorporate the visual language we created into Eugenie's interface</li><br />
<li>Develop a companion web application to enable widespread access to Eugenie</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/BACTeam:Wellesley Desyne/BAC2013-09-27T17:42:07Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Bac to the Future</h3><br />
<br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style="float:right;"><img src="https://static.igem.org/mediawiki/2013/7/7c/Wellesley_bac_logo2.png"></div><br />
<p><br />
Bac to the Future is an art installation and web application that aims to communicate core concepts of synthetic biology to non-scientists by engaging users in a fun and interactive environment. Specifically, our team focused on how an interactive and user-friendly application could demonstrate the significance of DNA as a powerful encoding language, as well as the potential for bacteria to be used as archival data storage. By visiting our application's virtual lab bench and following a step-by-step protocol, users can select tweets with the hashtag #iGEM2013, encode these tweets into DNA, and insert their encoded messages into digital E. coli bacteria. </p><br />
<br />
<p>At the <a href="http://cs.wellesley.edu/~hcilab/">Wellesley College Human-Computer Interaction lab</a>, we are interested in exploring how next-generation technology could facilitate the learning of complex scientific concepts and promote educational outreach. With this goal in mind, we chose to deploy both a web application for wider distribution and greater accessibility, as well as an interactive art installation for exhibition purposes. </p><br />
<br />
<p>Our project was inspired by an experiment conducted by the <a href="http://newsfeed.time.com/2012/08/20/the-first-book-to-be-encoded-in-dna/">Church Lab at Harvard Medical School</a>, which used bacteria DNA to store encoded book citations. In designing the user experience, we integrated relevant and familiar components such as dictionaries, and simplified the experimental protocol to promote intuitive understanding. In addition, we incorporated user feedback to assist in the conveyance of fundamental concepts while minimizing confusion. In the future, we plan to continue improving the user experience through further user testing, and hope to distribute the web application as an educational tool. </p><br />
<br />
<p> Go to the Application: <br><br />
<a href = "http://www.bac-tothefuture.appspot.com">www.bac-tothefuture.appspot.com</a><br />
</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
<p>The interface is divided into a workspace where the protocol is executed and a virtual tank containing bacteria with various messages encoded into their DNA. There is also a panel on the left containing a Twitter feed of messages that have been tweeted to the future, and a panel on the right containing the lab protocol for the user to follow.<br />
<br />
<p>Users interact with the application by executing the following protocol: </p><br />
<ol class="list_default"><br />
<li>Pick a message from the queue to encode by clicking on it, or users can search for their own message to encode by clicking on the "Pick up your message" button.</li><br />
<li>Initiate the translation process by clicking on the "Encode" button and watch as the chosen message is synthesized into DNA, using the Codon Dictionary.</li><br />
<li>Begin the lab protocol by inserting the encoded DNA into the plasmid.</li><br />
<li>Pick an E-Coli from the tank and drag it onto the workspace to act as a means of storage.</li><br />
<li>Insert the plasmid containing the encoded DNA into the chosen bacteria, and return it back to the tank.</li><br />
<li>Throughout the process, users can click on the various bacteria to see the database of encoded messages contained within each bacteria displayed in the ticker, including the users’ own message.</li><br />
</ol><br />
<br />
<br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/b/b2/Wellesley_Bttf_scrnshot1.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Experience first hand the translation process and watch as a message is encoded into DNA. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/8/84/Wellesley_Bttf_scrnshot2.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Simulate the protocol of inserting encoded DNA into bacteria.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/d/d5/Wellesley_Bttf_scrnshot4.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Place the bacteria back into the tank and watch a backwards translation of the encoded message.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/6/65/Wellesley_Bttf_scrnshot7.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Click on highlighted terms to see more in depth definitions.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4>Implementation</h4><br />
<p><br />
Bac to the Future was implemented as a web application using HTML5, Javacript, JQuery, and CSS for the interface. It is hosted on Google App Engine using the Python run-time environment. Finally, the Twitter API was used to create the feed of messages.<br />
</p><br />
<br />
<br />
<h4>Results</h4><br />
<div style="float: right; padding: 20px; width: 450px;"><br />
<img src="https://static.igem.org/mediawiki/2013/4/49/Blah.png"><br />
<div class="panel" style="margin-top:10px;"><br />
<figcaption style="font-size: 14px; line-height: 16px;"><strong>FIGURE. </strong>Results showing positive user engagement</figcaption><br />
</div><br />
</div><br />
<p><br />
To test Bac to the Future, our team conducted preliminary user studies involving the observation of 15 high school students in the <a href="http://mitpsc.mit.edu/outreach/program/view/75/search">MIT-Wellesley Upward Bound program</a>, students who had some exposure to science but were mostly unfamiliar with synthetic biology. In our study, the students were given a brief, 10-minute presentation of synthetic biology, followed by a demo of Bac to the Future. Afterwards, the students were given a chance to interact freely with our application. Through our user study, we observed that twelve in fifteen students found the the experience to be very fun, and ten in fifteen students felt involved and engaged in the activity. In addition, the students felt more comfortable with their knowledge of synthetic biology after the study.<br />
</p><br />
<br />
<h4>Demo</h4><br />
<br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe width="640" height="360" src="//www.youtube.com/embed/SEONZKrYcrM" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Implement an interactive installation, integrating use of gesture-recognition and tangible interface</li><br />
<li>Distribute the web application and explore potential educational uses</li><br />
<li>Continue to study the effectiveness of the application in facilitating the learning experience</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
<br />
<br />
</body><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/BACTeam:Wellesley Desyne/BAC2013-09-27T17:40:46Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Bac to the Future</h3><br />
<br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style="float:right;"><img src="https://static.igem.org/mediawiki/2013/7/7c/Wellesley_bac_logo2.png"></div><br />
<p><br />
Bac to the Future is an art installation and web application that aims to communicate core concepts of synthetic biology to non-scientists by engaging users in a fun and interactive environment. Specifically, our team focused on how an interactive and user-friendly application could demonstrate the significance of DNA as a powerful encoding language, as well as the potential for bacteria to be used as archival data storage. By visiting our application's virtual lab bench and following a step-by-step protocol, users can select and encode tweets with the hashtag #iGEM2013 into DNA and insert their encoded messages into digital E. coli bacteria. </p><br />
<br />
<p>At the <a href="http://cs.wellesley.edu/~hcilab/">Wellesley College Human-Computer Interaction lab</a>, we are interested in exploring how next-generation technology could facilitate the learning of complex scientific concepts and promote educational outreach. With this goal in mind, we chose to deploy both a web application for wider distribution and greater accessibility, as well as an interactive art installation for exhibition purposes. </p><br />
<br />
<p>Our project was inspired by an experiment conducted by the <a href="http://newsfeed.time.com/2012/08/20/the-first-book-to-be-encoded-in-dna/">Church Lab at Harvard Medical School</a>, which used bacteria DNA to store encoded book citations. In designing the user experience, we integrated relevant and familiar components such as dictionaries, and simplified the experimental protocol to promote intuitive understanding. In addition, we incorporated user feedback to assist in the conveyance of fundamental concepts while minimizing confusion. In the future, we plan to continue improving the user experience through further user testing, and hope to distribute the web application as an educational tool. </p><br />
<br />
<p> Go to the Application: <br><br />
<a href = "http://www.bac-tothefuture.appspot.com">www.bac-tothefuture.appspot.com</a><br />
</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
<p>The interface is divided into a workspace where the protocol is executed and a virtual tank containing bacteria with various messages encoded into their DNA. There is also a panel on the left containing a Twitter feed of messages that have been tweeted to the future, and a panel on the right containing the lab protocol for the user to follow.<br />
<br />
<p>Users interact with the application by executing the following protocol: </p><br />
<ol class="list_default"><br />
<li>Pick a message from the queue to encode by clicking on it, or users can search for their own message to encode by clicking on the "Pick up your message" button.</li><br />
<li>Initiate the translation process by clicking on the "Encode" button and watch as the chosen message is synthesized into DNA, using the Codon Dictionary.</li><br />
<li>Begin the lab protocol by inserting the encoded DNA into the plasmid.</li><br />
<li>Pick an E-Coli from the tank and drag it onto the workspace to act as a means of storage.</li><br />
<li>Insert the plasmid containing the encoded DNA into the chosen bacteria, and return it back to the tank.</li><br />
<li>Throughout the process, users can click on the various bacteria to see the database of encoded messages contained within each bacteria displayed in the ticker, including the users’ own message.</li><br />
</ol><br />
<br />
<br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/b/b2/Wellesley_Bttf_scrnshot1.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Experience first hand the translation process and watch as a message is encoded into DNA. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/8/84/Wellesley_Bttf_scrnshot2.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Simulate the protocol of inserting encoded DNA into bacteria.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/d/d5/Wellesley_Bttf_scrnshot4.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Place the bacteria back into the tank and watch a backwards translation of the encoded message.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/6/65/Wellesley_Bttf_scrnshot7.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Click on highlighted terms to see more in depth definitions.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4>Implementation</h4><br />
<p><br />
Bac to the Future was implemented as a web application using HTML5, Javacript, JQuery, and CSS for the interface. It is hosted on Google App Engine using the Python run-time environment. Finally, the Twitter API was used to create the feed of messages.<br />
</p><br />
<br />
<br />
<h4>Results</h4><br />
<div style="float: right; padding: 20px; width: 450px;"><br />
<img src="https://static.igem.org/mediawiki/2013/4/49/Blah.png"><br />
<div class="panel" style="margin-top:10px;"><br />
<figcaption style="font-size: 14px; line-height: 16px;"><strong>FIGURE. </strong>Results showing positive user engagement</figcaption><br />
</div><br />
</div><br />
<p><br />
To test Bac to the Future, our team conducted preliminary user studies involving the observation of 15 high school students in the <a href="http://mitpsc.mit.edu/outreach/program/view/75/search">MIT-Wellesley Upward Bound program</a>, students who had some exposure to science but were mostly unfamiliar with synthetic biology. In our study, the students were given a brief, 10-minute presentation of synthetic biology, followed by a demo of Bac to the Future. Afterwards, the students were given a chance to interact freely with our application. We observed that in general, the students picked up the application quickly and found the overall experience to be engaging, interactive, and fun. In addition, the students felt more comfortable with their knowledge of synthetic biology after the study.<br />
</p><br />
<br />
<h4>Demo</h4><br />
<br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe width="640" height="360" src="//www.youtube.com/embed/SEONZKrYcrM" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Implement an interactive installation, integrating use of gesture-recognition and tangible interface</li><br />
<li>Distribute the web application and explore potential educational uses</li><br />
<li>Continue to study the effectiveness of the application in facilitating the learning experience</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
<br />
<br />
</body><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/EugenieTeam:Wellesley Desyne/Eugenie2013-09-27T17:37:25Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Eugenie</h3><br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style = "float:right; padding-bottom: 20px;"><img src="https://static.igem.org/mediawiki/2013/f/fc/Eugenie_logo_small.png" width="180"></div><br />
<p>Eugenie is a multi-touch application for designing biological circuits using the programming language <a href="http://eugenecad.org/">Eugene</a>. The visual language we created for Eugenie allows synthetic biologists to harness the power of Eugene without having to write Eugene code. The application consists of three representations of the circuit: “TreeView,” “FlowView,” and “EugeneView.” The user can search through <a href="http://clothocad.org/">Clotho</a> and iGEM databases to find the biological parts desired and can drag them to the workspace, graphically create Eugene rules, and view live-updating Eugene code for the circuit. After the user is done specifying a circuit, she or he can then view the search results, which display the possible permutations of a circuit based on a collection of parts. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to prune the results.</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
The design process is divided into three main views: TreeView, FlowView, and EugeneView. A user starts by searching for parts from the Part Registry or their Clotho database and bringing them into their worskspace. In the TreeView, users can specify the order and structure of their design. The behavior of parts in the device is specified using the FlowView. Users specify structure and behavior using a visual language that we developed specifically for the application; the language utilizes SBOL symbols, an open-source standard for in silico representation of genetic designs. The EugeneView updates automatically throughout the design process, and users may click on individual parts in order to see the corresponding code highlighted in the EugeneView. Finally, users may view and export their results to a CSV or <a href="http://pigeoncad.org/">Pigeon</a> files in the ResultsView. <br />
<br><br><br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/9b/Whci_Eugenie_treeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Create the structure of the circuit in the TreeView. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/3/3b/S3.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Define rules between parts in the FlowView.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/93/Whci_Eugenie_codeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">View live-updating Eugene code in the EugeneView.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_Eugenie_resultsview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Generate and export results in the ResultsView.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4> Implementation </h4><br />
<p>We implemented Eugenie using C#, XAML and the Surface <a href="http://msdn.microsoft.com/en-us/library/ff727815.aspx"> SDK 2.0</a>. We also used the MVC framework, <a href = "http://www.eugenecad.org/"> Eugene </a> for the creation of synthetic biology circuits, and <a href="http://pigeoncad.org/">Pigeon</a> to display the circuits visually. </p><br />
<br />
<h4> Goals </h4><br />
We had four goals in creating Eugenie:<br />
<ul class="list_default"><br />
<li>Implementing top-down design<br>We utilized the functionality of Eugene, a programming language that is used to implement top-down design of novel genetic circuits&mdash;design that begins by specifying devices and then instantiating parts.</li><br />
<li>Enhancing sensemaking<br>We implemented sliding panel views, which allow users the option to view multiple sets of information simultaneously or one set at a time, helping users understand the connection between the different types of presentation.</li><br />
<li>Supporting resource integration<br>We give users the option to load parts from the parts registry, access parts in a Clotho database, or use a local database.</li><br />
<li>Fostering collaboration<br> We used the Microsoft PixelSense, which allows multiple people to use Eugenie simultaneously.</li><br />
</ul><br />
<br />
<h4>Results</h4><br />
<br />
<div style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300"><figcaption class="caption" width="300"> Results showing users' experience with Eugenie. </figcaption></div><br />
<br />
<p>We conducted user studies of Eugenie with members of the BU and MIT iGEM teams as well as Wellesley College students; our evaluation include 15 participants overall. In our study, we introduced participants to the Eugene programming langugage, the visual language we had created, and the Eugenie user interface. Users were then tasked with first interpreting genetic devices from our visual language and then translating genetic devices represented in SBOL symbols into our visual language. We next asked participants to use our program to create one of the genetic devices they had translated. Post task, participants rated the ease of understanding the visual language and of using the program. We also asked participants for their feedback on how the program could be improved. The response to Eugenie was positive overall, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work. <br />
</p><br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/EQoIXLh1SxI" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br />
<h4>Future Work</h4><br />
<br />
<div class="panel" style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/7/75/Whci_Eugenie_viz_language.jpg"><figcaption class="caption" width="300">Our visual language</figcaption></div><br />
<ul class="list_default"><br />
<li>Supplement part information with additional information from previous iGEM projects and other synthetic biology databases</li><br />
<li>Allow users to access more parts from other synthetic biology databases</li><br />
<li>Expedite the process for synthetic biologists to create genetic circuits</li><br />
<li>Further incorporate the visual language we created into Eugenie's interface</li><br />
<li>Develop a companion web application to enable widespread access to Eugenie</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/File:Whci_Eugenie_viz_language.jpgFile:Whci Eugenie viz language.jpg2013-09-27T17:34:34Z<p>Deastman: uploaded a new version of &quot;File:Whci Eugenie viz language.jpg&quot;</p>
<hr />
<div></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/GoldTeam:Wellesley Desyne/Gold2013-09-27T17:32:54Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns main-container"><br />
<!--Gold--><br />
<div class="row"><br />
<div class="large-3 columns"><img src="https://static.igem.org/mediawiki/2013/6/66/Wc_goldMedal.png"></div><br />
<div class="large-9 columns"><br />
<h3>Gold</h3><br />
<ul class="list_default"><br />
<li>Have another team utilize the software developed by your team. You must clearly show how your software was used and the <br />
results that were obtained.</li><br />
<ul><br />
<li>We worked closely with the <a href="https://2013.igem.org/Team:BostonU">BU</a> and <a href="https://2013.igem.org/Team:MIT">MIT</a> <br />
iGEM teams throughout our <a href"https://2013.igem.org/Team:Wellesley_HCI/Eugene#results">process</a> and tested <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a> <br />
with these teams as well as with Wellesley students.</li><br />
</ul><br />
<br />
<li>Use SBOL in your software documentation.</li><br />
<ul><br />
<li>Both <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a> and <a href="https://2013.igem.org/Team:Wellesley_Desyne/zMol_zTree">zTree</a> <br />
incorporate <a href="https://sites.google.com/a/sbolstandard.org/sbol/">SBOL symbols</a> into their user interfaces.</li><br />
</ul><br />
<br />
<li>Build upon existing software from a previous iGEM competition found on the <a href="https://igem.org/The_Registry_of_Software_Tools">The Registry of Software Tools.</a></li><br />
<ul><br />
<li>We utilize <a href="http://eugenecad.org/">Eugene</a> in the implementation of <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a>.</li><br />
<li>We also access the <a href="http://partsregistry.org/Main_Page">Registry of Biological Parts</a> and the iGEM archives.</li><br />
<li>We draw upon <a href="https://2012.igem.org/Team:Wellesley_HCI/MoClo_Planner"> MoClo Planner </a> in the design and implementation of <br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie.</a></li></ul><br />
<br />
<li>Outline and detail how your software affects Human Practices in Synthetic Biology</li><br />
<ul><br />
<li>We applied <a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">user-centered design methodology</a> and conducted extensive <a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">user research</a>.</li><br />
<li>We discuss <a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">safety considerations</a> in our research.</li><br />
<li>We designed and implemented <a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a> to communicate key ideas about synthetic biology to a wider audience.</li><br />
</ul><br />
</div><br />
</div><br />
<!--Silver--><br />
<div class="row"><br />
<div class="large-3 columns"><img src="https://static.igem.org/mediawiki/2013/d/d7/Wc_silverMedal.png"></div><br />
<div class="large-9 columns"><br />
<h3>Silver</h3><br />
<ul class="list_default"><br />
<li>Provide a detailed, draft specification for the next version of your software tool.</li><br />
<ul><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zMol_zTree#futurework">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie#futurework">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC#futurework">Bac To The Future</a></li></ul><br />
<li>Provide a second, distinct (yet complementary) software tools project.</li><br />
<ul><br />
<li>We developed <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a>, which supports the research phase of the synthetic biology workflow as our core team project. Our complementary tool is <a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</li>.<br />
</ul><br />
<li>Provide a demonstration of software as a video tutorial on wiki.</li><br />
<ul><br />
<li>Video tutorials can be found on our <a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials#tutorials">downloads and tutorials page</a></li><br />
</ul><br />
</td><br />
</div><br />
</div><br />
<!--Bronze--><br />
<div class="row"><br />
<div class="large-3 columns"><img src="https://static.igem.org/mediawiki/2013/2/2f/Wc_bronzeStar.png"></div><br />
<div class="large-9 columns"><br />
<h3>Bronze</h3><br />
<ul class="list_default"><br />
<li>Register the team, have a <a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">great summer</a>, and have fun attending the Jamboree</li><br />
<li>Create and share a description of the team's project via the iGEM wiki</li><br />
<ul><li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Project Overview</a></li></ul><br />
<li>Present a Poster and Talk at the iGEM Jamboree</li><br />
<li>Develop and make available via the <a href="https://igem.org/The_Registry_of_Software_Tools">The Registry of Software Tools</a> an open source software tool that supports synthetic biology based on BioBrick standard biological parts </li><br />
<ul><li>All our source code can be downloaded on our <a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">downloads and tutorials page</a></li> </ul><br />
</ul><br />
</div><br />
</div><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/SafetyTeam:Wellesley Desyne/Safety2013-09-27T17:32:18Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Safety</h3><br />
<br />
<h4>Considering Researcher Safety</h4><br />
<p> The Wellesley Human-Computer Interaction team is a computational team, and worked on designing software that not only improve clarity and efficiency in designing synthetic biological parts, but also increase public awareness through education of the next-generation of scientists through outreach. </p> <br />
<br />
<br />
<h4>Considering Public Safety</h4><br />
<div class="panel" style = "float:right; width:275px; margin:10px;"><br />
<img src = "https://static.igem.org/mediawiki/2013/4/46/Wetlab_MIT.jpg" alt = "MIT Lab" width = "250px" ><br />
<figcaption class="caption" width="250">Synthetic Biology training at MIT</figcaption><br />
</div><br />
<br />
<p>As part of our computational team’s preliminary Synthetic Biology training, we attended the BioBuilder program at MIT with Natalie Kuldell. During this instructive session, we were introduced to laboratory safety, techniques, and protocol. Lectures concerning Synthetic Biology education, awareness, and safety provided insight into the concepts, methods, challenges, and policies in the field, as well as an appreciation for the need for greater public awareness. At BioBuilder we also had the opportunity to work in the wet-lab and execute two iGEM-inspired experiments. This hands-on experience helped us to better understand the importance of lab protocol and procedure, as well the necessity for precision and communication. We were also able to put into practice the safety training we received.<br />
</p><br />
<br />
<br />
<p>On the software side, we executed our user studies attentively and considerately. Prior to the studies we thought about the user’s prior experience and knowledge, preparing introductory materials and providing appropriate supplemental information when necessary. We also kept the study environment quiet and peaceful for optimal concentration. With respect to the users’ privacy and consent, we used consent forms for the release of any images or personal information for use in our research analysis.</p><br />
<br />
<br />
<h4>Considering Environmental Safety</h4><br />
<div class="panel" width = "300px" style = "float: right; margin: 10px""><br />
<img src = "https://static.igem.org/mediawiki/2013/5/51/Natalie_visit.jpg" alt = "visiting teachers" width = "300px" style = "margin-left:15px"><br />
<figcaption class="caption">Natalie Kuldell and Rebekah, a high school biology <br> teacher, visit the lab and provide feedback</figcaption><br />
</div><br />
<br />
<br />
<p>In addition to wet lab training, the Wellesley Desyne team consulted various <a href="/Team:Wellesley_Desyne/Acknowledgement">experts</a> in the field of synthetic biology to help aid us in our design and implementation process. These experts ranged from synthetic biology instructors to researchers to professors, all who informed us on the ethics, biosafety, and biosecurity of putting our projects together and then testing with human users. The questions and concerns raised in our dialogue with domain experts informed our design process greatly, and also made us realize that greater education and public awareness about synthetic biology was needed. As a result, careful considering was given to how we wanted to implement our projects.</p><br />
<br />
<br />
<h4>Safety Issue Concerns</h4><br />
<p>Because we are a computational team, we did not create and BioBricks devices. Instead, we simulated the hierarchical creation of these devices in <a href="/Team:Wellesley_Desyne/Eugenie">Eugenie</a>. Although users may not be interacting a genuine lab environment, lab safety can still be increased by exposure to software simulating synthetic biology experiments. Through our user study testing, we discovered that in general, the students expressed increased understanding and appreciation of both the theory and technical aspects of synthetic biology research and experimentation. Various errors and warning messages were created in our software itself to educate students about the concepts each project was conveying. And each time our team iterated, these messages were refined based on user experience. While we did not create concrete biological parts, our efforts indirectly inspire safer creation of BioBricks in the future.</p><br />
<br />
<h4>Keeping Ourselves and Our Users Safe</h4><br />
<p>The Institutional Biosafety Committee, under the <a href="http://www.wellesley.edu/Safety/biosafety.html">Wellesley College Office of Environmental Health & Safety</a> regulates biosafety concerns on campus. However, we are a computational team and do not work with biological organisms or hazards in our local lab environment.<br />
<br />
<div class="panel" style = "float: right; margin: 10px"><br />
<img src = "https://static.igem.org/mediawiki/2013/b/b2/Yoav_zSpacePres.jpg" alt = "Yoav presenting zTree" width = "275px" > <br><br />
<figcaption class="caption">Intern Yoav demoing zTree to <br> high school students</figcaption><br />
</div><br />
<br />
The <a href="http://cs.wellesley.edu/~hcilab/">Wellesley Human-Computer Interaction lab</a> does test iterations of our software projects with human subjects. Before each testing session, participants were asked to sign consent forms detailing the voluntary nature of the study, the task involved in the study, and were informed that if at any time during the study they experienced discomfort, they are permitted to stop and leave. We were extremely sensitive to a user’s physical, mental, and emotional demands during each study, taking notes on physical and verbal cues from students; we were very assuring during the study, and informed our users that any crashes or technical difficulties were our fault as designers and programmers and in no way their fault or responsibility. After each study the user task was altered or refined further to clarify the task and increase student comfort in testing out our software project, and participants were compensated as appreciation for their assistance.</p><br />
<br />
<br />
<h4>Working for the Future</h4><br />
<p><br />
Throughout our research experience, both in the wet-lab and in the software development process, we practiced and emphasized collaboration, communication, safety, awareness, and outreach, as well as the concepts of abstraction, modularity, standardization, and protocol. All of our software is documented extensively on the iGEM 2013 Wiki in the project overview and under each project’s title. We practice careful documentation and uphold safety standards as part of mindful and responsible research methodology, and as a representative reference for future lab participants and iGEM teams.<br />
</p><br />
<br />
</div> <br />
<br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/MethodologyTeam:Wellesley Desyne/Methodology2013-09-27T17:31:59Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Methodology</h3><br />
<br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:615px;"><br />
<img src= "https://static.igem.org/mediawiki/2013/1/11/Wellesley_ucd.PNG" alt = "user-center design"><br />
<br />
<p style = "text-align:center;">The User-centered design process.</p> <br />
</div><br />
<br />
<h4>OVERVIEW</h4><br />
<p><br />
We applied a user-centered design process to create an intuitive and useful software tool. Throughout our projects, we applied a user-centered design (<a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">UCD</a>) process in our web-based, MS surface, and z-space applications. What distinguishes UCD from other approaches is that user input is elicited throughout all stages of the design process. Through user studies, we obtain valuable information about users’ behaviors and practices that allow us to create software that is more intuitive and useful. User input allows us to enhance the users’ intuitions instead of forcing them to adapt their behavior to our software. Each iteration of our design involves consultation with the opinions of our users to better address concerns and issues with our software. The user-centered design process we followed this year can be divided into four different steps: analysis, design, implementation, and evaluation. Following, we describe the key activities we employed in each stage.<br />
</p><br />
<br />
<h4>DESIGN PROCESS</h4><br />
<br />
<h4>Analysis </h4><br />
<p><br />
In this phase of our project, we observed groups of users who could potentially use our software. Making sure our software was effective and practical involved us getting to know the users’ needs and what features they would like to see based on their current methodologies. Our analysis aimed to envision scenarios in which our software would be useful for our potential users and to create a test scenario after a basic version of our product was complete. Observed users included: the MIT iGEM team, the BU iGEM team, introductory biology and neuroscience Wellesley College students, and the MIT-Wellesley Upward Bound Program high school participants.<br />
</p><br />
<br />
<div class="panel" style = "float: left; margin: 10px; padding: 10px"><br />
<img src = "https://static.igem.org/mediawiki/2013/9/92/Wellesley_methedology_3.jpg" alt = "MIT Lab" width = "200px" ><br />
<figcaption width="200" class="caption">The lab engages in wet lab<br> practices</figcaption><br />
</div><br />
<br />
<p>We consulted with Natalie Kuldell, founder of <a href="http://www.biobuilder.org/">BioBuilder</a>, to understand the lab practices of synthetic biologists. Our team also participated in a first-hand experience in which we were able to perform an experiment to better familiarize ourselves with wet-lab environment techniques. We especially took note of the gestures we were using throughout the experiment. The experience was also crucial to understand biological safety protocol. <br />
<br />
<p>Before designing our software, we looking at existing applications for the MS Surface and online applications that visualized programming languages and organized queries in unique ways. These applications included MoClo Planner, Scratch, and Blockly, among others. While working on <a href"https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a> we looked through some photos of other 3D Tree structures and chose one that seemed appealing, usable, and interactive with the zSpace. With <a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a>, we looked at animation and social media to create a more interactive and engaging environment</p><br />
<br />
<h4>Design </h4><br />
<br />
<p><br />
The next step in our user-centered design process was the Design phase, where we created low-fidelity prototypes of the software we envisioned developing while collaborating with our users. We brainstormed ideas together, and went through several iterations of mock-ups before we started developing and testing a high-fidelity prototype of our software. During the first few weeks of our summer research, we had a lengthy brainstorming discussion with our collaborators from BU and Agilent Technologies. We presented our ideas for Eugene software, our outreach program, and z-space software. Throughout the brainstorming session, users pointed out the practicality of our designs and where we could improve. After incorporating their feedback into our design, we then created a low-fidelity paper prototype for Eugenie which stepped through each step of our software. For our web application, <a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a>, we created a mock-up which served a similar purpose.<br />
<br><br><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:560px;"><br />
<iframe width="560" height="315" src="//www.youtube.com/embed/CQeCT17AWlc?rel=0" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<p class="caption"> An example of a paper prototype we created during the early development stage. </p><br />
<br />
<p>During the design phase, we tested the usability of our software. Our first user studies for Eugenie occurred with introductory science students from Wellesley College.<br />
</p><br />
<br />
<h4>Implementation </h4><br />
<br />
<div class="panel" style = "margin: 10px; float:right;"><br />
<img src= "https://static.igem.org/mediawiki/2013/4/4b/Methodology_2_wellesleyv3.jpg"><br />
<figcaption width="200" class="caption">Wellesley community<br>members trying zSpace </figcaption><br />
</div><br />
<br />
<p><br />
After conducting our user studies, we then started the implementation stage of our design process, which includes additional testing with synthetic biologists and refining our software past the basic functionality to improve design and efficiency. During this phase, we conducted additional user studies with the BU and MIT iGEM teams. We iterated on the visual design of Eugenie as well as adding small improvements which increased the usability of our software. With Bac to the Future, we conducted initial user studies with the MIT/Wellesley Upward Bound Program high school students to gauge the effectiveness of our application in communicating core synthetic biology concepts, as well as the level of engagement and fun our users experienced.<br />
</p><br />
<br />
<br />
<h4> Evaluation</h4><br />
<div class="panel" style = "margin-right: 10px; float:left; width: 250px;"><br />
<img src= "https://static.igem.org/mediawiki/2013/9/90/Wellesley_presents.jpg" width = "200px"><br />
<figcaption width="200" class="caption">Presenting a high-fidelity <br> prototype to Natalie Kuldell (MIT) and a high school teacher. </figcaption><br />
</div><br />
<br />
<p><br />
Finally, in the evaluation stage we deployed our refined software tools for use in the wet-lab and evaluated overall user satisfaction regarding the software tools created.<br />
<br />
<p>Usability and usefulness: we conducted testing with the BU and MIT iGEM teams as well as with Wellesley College biology students and the MIT/Wellesley Upward Bound Program. We used various quantitative measures (e.g. time on task, subjective satisfaction) and qualitative indicators (e.g. user collaboration and problem solving styles). See results from the evaluation of <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a>, <a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a>, and <a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a>. </p><br />
<br />
<br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
<br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/Downloads_TutorialsTeam:Wellesley Desyne/Downloads Tutorials2013-09-27T17:31:18Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zMol_zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Downloads</h3><br />
<br />
<p>To download the source code for zMol, zTree, Eugenie, or Bac to the Future, please visit <a href="https://github.com/igemsoftware/Wellesley_Desyne2013">Github</a> and download the zip. To run the projects, please see below.<br />
<br />
<h4><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></h4><br />
<br />
<ul class="list_default"><br />
<li>You will need <a href="http://www.google.com/url?q=http%3A%2F%2Fwww.microsoft.com%2Fvisualstudio%2Feng%2Fdownloads%23d-2010-express&sa=D&sntz=1&usg=AFQjCNH8T4jEI_D7yXgZ7xiAzD_L9TlXtw">Microsoft Visual Studio 2010 C# Express</a> and the <a href="http://www.google.com/url?q=http%3A%2F%2Fwww.microsoft.com%2Fen-us%2Fdownload%2Fdetails.aspx%3Fid%3D26716&sa=D&sntz=1&usg=AFQjCNFoy5GAIakvY0eQMACWspLp7eUczQ"> Microsoft Surface 2.0 SDK</a> in order to run Eugenie on your machine. </li><br />
<li>After you have downloaded the necessary software, download the Eugenie application (zipped) from <a href="https://github.com/igemsoftware/Wellesley_Desyne2013">Github</a>.</li><br />
<li>Unzip the file downloaded. Open the folder and double-click on the <i>Eugenie.sln</i> file. Visual Studio 2010 should open the solution.</li><br />
<li>Press <i>F5</i> or the play button to run the program.</li><br />
</ul><br />
<br />
<br />
<h4><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></h4><br />
<br />
<ul class="list_default"><br />
<li>You will need <a href="http://unity3d.com/unity/download/archive">the Unity Game Engine (3.5.2)</a> and the <a href="https://support.zspace.com/entries/21614256-zSpace-SDK-Releases">zSpace SDK</a> in order to run zTree on your machine. </li><br />
<li>After you have downloaded the necessary software, download the zTree application (zipped) from <a href="https://github.com/igemsoftware/Wellesley_Desyne2013">Github</a>.</li><br />
<li>Unzip the file downloaded. Open the <i>Assets</i> folder and double-click on the <i>Scene</i> file. Unityshould open the solution.</li><br />
<li>Press the play button at the top center of the Unity interface to run the program.</li><br />
</ul><br />
<br />
<p><i>NOTE: Once you build it, you should have an .exe file, which means the program will be able to run on Windows machines only. After an executable is generated there should be a data file that has the same name but says data that saves to the same place as zTree saves to. That data file must be in the same location as the .exe file at all times.</i><br />
</p><br />
<br />
<h4><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></h4><br />
<br />
<p>This web application is available at <a href="http://bac-tothefuture.appspot.com/">bac-tothefuture.appspot.com</a>. <br />
<br />
<h3>Tutorials</h3><br />
<h4><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></h4><br />
<br><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe width="640" height="360" src="//www.youtube.com/embed/7NFRSufwsEo" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br />
<h4><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></h4><br />
<br><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe width="640" height="360" src="//www.youtube.com/embed/A1_XVnz1VCg?rel=0" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br />
<h4><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></h4><br />
<br><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe width="640" height="360" src="//www.youtube.com/embed/mhAy7kqbLkQ" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
<br />
<br />
</body><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/BACTeam:Wellesley Desyne/BAC2013-09-27T17:30:45Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Bac to the Future</h3><br />
<br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style="float:right;"><img src="https://static.igem.org/mediawiki/2013/7/7c/Wellesley_bac_logo2.png"></div><br />
<p><br />
Bac to the Future is an art installation and web application that aims to communicate core concepts of synthetic biology to non-scientists by engaging users in a fun and interactive environment. Specifically, our team focused on how an interactive and user-friendly application could demonstrate the significance of DNA as a powerful encoding language, as well as the potential for bacteria to be used as archival data storage. By visiting our application's virtual lab bench and following a step-by-step protocol, users can select and encode tweets with the hashtag #iGEM2013 into DNA and insert their encoded messages into digital E. coli bacteria. </p><br />
<br />
<p>At the <a href="http://cs.wellesley.edu/~hcilab/">Wellesley College Human-Computer Interaction lab</a>, we are interested in exploring how next-generation technology could facilitate the learning of complex scientific concepts and promote educational outreach. With this goal in mind, we chose to deploy both a web application for wider distribution and greater accessibility, as well as an interactive art installation for exhibition purposes. </p><br />
<br />
<p>Our project was inspired by an experiment conducted by the <a href="http://newsfeed.time.com/2012/08/20/the-first-book-to-be-encoded-in-dna/">Church Lab at Harvard Medical School</a>, which used bacteria DNA to store encoded book citations. In designing the user experience, we integrated relevant and familiar components such as dictionaries, and simplified the experimental protocol to promote intuitive understanding. In addition, we incorporated user feedback to assist in the conveyance of fundamental concepts while minimizing confusion. In the future, we plan to continue improving the user experience through further user testing, and hope to distribute the web application as an educational tool. </p><br />
<br />
<p> Go to the Application: <br><br />
<a href = "www.bac-tothefuture.appspot.com">www.bac-tothefuture.appspot.com</a><br />
</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
<p>The interface is divided into a workspace where the protocol is executed and a virtual tank containing bacteria with various messages encoded into their DNA. There is also a panel on the left containing a Twitter feed of messages that have been tweeted to the future, and a panel on the right containing the lab protocol for the user to follow.<br />
<br />
<p>Users interact with the application by executing the following protocol: </p><br />
<ol class="list_default"><br />
<li>Pick a message from the queue to encode by clicking on it, or users can search for their own message to encode by clicking on the "Pick up your message" button.</li><br />
<li>Initiate the translation process by clicking on the "Encode" button and watch as the chosen message is synthesized into DNA, using the Codon Dictionary.</li><br />
<li>Begin the lab protocol by inserting the encoded DNA into the plasmid.</li><br />
<li>Pick an E-Coli from the tank and drag it onto the workspace to act as a means of storage.</li><br />
<li>Insert the plasmid containing the encoded DNA into the chosen bacteria, and return it back to the tank.</li><br />
<li>Throughout the process, users can click on the various bacteria to see the database of encoded messages contained within each bacteria displayed in the ticker, including the users’ own message.</li><br />
</ol><br />
<br />
<br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/b/b2/Wellesley_Bttf_scrnshot1.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Experience first hand the translation process and watch as a message is encoded into DNA. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/8/84/Wellesley_Bttf_scrnshot2.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Simulate the protocol of inserting encoded DNA into bacteria.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/d/d5/Wellesley_Bttf_scrnshot4.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Place the bacteria back into the tank and watch a backwards translation of the encoded message.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/6/65/Wellesley_Bttf_scrnshot7.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Click on highlighted terms to see more in depth definitions.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4>Implementation</h4><br />
<p><br />
Bac to the Future was implemented as a web application using HTML5, Javacript, JQuery, and CSS for the interface. It is hosted on Google App Engine using the Python run-time environment. Finally, the Twitter API was used to create the feed of messages.<br />
</p><br />
<br />
<br />
<h4>Results</h4><br />
<div style="float: right; padding: 20px; width: 450px;"><br />
<img src="https://static.igem.org/mediawiki/2013/4/49/Blah.png"><br />
<div class="panel" style="margin-top:10px;"><br />
<figcaption style="font-size: 14px; line-height: 16px;"><strong>FIGURE. </strong>Results showing positive user engagement</figcaption><br />
</div><br />
</div><br />
<p><br />
To test Bac to the Future, our team conducted preliminary user studies involving the observation of 15 high school students in the <a href="http://mitpsc.mit.edu/outreach/program/view/75/search">MIT-Wellesley Upward Bound program</a>, students who had some exposure to science but were mostly unfamiliar with synthetic biology. In our study, the students were given a brief, 10-minute presentation of synthetic biology, followed by a demo of Bac to the Future. Afterwards, the students were given a chance to interact freely with our application. We observed that in general, the students picked up the application quickly and found the overall experience to be engaging, interactive, and fun. In addition, the students felt more comfortable with their knowledge of synthetic biology after the study.<br />
</p><br />
<br />
<h4>Demo</h4><br />
<br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe width="640" height="360" src="//www.youtube.com/embed/SEONZKrYcrM" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Implement an interactive installation, integrating use of gesture-recognition and tangible interface</li><br />
<li>Distribute the web application and explore potential educational uses</li><br />
<li>Continue to study the effectiveness of the application in facilitating the learning experience</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
<br />
<br />
</body><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/zTreeTeam:Wellesley Desyne/zTree2013-09-27T17:30:22Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>zTree</h3> <br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style="float:right;"><img src="https://static.igem.org/mediawiki/2013/d/d4/Wellesley_ztree_logo.png"></div><br />
<p>zTree is an interactive, 3D visualization of the <a href="http://parts.igem.org/Main_Page">Registry of Standard Biological Parts</a> that draws upon <a href="http://www2.parc.com/istl/groups/uir/publications/items/UIR-1991-06-Robertson-CHI91-Cone.pdf">Parc’s Cone Trees</a> visualization technique for representing hierarchical information. <br />
The top of the hierarchy represents a particular library, with nodes drawn like index cards to represent a generic part type&mdash;marked using <a href="http://www.sbolstandard.org/">Synthetic Biology Open Language (SBOL)</a> symbols&mdash;or a concrete biological part. <br />
<br />
<p>In zTree, a user can browse or search for a part of interest, display the data sheet for the part, and export any selected parts to a plain text file, which can then be imported <br />
into other programs for further use. The program also features an action log for user testing.</p><br />
</div><br />
<br />
<h4>Implementation</h4><br />
<br />
<p>zTree was built in <a href="http://unity3d.com/" target="_blank">Unity</a> using the <a href="https://support.zspace.com/entries/21614256-zSpace-SDK-Releases" target="_blank">zSpace SDK</a> programmed in C#. The meshes were rendered in Blender and the data are pulled via the <a href="http://parts.igem.org/Registry_API" target="_blank">Registry API</a>. zTree was implemented for the <a href="https://zspace.com/the-zspace-system/ target="_blank"">zSpace system</a>, a 3D holographic display that provides six degrees of freedom when interacting with objects on screen. The display takes advantage of <a href="http://zspace.com/uiguidelines/#intro.htm?Highlight=motion">binocular vision and motion parallax</a>, two cognitive immersion cues, to render a realistic image. </p><br />
<br />
<h4>Purpose</h4><br />
<br />
<p>2D representations of large data sets typically do not fit within the confines of a standard screen, forcing the user to scroll or resize to see the data in its entirety. zTree's use of 3D carousels maximizes screen real estate, thereby allowing the user to visualize the whole structure at once.<br />
<br />
<ol class="list_default">Our goals for zTree this summer were twofold:<br />
<li>Provide users with an intuitive, interactive way to navigate the Registry of Standard Biological Parts.</li><br />
<li>Create a modular enough solution so that the application could eventually be used for a wide array of part registries and libraries.</li><br />
</ol><br />
<!--Start row--><br />
<div class="row"><br />
<div class="large-4 large-offset-2 columns"><br />
<img src="https://static.igem.org/mediawiki/2013/5/5d/Wellesley_zTree4.jpg" width="300" height="300" margin="100" align="center"><br />
<figcaption class="caption">Users can search by part type, such as promoter or terminator, in the topmost carousel. </figcaption><br />
</div><br />
<div class="large-4 columns"><br />
<img src="https://static.igem.org/mediawiki/2013/6/6a/Wellesley_zTree3.jpg" width="300" height="300" margin="100" align="center"><br />
<figcaption class="caption">A second carousel appears beneath the first one, allowing the user to choose a more specific part type.</figcaption><br />
</div><br />
<div class="large-2 columns"></div><br />
</div><br />
<!--End row--><br />
<br />
<!--Start row--><br />
<div class="row"><br />
<div class="large-4 large-offset-2 columns"><br />
<img src="https://static.igem.org/mediawiki/2013/1/1e/Wellesley_zTree2.jpg" width="300" height="300" margin="100" align="center"><br />
<figcaption class="caption">Choosing yet a more specific part type.</figcaption><br />
</div><br />
<div class="large-4 columns"><br />
<img src="https://static.igem.org/mediawiki/2013/1/17/Wellesley_zTree1.jpg" width="300" height="300" margin="100" align="center"><br />
<figcaption class="caption">Users can then choose an individual part to view more information about it. They can also view the hierarchy of the part.</figcaption><br />
</div><br />
<div class="large-2 columns"></div><br />
</div><br />
<!--End row--><br />
<br />
<h4>Results</h4><br />
<p>We conducted a preliminary usability study of zTree with 9 Wellesley College students. The study employed a within subjects design, aiming to compare how students accomplished a series of simple tasks on zTree versus the Registry of Standard Biological Parts website. The students were asked to browse for a specific part, estimate the number of parts in a category, and compare two different part types.<br />
<br />
<div style="float: right; padding: 20px; width: 450px;"><br />
<img src="https://static.igem.org/mediawiki/2013/c/c7/Wc_ztree_graph.png"><br />
<div class="panel" style="margin-top:10px;"><br />
<figcaption style="font-size: 14px; line-height: 16px;"><strong>FIGURE. </strong>Application chosen by participants as easiest to use, zTree or the Registry website, for individual subtasks.</figcaption><br />
</div><br />
</div><br />
<br />
<ol class="list_default">The task list was devised to:<br />
<li>Study the effect of zTree's carousel structure on the user’s ability to understand hierarchical relationships and estimate the size of the data space.</li><br />
<li>Improve functionality and evaluate overall experience through qualitative user feedback and survey responses.</li><br />
</ol><br />
<br />
<p>After the study, participants were asked to choose the application that was easier to use, zTree or the Registry website, for individual subtasks. People generally found zTree more helpful than the Registry in terms of visualizing the entire structure and understanding hierarchy (see Figure at right). <br />
<br />
<p>User quotes consistently provided support for these findings:<br />
<ul class="list_default"><br />
<li>“It's great how easy it is to compare and view relationships of the different parts.”</li><br />
<li>"I really liked being able to browse through multiple hierarchies at once."</li><br />
<li>"I liked the visual structure of the data. It made it really easy to understand the hierarchy of the information I was viewing."</li><br />
</ul><br />
<br />
<p>6 of the 9 users also "Agreed" or “Strongly Agreed” that the zTree application was visually appealing. We also received constructive criticism and feedback, which have informed our future goals for zTree.<br />
<br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe width="640" height="360" align="center" src="//www.youtube.com/embed/wJKu_SNwV6E" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br><br />
<br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Animate carousels on and off screen</li><br />
<li>Improve search function for specific parts</li><br />
<li>Allow use of data sets from other databases</li><br />
<li>Eliminate "ghosting" to improve visualization</li><br />
<li>Allow use of pen for navigation and spinning of carousels</li><br />
</ul><br />
</div><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
<br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/SocialTeam:Wellesley Desyne/Social2013-09-27T17:29:26Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-18 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<div class="row"><br />
<div class="large-18 columns main-container"><br />
<br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/kSASJZpJDoE" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
<br />
<br />
</body><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/AcknowledgementTeam:Wellesley Desyne/Acknowledgement2013-09-27T17:28:39Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Notebooks</title> <br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<h3>Acknowledgements</h3><br />
<br />
<div class="panel" style = "float: right; margin: 10px; padding: 10px"><br />
<img src = "https://static.igem.org/mediawiki/2012/b/bc/Wellesley_acknowledgements.jpg" alt = "Team" width = "350px" > <br><br />
<figcaption width="300" class="caption">Presenting Eugenie to Wellesley community. </figcaption><br />
</div><br />
<br />
<br />
<p>We would like to thank <a href="http://www.nsf.gov/">The National Science Foundation</a>, <a href="http://www.home.agilent.com/agilent/home.jspx?cc=US&lc=eng">Agilent Technologies</a>, <a href="http://www.wellesley.edu/">Wellesley College</a>, and <a href="http://www.hhmi.org/">The Howard Hughes Medical Institute</a> for generously making our research this summer possible. We would also like to thank Cathy Summa for all her support, Natalie Kuldell for her teachings and advice, as well as, Rebekah for her time and advisement. <br />
<br />
<h3>Attributions and Contributions</h3><br />
<br />
<h4><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></h4><br />
<p>The application was designed by Tiffany Chen, Casey Grote, Catherine Guo, Evan Segreto, and Sravanti Tekumalla with input from Consuelo Valdes, Diana Eastman, and our advisor; Orit Shaer. Members of the <a href="https://2013.igem.org/Team:BostonU">BU iGem team</a> and their advisor, Traci Haddock, provided input and advice during the design process. Ernst Oberortner provided an introduction to Eugene and advice.</p><br />
<br />
<h4><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></h4><br />
<p> zTree was designed by Cassie Hoef and Daniel Worstell and was inspired by a photo representation of tree structured data from the Palo Alto Research Center. They were advised by Orit Shaer, Consuelo Valdes, and Robert Kincaid. Daniel imported the data sheets from the Registry of Standard Biological Parts and Cassie designed much of the front end functionality, as well as the file IO. They were assisted by Yoav Segev, an intern.</p><br />
<br />
<h4><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></h4><br />
<p> Bac to the Future was primarily inspired by an experiment conducted by the Church Lab at Harvard Medical School, which used bacteria DNA to store encoded book citations. In addition, we drew inspiration from our participatory design session with the <a href="https://2013.igem.org/Team:BostonU">BU iGEM team</a>, Robert Kincaid, and our lab experience with Professor Natalie Kuldell from MIT. The application was designed by Joanna Bi and Heather Petrow with input from Diana Eastman, Consuelo Valdes, and our advisor; Orit Shaer, and was implemented by Joanna Bi and Heather Petrow, with the help of Diana Eastman. Additionally, we were aided by interns: Neoreet Braha and Artemis Metaxas.</p> <br />
<br />
<br />
<h4>The iGEM Team Wiki</h4><br />
<p> The iGEM Team Wiki was designed by Casey Grote and implemented by Diana Eastman and the team.</p> <br />
<br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
</div><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
<script><br />
<br />
$(document).foundation();<br />
</script><br />
</body><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/NotebookTeam:Wellesley Desyne/Notebook2013-09-27T17:28:08Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Notebooks</title> <br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<h3>Notebooks</h3><br />
<br />
<h4>Students</h4> <br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook/JoannaNotebook">Joanna Bi</a><br />
<br><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook/EvanNotebook">Evan Segreto</a> <br />
<br><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook/HeatherNotebook">Heather Petrow</a> <br />
<br><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook/SravantiNotebook">Sravanti Tekumalla</a> <br />
<br><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook/CaseyNotebook">Casey Grote</a> <br />
<br><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook/TiffanyNotebook">Tiffany Chen</a> <br />
<br><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook/CassieNotebook">Cassie Hoef</a> <br />
<br><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook/CatherineNotebook">Catherine Guo</a> <br />
<br><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook/DanielNotebook">Daniel Worstell</a> <br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
</div><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</body><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/BACTeam:Wellesley Desyne/BAC2013-09-27T17:27:44Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Bac to the Future</h3><br />
<br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style="float:right;"><img src="https://static.igem.org/mediawiki/2013/7/7c/Wellesley_bac_logo2.png"></div><br />
<p><br />
Bac to the Future is an art installation and web application that aims to communicate core concepts of synthetic biology to non-scientists by engaging users in a fun and interactive environment. Specifically, our team focused on how an interactive and user-friendly application could demonstrate the significance of DNA as a powerful encoding language, as well as the potential for bacteria to be used as archival data storage. By visiting our application's virtual lab bench and following a step-by-step protocol, users can select and encode tweets with the hashtag #iGEM2013 into DNA and insert their encoded messages into digital E. coli bacteria. </p><br />
<br />
<p>At the <a href="http://cs.wellesley.edu/~hcilab/">Wellesley College Human-Computer Interaction lab</a>, we are interested in exploring how next-generation technology could facilitate the learning of complex scientific concepts and promote educational outreach. With this goal in mind, we chose to deploy both a web application for wider distribution and greater accessibility, as well as an interactive art installation for exhibition purposes. </p><br />
<br />
<p>Our project was inspired by an experiment conducted by the <a href="http://newsfeed.time.com/2012/08/20/the-first-book-to-be-encoded-in-dna/">Church Lab at Harvard Medical School</a>, which used bacteria DNA to store encoded book citations. In designing the user experience, we integrated relevant and familiar components such as dictionaries, and simplified the experimental protocol to promote intuitive understanding. In addition, we incorporated user feedback to assist in the conveyance of fundamental concepts while minimizing confusion. In the future, we plan to continue improving the user experience through further user testing, and hope to distribute the web application as an educational tool. </p><br />
<br />
<p> Go to the Application: <br><br />
<a href = "www.bac-tothefuture.appspot.com">www.bac-tothefuture.appspot.com</a><br />
</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
<p>The interface is divided into a workspace where the protocol is executed and a virtual tank containing bacteria with various messages encoded into their DNA. There is also a panel on the left containing a Twitter feed of messages that have been tweeted to the future, and a panel on the right containing the lab protocol for the user to follow.<br />
<br />
<p>Users interact with the application by executing the following protocol: </p><br />
<ol class="list_default"><br />
<li>Pick a message from the queue to encode by clicking on it, or users can search for their own message to encode by clicking on the "Pick up your message" button.</li><br />
<li>Initiate the translation process by clicking on the "Encode" button and watch as the chosen message is synthesized into DNA, using the Codon Dictionary.</li><br />
<li>Begin the lab protocol by inserting the encoded DNA into the plasmid.</li><br />
<li>Pick an E-Coli from the tank and drag it onto the workspace to act as a means of storage.</li><br />
<li>Insert the plasmid containing the encoded DNA into the chosen bacteria, and return it back to the tank.</li><br />
<li>Throughout the process, users can click on the various bacteria to see the database of encoded messages contained within each bacteria displayed in the ticker, including the users’ own message.</li><br />
</ol><br />
<br />
<br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/b/b2/Wellesley_Bttf_scrnshot1.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Experience first hand the translation process and watch as a message is encoded into DNA. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/8/84/Wellesley_Bttf_scrnshot2.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Simulate the protocol of inserting encoded DNA into bacteria.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/d/d5/Wellesley_Bttf_scrnshot4.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Place the bacteria back into the tank and watch a backwards translation of the encoded message.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/6/65/Wellesley_Bttf_scrnshot7.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Click on highlighted terms to see more in depth definitions.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4>Implementation</h4><br />
<p><br />
Bac to the Future was implemented as a web application using HTML5, Javacript, JQuery, and CSS for the interface. It is hosted on Google App Engine using the Python run-time environment. Finally, the Twitter API was used to create the feed of messages.<br />
</p><br />
<br />
<br />
<h4>Results</h4><br />
<div style="float: right; padding: 20px; width: 450px;"><br />
<img src="https://static.igem.org/mediawiki/2013/4/49/Blah.png"><br />
<div class="panel" style="margin-top:10px;"><br />
<figcaption style="font-size: 14px; line-height: 16px;"><strong>FIGURE. </strong>Results showing positive user engagement</figcaption><br />
</div><br />
</div><br />
<p><br />
To test Bac to the Future, our team conducted preliminary user studies involving the observation of 15 high school students in the <a href="http://mitpsc.mit.edu/outreach/program/view/75/search">MIT-Wellesley Upward Bound program</a>, students who had some exposure to science but were mostly unfamiliar with synthetic biology. In our study, the students were given a brief, 10-minute presentation of synthetic biology, followed by a demo of Bac to the Future. Afterwards, the students were given a chance to interact freely with our application. We observed that in general, the students picked up the application quickly and found the overall experience to be engaging, interactive, and fun. In addition, the students felt more comfortable with their knowledge of synthetic biology after the study.<br />
</p><br />
<br />
<h4>Demo</h4><br />
<br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe width="640" height="360" src="//www.youtube.com/embed/SEONZKrYcrM" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Implement an interactive installation, integrating use of gesture-recognition and tangible interface</li><br />
<li>Distribute the web application and explore potential educational uses</li><br />
<li>Continue to study the effectiveness of the application in facilitating the learning experience</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.tooltips.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
<br />
<br />
</body><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/EugenieTeam:Wellesley Desyne/Eugenie2013-09-27T17:23:04Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Eugenie</h3><br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style = "float:right; padding-bottom: 20px;"><img src="https://static.igem.org/mediawiki/2013/f/fc/Eugenie_logo_small.png" width="180"></div><br />
<p>Eugenie is a multi-touch application for designing biological circuits using the programming language <a href="http://eugenecad.org/">Eugene</a>. The visual language we created for Eugenie allows synthetic biologists to harness the power of Eugene without having to write Eugene code. The application consists of three representations of the circuit: “TreeView,” “FlowView,” and “EugeneView.” The user can search through <a href="http://clothocad.org/">Clotho</a> and iGEM databases to find the biological parts desired and can drag them to the workspace, graphically create Eugene rules, and view live-updating Eugene code for the circuit. After the user is done specifying a circuit, she or he can then view the search results, which display the possible permutations of a circuit based on a collection of parts. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to prune the results.</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
The design process is divided into three main views: TreeView, FlowView, and EugeneView. A user starts by searching for parts from the Part Registry or their Clotho database and bringing them into their worskspace. In the TreeView, users can specify the order and structure of their design. The behavior of parts in the device is specified using the FlowView. Users specify structure and behavior using a visual language that we developed specifically for the application; the language utilizes SBOL symbols, an open-source standard for in silico representation of genetic designs. The EugeneView updates automatically throughout the design process, and users may click on individual parts in order to see the corresponding code highlighted in the EugeneView. Finally, users may view and export their results to a CSV or <a href="http://pigeoncad.org/">Pigeon</a> files in the ResultsView. <br />
<br><br><br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/9b/Whci_Eugenie_treeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Create the structure of the circuit in the TreeView. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/3/3b/S3.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Define rules between parts in the FlowView.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/93/Whci_Eugenie_codeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">View live-updating Eugene code in the EugeneView.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_Eugenie_resultsview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Generate and export results in the ResultsView.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4> Implementation </h4><br />
<p>We implemented Eugenie using C#, XAML and the Surface <a href="http://msdn.microsoft.com/en-us/library/ff727815.aspx"> SDK 2.0</a>. We also used the MVC framework, <a href = "http://www.eugenecad.org/"> Eugene </a> for the creation of synthetic biology circuits, and <a href="http://pigeoncad.org/">Pigeon</a> to display the circuits visually. </p><br />
<br />
<h4> Goals </h4><br />
We had four goals in creating Eugenie:<br />
<ul class="list_default"><br />
<li>Implementing top-down design<br>We utilized the functionality of Eugene, a programming language that is used to implement top-down design of novel genetic circuits&mdash;design that begins by specifying devices and then instantiating parts.</li><br />
<li>Enhancing sensemaking<br>We implemented sliding panel views, which allow users the option to view multiple sets of information simultaneously or one set at a time, helping users understand the connection between the different types of presentation.</li><br />
<li>Supporting resource integration<br>We give users the option to load parts from the parts registry, access parts in a Clotho database, or use a local database.</li><br />
<li>Fostering collaboration<br> We used the Microsoft PixelSense, which allows multiple people to use Eugenie simultaneously.</li><br />
</ul><br />
<br />
<h4>Results</h4><br />
<br />
<div style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300"><figcaption class="caption" width="300"> Results showing users' experience with Eugenie. </figcaption></div><br />
<br />
<p>We conducted user studies of Eugenie with members of the BU and MIT iGEM teams as well as Wellesley College students; our evaluation include 15 participants overall. In our study, we introduced participants to the Eugene programming langugage, the visual language we had created, and the Eugenie user interface. Users were then tasked with first interpreting genetic devices from our visual language and then translating genetic devices represented in SBOL symbols into our visual language. We next asked participants to use our program to create one of the genetic devices they had translated. Post task, participants rated the ease of understanding the visual language and of using the program. We also asked participants for their feedback on how the program could be improved. The response to Eugenie was positive overall, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work. <br />
</p><br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/EQoIXLh1SxI" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br />
<h4>Future Work</h4><br />
<br />
<div style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/7/75/Whci_Eugenie_viz_language.jpg"><figcaption class="caption" width="300"> Results showing users' experience with Eugenie. </figcaption></div><br />
<ul class="list_default"><br />
<li>Supplement part information with additional information from previous iGEM projects and other synthetic biology databases</li><br />
<li>Allow users to access more parts from other synthetic biology databases</li><br />
<li>Expedite the process for synthetic biologists to create genetic circuits</li><br />
<li>Further incorporate the visual language we created into Eugenie's interface</li><br />
<li>Develop a companion web application to enable widespread access to Eugenie</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/File:Whci_Eugenie_viz_language.jpgFile:Whci Eugenie viz language.jpg2013-09-27T17:21:36Z<p>Deastman: </p>
<hr />
<div></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/EugenieTeam:Wellesley Desyne/Eugenie2013-09-27T17:09:41Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Eugenie</h3><br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style = "float:right; padding-bottom: 20px;"><img src="https://static.igem.org/mediawiki/2013/f/fc/Eugenie_logo_small.png" width="180"></div><br />
<p>Eugenie is a multi-touch application for designing biological circuits using the programming language <a href="http://eugenecad.org/">Eugene</a>. The visual language we created for Eugenie allows synthetic biologists to harness the power of Eugene without having to write Eugene code. The application consists of three representations of the circuit: “TreeView,” “FlowView,” and “EugeneView.” The user can search through <a href="http://clothocad.org/">Clotho</a> and iGEM databases to find the biological parts desired and can drag them to the workspace, graphically create Eugene rules, and view live-updating Eugene code for the circuit. After the user is done specifying a circuit, she or he can then view the search results, which display the possible permutations of a circuit based on a collection of parts. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to prune the results.</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
The design process is divided into three main views: TreeView, FlowView, and EugeneView. A user starts by searching for parts from the Part Registry or their Clotho database and bringing them into their worskspace. In the TreeView, users can specify the order and structure of their design. The behavior of parts in the device is specified using the FlowView. Users specify structure and behavior using a visual language that we developed specifically for the application; the language utilizes SBOL symbols, an open-source standard for in silico representation of genetic designs. The EugeneView updates automatically throughout the design process, and users may click on individual parts in order to see the corresponding code highlighted in the EugeneView. Finally, users may view and export their results to a CSV or <a href="http://pigeoncad.org/">Pigeon</a> files in the ResultsView. <br />
<br><br><br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/9b/Whci_Eugenie_treeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Create the structure of the circuit in the TreeView. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/3/3b/S3.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Define rules between parts in the FlowView.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/93/Whci_Eugenie_codeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">View live-updating Eugene code in the EugeneView.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_Eugenie_resultsview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Generate and export results in the ResultsView.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4> Implementation </h4><br />
<p>We implemented Eugenie using C#, XAML and the Surface <a href="http://msdn.microsoft.com/en-us/library/ff727815.aspx"> SDK 2.0</a>. We also used the MVC framework, <a href = "http://www.eugenecad.org/"> Eugene </a> for the creation of synthetic biology circuits, and <a href="http://pigeoncad.org/">Pigeon</a> to display the circuits visually. </p><br />
<br />
<h4> Goals </h4><br />
We had four goals in creating Eugenie:<br />
<ul class="list_default"><br />
<li>Implementing top-down design<br>We utilized the functionality of Eugene, a programming language that is used to implement top-down design of novel genetic circuits&mdash;design that begins by specifying devices and then instantiating parts.</li><br />
<li>Enhancing sensemaking<br>We implemented sliding panel views, which allow users the option to view multiple sets of information simultaneously or one set at a time, helping users understand the connection between the different types of presentation.</li><br />
<li>Supporting resource integration<br>We give users the option to load parts from the parts registry, access parts in a Clotho database, or use a local database.</li><br />
<li>Fostering collaboration<br> We used the Microsoft PixelSense, which allows multiple people to use Eugenie simultaneously.</li><br />
</ul><br />
<br />
<h4>Results</h4><br />
<br />
<div style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300"><div style="width: 300px"><figcaption class="caption" width="300"> Results showing users' experience with Eugenie. </figcaption></div></div><br />
<br />
<p>We conducted user studies of Eugenie with members of the BU and MIT iGEM teams as well as Wellesley College students; our evaluation include 15 participants overall. In our study, we introduced participants to the Eugene programming langugage, the visual language we had created, and the Eugenie user interface. Users were then tasked with first interpreting genetic devices from our visual language and then translating genetic devices represented in SBOL symbols into our visual language. We next asked participants to use our program to create one of the genetic devices they had translated. Post task, participants rated the ease of understanding the visual language and of using the program. We also asked participants for their feedback on how the program could be improved. The response to Eugenie was positive overall, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work. <br />
</p><br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/EQoIXLh1SxI" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Supplement part information with additional information from previous iGEM projects and other synthetic biology databases</li><br />
<li>Allow users to access more parts from other synthetic biology databases</li><br />
<li>Expedite the process for synthetic biologists to create genetic circuits</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/EugenieTeam:Wellesley Desyne/Eugenie2013-09-27T17:08:59Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Eugenie</h3><br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style = "float:right; padding-bottom: 20px;"><img src="https://static.igem.org/mediawiki/2013/f/fc/Eugenie_logo_small.png" width="180"></div><br />
<p>Eugenie is a multi-touch application for designing biological circuits using the programming language <a href="http://eugenecad.org/">Eugene</a>. The visual language we created for Eugenie allows synthetic biologists to harness the power of Eugene without having to write Eugene code. The application consists of three representations of the circuit: “TreeView,” “FlowView,” and “EugeneView.” The user can search through <a href="http://clothocad.org/">Clotho</a> and iGEM databases to find the biological parts desired and can drag them to the workspace, graphically create Eugene rules, and view live-updating Eugene code for the circuit. After the user is done specifying a circuit, she or he can then view the search results, which display the possible permutations of a circuit based on a collection of parts. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to prune the results.</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
The design process is divided into three main views: TreeView, FlowView, and EugeneView. A user starts by searching for parts from the Part Registry or their Clotho database and bringing them into their worskspace. In the TreeView, users can specify the order and structure of their design. The behavior of parts in the device is specified using the FlowView. Users specify structure and behavior using a visual language that we developed specifically for the application; the language utilizes SBOL symbols, an open-source standard for in silico representation of genetic designs. The EugeneView updates automatically throughout the design process, and users may click on individual parts in order to see the corresponding code highlighted in the EugeneView. Finally, users may view and export their results to a CSV or <a href="http://pigeoncad.org/">Pigeon</a> files in the ResultsView. <br />
<br><br><br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/9b/Whci_Eugenie_treeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Create the structure of the circuit in the TreeView. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/3/3b/S3.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Define rules between parts in the FlowView.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/93/Whci_Eugenie_codeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">View live-updating Eugene code in the EugeneView.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_Eugenie_resultsview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Generate and export results in the ResultsView.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4> Implementation </h4><br />
<p>We implemented Eugenie using C#, XAML and the Surface <a href="http://msdn.microsoft.com/en-us/library/ff727815.aspx"> SDK 2.0</a>. We also used the <a href="http://en.wikipedia.org/wiki/Model_View_ViewModel"> MVVM </a> framework, <a href = "http://www.eugenecad.org/"> Eugene </a> for the creation of synthetic biology circuits, and <a href="http://pigeoncad.org/">Pigeon</a> to display the circuits visually. </p><br />
<br />
<h4> Goals </h4><br />
We had four goals in creating Eugenie:<br />
<ul class="list_default"><br />
<li>Implementing top-down design<br>We utilized the functionality of Eugene, a programming language that is used to implement top-down design of novel genetic circuits&mdash;design that begins by specifying devices and then instantiating parts.</li><br />
<li>Enhancing sensemaking<br>We implemented sliding panel views, which allow users the option to view multiple sets of information simultaneously or one set at a time, helping users understand the connection between the different types of presentation.</li><br />
<li>Supporting resource integration<br>We give users the option to load parts from the parts registry, access parts in a Clotho database, or use a local database.</li><br />
<li>Fostering collaboration<br> We used the Microsoft PixelSense, which allows multiple people to use Eugenie simultaneously.</li><br />
</ul><br />
<br />
<h4>Results</h4><br />
<br />
<div style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300"><div style="width: 300px"><figcaption class="caption" width="300"> Results showing users' experience with Eugenie. </figcaption></div></div><br />
<br />
<p>We conducted user studies of Eugenie with members of the BU and MIT iGEM teams as well as Wellesley College students; our evaluation include 15 participants overall. In our study, we introduced participants to the Eugene programming langugage, the visual language we had created, and the Eugenie user interface. Users were then tasked with first interpreting genetic devices from our visual language and then translating genetic devices represented in SBOL symbols into our visual language. We next asked participants to use our program to create one of the genetic devices they had translated. Post task, participants rated the ease of understanding the visual language and of using the program. We also asked participants for their feedback on how the program could be improved. The response to Eugenie was positive overall, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work. <br />
</p><br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/EQoIXLh1SxI" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Supplement part information with additional information from previous iGEM projects and other synthetic biology databases</li><br />
<li>Allow users to access more parts from other synthetic biology databases</li><br />
<li>Expedite the process for synthetic biologists to create genetic circuits</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/EugenieTeam:Wellesley Desyne/Eugenie2013-09-27T17:07:06Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Eugenie</h3><br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style = "float:right; padding-bottom: 20px;"><img src="https://static.igem.org/mediawiki/2013/f/fc/Eugenie_logo_small.png" width="180"></div><br />
<p>Eugenie is a multi-touch application for designing biological circuits using the programming language <a href="http://eugenecad.org/">Eugene</a>. The visual language we created for Eugenie allows synthetic biologists to harness the power of Eugene without having to write Eugene code. The application consists of three representations of the circuit: “TreeView,” “FlowView,” and “EugeneView.” The user can search through <a href="http://clothocad.org/">Clotho</a> and iGEM databases to find the biological parts desired and can drag them to the workspace, graphically create Eugene rules, and view live-updating Eugene code for the circuit. After the user is done specifying a circuit, she or he can then view the search results, which displays the possible permutations of a circuit based on a collection of parts. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to prune the results.</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
The design process is divided into three main views: TreeView, FlowView, and EugeneView. A user starts by searching for parts from the Part Registry or their Clotho database and bringing them into their worskspace. In the TreeView, users can specify the order and structure of their design. The behavior of parts in the device is specified using the FlowView. Users specify structure and behavior using a visual language that we developed specifically for the application; the language utilizes SBOL symbols, an open-source standard for in silico representation of genetic designs. The EugeneView updates automatically throughout the design process, and users may click on individual parts in order to see the corresponding code highlighted in the EugeneView. Finally, users may view and export their results to a CSV or <a href="http://pigeoncad.org/">Pigeon</a> files in the ResultsView. <br />
<br><br><br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/9b/Whci_Eugenie_treeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Create the structure of the circuit in the TreeView. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/3/3b/S3.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Define rules between parts in the FlowView.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/93/Whci_Eugenie_codeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">View live-updating Eugene code in the EugeneView.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_Eugenie_resultsview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Generate and export results in the ResultsView.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4> Implementation </h4><br />
<p>We implemented Eugenie using C#, XAML and the Surface <a href="http://msdn.microsoft.com/en-us/library/ff727815.aspx"> SDK 2.0</a>. We also used the <a href="http://en.wikipedia.org/wiki/Model_View_ViewModel"> MVVM </a> framework, <a href = "http://www.eugenecad.org/"> Eugene </a> for the creation of synthetic biology circuits, and <a href="http://pigeoncad.org/">Pigeon</a> to display the circuits visually. </p><br />
<br />
<h4> Goals </h4><br />
We had four goals in creating Eugenie:<br />
<ul class="list_default"><br />
<li>Implementing top-down design<br>We utilized the functionality of Eugene, a programming language that is used to implement top-down design of novel genetic circuits&mdash;design that begins by specifying devices and then instantiating parts.</li><br />
<li>Enhancing sensemaking<br>We implemented sliding panel views, which allow users the option to view multiple sets of information simultaneously or one set at a time, helping users understand the connection between the different types of presentation.</li><br />
<li>Supporting resource integration<br>We give users the option to load parts from the parts registry, access parts in a Clotho database, or use a local database.</li><br />
<li>Fostering collaboration<br> We used the Microsoft PixelSense, which allows multiple people to use Eugenie simultaneously.</li><br />
</ul><br />
<br />
<h4>Results</h4><br />
<br />
<div style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300"><div style="width: 300px"><figcaption class="caption" width="300"> Results showing users' experience with Eugenie. </figcaption></div></div><br />
<br />
<p>We conducted user studies of Eugenie with members of the BU and MIT iGEM teams as well as Wellesley College students; our evaluation include 15 participants overall. In our study, we introduced participants to the Eugene programming langugage, the visual language we had created, and the Eugenie user interface. Users were then tasked with first interpreting genetic devices from our visual language and then translating genetic devices represented in SBOL symbols into our visual language. We next asked participants to use our program to create one of the genetic devices they had translated. Post task, participants rated the ease of understanding the visual language and of using the program. We also asked participants for their feedback on how the program could be improved. The response to Eugenie was positive overall, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work. <br />
</p><br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/EQoIXLh1SxI" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Supplement part information with additional information from previous iGEM projects and other synthetic biology databases</li><br />
<li>Allow users to access more parts from other synthetic biology databases</li><br />
<li>Expedite the process for synthetic biologists to create genetic circuits</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/File:Whci_Eugenie_resultsview.jpgFile:Whci Eugenie resultsview.jpg2013-09-27T17:02:44Z<p>Deastman: uploaded a new version of &quot;File:Whci Eugenie resultsview.jpg&quot;</p>
<hr />
<div></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/EugenieTeam:Wellesley Desyne/Eugenie2013-09-27T17:00:30Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Eugenie</h3><br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style = "float:right; padding-bottom: 20px;"><img src="https://static.igem.org/mediawiki/2013/f/fc/Eugenie_logo_small.png" width="180"></div><br />
<p>Eugenie is a multi-touch application for designing biological circuits using the programming language <a href="http://eugenecad.org/">Eugene</a>. The visual language we created for Eugenie allows synthetic biologists to harness the power of Eugene without having to write Eugene code. The application consists of three representations of the circuit: “TreeView,” “FlowView,” and “EugeneView.” The user can search through <a href="http://clothocad.org/">Clotho</a> and iGEM databases to find the biological parts desired and can drag them to the workspace, graphically create Eugene rules, and view live-updating Eugene code for the circuit. After the user is done specifying a circuit, she or he can then view the search results, which displays the possible permutations of a circuit based on a collection of parts. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to prune the results.</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
The design process is divided into three main views: TreeView, FlowView, and EugeneView. A user starts by searching for parts from the Part Registry or their Clotho database and bringing them into their worskspace. In the TreeView, users can specify the order and structure of their design. The behavior of parts in the device is specified using the FlowView. Users specify structure and behavior using a visual language that we developed specifically for the application; the language utilizes SBOL symbols, an open-source standard for in silico representation of genetic designs. The EugeneView updates automatically throughout the design process, and users may click on individual parts in order to see the corresponding code highlighted in the EugeneView. Finally, users may view and export their results to a CSV or <a href="http://pigeoncad.org/">Pigeon</a> files in the ResultsView. <br />
<br><br><br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/9b/Whci_Eugenie_treeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Create the structure of the circuit in the TreeView. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/3/3b/S3.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Define rules between parts in the FlowView.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/93/Whci_Eugenie_codeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">View live-updating Eugene code in the EugeneView.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_Eugenie_resultsview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Generate and export results in the ResultsView.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4> Implementation </h4><br />
<p>We implemented Eugenie using C#, XAML and the Surface <a href="http://msdn.microsoft.com/en-us/library/ff727815.aspx"> SDK 2.0</a>. We also used the <a href="http://en.wikipedia.org/wiki/Model_View_ViewModel"> MVVM </a> framework, <a href = "http://www.eugenecad.org/"> Eugene </a> for the creation of synthetic biology circuits, and <a href="http://pigeoncad.org/">Pigeon</a> to display the circuits visually. </p><br />
<br />
<h4> Goals </h4><br />
We had four goals in creating Eugenie:<br />
<ul class="list_default"><br />
<li>Implementing top-down design<br>We utilized the functionality of Eugene, a programming language that is used to implement top-down design of novel genetic circuits&mdash;design that begins by specifying devices and then instantiating parts.</li><br />
<li>Enhancing sensemaking<br>We implemented sliding panel views, which allow users the option to view multiple sets of information simultaneously or one set at a time, helping users understand the connection between the different types of presentation.</li><br />
<li>Supporting resource integration<br>We give users the option to load parts from the parts registry, access parts in a Clotho database, or use a local database.</li><br />
<li>Fostering collaboration<br> We used the Microsoft PixelSense, which allows multiple people to use Eugenie simultaneously.</li><br />
</ul><br />
<br />
<h4>Results</h4><br />
<br />
<div style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300"><div style="width: 300px"><figcaption class="caption" width="300"> Results showing users' experience with Eugenie. </figcaption></div></div><br />
<br />
<p>We conducted user-testing with Eugenie with members of the BU and MIT iGem teams as well as Wellesley College students. In our study, we introduced participants to Eugene, the visual language we had created, and the Eugenie user interface. Users were then tasked with first interpreting genetic devices from our visual language and then translating genetic devices represented in SBOL visualization into our visual language. We next asked participants to use our program to create one of the genetic devices they had translated. Participants rated the ease of understanding the visual language and of using the program. We also asked participants for their feedback on how the program could be improved. Overall response was positive, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work. <br />
</p><br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/EQoIXLh1SxI" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Supplement part information with additional information from previous iGEM projects and other synthetic biology databases</li><br />
<li>Allow users to access more parts from other synthetic biology databases</li><br />
<li>Expedite the process for synthetic biologists to create genetic circuits</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/EugenieTeam:Wellesley Desyne/Eugenie2013-09-27T16:59:55Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Eugenie</h3><br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style = "float:right; padding-bottom: 20px;"><img src="https://static.igem.org/mediawiki/2013/f/fc/Eugenie_logo_small.png" width="180"></div><br />
<p>Eugenie is a multi-touch application for designing biological circuits using the programming language <a href="http://eugenecad.org/">Eugene</a>. The visual language we created for Eugenie allows synthetic biologists to harness the power of Eugene without having to write Eugene code. The application consists of three representations of the circuit: “TreeView,” “FlowView,” and “EugeneView.” The user can search through <a href="http://clothocad.org/">Clotho</a> and iGEM databases to find the biological parts desired and can drag them to the workspace, graphically create Eugene rules, and view live-updating Eugene code for the circuit. After the user is done specifying a circuit, she or he can then view the search results, which displays the possible permutations of a circuit based on a collection of parts. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to prune the results.</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
The design process is divided into three main views: TreeView, FlowView, and EugeneView. A user starts by searching for parts from the Part Registry or their Clotho database and bringing them into their worskspace. In the TreeView, users can specify the order and structure of their design. The behavior of parts in the device is specified using the FlowView. Users specify structure and behavior using a visual language that we developed specifically for the application; the language utilizes SBOL symbols, an open-source standard for in silico representation of genetic designs. The EugeneView updates automatically throughout the design process, and users may click on individual parts in order to see the corresponding code highlighted in the EugeneView. Finally, users may view and export their results to a CSV or <a href="http://pigeoncad.org/">Pigeon</a> files in the ResultsView. <br />
<br><br><br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/9b/Whci_Eugenie_treeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Create the structure of the circuit in the TreeView. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/a/af/S3.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Define rules between parts in the FlowView.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/93/Whci_Eugenie_codeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">View live-updating Eugene code in the EugeneView.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_Eugenie_resultsview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Generate and export results in the ResultsView.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4> Implementation </h4><br />
<p>We implemented Eugenie using C#, XAML and the Surface <a href="http://msdn.microsoft.com/en-us/library/ff727815.aspx"> SDK 2.0</a>. We also used the <a href="http://en.wikipedia.org/wiki/Model_View_ViewModel"> MVVM </a> framework, <a href = "http://www.eugenecad.org/"> Eugene </a> for the creation of synthetic biology circuits, and <a href="http://pigeoncad.org/">Pigeon</a> to display the circuits visually. </p><br />
<br />
<h4> Goals </h4><br />
We had four goals in creating Eugenie:<br />
<ul class="list_default"><br />
<li>Implementing top-down design<br>We utilized the functionality of Eugene, a programming language that is used to implement top-down design of novel genetic circuits&mdash;design that begins by specifying devices and then instantiating parts.</li><br />
<li>Enhancing sensemaking<br>We implemented sliding panel views, which allow users the option to view multiple sets of information simultaneously or one set at a time, helping users understand the connection between the different types of presentation.</li><br />
<li>Supporting resource integration<br>We give users the option to load parts from the parts registry, access parts in a Clotho database, or use a local database.</li><br />
<li>Fostering collaboration<br> We used the Microsoft PixelSense, which allows multiple people to use Eugenie simultaneously.</li><br />
</ul><br />
<br />
<h4>Results</h4><br />
<br />
<div style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300"><div style="width: 300px"><figcaption class="caption" width="300"> Results showing users' experience with Eugenie. </figcaption></div></div><br />
<br />
<p>We conducted user-testing with Eugenie with members of the BU and MIT iGem teams as well as Wellesley College students. In our study, we introduced participants to Eugene, the visual language we had created, and the Eugenie user interface. Users were then tasked with first interpreting genetic devices from our visual language and then translating genetic devices represented in SBOL visualization into our visual language. We next asked participants to use our program to create one of the genetic devices they had translated. Participants rated the ease of understanding the visual language and of using the program. We also asked participants for their feedback on how the program could be improved. Overall response was positive, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work. <br />
</p><br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/EQoIXLh1SxI" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Supplement part information with additional information from previous iGEM projects and other synthetic biology databases</li><br />
<li>Allow users to access more parts from other synthetic biology databases</li><br />
<li>Expedite the process for synthetic biologists to create genetic circuits</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/File:S3.jpgFile:S3.jpg2013-09-27T16:59:10Z<p>Deastman: </p>
<hr />
<div></div>Deastmanhttp://2013.igem.org/File:Whci_Eugenie_treeview.jpgFile:Whci Eugenie treeview.jpg2013-09-27T16:58:16Z<p>Deastman: uploaded a new version of &quot;File:Whci Eugenie treeview.jpg&quot;</p>
<hr />
<div></div>Deastmanhttp://2013.igem.org/File:Whci_Eugenie_treeview.jpgFile:Whci Eugenie treeview.jpg2013-09-27T16:56:29Z<p>Deastman: uploaded a new version of &quot;File:Whci Eugenie treeview.jpg&quot;</p>
<hr />
<div></div>Deastmanhttp://2013.igem.org/File:Whci_Eugenie_codeview.jpgFile:Whci Eugenie codeview.jpg2013-09-27T16:54:22Z<p>Deastman: uploaded a new version of &quot;File:Whci Eugenie codeview.jpg&quot;</p>
<hr />
<div></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/EugenieTeam:Wellesley Desyne/Eugenie2013-09-27T16:46:27Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Eugenie</h3><br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style = "float:right; padding-bottom: 20px;"><img src="https://static.igem.org/mediawiki/2013/f/fc/Eugenie_logo_small.png" width="180"></div><br />
<p>Eugenie is a multi-touch application for designing biological circuits using the programming language <a href="http://eugenecad.org/">Eugene</a>. The visual language we created for Eugenie allows synthetic biologists to harness the power of Eugene without having to write Eugene code. The application consists of three representations of the circuit: “TreeView,” “FlowView,” and “EugeneView.” The user can search through <a href="http://clothocad.org/">Clotho</a> and iGEM databases to find the biological parts desired and can drag them to the workspace, graphically create Eugene rules, and view live-updating Eugene code for the circuit. After the user is done specifying a circuit, she or he can then view the search results, which displays the possible permutations of a circuit based on a collection of parts. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to prune the results.</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
The design process is divided into three main views: TreeView, FlowView, and EugeneView. A user starts by searching for parts from the Part Registry or their Clotho database and bringing them into their worskspace. In the TreeView, users can specify the order and structure of their design. The behavior of parts in the device is specified using the FlowView. Users specify structure and behavior using a visual language that we developed specifically for the application; the language utilizes SBOL symbols, an open-source standard for in silico representation of genetic designs. The EugeneView updates automatically throughout the design process, and users may click on individual parts in order to see the corresponding code highlighted in the EugeneView. Finally, users may view and export their results to a CSV or <a href="http://pigeoncad.org/">Pigeon</a> files in the ResultsView. <br />
<br><br><br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/9b/Whci_Eugenie_treeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Create the structure of the circuit in the TreeView. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/a/af/S3.png" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Define rules between parts in the FlowView.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/93/Whci_Eugenie_codeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">View live-updating Eugene code in the EugeneView.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_Eugenie_resultsview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Generate and export results in the ResultsView.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4> Implementation </h4><br />
<p>We implemented Eugenie using C#, XAML and the Surface <a href="http://msdn.microsoft.com/en-us/library/ff727815.aspx"> SDK 2.0</a>. We also used the <a href="http://en.wikipedia.org/wiki/Model_View_ViewModel"> MVVM </a> framework, <a href = "http://www.eugenecad.org/"> Eugene </a> for the creation of synthetic biology circuits, and <a href="http://pigeoncad.org/">Pigeon</a> to display the circuits visually. </p><br />
<br />
<h4> Goals </h4><br />
We had four goals in creating Eugenie:<br />
<ul class="list_default"><br />
<li>Implementing top-down design<br>We utilized the functionality of Eugene, a programming language that is used to implement top-down design of novel genetic circuits&mdash;design that begins by specifying devices and then instantiating parts.</li><br />
<li>Enhancing sensemaking<br>We implemented sliding panel views, which allow users the option to view multiple sets of information simultaneously or one set at a time, helping users understand the connection between the different types of presentation.</li><br />
<li>Supporting resource integration<br>We give users the option to load parts from the parts registry, access parts in a Clotho database, or use a local database.</li><br />
<li>Fostering collaboration<br> We used the Microsoft PixelSense, which allows multiple people to use Eugenie simultaneously.</li><br />
</ul><br />
<br />
<h4>Results</h4><br />
<br />
<div style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300"><div style="width: 300px"><figcaption class="caption" width="300"> Results showing users' experience with Eugenie. </figcaption></div></div><br />
<br />
<p>We conducted user-testing with Eugenie with members of the BU and MIT iGem teams as well as Wellesley College students. In our study, we introduced participants to Eugene, the visual language we had created, and the Eugenie user interface. Users were then tasked with first interpreting genetic devices from our visual language and then translating genetic devices represented in SBOL visualization into our visual language. We next asked participants to use our program to create one of the genetic devices they had translated. Participants rated the ease of understanding the visual language and of using the program. We also asked participants for their feedback on how the program could be improved. Overall response was positive, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work. <br />
</p><br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/EQoIXLh1SxI" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Supplement part information with additional information from previous iGEM projects and other synthetic biology databases</li><br />
<li>Allow users to access more parts from other synthetic biology databases</li><br />
<li>Expedite the process for synthetic biologists to create genetic circuits</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/EugenieTeam:Wellesley Desyne/Eugenie2013-09-27T16:45:38Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Eugenie</h3><br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style = "float:right; padding-bottom: 20px;"><img src="https://static.igem.org/mediawiki/2013/f/fc/Eugenie_logo_small.png" width="180"></div><br />
<p>Eugenie is a multi-touch application for designing biological circuits using the programming language <a href="http://eugenecad.org/">Eugene</a>. The visual language we created for Eugenie allows synthetic biologists to harness the power of Eugene without having to write Eugene code. The application consists of three representations of the circuit: “TreeView,” “FlowView,” and “EugeneView.” The user can search through <a href="http://clothocad.org/">Clotho</a> and iGEM databases to find the biological parts desired and can drag them to the workspace, graphically create Eugene rules, and view live-updating Eugene code for the circuit. After the user is done specifying a circuit, she or he can then view the search results, which displays the possible permutations of a circuit based on a collection of parts. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to prune the results.</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
The design process is divided into three main views: TreeView, FlowView, and EugeneView. A user starts by searching for parts from the Part Registry or their Clotho database and bringing them into their worskspace. In the TreeView, users can specify the order and structure of their design. The behavior of parts in the device is specified using the FlowView. Users specify structure and behavior using a visual language that we developed specifically for the application; the language utilizes SBOL symbols, an open-source standard for in silico representation of genetic designs. The EugeneView updates automatically throughout the design process, and users may click on individual parts in order to see the corresponding code highlighted in the EugeneView. Finally, users may view and export their results to a CSV or <a href="http://pigeoncad.org/">Pigeon</a> files in the ResultsView. <br />
<br><br><br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/9b/Whci_Eugenie_treeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Create the structure of the circuit in the TreeView. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/a/af/S3.png" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Define rules between parts in the FlowView.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/93/Whci_Eugenie_codeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">View live-updating Eugene code in the EugeneView.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_Eugenie_resultsview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Generate and export results in the ResultsView.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4> Implementation </h4><br />
<p>We implemented Eugenie using C#, XAML and the Surface <a href="http://msdn.microsoft.com/en-us/library/ff727815.aspx"> SDK 2.0</a>. We also used the <a href="http://en.wikipedia.org/wiki/Model_View_ViewModel"> MVVM </a> framework, <a href = "http://www.eugenecad.org/"> Eugene </a> for the creation of synthetic biology circuits, and <a href="http://pigeoncad.org/">Pigeon</a> to display the circuits visually. </p><br />
<br />
<h4> Goals </h4><br />
We had four goals in creating Eugenie:<br />
<ul class="list_default"><br />
<li>Implementing top-down design<br>We utilized the functionality of Eugene, a programming language that is used to implement top-down design of novel genetic circuits&mdash;design that begins by specifying devices and then instantiating parts.</li><br />
<li>Enhancing sensemaking<br>We implemented sliding panel views, which allow users the option to view multiple sets of information simultaneously or one set at a time, helping users understand the connection between the different types of presentation.</li><br />
<li>Supporting resource integration<br>We give users the option to load parts from the parts registry, access parts in a Clotho database, or use a local database.</li><br />
<li>Fostering collaboration<br> We used the Microsoft PixelSense, which allows multiple people to use Eugenie simultaneously.</li><br />
</ul><br />
<br />
<h4>Results</h4><br />
<br />
<div style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300"><div style="width: 300px"><figcaption width="300"> Results showing users' experience with Eugenie. </figcaption></div></div><br />
<br />
<p>We conducted user-testing with Eugenie with members of the BU and MIT iGem teams as well as Wellesley College students. In our study, we introduced participants to Eugene, the visual language we had created, and the Eugenie user interface. Users were then tasked with first interpreting genetic devices from our visual language and then translating genetic devices represented in SBOL visualization into our visual language. We next asked participants to use our program to create one of the genetic devices they had translated. Participants rated the ease of understanding the visual language and of using the program. We also asked participants for their feedback on how the program could be improved. Overall response was positive, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work. <br />
</p><br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/EQoIXLh1SxI" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Supplement part information with additional information from previous iGEM projects and other synthetic biology databases</li><br />
<li>Allow users to access more parts from other synthetic biology databases</li><br />
<li>Expedite the process for synthetic biologists to create genetic circuits</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/BACTeam:Wellesley Desyne/BAC2013-09-27T16:38:56Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Bac to the Future</h3><br />
<br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style="float:right;"><img src="https://static.igem.org/mediawiki/2013/7/7c/Wellesley_bac_logo2.png"></div><br />
<p><br />
Bac to the Future is an art installation and web application that aims to communicate core concepts of synthetic biology to non-scientists by engaging users in a fun and interactive environment. Specifically, our team focused on how an interactive and user-friendly application could demonstrate the significance of DNA as a powerful encoding language, as well as the potential for bacteria to be used as archival data storage. By visiting our application's virtual lab bench and following a step-by-step protocol, users can select and encode tweets with the hashtag #iGEM2013 into DNA and insert their encoded messages into digital E. coli bacteria. </p><br />
<br />
<p>At the <a href="http://cs.wellesley.edu/~hcilab/">Wellesley College Human-Computer Interaction lab</a>, we are interested in exploring how next-generation technology could facilitate the learning of complex scientific concepts and promote educational outreach. With this goal in mind, we chose to deploy both a web application for wider distribution and greater accessibility, as well as an interactive art installation for exhibition purposes. </p><br />
<br />
<p>Our project was inspired by an experiment conducted by the <a href="http://newsfeed.time.com/2012/08/20/the-first-book-to-be-encoded-in-dna/">Church Lab at Harvard Medical School</a>, which used bacteria DNA to store encoded book citations. In designing the user experience, we integrated relevant and familiar components such as dictionaries, and simplified the experimental protocol to promote intuitive understanding. In addition, we incorporated user feedback to assist in the conveyance of fundamental concepts while minimizing confusion. In the future, we plan to continue improving the user experience through further user testing, and hope to distribute the web application as an educational tool. </p><br />
<br />
<p> Go to the Application: <br><br />
<a href = "www.bac-tothefuture.appspot.com">www.bac-tothefuture.appspot.com</a><br />
</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
<p>The interface is divided into a workspace where the protocol is executed and a virtual tank containing bacteria with various messages encoded into their DNA. There is also a panel on the left containing a Twitter feed of messages that have been tweeted to the future, and a panel on the right containing the lab protocol for the user to follow.<br />
<br />
<p>Users interact with the application by executing the following protocol: </p><br />
<ol class="list_default"><br />
<li>Pick a message from the queue to encode by clicking on it, or users can search for their own message to encode by clicking on the "Pick up your message" button.</li><br />
<li>Initiate the translation process by clicking on the "Encode" button and watch as the chosen message is synthesized into DNA, using the Codon Dictionary.</li><br />
<li>Begin the lab protocol by inserting the encoded DNA into the plasmid.</li><br />
<li>Pick an E-Coli from the tank and drag it onto the workspace to act as a means of storage.</li><br />
<li>Insert the plasmid containing the encoded DNA into the chosen bacteria, and return it back to the tank.</li><br />
<li>Throughout the process, users can click on the various bacteria to see the database of encoded messages contained within each bacteria displayed in the ticker, including the users’ own message.</li><br />
</ol><br />
<br />
<br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/b/b2/Wellesley_Bttf_scrnshot1.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Experience first hand the translation process and watch as a message is encoded into DNA. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/8/84/Wellesley_Bttf_scrnshot2.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Simulate the protocol of inserting encoded DNA into bacteria.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/d/d5/Wellesley_Bttf_scrnshot4.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Place the bacteria back into the tank and watch a backwards translation of the encoded message.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/6/65/Wellesley_Bttf_scrnshot7.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Click on highlighted terms to see more in depth definitions.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4>Implementation</h4><br />
<p><br />
Bac to the Future was implemented as a web application using HTML5, Javacript, JQuery, and CSS for the interface. It is hosted on Google App Engine using the Python run-time environment. Finally, the Twitter API was used to create the feed of messages.<br />
</p><br />
<br />
<br />
<h4>Results</h4><br />
<div style="float: right; padding: 20px; width: 450px;"><br />
<img src="https://static.igem.org/mediawiki/2013/4/49/Blah.png"><br />
<div class="panel" style="margin-top:10px;"><br />
<figcaption style="font-size: 14px; line-height: 16px;"><strong>FIGURE. </strong>Results showing positive user engagement</figcaption><br />
</div><br />
</div><br />
<p><br />
To test Bac to the Future, our team conducted preliminary user studies involving the observation of 15 high school students in the <a href="http://mitpsc.mit.edu/outreach/program/view/75/search">MIT-Wellesley Upward Bound program</a>, students who had some exposure to science but were mostly unfamiliar with synthetic biology. In our study, the students were given a brief, 10-minute presentation of synthetic biology, followed by a demo of Bac to the Future. Afterwards, the students were given a chance to interact freely with our application. We observed that in general, the students picked up the application quickly and found the overall experience to be engaging, interactive, and fun. In addition, the students felt more comfortable with their knowledge of synthetic biology after the study.<br />
</p><br />
<br />
<h4>Demo</h4><br />
<br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe width="640" height="360" src="//www.youtube.com/embed/SEONZKrYcrM" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Implement an interactive installation, integrating use of gesture-recognition and tangible interface</li><br />
<li>Distribute the web application and explore potential educational uses</li><br />
<li>Continue to study the effectiveness of the application in facilitating the learning experience</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.alerts.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.placeholder.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.tooltips.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
<br />
<br />
</body><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/BACTeam:Wellesley Desyne/BAC2013-09-27T16:37:57Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Bac to the Future</h3><br />
<br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style="float:right;"><img src="https://static.igem.org/mediawiki/2013/7/7c/Wellesley_bac_logo2.png"></div><br />
<p><br />
Bac to the Future is an art installation and web application that aims to communicate core concepts of synthetic biology to non-scientists by engaging users in a fun and interactive environment. Specifically, our team focused on how an interactive and user-friendly application could demonstrate the significance of DNA as a powerful encoding language, as well as the potential for bacteria to be used as archival data storage. By visiting our application's virtual lab bench and following a step-by-step protocol, users can select and encode tweets with the hashtag #iGEM2013 into DNA and eventually insert their encoded messages into E. coli bacteria. </p><br />
<br />
<p>At the <a href="http://cs.wellesley.edu/~hcilab/">Wellesley College Human-Computer Interaction lab</a>, we are interested in exploring how next-generation technology could facilitate the learning of complex scientific concepts and promote educational outreach. With this goal in mind, we chose to deploy both a web application for wider distribution and greater accessibility, as well as an interactive art installation for exhibition purposes. </p><br />
<br />
<p>Our project was inspired by an experiment conducted by the <a href="http://newsfeed.time.com/2012/08/20/the-first-book-to-be-encoded-in-dna/">Church Lab at Harvard Medical School</a>, which used bacteria DNA to store encoded book citations. In designing the user experience, we integrated relevant and familiar components such as dictionaries, and simplified the experimental protocol to promote intuitive understanding. In addition, we incorporated user feedback to assist in the conveyance of fundamental concepts while minimizing confusion. In the future, we plan to continue improving the user experience through further user testing, and hope to distribute the web application as an educational tool. </p><br />
<br />
<p> Go to the Application: <br><br />
<a href = "www.bac-tothefuture.appspot.com">www.bac-tothefuture.appspot.com</a><br />
</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
<p>The interface is divided into a workspace where the protocol is executed and a virtual tank containing bacteria with various messages encoded into their DNA. There is also a panel on the left containing a Twitter feed of messages that have been tweeted to the future, and a panel on the right containing the lab protocol for the user to follow.<br />
<br />
<p>Users interact with the application by executing the following protocol: </p><br />
<ol class="list_default"><br />
<li>Pick a message from the queue to encode by clicking on it, or users can search for their own message to encode by clicking on the "Pick up your message" button.</li><br />
<li>Initiate the translation process by clicking on the "Encode" button and watch as the chosen message is synthesized into DNA, using the Codon Dictionary.</li><br />
<li>Begin the lab protocol by inserting the encoded DNA into the plasmid.</li><br />
<li>Pick an E-Coli from the tank and drag it onto the workspace to act as a means of storage.</li><br />
<li>Insert the plasmid containing the encoded DNA into the chosen bacteria, and return it back to the tank.</li><br />
<li>Throughout the process, users can click on the various bacteria to see the database of encoded messages contained within each bacteria displayed in the ticker, including the users’ own message.</li><br />
</ol><br />
<br />
<br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/b/b2/Wellesley_Bttf_scrnshot1.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Experience first hand the translation process and watch as a message is encoded into DNA. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/8/84/Wellesley_Bttf_scrnshot2.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Simulate the protocol of inserting encoded DNA into bacteria.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/d/d5/Wellesley_Bttf_scrnshot4.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Place the bacteria back into the tank and watch a backwards translation of the encoded message.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/6/65/Wellesley_Bttf_scrnshot7.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Click on highlighted terms to see more in depth definitions.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4>Implementation</h4><br />
<p><br />
Bac to the Future was implemented as a web application using HTML5, Javacript, JQuery, and CSS for the interface. It is hosted on Google App Engine using the Python run-time environment. Finally, the Twitter API was used to create the feed of messages.<br />
</p><br />
<br />
<br />
<h4>Results</h4><br />
<div style="float: right; padding: 20px; width: 450px;"><br />
<img src="https://static.igem.org/mediawiki/2013/4/49/Blah.png"><br />
<div class="panel" style="margin-top:10px;"><br />
<figcaption style="font-size: 14px; line-height: 16px;"><strong>FIGURE. </strong>Results showing positive user engagement</figcaption><br />
</div><br />
</div><br />
<p><br />
To test Bac to the Future, our team conducted preliminary user studies involving the observation of 15 high school students in the <a href="http://mitpsc.mit.edu/outreach/program/view/75/search">MIT-Wellesley Upward Bound program</a>, students who had some exposure to science but were mostly unfamiliar with synthetic biology. In our study, the students were given a brief, 10-minute presentation of synthetic biology, followed by a demo of Bac to the Future. Afterwards, the students were given a chance to interact freely with our application. We observed that in general, the students picked up the application quickly and found the overall experience to be engaging, interactive, and fun. In addition, the students felt more comfortable with their knowledge of synthetic biology after the study.<br />
</p><br />
<br />
<h4>Demo</h4><br />
<br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe width="640" height="360" src="//www.youtube.com/embed/SEONZKrYcrM" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Implement an interactive installation, integrating use of gesture-recognition and tangible interface</li><br />
<li>Distribute the web application and explore potential educational uses</li><br />
<li>Continue to study the effectiveness of the application in facilitating the learning experience</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.alerts.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.placeholder.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.tooltips.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
<br />
<br />
</body><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/zTreeTeam:Wellesley Desyne/zTree2013-09-27T16:17:40Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>zTree</h3> <br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style="float:right;"><img src="https://static.igem.org/mediawiki/2013/d/d4/Wellesley_ztree_logo.png"></div><br />
<p>zTree is an interactive, 3D visualization of the <a href="http://parts.igem.org/Main_Page">Registry of Standard Biological Parts</a> that draws upon <a href="http://www2.parc.com/istl/groups/uir/publications/items/UIR-1991-06-Robertson-CHI91-Cone.pdf">Parc’s Cone Trees</a> visualization technique for representing hierarchical information. <br />
The top of the hierarchy represents a particular library, with nodes drawn like index cards to represent a generic part type&mdash;marked using <a href="http://www.sbolstandard.org/">Synthetic Biology Open Language (SBOL)</a> symbols&mdash;or a concrete biological part. <br />
<br />
<p>In zTree, a user can browse or search for a part of interest, display the data sheet for the part, and export any selected parts to a plain text file, which can then be imported <br />
into other programs for further use. The program also features an action log for user testing.</p><br />
</div><br />
<br />
<h4>Implementation</h4><br />
<br />
<p>zTree was built in <a href="http://unity3d.com/" target="_blank">Unity</a> using the <a href="https://support.zspace.com/entries/21614256-zSpace-SDK-Releases" target="_blank">zSpace SDK</a> programmed in C#. The meshes were rendered in Blender and the data are pulled via the <a href="http://parts.igem.org/Registry_API" target="_blank">Registry API</a>. zTree was implemented for the <a href="https://zspace.com/the-zspace-system/ target="_blank"">zSpace system</a>, a 3D holographic display that provides six degrees of freedom when interacting with objects on screen. The display takes advantage of <a href="http://zspace.com/uiguidelines/#intro.htm?Highlight=motion">binocular vision and motion parallax</a>, two cognitive immersion cues, to render a realistic image. </p><br />
<br />
<h4>Purpose</h4><br />
<br />
<p>2D representations of large data sets typically do not fit within the confines of a standard screen, forcing the user to scroll or resize to see the data in its entirety. zTree's use of 3D carousels maximizes screen real estate, thereby allowing the user to visualize the whole structure at once.<br />
<br />
<ol class="list_default">Our goals for zTree this summer were twofold:<br />
<li>Provide users with an intuitive, interactive way to navigate the Registry of Standard Biological Parts.</li><br />
<li>Create a modular enough solution so that the application could eventually be used for a wide array of part registries and libraries.</li><br />
</ol><br />
<!--Start row--><br />
<div class="row"><br />
<div class="large-4 large-offset-2 columns"><br />
<img src="https://static.igem.org/mediawiki/2013/5/5d/Wellesley_zTree4.jpg" width="300" height="300" margin="100" align="center"><br />
<figcaption class="caption">Users can search by part type, such as promoter or terminator, in the topmost carousel. </figcaption><br />
</div><br />
<div class="large-4 columns"><br />
<img src="https://static.igem.org/mediawiki/2013/6/6a/Wellesley_zTree3.jpg" width="300" height="300" margin="100" align="center"><br />
<figcaption class="caption">A second carousel appears beneath the first one, allowing the user to choose a more specific part type.</figcaption><br />
</div><br />
<div class="large-2 columns"></div><br />
</div><br />
<!--End row--><br />
<br />
<!--Start row--><br />
<div class="row"><br />
<div class="large-4 large-offset-2 columns"><br />
<img src="https://static.igem.org/mediawiki/2013/1/1e/Wellesley_zTree2.jpg" width="300" height="300" margin="100" align="center"><br />
<figcaption class="caption">Choosing yet a more specific part type.</figcaption><br />
</div><br />
<div class="large-4 columns"><br />
<img src="https://static.igem.org/mediawiki/2013/1/17/Wellesley_zTree1.jpg" width="300" height="300" margin="100" align="center"><br />
<figcaption class="caption">Users can then choose an individual part to view more information about it. They can also view the hierarchy of the part.</figcaption><br />
</div><br />
<div class="large-2 columns"></div><br />
</div><br />
<!--End row--><br />
<br />
<h4>Results</h4><br />
<p>We conducted a preliminary usability study of zTree with 9 Wellesley College students. The study employed a within subjects design, aiming to compare how students accomplished a series of simple tasks on zTree versus the Registry of Standard Biological Parts website. The students were asked to browse for a specific part, estimate the number of parts in a category, and compare two different part types.<br />
<br />
<div style="float: right; padding: 20px; width: 450px;"><br />
<img src="https://static.igem.org/mediawiki/2013/c/c7/Wc_ztree_graph.png"><br />
<div class="panel" style="margin-top:10px;"><br />
<figcaption style="font-size: 14px; line-height: 16px;"><strong>FIGURE. </strong>Application chosen by participants as easiest to use, zTree or the Registry website, for individual subtasks.</figcaption><br />
</div><br />
</div><br />
<br />
<ol class="list_default">The task list was devised to:<br />
<li>Study the effect of zTree's carousel structure on the user’s ability to understand hierarchical relationships and estimate the size of the data space.</li><br />
<li>Improve functionality and evaluate overall experience through qualitative user feedback and survey responses.</li><br />
</ol><br />
<br />
<p>After the study, participants were asked to choose the application that was easier to use, zTree or the Registry website, for individual subtasks. People generally found zTree more helpful than the Registry in terms of visualizing the entire structure and understanding hierarchy (see Figure at right). <br />
<br />
<p>User quotes consistently provided support for these findings:<br />
<ul class="list_default"><br />
<li>“It's great how easy it is to compare and view relationships of the different parts.”</li><br />
<li>"I really liked being able to browse through multiple hierarchies at once."</li><br />
<li>"I liked the visual structure of the data. It made it really easy to understand the hierarchy of the information I was viewing."</li><br />
</ul><br />
<br />
<p>6 of the 9 users also "Agreed" or “Strongly Agreed” that the zTree application was visually appealing. We also received constructive criticism and feedback, which have informed our future goals for zTree.<br />
<br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe width="640" height="360" align="center" src="//www.youtube.com/embed/wJKu_SNwV6E" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br><br />
<br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Animate carousels on and off screen</li><br />
<li>Improve search function for specific parts</li><br />
<li>Allow use of data sets from other databases</li><br />
<li>Eliminate "ghosting" to improve visualization</li><br />
<li>Allow use of pen for navigation and spinning of carousels</li><br />
</ul><br />
</div><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.alerts.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.placeholder.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.tooltips.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
<br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/zTreeTeam:Wellesley Desyne/zTree2013-09-27T16:15:39Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>zTree</h3> <br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style="float:right;"><img src="https://static.igem.org/mediawiki/2013/d/d4/Wellesley_ztree_logo.png"></div><br />
<p>zTree is an interactive, 3D visualization of the <a href="http://parts.igem.org/Main_Page">Registry of Standard Biological Parts</a> that draws upon <a href="http://www2.parc.com/istl/groups/uir/publications/items/UIR-1991-06-Robertson-CHI91-Cone.pdf">Parc’s Cone Trees</a> visualization technique for representing hierarchical information. <br />
The top of the hierarchy represents a particular library, with nodes drawn like index cards to represent a generic part type&mdash;marked using <a href="http://www.sbolstandard.org/">Synthetic Biology Open Language (SBOL)</a> symbols&mdash;or a concrete biological part. <br />
<br />
<p>In zTree, a user can browse or search for a part of interest, display the data sheet for the part, and export any selected parts to a plain text file, which can then be imported <br />
into other programs for further use. The program also features an action log for user testing.</p><br />
</div><br />
<br />
<h4>Implementation</h4><br />
<br />
<p>zTree was built in <a href="http://unity3d.com/" target="_blank">Unity</a> using the <a href="https://support.zspace.com/entries/21614256-zSpace-SDK-Releases" target="_blank">zSpace SDK</a> programmed in C#. The meshes were rendered in Blender and the data are pulled via the <a href="http://parts.igem.org/Registry_API" target="_blank">Registry API</a>. zTree was implemented for the <a href="https://zspace.com/the-zspace-system/ target="_blank"">zSpace system</a>, a 3D holographic display that provides six degrees of freedom when interacting with objects on screen. The display takes advantage of <a href="http://zspace.com/uiguidelines/#intro.htm?Highlight=motion">binocular vision and motion parallax</a>, two cognitive immersion cues, to render a realistic image. </p><br />
<br />
<h4>Purpose</h4><br />
<br />
<p>2D representations of large data sets typically do not fit within the confines of a standard screen, forcing the user to scroll or resize to see the data in its entirety. zTree's use of 3D carousels maximizes screen real estate, thereby allowing the user to visualize the whole structure at once.<br />
<br />
<ol class="list_default">Our goals for zTree this summer were twofold:<br />
<li>Provide users with an intuitive, interactive way to navigate the Registry of Standard Biological Parts.</li><br />
<li>Create a modular enough solution so that the application could eventually be used for a wide array of data sets.</li><br />
</ol><br />
<!--Start row--><br />
<div class="row"><br />
<div class="large-4 large-offset-2 columns"><br />
<img src="https://static.igem.org/mediawiki/2013/5/5d/Wellesley_zTree4.jpg" width="300" height="300" margin="100" align="center"><br />
<figcaption class="caption">Users can search by part type, such as promoter or terminator, in the topmost carousel. </figcaption><br />
</div><br />
<div class="large-4 columns"><br />
<img src="https://static.igem.org/mediawiki/2013/6/6a/Wellesley_zTree3.jpg" width="300" height="300" margin="100" align="center"><br />
<figcaption class="caption">A second carousel appears beneath the first one, allowing the user to choose a more specific part type.</figcaption><br />
</div><br />
<div class="large-2 columns"></div><br />
</div><br />
<!--End row--><br />
<br />
<!--Start row--><br />
<div class="row"><br />
<div class="large-4 large-offset-2 columns"><br />
<img src="https://static.igem.org/mediawiki/2013/1/1e/Wellesley_zTree2.jpg" width="300" height="300" margin="100" align="center"><br />
<figcaption class="caption">Choosing yet a more specific part type.</figcaption><br />
</div><br />
<div class="large-4 columns"><br />
<img src="https://static.igem.org/mediawiki/2013/1/17/Wellesley_zTree1.jpg" width="300" height="300" margin="100" align="center"><br />
<figcaption class="caption">Users can then choose an individual part to view more information about it. They can also view the hierarchy of the part.</figcaption><br />
</div><br />
<div class="large-2 columns"></div><br />
</div><br />
<!--End row--><br />
<br />
<h4>Results</h4><br />
<p>We conducted a preliminary usability study of zTree with 9 Wellesley College students. The study employed a within subjects design, aiming to compare how students accomplished a series of simple tasks on zTree versus the Registry of Standard Biological Parts website. The students were asked to browse for a specific part, estimate the number of parts in a category, and compare two different part types.<br />
<br />
<div style="float: right; padding: 20px; width: 450px;"><br />
<img src="https://static.igem.org/mediawiki/2013/c/c7/Wc_ztree_graph.png"><br />
<div class="panel" style="margin-top:10px;"><br />
<figcaption style="font-size: 14px; line-height: 16px;"><strong>FIGURE. </strong>Application chosen by participants as easiest to use, zTree or the Registry website, for individual subtasks.</figcaption><br />
</div><br />
</div><br />
<br />
<ol class="list_default">The task list was devised to:<br />
<li>Study the effect of zTree's carousel structure on the user’s ability to understand hierarchical relationships and estimate the size of the data space.</li><br />
<li>Improve functionality and evaluate overall experience through qualitative user feedback and survey responses.</li><br />
</ol><br />
<br />
<p>After the study, participants were asked to choose the application that was easier to use, zTree or the Registry website, for individual subtasks. People generally found zTree more helpful than the Registry in terms of visualizing the entire structure and understanding hierarchy (see Figure at right). <br />
<br />
<p>User quotes consistently provided support for these findings:<br />
<ul class="list_default"><br />
<li>“It's great how easy it is to compare and view relationships of the different parts.”</li><br />
<li>"I really liked being able to browse through multiple hierarchies at once."</li><br />
<li>"I liked the visual structure of the data. It made it really easy to understand the hierarchy of the information I was viewing."</li><br />
</ul><br />
<br />
<p>6 of the 9 users also "Agreed" or “Strongly Agreed” that the zTree application was visually appealing. We also received constructive criticism and feedback, which have informed our future goals for zTree.<br />
<br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe width="640" height="360" align="center" src="//www.youtube.com/embed/wJKu_SNwV6E" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br><br />
<br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Animate carousels on and off screen</li><br />
<li>Improve search function for specific parts</li><br />
<li>Allow use of data sets from other databases</li><br />
<li>Eliminate "ghosting" to improve visualization</li><br />
<li>Allow use of pen for navigation and spinning of carousels</li><br />
</ul><br />
</div><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.alerts.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.placeholder.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.tooltips.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
<br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/zTreeTeam:Wellesley Desyne/zTree2013-09-27T16:04:06Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>zTree</h3> <br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style="float:right;"><img src="https://static.igem.org/mediawiki/2013/d/d4/Wellesley_ztree_logo.png"></div><br />
<p>zTree is an interactive, 3D visualization of the <a href="http://parts.igem.org/Main_Page">Registry of Standard Biological Parts</a> that draws upon <a href="http://www2.parc.com/istl/groups/uir/publications/items/UIR-1991-06-Robertson-CHI91-Cone.pdf">Parc’s Cone Trees</a> visualization technique for representing hierarchical information. <br />
The top of the hierarchy represents a particular library, with nodes drawn like index cards to represent a generic part type&mdash;marked using <a href="http://www.sbolstandard.org/">Synthetic Biology Open Language (SBOL)</a> symbols&mdash;or a concrete biological part. <br />
<br />
<p>In zTree, a user can browse or search for a part of interest, display the data sheet for the part, and export any selected parts to a plain text file, which can then be imported <br />
into other programs for further use. The program also features an action log for user testing.</p><br />
</div><br />
<br />
<h4>Implementation</h4><br />
<br />
<p>zTree was built in <a href="http://unity3d.com/" target="_blank">Unity</a> using the <a href="https://support.zspace.com/entries/21614256-zSpace-SDK-Releases" target="_blank">zSpace SDK</a> programmed in C#. The meshes were rendered in Blender and the data are pulled via the <a href="http://parts.igem.org/Registry_API" target="_blank">Registry API</a>. zTree was implemented for the <a href="https://zspace.com/the-zspace-system/ target="_blank"">zSpace system</a>, a 3D holographic display that provides six degrees of freedom when interacting with objects on screen. The display takes advantage of binocular vision and motion parallax to render a realistic image. </p><br />
<br />
<h4>Purpose</h4><br />
<br />
<p>2D representations of large data sets typically do not fit within the confines of a standard screen, forcing the user to scroll or resize to see the data in its entirety. zTree's use of 3D carousels maximizes screen real estate, thereby allowing the user to visualize the whole structure at once.<br />
<br />
<ol class="list_default">Our goals for zTree this summer were twofold:<br />
<li>Provide users with an intuitive, interactive way to navigate the Registry of Standard Biological Parts.</li><br />
<li>Create a modular enough solution so that the application could eventually be used for a wide array of data sets.</li><br />
</ol><br />
<!--Start row--><br />
<div class="row"><br />
<div class="large-4 large-offset-2 columns"><br />
<img src="https://static.igem.org/mediawiki/2013/5/5d/Wellesley_zTree4.jpg" width="300" height="300" margin="100" align="center"><br />
<figcaption class="caption">Users can search by part type, such as promoter or terminator, in the topmost carousel. </figcaption><br />
</div><br />
<div class="large-4 columns"><br />
<img src="https://static.igem.org/mediawiki/2013/6/6a/Wellesley_zTree3.jpg" width="300" height="300" margin="100" align="center"><br />
<figcaption class="caption">A second carousel appears beneath the first one, allowing the user to choose a more specific part type.</figcaption><br />
</div><br />
<div class="large-2 columns"></div><br />
</div><br />
<!--End row--><br />
<br />
<!--Start row--><br />
<div class="row"><br />
<div class="large-4 large-offset-2 columns"><br />
<img src="https://static.igem.org/mediawiki/2013/1/1e/Wellesley_zTree2.jpg" width="300" height="300" margin="100" align="center"><br />
<figcaption class="caption">Choosing yet a more specific part type.</figcaption><br />
</div><br />
<div class="large-4 columns"><br />
<img src="https://static.igem.org/mediawiki/2013/1/17/Wellesley_zTree1.jpg" width="300" height="300" margin="100" align="center"><br />
<figcaption class="caption">Users can then choose an individual part to view more information about it. They can also view the hierarchy of the part.</figcaption><br />
</div><br />
<div class="large-2 columns"></div><br />
</div><br />
<!--End row--><br />
<br />
<h4>Results</h4><br />
<p>We conducted a preliminary usability study of zTree with 9 Wellesley College students. The study employed a within subjects design, aiming to compare how students accomplished a series of simple tasks on zTree versus the Registry of Standard Biological Parts website. The students were asked to browse for a specific part, estimate the number of parts in a category, and compare two different part types.<br />
<br />
<div style="float: right; padding: 20px; width: 450px;"><br />
<img src="https://static.igem.org/mediawiki/2013/c/c7/Wc_ztree_graph.png"><br />
<div class="panel" style="margin-top:10px;"><br />
<figcaption style="font-size: 14px; line-height: 16px;"><strong>FIGURE. </strong>Application chosen by participants as easiest to use, zTree or the Registry website, for individual subtasks.</figcaption><br />
</div><br />
</div><br />
<br />
<ol class="list_default">The task list was devised to:<br />
<li>Study the effect of zTree's carousel structure on the user’s ability to understand hierarchical relationships and estimate the size of the data space.</li><br />
<li>Improve functionality and evaluate overall experience through qualitative user feedback and survey responses.</li><br />
</ol><br />
<br />
<p>After the study, participants were asked to choose the application that was easier to use, zTree or the Registry website, for individual subtasks. People generally found zTree more helpful than the Registry in terms of visualizing the entire structure and understanding hierarchy (see Figure at right). <br />
<br />
<p>User quotes consistently provided support for these findings:<br />
<ul class="list_default"><br />
<li>“It's great how easy it is to compare and view relationships of the different parts.”</li><br />
<li>"I really liked being able to browse through multiple hierarchies at once."</li><br />
<li>"I liked the visual structure of the data. It made it really easy to understand the hierarchy of the information I was viewing."</li><br />
</ul><br />
<br />
<p>6 of the 9 users also "Agreed" or “Strongly Agreed” that the zTree application was visually appealing. We also received constructive criticism and feedback, which have informed our future goals for zTree.<br />
<br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe width="640" height="360" align="center" src="//www.youtube.com/embed/wJKu_SNwV6E" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br><br />
<br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Animate carousels on and off screen</li><br />
<li>Improve search function for specific parts</li><br />
<li>Allow use of data sets from other databases</li><br />
<li>Eliminate "ghosting" to improve visualization</li><br />
<li>Allow use of pen for navigation and spinning of carousels</li><br />
</ul><br />
</div><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.alerts.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.placeholder.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.tooltips.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
<br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/EugenieTeam:Wellesley Desyne/Eugenie2013-09-27T16:01:49Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Eugenie</h3><br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style = "float:right; padding-bottom: 20px;"><img src="https://static.igem.org/mediawiki/2013/f/fc/Eugenie_logo_small.png" width="180"></div><br />
<p>Eugenie is a multi-touch application for designing biological circuits using the programming language <a href="http://eugenecad.org/">Eugene</a>. The visual language we created for Eugenie allows synthetic biologists to harness the power of Eugene without having to write Eugene code. The application consists of three representations of the circuit: “TreeView,” “FlowView,” and “EugeneView.” The user can search through <a href="http://clothocad.org/">Clotho</a> and iGEM databases to find the biological parts desired and can drag them to the workspace, graphically create Eugene rules, and view live-updating Eugene code for the circuit. After the user is done specifying a circuit, she or he can then view the search results, which displays the possible permutations of a circuit based on a collection of parts. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to prune the results.</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
The design process is divided into three main views: TreeView, FlowView, and EugeneView. A user starts by searching for parts from the Part Registry or their Clotho database and bringing them into their worskspace. In the TreeView, users can specify the order and structure of their design. The behavior of parts in the device is specified using the FlowView. Users specify structure and behavior using a visual language that we developed specifically for the application; the language utilizes SBOL symbols, an open-source standard for in silico representation of genetic designs. The EugeneView updates automatically throughout the design process, and users may click on individual parts in order to see the corresponding code highlighted in the EugeneView. Finally, users may view and export their results to a CSV or <a href="http://pigeoncad.org/">Pigeon</a> files in the ResultsView. <br />
<br><br><br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/9b/Whci_Eugenie_treeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Create the structure of the circuit in the TreeView. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/a/af/S3.png" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Define rules between parts in the FlowView.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/93/Whci_Eugenie_codeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">View live-updating Eugene code in the EugeneView.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_Eugenie_resultsview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Generate and export results in the ResultsView.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4> Implementation </h4><br />
<p>We implemented Eugenie using C#, XAML and the Surface <a href="http://msdn.microsoft.com/en-us/library/ff727815.aspx"> SDK 2.0</a>. We also used the <a href="http://en.wikipedia.org/wiki/Model_View_ViewModel"> MVVM </a> framework, <a href = "http://www.eugenecad.org/"> Eugene </a> for the creation of synthetic biology circuits, and <a href="http://pigeoncad.org/">Pigeon</a> to display the circuits visually. </p><br />
<br />
<h4> Goals </h4><br />
We had four goals in creating Eugenie:<br />
<ul class="list_default"><br />
<li>Implementing top-down design<br>We utilized the functionality of Eugene, a programming language that is used to implement top-down design of novel genetic circuits.</li><br />
<li>Enhancing sensemaking<br>We implemented sliding panel views, which allow users the option to view multiple sets of information simultaneously or one set at a time, helping users understand the connection between the different types of presentation.</li><br />
<li>Supporting resource integration<br>We give users the option to load parts from the parts registry, access parts in a Clotho database, or use a local database.</li><br />
<li>Fostering collaboration<br> We used the Microsoft PixelSense, which allows multiple people to use Eugenie simultaneously.</li><br />
</ul><br />
<br />
<h4>Results</h4><br />
<br />
<div style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300"><div style="width: 300px"><figcaption width="300"> Results showing users' experience with Eugenie. </figcaption></div></div><br />
<br />
<p>We conducted user-testing with Eugenie with members of the BU and MIT iGem teams as well as Wellesley College students. In our study, we introduced participants to Eugene, the visual language we had created, and the Eugenie user interface. Users were then tasked with first interpreting genetic devices from our visual language and then translating genetic devices represented in SBOL visualization into our visual language. We next asked participants to use our program to create one of the genetic devices they had translated. Participants rated the ease of understanding the visual language and of using the program. We also asked participants for their feedback on how the program could be improved. Overall response was positive, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work. <br />
</p><br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/EQoIXLh1SxI" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Supplement part information with additional information from previous iGEM projects and other synthetic biology databases</li><br />
<li>Allow users to access more parts from other synthetic biology databases</li><br />
<li>Expedite the process for synthetic biologists to create genetic circuits</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/EugenieTeam:Wellesley Desyne/Eugenie2013-09-27T15:57:16Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Eugenie</h3><br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style = "float:right; padding-bottom: 20px;"><img src="https://static.igem.org/mediawiki/2013/f/fc/Eugenie_logo_small.png" width="180"></div><br />
<p>Eugenie is a multi-touch application for designing biological circuits using the programming language <a href="http://eugenecad.org/">Eugene</a>. The visual language we created for Eugenie allows synthetic biologists to harness the power of Eugene without having to write Eugene code. The application consists of three representations of the circuit: “TreeView,” “FlowView,” and “EugeneView.” The user can search through <a href="http://clothocad.org/">Clotho</a> and iGEM databases to find the biological parts desired and can drag them to the workspace, graphically create Eugene rules, and view live-updating Eugene code for the circuit. After the user is done specifying a circuit, she or he can then view the search results, which displays the possible permutations of a circuit based on a collection of parts. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to prune the results.</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
The design process is divided into three main views: TreeView, FlowView, and EugeneView. A user starts by searching for parts from the Part Registry or their Clotho database and bringing them into their worskspace. In the TreeView, users can specify the order and structure of their design. The behavior of parts in the device is specified using the FlowView. Users specify structure and behavior using a visual language that we developed specifically for the application; the language utilizes SBOL symbols, an open-source standard for in silico representation of genetic designs. The EugeneView updates automatically throughout the design process, and users may click on individual parts in order to see the corresponding code highlighted in the EugeneView. Finally, users may view and export their results to a CSV or <a href="http://pigeoncad.org/">Pigeon</a> files in the ResultsView. <br />
<br><br><br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/9b/Whci_Eugenie_treeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Create the structure of the circuit in the TreeView. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/a/af/S3.png" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Define rules between parts in the FlowView.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/93/Whci_Eugenie_codeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">View live-updating Eugene code in the EugeneView.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_Eugenie_resultsview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Generate and export results in the ResultsView.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4> Implementation </h4><br />
<p>We implemented Eugenie using C#, XAML and the Surface <a href="http://msdn.microsoft.com/en-us/library/ff727815.aspx"> SDK 2.0</a>. We also used the <a href="http://en.wikipedia.org/wiki/Model_View_ViewModel"> MVVM </a> framework, <a href = "http://www.eugenecad.org/"> Eugene </a> for the creation of synthetic biology circuits, and <a href="http://pigeoncad.org/">Pigeon</a> to display the circuits visually. </p><br />
<br />
<h4> Goals </h4><br />
We had four goals in creating Eugenie:<br />
<ul class="list_default"><br />
<li>Implementing top-down design<br>We utilized the functionality of Eugene, a programming language that is used to implement top-down design of novel genetic circuits.</li><br />
<li>Enhancing sensemaking<br>We implemented sliding panel views, which allow users the option to view multiple sets of information simultaneously or one set at a time, helping users understand the connection between the different types of presentation.</li><br />
<li>Supporting resource integration<br>We give users the option to load parts from the parts registry, access parts in a Clotho database, or use a local database.</li><br />
<li>Fostering collaboration<br> We used the Microsoft PixelSense, which allows multiple people to use Eugenie simultaneously.</li><br />
</ul><br />
<br />
<h4>Results</h4><br />
<br />
<div style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300"><div style="width: 300px"><figcaption width="300"> Results showing users' positive experience with Eugenie. </figcaption></div></div><br />
<br />
<p>We conducted user-testing with Eugenie with members of the BU and MIT iGem teams as well as Wellesley College students. In our study, students were given a brief explanation of synthetic biology, Eugene, the visual language we had created and the Eugenie user interface, and our project goals, and were then tasked with first interpreting genetic devices from our visual language and then translating genetic devices represented in SBOL visualization into our visual language. Then, participants were tasked with using our program to create one of the genetic devices they had translated. We asked participants to rate the ease of understanding the visual language and using the program. We also asked participants for their feedback on how the program could be improved. Overall response was positive, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work. <br />
</p><br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/EQoIXLh1SxI" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Supplement part information with additional information from previous iGEM projects and other synthetic biology databases</li><br />
<li>Allow users to access more parts from other synthetic biology databases</li><br />
<li>Expedite the process for synthetic biologists to create genetic circuits</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/EugenieTeam:Wellesley Desyne/Eugenie2013-09-27T15:41:21Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<h3>Eugenie</h3><br />
<br />
<div class="panel"><br />
<h4>TOOL OVERVIEW</h4><br />
<br><br />
<div style = "float:right; padding-bottom: 20px;"><img src="https://static.igem.org/mediawiki/2013/f/fc/Eugenie_logo_small.png" width="180"></div><br />
<p>Eugenie is a multi-touch application for designing biological circuits using the programming language Eugene. The visual language we created for Eugenie allows synthetic biologists to harness the power of Eugene without having to write Eugene code. The application consists of three representations of the circuit: “TreeView,” “FlowView,” and “EugeneView.” The user can search through the Clotho and iGEM databases to find the biological parts desired and can drag them to the workspace, graphically create Eugene rules, and view live-updating Eugene code for the circuit. After the user is done specifying a circuit, she or he can then view the search results, which display the possible permutations of a circuit based on a collection of parts. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like prune the results.</p><br />
</div><br />
<br />
<br />
<h4>Design</h4><br />
The design process is divided into three main views: TreeView, FlowView, and EugeneView. In the TreeView, users can specify the order and structure of their design. The behavior of parts in the device is specified using the FlowView. Users specify structure and behavior using a visual language that we developed specifically for the application; the language utilizes SBOL symbols, an open-source standard for in silico representation of genetic designs. The EugeneView updates automatically throughout the design process, and users may click on individual parts in order to see the corresponding code highlighted in the EugeneView. Finally, users may view and export their results to a CSV or <a href="http://pigeoncad.org/">Pigeon</a> files in the ResultsView. <br />
<br><br><br />
<table width="900" align="center"><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/9b/Whci_Eugenie_treeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Create the structure of the circuit in the TreeView. </figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/a/af/S3.png" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Define rules between parts in the FlowView.</figcaption></div></td><br />
</tr><br />
<br />
<tr><br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/93/Whci_Eugenie_codeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">View live-updating Eugene code in the EugeneView.</figcaption></div></td><br />
<br />
<td align="center"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_Eugenie_resultsview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Generate and export results in the ResultsView.</figcaption></div></td><br />
</tr><br />
<br />
</table><br />
<br />
<h4> Implementation </h4><br />
<p>We implemented Eugenie using C#, XAML and the Surface <a href="http://msdn.microsoft.com/en-us/library/ff727815.aspx"> SDK 2.0</a>. We also used the <a href="http://en.wikipedia.org/wiki/Model_View_ViewModel"> MVVM </a> framework and <a href = "http://www.eugenecad.org/"> Eugene </a> for the creation of synthetic biology circuits. </p><br />
<br />
<h4> Goals </h4><br />
We had four goals in creating Eugenie:<br />
<ul class="list_default"><br />
<li>Implementing top-down design<br>We utilized the functionality of Eugene, a programming language that is used to implement top-down design of novel genetic circuits.</li><br />
<li>Enhancing sensemaking<br>We implemented sliding panel views, which allow users the option to view multiple sets of information simultaneously or one set at a time.</li><br />
<li>Supporting resource integration<br>We give users the option to load parts from the parts registry, access parts in a Clotho database, or use a local database.</li><br />
<li>Fostering collaboration<br> We used the Microsoft PixelSense, which allows multiple people to use Eugenie simultaneously.</li><br />
</ul><br />
<br />
<h4>Results</h4><br />
<br />
<div style = "float:right; width:"400px"; margin:"40px"><br />
<img src="https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300"><div style="width: 300px"><figcaption width="300"> Results showing users' positive experience with Eugenie. </figcaption></div></div><br />
<br />
<p>We conducted user-testing with Eugenie with members of the BU and MIT iGem teams as well as Wellesley College students. In our study, students were given a brief explanation of synthetic biology, Eugene, the visual language we had created and the Eugenie user interface, and our project goals, and were then tasked with first interpreting genetic devices from our visual language and then translating genetic devices represented in SBOL visualization into our visual language. Then, participants were tasked with using our program to create one of the genetic devices they had translated. We asked participants to rate the ease of understanding the visual language and using the program. We also asked participants for their feedback on how the program could be improved. Overall response was positive, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work. <br />
</p><br />
<br />
<br />
<h4>Demo</h4><br />
<div style = "margin-left:auto;<br />
margin-right:auto; width:640px;"><br />
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/EQoIXLh1SxI" frameborder="0" allowfullscreen></iframe><br />
</div><br />
<br><br />
<h4>Future Work</h4><br />
<ul class="list_default"><br />
<li>Supplement part information with additional information from previous iGEM projects and other synthetic biology databases</li><br />
<li>Allow users to access more parts from other synthetic biology databases</li><br />
<li>Expedite the process for synthetic biologists to create genetic circuits</li><br />
</ul><br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/Project_OverviewTeam:Wellesley Desyne/Project Overview2013-09-27T15:31:34Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<!--Actual content--><br />
<h3>Project Description</h3><br />
<p><br />
Synthetic biology is a multi-disciplinary field that requires a collaborative environment in order to engineer the complex biological systems of the future. To help create that environment, our team is designing software tools – tools that address specific technical synthetic biology challenges in order to ease synthetic biology research and increase its learnability. In addition, since synthetic biology is a new and emerging field, it is important to pay attention to how the public perceives such research. Careful attention is given to this as we create our applications. <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a> is a multi-touch application that allows synthetic biologists to use the programming language Eugene without actually having to code. <a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a> makes use of zSpace, a holographic computing machine, to aid scientists in navigating and visualizing large data collections. <a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a> focuses on representing hierarchical data in an intuitive and interactive manner. Finally, <a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a> is an interactive web application that aims to communicate core concepts of synthetic biology to nonscientists. <br />
<br />
<p>As a human-computer interaction (HCI) lab, our team applies a user-centered design process to tackle the challenges that synthetic biologists face while simultaneously applying HCI techniques to create intuitive tools and foster a more collaborative design environment.<br />
</p><br />
<br />
<br />
<div class="row"><br />
<div class="row"><br />
<div class="large-4 columns"><a href = "https://2013.igem.org/Team:Wellesley_Desyne/Eugenie"><br />
<img src = "https://static.igem.org/mediawiki/2013/a/af/Wellesley_eugenie_overview.jpg"> <br />
</a></div><br />
<div class="large-4 columns"><a href = "https://2013.igem.org/Team:Wellesley_Desyne/zTree"><br />
<img src = "https://static.igem.org/mediawiki/2013/5/5e/Wellesley_zTree_overview.jpg"> <br />
</a></div><br />
<div class="large-4 columns"><a href = "https://2013.igem.org/Team:Wellesley_Desyne/BAC"><br />
<img src = "https://static.igem.org/mediawiki/2013/5/55/Wellesley_bac_overview.jpg"> <br />
</a></div><br />
</div><br />
<div class="large-4 columns"><h4 style="text-align:center;">Eugenie <img src="https://static.igem.org/mediawiki/2013/8/8a/Eugenie_logo_xsmallv2.png"></h5></div><br />
<div class="large-4 columns"><h4 style="text-align:center;">zTree<img src="https://static.igem.org/mediawiki/2013/8/8b/Wellesley_ztree_logo_xsmallv2.png"></h5></div><br />
<div class="large-4 columns"><h4 style="text-align:center;">Bac to the Future<img src="https://static.igem.org/mediawiki/2013/d/d8/Bac_logo_xsmall.png"></h5></div><br />
</div><br />
<br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<br />
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_zepto.js"></script><br />
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.js"></script><br />
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.dropdown.js"></script><br />
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/Tips_TricksTeam:Wellesley Desyne/Tips Tricks2013-09-27T15:28:25Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Notebooks</title> <br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<h3>Tips & Tricks</h3><br />
<p>This section is intended to help future iGEM teams or developers intending to work with the software and platforms we used over this summer. </p><br />
<br />
<h4>Microsoft Surface Development</h4> <br />
<ul class="list_default"><br />
<li><a href="http://msdn.microsoft.com/en-us/library/ee786837(v=surface.10).aspx"><br />
Microsoft's intro to Surface development</a></li><br />
<li><a href="http://sethsandler.com/multitouch/">Intro to building a multi touch application</a></li><br />
<li><a href=http://www.codeplex.com/"> CodePlex</a> - allows you to see open source projects and download open source software. </li><br />
<li> <a href="http://msdn.microsoft.com/en-us/library/ms754130.aspx"> Intro to WPF,</a> <br />
<a href="http://www.wpftutorial.net/">Another WPF tutorial</a> - A necessary model to understand in order to create rich and interesting user interfaces for the Surface, which is built on WPF.<br />
<li> MVVM, based on the model-view-controller model, is another crucial model to understand. Also helpful for organizing the architecture of your code. <a href="http://blogs.msdn.com/b/erwinvandervalk/archive/2009/08/18/implementing-the-model-view-viewmodel-pattern.aspx">A brief overview of data MVVM can be found here.</a><br />
<li><a href="http://stackoverflow.com/"> Stack Overflow</a> - A very helpful resource for debugging and understanding more about software development. In particular, <a href="http://stackoverflow.com/questions/129772/how-to-begin-wpf-development">this</a> Stack Overflow page is useful for tips on starting WPF development.</li><br />
<li>The <a href="http://msdn.microsoft.com/en-us/vstudio/hh341490.aspx, http://msdn.microsoft.com/en-us/library/vstudio/67ef8sbd.aspx">basics of programming in C#</a> ,whether you need to learn or just brush up.</li><br />
<li> In the process of building your application, you’ll most likely need to pull information from the <a href=" http://parts.igem.org/Registry_API?title=Registry_API"> iGEM registry</a> for specific parts. Make use of the Registry API, which allows you to extract information about a particular part efficiently.<br />
</ul><br />
<br />
<h4>Z Space</h4><br />
<ul class="list_default"><br />
<li><a href = "http://unity3d.com/">Unity3D</a></li><br />
<li><a href = "https://www.google.com/search?q=unity&oq=unity&aqs=chrome..69i57j0j5j0j69i60.2545j0&sourceid=chrome&ie=UTF-8"> Google </a> helps with developing in Unity</li><br />
<li>The <a href = "https://support.zspace.com/categories/20059046-Community-Forum"> zSpace </a> forums are helpful when getting started and developing for zSpace..</li><br />
<li><a href = "https://2013.igem.org/Team:Wellesley_Desyne/Notebook/CassieNotebook"> Cassie </a> created a <a href= "https://support.zspace.com/categories/20059046-Community-Forum"> post </a> on the zSpace forum which highlights what she learned from Unity and zSpace development over the summer. </li><br />
</ul><br />
<br />
<h4>Web Development</h4><br />
<ul class="list_default"><br />
<li> <a href = "http://www.w3schools.com">W3 Schools </a> -A helpful resource for HTML, CSS and JavaScript</li><br />
<li><a href = "http://www.hongkiat.com/blog/48-excellent-html5-demos">HTML5 animation demos</a></li><br />
<li>The <a href = "https://dev.twitter.com" >Twitter API</a>, which we used to retrieve tweets</li><br />
<li> <a href = "https://developers.google.com/appengine/">Google App Engine</a> for our javascript framework</li><br />
</ul><br />
<br />
<br><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
<br />
</div><br />
</div><br />
</div><br />
</div><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<br />
<script><br />
$(document).foundation();<br />
</script><br />
</body><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_DesyneTeam:Wellesley Desyne2013-09-27T15:25:23Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title> <br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<script src="//code.jquery.com/jquery-latest.min.js"></script><br />
<script src="//unslider.com/unslider.min.js"></script><br />
<style type="text/css"><br />
.banner { position: relative; overflow: auto; }<br />
.banner li { list-style: none; }<br />
.banner ul li { float: left; }<br />
.banner ul li img {max-width: 970px;}<br />
<br />
</style><br />
<body><br />
<nav class="top-bar" style="padding-top: 0px; margin-top: 0px;"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="#">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="banner"><br />
<ul><br />
<li><img src="https://static.igem.org/mediawiki/2013/d/d7/Wellesley_slideshow_iGEM.jpg" /></li><br />
<li><img src="https://static.igem.org/mediawiki/2013/e/ee/Wellesley_slideshow_presentation.jpg" /></li><br />
<li><img src="https://static.igem.org/mediawiki/2013/9/9f/Wellesley_slideshow_Eugenie.jpg" /></li><br />
<li><img src="https://static.igem.org/mediawiki/2013/e/ee/Wellesley_slideshow_BACv2.jpg" /></li><br />
<li><img src="https://static.igem.org/mediawiki/2013/b/be/Wellesley_slideshow_zTree.jpg" /></li><br />
</ul><br />
<br />
</div><br />
</div><br />
</div><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<h4>Synthetic biology requires a multidisciplinary, collaborative design environment to engineer<br />
the complex biological systems of the future.</h4><br />
<p>Our team created a collection of software tools which<br />
address specific technical synthetic biology challenges while simultaneously advancing the way in<br />
which users interact with computing environments. Our software will support the workflow of the<br />
scientific process by supporting various steps: research, brainstorming, building, testing, troubleshooting,<br />
iteration, and analysis. The combination of human computer interaction, bio-design automation, and<br />
experimental design makes our effort unique in the iGEM experience and closes the loop on the<br />
design-build-test methodology.<br />
</p><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
</div><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.alerts.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.placeholder.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.tooltips.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<br />
<script><br />
$(function() {<br />
$('.banner').unslider({<br />
speed: 500, // The speed to animate each slide (in milliseconds)<br />
delay: 3000, // The delay between slide animations (in milliseconds)<br />
complete: function() {}, // A function that gets called after every slide animation<br />
keys: true, // Enable keyboard (left, right) arrow shortcuts<br />
dots: true, // Display dot navigation<br />
fluid: false // Support responsive design. May break non-responsive designs<br />
});<br />
});<br />
var unslider = $('.banner').unslider();<br />
<br />
$('.unslider-arrow').click(function() {<br />
var fn = this.className.split(' ')[1];<br />
<br />
// Either do unslider.data('unslider').next() or .prev() depending on the className<br />
unslider.data('unslider')[fn]();<br />
});<br />
$(document).foundation();<br />
</script><br />
<br />
</body><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/AcknowledgementTeam:Wellesley Desyne/Acknowledgement2013-09-27T14:26:26Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Notebooks</title> <br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<h3>Acknowledgements</h3><br />
<br />
<div class="panel" style = "float: right; margin: 10px; padding: 10px"><br />
<img src = "https://static.igem.org/mediawiki/2012/b/bc/Wellesley_acknowledgements.jpg" alt = "Team" width = "350px" > <br><br />
<figcaption width="300" class="caption">Presenting Eugenie to Wellesley community. </figcaption><br />
</div><br />
<br />
<br />
<p>We would like to thank The National Science Foundation, Agilent Technologies, Wellesley College, and The Howard Hughes Medical Institute for generously making our research this summer possible. <br />
<br />
<h3>Attributions and Contributions</h3><br />
<br />
<h4>Eugenie</h4><br />
<p>The application was designed by Tiffany Chen, Casey Grote, Catherine Guo, Evan Segreto, and Sravanti Tekumalla with input from Consuelo Valdes, Diana Eastman, and our advisor; Orit Shaer. Members of the BU iGem team and their advisor, Traci Haddock, provided input and advice during the design process. Ernst Oberortner provided an introduction to Eugene and advice.</p><br />
<br />
<h4>zTree</h4><br />
<p> zTree was designed by Cassie Hoef and Daniel Worstell and was inspired by a photo representation of tree structured data from the Palo Alto Research Center. They were advised by Orit Shaer, Consuelo Valdes, and Robert Kincaid. Daniel imported the data sheets from the Registry of Standard Biological Parts and Cassie designed much of the front end functionality, as well as the file IO. They were assisted by Yoav Segev, an intern.</p><br />
<br />
<h4>Bac to the Future</h4><br />
<p> Bac to the Future was primarily inspired by an experiment conducted by the Church Lab at Harvard Medical School, which used bacteria DNA to store encoded book citations. In addition, we drew inspiration from our participatory design session with the BU iGEM team, Robert Kincaid, and our lab experience with Professor Natalie Kuldell from MIT. The application was designed by Joanna Bi and Heather Petrow with input from Diana Eastman, Consuelo Valdes, and our advisor; Orit Shaer, and was implemented by Joanna Bi and Heather Petrow, with the help of Diana Eastman. Additionally, we were aided by interns: Neoreet Braha and Artemis Metaxas.</p> <br />
<br />
<br />
<h4>The iGEM Team Wiki</h4><br />
<p> The iGEM Team Wiki was designed by Casey Grote and implemented by Diana Eastman and the team.</p> <br />
<br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
</div><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.alerts.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.placeholder.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.tooltips.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
<script><br />
<br />
$(document).foundation();<br />
</script><br />
</body><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/AcknowledgementTeam:Wellesley Desyne/Acknowledgement2013-09-27T14:26:07Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Notebooks</title> <br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<h3>Acknowledgements</h3><br />
<br />
<divclass="panel" style = "float: right; margin: 10px; padding: 10px"><br />
<img src = "https://static.igem.org/mediawiki/2012/b/bc/Wellesley_acknowledgements.jpg" alt = "Team" width = "350px" > <br><br />
<figcaption width="300" class="caption">Presenting Eugenie to Wellesley community. </figcaption><br />
</div><br />
<br />
<br />
<p>We would like to thank The National Science Foundation, Agilent Technologies, Wellesley College, and The Howard Hughes Medical Institute for generously making our research this summer possible. <br />
<br />
<h3>Attributions and Contributions</h3><br />
<br />
<h4>Eugenie</h4><br />
<p>The application was designed by Tiffany Chen, Casey Grote, Catherine Guo, Evan Segreto, and Sravanti Tekumalla with input from Consuelo Valdes, Diana Eastman, and our advisor; Orit Shaer. Members of the BU iGem team and their advisor, Traci Haddock, provided input and advice during the design process. Ernst Oberortner provided an introduction to Eugene and advice.</p><br />
<br />
<h4>zTree</h4><br />
<p> zTree was designed by Cassie Hoef and Daniel Worstell and was inspired by a photo representation of tree structured data from the Palo Alto Research Center. They were advised by Orit Shaer, Consuelo Valdes, and Robert Kincaid. Daniel imported the data sheets from the Registry of Standard Biological Parts and Cassie designed much of the front end functionality, as well as the file IO. They were assisted by Yoav Segev, an intern.</p><br />
<br />
<h4>Bac to the Future</h4><br />
<p> Bac to the Future was primarily inspired by an experiment conducted by the Church Lab at Harvard Medical School, which used bacteria DNA to store encoded book citations. In addition, we drew inspiration from our participatory design session with the BU iGEM team, Robert Kincaid, and our lab experience with Professor Natalie Kuldell from MIT. The application was designed by Joanna Bi and Heather Petrow with input from Diana Eastman, Consuelo Valdes, and our advisor; Orit Shaer, and was implemented by Joanna Bi and Heather Petrow, with the help of Diana Eastman. Additionally, we were aided by interns: Neoreet Braha and Artemis Metaxas.</p> <br />
<br />
<br />
<h4>The iGEM Team Wiki</h4><br />
<p> The iGEM Team Wiki was designed by Casey Grote and implemented by Diana Eastman and the team.</p> <br />
<br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
</div><br />
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.alerts.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.placeholder.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.tooltips.js"></script><br />
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
<script><br />
<br />
$(document).foundation();<br />
</script><br />
</body><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/Project_OverviewTeam:Wellesley Desyne/Project Overview2013-09-27T14:19:36Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<!--Actual content--><br />
<h3>Project Description</h3><br />
<p><br />
Synthetic biology is a multi-disciplinary field that requires a collaborative environment in order to engineer the complex biological systems of the future. To help create that environment, our team is designing software tools – tools that address specific technical synthetic biology challenges in order to ease synthetic biology research and increase its learnability. In addition, since synthetic biology is a new and emerging field, it is important to pay attention to how the public perceives such research. Careful attention is given to this as we create our applications. <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a> is a multi-touch application that allows synthetic biologists to use the programming language Eugene without actually having to code. <a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a> makes use of zSpace, a holographic computing machine, to aid scientists in navigating and visualizing abstract data. <a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a> focuses on representing hierarchical data in an intuitive and interactive manner. Finally, <a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a> is an interactive web application that aims to communicate core concepts of synthetic biology to those who are nonscientists. <br />
<br />
<p>As a human-computer interaction (HCI) lab, our team tackles the challenges that synthetic biologists face while simultaneously applying HCI techniques to create intuitive tools and foster a more collaborative design environment.<br />
</p><br />
<br />
<br />
<div class="row"><br />
<div class="row"><br />
<div class="large-4 columns"><a href = "https://2013.igem.org/Team:Wellesley_Desyne/Eugenie"><br />
<img src = "https://static.igem.org/mediawiki/2013/a/af/Wellesley_eugenie_overview.jpg"> <br />
</a></div><br />
<div class="large-4 columns"><a href = "https://2013.igem.org/Team:Wellesley_Desyne/zTree"><br />
<img src = "https://static.igem.org/mediawiki/2013/5/5e/Wellesley_zTree_overview.jpg"> <br />
</a></div><br />
<div class="large-4 columns"><a href = "https://2013.igem.org/Team:Wellesley_Desyne/BAC"><br />
<img src = "https://static.igem.org/mediawiki/2013/5/55/Wellesley_bac_overview.jpg"> <br />
</a></div><br />
</div><br />
<div class="large-4 columns"><h4 style="text-align:center;">Eugenie <img src="https://static.igem.org/mediawiki/2013/8/8a/Eugenie_logo_xsmallv2.png"></h5></div><br />
<div class="large-4 columns"><h4 style="text-align:center;">zTree<img src="https://static.igem.org/mediawiki/2013/8/8b/Wellesley_ztree_logo_xsmallv2.png"></h5></div><br />
<div class="large-4 columns"><h4 style="text-align:center;">Bac to the Future<img src="https://static.igem.org/mediawiki/2013/d/d8/Bac_logo_xsmall.png"></h5></div><br />
</div><br />
<br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<br />
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_zepto.js"></script><br />
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.js"></script><br />
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.dropdown.js"></script><br />
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastmanhttp://2013.igem.org/Team:Wellesley_Desyne/Project_OverviewTeam:Wellesley Desyne/Project Overview2013-09-27T14:18:13Z<p>Deastman: </p>
<hr />
<div>{{Team:Wellesley_Desyne/css/wp_app.css}}<br />
<html><br />
<head><br />
<title>Wellesley HCI iGEM Team: Welcome</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width"><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<body><br />
<nav class="top-bar"><br />
<ul class="title-area"><br />
<!-- Title Area --><br />
<li class="name"><br />
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1><br />
</li><br />
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --><br />
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li><br />
</ul><br />
<section class="top-bar-section"><br />
<!-- Left Nav Section --><br />
<ul class="left"><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">TEAM</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">PROJECT</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a><br />
<ul class="dropdown"><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li><br />
</ul><br />
</li><br />
<li class="divider"></li><br />
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li><br />
</ul><br />
<!-- Right Nav Section --><br />
<ul class="right"><br />
<li class="divider hide-for-small"></li><br />
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a><br />
</li><br />
<li class="divider"></li><br />
</ul><br />
</section><br />
</nav><br />
<header><br />
<div id="header-container"><br />
<div class="row"><br />
<div class="large-12 columns"><br />
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a><br />
</div><br />
</div><br />
</div><br />
</header><br />
<br />
<!--End NavBar--> <br />
<div class="row"><br />
<div class="large-12 columns"><br />
<div class="main-container"><br />
<div id="text-container"><br />
<br />
<!--Start content--><br />
<br />
<!--Actual content--><br />
<h3>Project Description</h3><br />
<p><br />
Synthetic biology is a multi-disciplinary field that requires a collaborative environment in order to engineer the complex biological systems of the future. To help create that environment, our team is designing software tools – tools that address specific technical synthetic biology challenges in order to ease synthetic biology research and increase its learnability. In addition, since synthetic biology is a new and emerging field, it is important to pay attention to how the public perceives such research. Careful attention is given to this as we create our applications. <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a> is a multi-touch application that allows synthetic biologists to use the programming language Eugene without actually having to code. <a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a> makes use of zSpace, a holographic computing machine, to aid scientists in navigating and visualizing abstract data. <a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a> focuses on representing hierarchical data in an intuitive and interactive manner. Finally, <a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a> is an interactive web application that aims to communicate core concepts of synthetic biology to those who are nonscientists. <br />
<br />
<p>As a human-computer interactions lab, our team tackles the challenges that synthetic biologists face while simultaneously applying human-computer interaction techniques to create intuitive tools and foster a more collaborative design environment.<br />
</p><br />
<br />
<br />
<div class="row"><br />
<div class="row"><br />
<div class="large-4 columns"><a href = "https://2013.igem.org/Team:Wellesley_Desyne/Eugenie"><br />
<img src = "https://static.igem.org/mediawiki/2013/a/af/Wellesley_eugenie_overview.jpg"> <br />
</a></div><br />
<div class="large-4 columns"><a href = "https://2013.igem.org/Team:Wellesley_Desyne/zTree"><br />
<img src = "https://static.igem.org/mediawiki/2013/5/5e/Wellesley_zTree_overview.jpg"> <br />
</a></div><br />
<div class="large-4 columns"><a href = "https://2013.igem.org/Team:Wellesley_Desyne/BAC"><br />
<img src = "https://static.igem.org/mediawiki/2013/5/55/Wellesley_bac_overview.jpg"> <br />
</a></div><br />
</div><br />
<div class="large-4 columns"><h4 style="text-align:center;">Eugenie <img src="https://static.igem.org/mediawiki/2013/8/8a/Eugenie_logo_xsmallv2.png"></h5></div><br />
<div class="large-4 columns"><h4 style="text-align:center;">zTree<img src="https://static.igem.org/mediawiki/2013/8/8b/Wellesley_ztree_logo_xsmallv2.png"></h5></div><br />
<div class="large-4 columns"><h4 style="text-align:center;">Bac to the Future<img src="https://static.igem.org/mediawiki/2013/d/d8/Bac_logo_xsmall.png"></h5></div><br />
</div><br />
<br />
<br />
<div class="row"><br />
<hr><br />
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"><br />
</div><br />
</div><br />
</div><br />
<br />
<!--End content--><br />
<br />
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_zepto.js"></script><br />
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.js"></script><br />
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.dropdown.js"></script><br />
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.topbar.js"></script><br />
<script><br />
$(document).foundation();<br />
</script><br />
</html></div>Deastman