Team:Wellesley Desyne/BAC

From 2013.igem.org

(Difference between revisions)
 
(39 intermediate revisions not shown)
Line 12: Line 12:
<!-- Title Area -->
<!-- Title Area -->
<li class="name">
<li class="name">
-
<h1><a href="#">WHCI</a></h1>
+
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1>
</li>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
Line 35: Line 35:
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li>
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li>
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li>
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li>
-
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zMol_zTree">zTree & zMol</a></li>
+
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li>
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li>
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li>
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li>
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li>
Line 65: Line 65:
<div class="row">
<div class="row">
<div class="large-12 columns">
<div class="large-12 columns">
-
<h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2>
+
<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>
</div>
</div>
</div>
</div>
Line 80: Line 80:
<h3>Bac to the Future</h3>
<h3>Bac to the Future</h3>
-
<br>
 
-
<h4>Overview</h4>
 
-
<br><p>
 
-
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.
 
-
<p>At the Wellesley College Human-Computer Interaction lab, 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.  
+
<div class="panel">
 +
<h4>TOOL OVERVIEW</h4>
 +
<br>
 +
<div style="float:right;"><img src="https://static.igem.org/mediawiki/2013/7/7c/Wellesley_bac_logo2.png"></div>
 +
<p>
 +
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>
-
<p>Our project was inspired by an experiment conducted by the Church Lab at Harvard Medical School, 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>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>
 +
 
 +
<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>
 +
 
 +
<p> Go to the Application: <br>
 +
<a href = "http://www.bac-tothefuture.appspot.com">www.bac-tothefuture.appspot.com</a>
 +
</p>
 +
</div>
   
   
-
<h4>Concept</h4>
+
<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.
+
<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.
<p>Users interact with the application by executing the following protocol: </p>
<p>Users interact with the application by executing the following protocol: </p>
-
<ol>
+
<ol class="list_default">
<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>
<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>
<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>
<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>
Line 104: Line 112:
</ol>
</ol>
-
<h4> Screenshots </h4>
+
 
<table width="900" align="center">
<table width="900" align="center">
<tr>
<tr>
-
<td><img src="https://static.igem.org/mediawiki/2013/b/b2/Wellesley_Bttf_scrnshot1.png" width="450" height="250" margin="100" align="center"><br><br><div style="width: 250px"><figcaption width="300">Users can experience first hand the translation process and watch as their message is encoded into DNA. </figcaption></div></td>
+
<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>
-
<td align="center"><img src="https://static.igem.org/mediawiki/2013/8/84/Wellesley_Bttf_scrnshot2.png" width="450" height="250" margin="100" align="center"><br><div style="width: 250px"><figcaption width="300">Users then simulate the protocol taken to insert their encoded DNA into bacteria.</figcaption></div></td>
+
<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>
</tr>
</tr>
<tr>
<tr>
-
<td><img src="https://static.igem.org/mediawiki/2013/d/d5/Wellesley_Bttf_scrnshot4.png" width="450" height="250" margin="100" align="center"><br><div style="width: 250px"><figcaption width="300">Choosing yet a more specific part type.</figcaption></div></td>
+
<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>
-
<td><img src="https://static.igem.org/mediawiki/2013/6/65/Wellesley_Bttf_scrnshot7.png" width="450" height="250" margin="100" align="center"><br><div style="width: 250px"><figcaption width="300">Users can then choose a specific part to view more information about it. They can also view the hierarchy of the part.</figcaption></div></td>
+
<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>
</tr>
</tr>
</table>
</table>
 +
 +
<h4>Implementation</h4>
 +
<p>
 +
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.
 +
</p>
<h4>Results</h4>
<h4>Results</h4>
-
<br><p>
+
<div style="float: right; padding: 20px; width: 450px;">
-
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.
+
<img src="https://static.igem.org/mediawiki/2013/4/49/Blah.png">
 +
<div class="panel" style="margin-top:10px;">
 +
<figcaption style="font-size: 14px; line-height: 16px;"><strong>FIGURE. </strong>Results showing positive user engagement</figcaption>
 +
</div>
 +
</div>
 +
<p>
 +
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.
</p>
</p>
-
<h1>Demo</h1>
+
<h4>Demo</h4>
-
<iframe width="420" height="315" src="//www.youtube.com/embed/mhAy7kqbLkQ" frameborder="0" allowfullscreen></iframe>
+
<div style = "margin-left:auto;
 +
margin-right:auto; width:640px;">
 +
<iframe width="640" height="360" src="//www.youtube.com/embed/SEONZKrYcrM" frameborder="0" allowfullscreen></iframe>
 +
</div><br>
<h4>Future Work</h4>
<h4>Future Work</h4>
-
<ul>
+
<ul class="list_default">
     <li>Implement an interactive installation, integrating use of gesture-recognition and tangible interface</li>
     <li>Implement an interactive installation, integrating use of gesture-recognition and tangible interface</li>
     <li>Distribute the web application and explore potential educational uses</li>
     <li>Distribute the web application and explore potential educational uses</li>
Line 146: Line 168:
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script>
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script>
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script>
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script>
-
<script src="http://eastmaninteractive.com/igem/whci_foundation.alerts.js"></script>
 
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script>
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script>
-
<script src="http://eastmaninteractive.com/igem/whci_foundation.placeholder.js"></script>
 
-
<script src="http://eastmaninteractive.com/igem/whci_foundation.tooltips.js"></script>
 
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script>
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script>
<script>
<script>

Latest revision as of 17:42, 27 September 2013

Wellesley HCI iGEM Team: Welcome

Bac to the Future

TOOL OVERVIEW


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.

At the Wellesley College Human-Computer Interaction lab, 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.

Our project was inspired by an experiment conducted by the Church Lab at Harvard Medical School, 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.

Go to the Application:
www.bac-tothefuture.appspot.com

Design

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.

Users interact with the application by executing the following protocol:

  1. 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.
  2. Initiate the translation process by clicking on the "Encode" button and watch as the chosen message is synthesized into DNA, using the Codon Dictionary.
  3. Begin the lab protocol by inserting the encoded DNA into the plasmid.
  4. Pick an E-Coli from the tank and drag it onto the workspace to act as a means of storage.
  5. Insert the plasmid containing the encoded DNA into the chosen bacteria, and return it back to the tank.
  6. 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.


Experience first hand the translation process and watch as a message is encoded into DNA.


Simulate the protocol of inserting encoded DNA into bacteria.


Place the bacteria back into the tank and watch a backwards translation of the encoded message.

Click on highlighted terms to see more in depth definitions.

Implementation

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.

Results

FIGURE. Results showing positive user engagement

To test Bac to the Future, our team conducted preliminary user studies involving the observation of 15 high school students in the MIT-Wellesley Upward Bound program, 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.

Demo


Future Work

  • Implement an interactive installation, integrating use of gesture-recognition and tangible interface
  • Distribute the web application and explore potential educational uses
  • Continue to study the effectiveness of the application in facilitating the learning experience

Retrieved from "http://2013.igem.org/Team:Wellesley_Desyne/BAC"